Great post by Hidde, warning about blindly trusting accessibility claims.
Not all ‘accessible components’ are created equal, some will work a lot better for our end users than other. In this post I have listed a number of things you can look at if you are considering third-party components.
I especially like this part:
Sometimes, HTML-only patterns are easier to understand for end users. More ARIA does not mean more accessibility.
Over at the W3C Web Accessibility Initiative (WAI) website you can find an extensive curricula on Web Accessibility
This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and others.
Wow, these surely would’ve come in handy back when I was a lecturer Web & Mobile 😅
Good little collection of tips for creating responsible (= responsive + accessible) web applications by Joy Heron.
With modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some HTML and CSS tips and tricks, and I want to present these in this post. This list is not exhaustive, but these are tried and true patterns that I frequently use in different projects.
A shame she calls them “tips and tricks” though, as there for example is no “trick” to using proper headings and landmarks — It is a basic idea/pattern every frontend dev should know about and apply, no magic needed.
This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:
While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.
Examples of both functional and editorial descriptions in the full post!
A trick you can use to make text better stand out against a background image, is to use a color overlay with a certain opacity on top of the image. This tool by Yaphi calculates the ideal opacity to use, so that the contrast meets the WCAG standards.
When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, paddinggot in the way. So they set out to find a solution.
After a lot of trial and error, we landed on a system which is built on two components: FocusRing for declaring where a ring should be placed, and FocusRingScope for declaring a root position for rings to be rendered.
Here’s an example showing how the FocusRing works:
The FocusRing will capture focussing of the contained input, but will render the ring around the entire div. To have a FocusRing behave like :focus-within and respond to any descendant being focussed, you can set the within prop.
The collection precisely uses a 7:1 color contrast ratio, a contrast level that makes a visual most accessible to people with disability. We use an international vision enhancement method by W3C organization, which makes a content or object visible at Level AAA standard (a highest level of visibility).