It’s no secret that the topic of web accessibility is on a meteoric rise. Thousands of lawsuits and tens of thousands of demand letters served to small business owners (but not just them, see Dominos’ supreme court ruling), have driven an increase of over 400% in Google searches for an ADA and WCAG compliant solution, from Jan 2019 to Dec 2019.
I’ve organised my WCAG 2.0 checklists by level (read more about WCAG 2.0 levels here). If you’re attacking the guidelines in order (and I suggest you do), you’ll move from Level A (Beginner) through Level AA (Intermediate) and on to Level AAA (Advanced).
When I first started learning web development I thought hiding content was simple: slap display: none; onto your hidden element and call it a day. Since then I’ve learned about screen readers, ARIA attributes, the HTML5 hidden attribute, and more!It’s important to ensure our websites are accessible to everyone, regardless of whether or not they use a screen reader, but with this myriad of options, how do we know when to use what?There are four main scenarios where you may wish to hide content:1. Hiding content for everyone, regardless of whether they use a screen reader2. Hiding content for screen readers while showing it to other users3. Showing additional content for screen readers while hiding it from other users4. Hiding content at specific screen sizesLet’s dive deeper into each of those scenarios to learn how to handle them.
There’s a quote by Tim Berners-Lee, Director of W3C and inventor of the World Wide Web, that says, “The power of the web is in its universality”. As people who make a living by making websites, it’s our responsibility to ensure everyone has access to them. Web accessibility seems like a tall order on paper, but it’s definitely much easier than it sounds.