Accessible front-end components: claims vs reality

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, …

W3C WAI Curricula on Web 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 …

Optimal Overlay Finder For Readable Text on a Background Image

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.

Building Better Forms™ by not taking away affordances

Don’t fiddle too much with your forms‘ look and feel. A small innocent-looking piece of CSS, even when combined with semantically correct HTML, could leave you with a degraded User Experience and make your forms less Accessible. Yesterday I went to see Girl at Kinepolis. Whilst ordering tickets I ran into an issue though: after …

Inclusive Design Principles

These Inclusive Design Principles are about putting people first. It’s about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really. They are intended to give anyone involved in the design and development of websites and applications – designers, user experience professionals, developers, product owners, idea makers, …

Making accessibility simpler with ally.js

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. However, simply loading ally.js will not automagically make a web application accessible. The library provides certain standard functions the “web platform” should’ve provided itself, so JavaScript applications can be made accessible more easily. An example of the things provided by ally.js is ally.maintain.tabFocus …

Hiding inline SVG icons from screen readers

Roger Johansson: SVG files may contain a title element which may or may not get announced by screen readers (depending on SVG embedding technique, browser name and version, and screen reader name and version). So far I haven’t run into a situation where I want any other behaviour than screen readers completely ignoring icons (since …