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.

Hearing

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.

Visual

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

Colour Blindness affects about 8% of all men and 0.6% of women and comes in many different types, the 3 main ones are:

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. You can also get contrast score in the browsers dev tools.

Dexterity

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:

Use :focus styles - this is not hard and you probably already have :hover styles, 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

Cognitive

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).

… Guidelines

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 great tool called axe, that I use regularly.

Section508 (1194.22)

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

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 First Public Working Draft for WCAG 3.0.

… 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, added a Cognitive section to their Inclusive Toolkit Manual.

Cognitive Users — Seren Davies' addition to the Microsoft Inclusive Design Toolkit

People to follow

Want to learn more about a11y, then I recommend you follow, as a start, these people on twitter: