NES.css: 8-bit style CSS framework
I'm currently evaluating a lot of CSS frameworks on how accessible they are (for an upcoming blog post), so I'd like to give it a go:<p>1. "Focus ring" (focus indicator) is completely missing for buttons. I cannot navigate the site with my keyboard if I don't see the currently focused element. <i>Never</i> remove the outline for focusable elements without providing a <i>sufficient</i> alternative.<p>2. The focus ring for the form elements is insufficient, especially for input fields.<p>3. The green, blue and red buttons have insufficient contrast ratio. Use something like [0] to find accessible color combinations.<p>4. Only native components are used (button, input) - that's great! This way, almost no ARIA is needed. Adding role="alert" [1] to the balloons is the only one I'm missing.<p>5. The mobile layout is broken for inputs.<p>Unfortunately, many CSS frameworks either partially or fully ignore the accessibility aspect. It takes a lot of experience and time to make a website fully WCAG-compliant, but it's quite easy to follow some basic guidelines, like in this cheatsheet [2].<p>[0] <a href="https://contrast-ratio.com/" rel="nofollow">https://contrast-ratio.com/</a><p>[1] <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#alert" rel="nofollow">https://www.w3.org/TR/wai-aria-practices-1.1/#alert</a><p>[2] <a href="https://moritzgiessmann.de/accessibility-cheatsheet/" rel="nofollow">https://moritzgiessmann.de/accessibility-cheatsheet/</a>