Heydon Pickering looks into how to give a React component a certain heading (like <h1>, <h2>, etc.) depending on its context and thereby ensure that the DOM is still perfectly accessible for screen readers. Why is using the right heading important though? Heydon writes in the intro:One thing that keeps co...
This post is the second in a series about the power of CSS.Article Series:Colorizing SVG Backgrounds Dropdown Menus (this post)CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. Some o...
Not everyone uses a mouse to browse the internet. If you’re reading this post on a smartphone, this is obvious! What’s also worth pointing out is that there are other forms of input that people use to get things done. With these forms of input comes the need for focus styles.People People are complicated. We don�...
Shay Cojocaru contributed to this post. Have you ever lost your voice? How did you handle that? Perhaps you carried a notebook and pen to scribble notes. Or jotted quick texts on your phone. Have you ever traveled somewhere that you didn’t speak or understand the language everyone around you was speaking? How did...
I remember seeing these accessibility guidelines from Vox a while ago but it’s still interesting to go over them again today and see if there’s anything missing from my own process when it comes to improving accessibility. And there’s an awful lot to remember! Color contrast, alt-text, keyboard navigation, focus...
I’m sure you know about alt text. It’s the attribute on the image tag that has the important task of describing what that image is for someone who can’t see it for any reason. Please use them. I don’t want to dimish the please use them message, but some interesting alt-text-related things have ...
Website accessibility has always been important, but nowadays, when we have clear standards and regulations from governments in most countries, it’s become even more crucial to support those standards and make our projects as accessible as they can be. The W3C recommendation provides 3 level of conformance: A, AA...
David Gilbertson:Removing the focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic.So David shows how you can remove it unless you detect that the user is tabbing, then show it. Essentially you add “user-is-tabbing” class to the body when yo...
Activities to help you develop empathy for the variety of people that use your thing. Eric Bailey:This project is geared towards anyone involved with making digital products. It is my hope that this reaches both:People who are not necessarily involved in the day-to-day part of the process, but who help shape thing...
Here’s a question I got the other day?Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unify...
Recent Comments