I’ve never really taken the time to get on top of WCAG2, ARIA and all the cool accessibility stuff that’s surrouding the modern web. So it was time to set that right!
I spend the day yesterday with Pierre from Vision Australia doing their Web Accessibility Techniques training package.
It was great to get the skillset, but more importantly it was great to get the heart for this work and what a huge difference it makes for people who are blind, deaf or need low vision assistance.
And the basic changes are all so doable! Even for a accessibility noob like myself. And definitely within every developer’s reach.
flickr photo shared by davehalb under a Creative Commons ( BY-NC-ND ) license
Big Takeway: Good page structure is its own reward
I was really stressed that this course would mean a massive deep dive on html5 articles and sections and other major semantic restructurings to make screen readers happy. It turns out (that to screen readers at least), a lot of that stuff is just more clutter to read to users. And a lot of accessibility users don’t actually like them!
But using consistent heading levels across your app is a game changer. And easy to implement!
Start small: h1 -> h2 -> h3 - Just keeping consistent and making sure you only go down one heading level at a time. Using that as your semantic “page skeleton” for logical groupings makes everything way better for a screen reader user to navigate your site via hotkeys that move between headings.
And making good use of html lists for listy things, and consistent labels for your form elements can make a real difference. All things we are probably doing anyway!
Gathering lots of data? Have a confirmation screen before the submit so users can have it read back to them and confirmed before submitting.
These changes not only make good sense - they result in a better user experience for everyone (not just screen readers).
Lots of simple tools are free
Simple tools like Web Developer Toolbar are great for showing how consistent your lists and headings have been implemented. And how you’ve worded your alt tags - ensuring you don’t have alt tags for purely decorative images.
Even better, these tools allow you to turn off style sheets and see how your markup renders. That will give you great cues about how things are structured.
Vision Australia also has a huge range of free tools to download for developers to check their colour contrast, lint their sites with accessibility toolbars, and lots of other cool stuff.
New Dev Superpower: test with a Screen Reader
There is a free screen reader tool by some blind Aussie developers (yay!) called NVDA, and it’s gaining good ground on the most popular commercial reader JAWS.
So there’s no excuse to level-up your testing superpowers and do some basic screen reader testing on your own workstation to see how your site presents to a vision assisted user.
And don’t forget the keyboard
It was great to see the interesting hacks people are doing around dynamic “Jump to Content” / “Jump to Nav” links that appear of first tab for a keyboard user.
I was also challenged around keyboard nav generally - to make sure all those flyout/dropdowns are accessible (and that you don’t mess with tabindex too much).
I’ve got a fair bit of ground to gain there.
Worth investing in…
I was really impressed the work that Vision Australia are doing as a non-profit in this space. And they offer battle-tested consulting services too to review your stuff - which all helps to fund and further their advocacy - so it’s totally win-win!
Recommended.
(oh, and here’s a simple checklist to get you started on your WCAG2 accessibility journey).