It makes it possible to include additional semantics, e.g.: Semantic HTML offers a good basis, but it is limited for interactive UIs. That's why following Semantic HTML is a common best practice: Bad semantics Screen reader users heavily depend on semantics to understand the meaning of individual elements, like headlines, paragraphs or buttons. Normalized on a 4-star scale, my contrast-ratio rating looks as following: As mentioned earlier, I wish more libraries would be accessible-first.įor the contrast ratio review, I focused on the button components (the contrast between the foreground and background color for all buttons). Others, like Bootstrap, admit to use insufficient color contrasts.
Still, some CSS frameworks simply don't recognize the issue. You can check the contrast ratio manually using or the Chrome Dev Tools, but also with fully automatic tools like Lighthouse or pa11y. That's why WCAG specifies sufficient contrast ratios (depending on the font size). This does not only affect visually-impaired people, but anyone consuming the content in a bright environment as well. This may be considered good-looking or modern, but it makes reading the actual content much harder: Insufficient contrast ratio In the recent years, it became popular to use light font colors on light backgrounds.
For example, an insufficient button focus ring and a sufficient input focus ring results in 3 out of 4 points. The focus ring rating often differs between buttons and input controls (like text inputs or checkboxes), so I've checked both, leading to a final, cumulative rating (0 to 4 stars).
★★: Default browser focus indicator or sufficient alternative. Here's how a custom focus indicator looks like in Bootstrap: Accessible focus indicator in Bootstrap However, many designers do not like the default appearance, so they either remove the focus ring completely or provide an insufficient alternative (like a background color shade).Ĭan you tell, which button is active in the following example? Insufficient focus indicator in Element Fortunately, every browser provides a default focus indicator ("focus ring"). This makes sense: I cannot navigate a page with a keyboard if I can't see what element is currently focused. One of the core accessibility principles ensures that user interface components are operable and navigable:Ģ.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. Hence, I have normalized the score on a scale from 0 (inaccessible) to 4 (fully accessible) per factor. I see all the criteria as equally important. The following is particularly important for UI component libraries, as they are meant to be widely reused:Īccessibility should be the default, not opt-in. Still, I review the out-of-the-box behavior, as people may not adjust the provided markup or styles. Some issues can be fixed easily (like adjusting a color). You're still responsible for making your application accessible (descriptive labels, keyboard navigation, etc.). A fully accessible UI framework does not replace proper testing. Hence, I've only checked visual properties (contrast ratio, focus indicator) and semantics (WAI-ARIA compliance). Web UI frameworks provide individual components with some default styling and markup examples. I hope this will help you to make a decision, but also improve the frameworks themselves.įirst, let me explain what I have based my ranking on. In this post, I evaluate the accessibility of almost 30 popular CSS UI frameworks (also known as UI kits). I've learned a lot in the last two years and became an accessibility advocate along the way. In other words, we are required by law to make our web application accessible. I am fortunate being part of a project that has to comply with WCAG 2.1. Way too often accessibility (a11y) doesn't make it high on that list, unfortunately. #SEMANTIC UI BROWSER COMPATIBILITY LICENSE#
There are plenty to choose from, so you have to take different factors into account: number and quality of the components, performance, ongoing development, license or language support. Choosing a UI web framework or library is often difficult.
0 kommentar(er)
