A11y isn't Just…
Why a11y? A11y is a numeronym, presenting "accessibility" as "a" followed by 11 more letters, followed by "y".
… Screen Readers
For a great many people when you talk about accessibility, they instantly think about Screen Readers. While Screen Readers are an important tool for those that have an impairment there are many other ways a user can be affected.
You might think that reading a web page isn't going to affect hearing, but in today's modern web has rich media including video and audio. Subtitles and Captioning can help with this, I believe this should be mandatory. If Subtitles or Captions are not possible or appropriate a Text Description can help, this will also help with those on slow networks or less with data.
The majority of people think that Screen Reader users are blind. This is just not true, in fact the majority of blind people actually have some sight. The best thing that we can do for Screen Readers are:
- Use the correct HTML elements
- Write semantic HTML
- Use Aria Landmark Roles
- Use large text
- Consider contrast ratios of text and background
Colour Blindness affects about 8% of all men and 0.6% of women and comes in 3 different types:
- Deuteranopia (common)
- Protanopia (Rare)
- Tritanopia (Very Rare)
I use a tool called Color Oracle for testing my web pages for colour blind users, you should consider looking at what your site looks like for user with Colour Blindness.
Not all of our users have the ability to use a mouse to navigate a web page, some of them have fat fingers. While not actually a disability it does make it difficult to hit small targets close together on touch devices.
Dexterity is about making your site easy to use for those with accuracy problems. Having small buttons makes it difficult to target with a mouse, especially if the elements are not laid out semantically.
At work I use a mouse as little as possible, opting for Keyboard Shortcuts and tabbing through forms and I’m frequently disappointed.
The best things we can do for users with dexterity problems are:
:focusstyles - this is not hard and you probably already have
:hoverstyles, although these may not be appropriate
- Use the correct HTML elements
- Write semantic HTML
- Don't re-order elements with CSS
- Never mess with tabindex
This affects a user's ability to understand. The issue most associated with this is dyslexia. Making the content easy to read and understand, without using complex terms. Using sans serif fonts are easier to read, users who have severe dyslexia will often override your stylesheets with their own. The British Dyslexia Association has a fantastic Dyslexia Style Guide (PDF).
There are guidelines that help us to check our sites for accessibility issues. These, as the name suggest, are a guide and only following a set of predefined checkpoints doesn't mean that your site is truly accessible, it means that you passed those checkpoints.
Saying that, they can still be a good guide. There is a tool built by Squiz (built into their CMS, Squiz Matrix), called HTML CodeSniffer, that I use regularly. HTML CodeSniffer is also the base of Pa11y a command line tool for checking a11y. Both of these tools check section508 & WCAG .
Last week, at work, I had the pleasure of reading section508, the USA standard for accessibility.
While this standard covers all areas of a11y there is a section of it, 1194.22, which covers Web-based Intranet and Internet Information and Applications. The rest of the standard covers areas such as:
- Software Applications & Operating Systems (1194.21)
- Telecommunication Products (1194.23)
- Video & Multi-media Products (1194.24)
- Self-Contained, Closed Products (1194.25)
- Desktop & Portable Computers (1194.26)
- Functional Performance Criteria (1194.31)
- Information Documentation & Support (1194.41)
The bulk of 1194.22 has not been updated since 2001, a time when the web we created was a very different beast. In fact, some of the recommendations I looked at talk specifically about table-based layouts. This got me thinking about perhaps it’s about time that the US should consider using, WCAG, the same standard used by the rest of the world and recommended by W3C. Further reading/research led me to discover that the United States Access Board, 18 January 2017, published a Final Rule.
The Final Rule, outlined the changes that were to be made to section508. The main one, affect those who build websites and web-based applications, is Incorporation of the Web Content Accessibility Guidelines (WCAG). This came into effect as of 18 January 2018. This is a great leap forward for a11y in the US, many of the sites that I tested last week, using HTML CodeSniffer, for section508 would highlight the occasion error or warning. When testing the same sites against WCAG AA, they would highlight considerably more errors or warnings.
WCAG is a more universal standard, created by the W3C's WAI (Web Accessibility Initiative). WCAG is a standard that originates from 1999 (WCAG 1.0), the WAI have just released the Candidate Recommendation for WCAG 2.1, which is due to be released in June this year.
… For the disabled people
Making sites accessible for those with accessibility issues is great UX and make our sites better for all. The argument, "we don't have blind users on our site", just does not wash. You have no idea what impairments your users have or how they're interacting with your site. Google Analytics can tell us many things about our users, but can't tell if they are using a screen reader, keyboard, mouse, braille keyboard to interact with our sites.
There are many times when a11y helps normal users:
- Due to my dyslexia I often get my computer to read long blog posts to me
- With old age comes:
- Dexterity Issues
- Hearing Issues
- Visual Issues
- Cognitive Issues
- When I have no headphones on public transport, captions help me watch videos
- Captions can also help with strong accents
- While drunk/intoxicated, an easy to read/simple site can aid understandability
- If a right-handed person breaks their arm and has it in a cast using a mouse or touch device becomes more difficult.
The Microsoft Inclusive Design site, is a fantastic resource, especially their Inclusive Toolkit Manual, for understanding Permanent, Temporary and Situational disabilities. Seren Davies, add a Cognitive section to their Inclusive Toolkit Manual.
I can't recommend highly enough Laura Kalbag's Accessibility for Everyone in my opinion this book is a game changer and anyone who works in the web industry should read this.
Seren Davies' talks on accessibility are fantastic:
- Death to Icon Fonts - this talk made github change their site
- Accessibility is more than just supporting screenreaders
People to follow
Want to learn more about a11y, then I recommend you follow, as a start, these people on twitter: