Have you ever read or heard about a11y? A few months ago a11y was really new to me. Actually, I have never knew about it and as a web developer I believe you MUST know, at least a little about it.
A11y stands for “accessibility”, it’s a nicer way to call it because there are 11 letters between the “A” and the “Y”. But what is it? Why is it so important?
Accessibility has differents definitions:
- The quality of being easy to obtain or use
- The quality of being easily understood or appreciated
- The quality of being easily reached, entered, or used by people who have a disability
But one of them is the one which describes it best, “the quality of being easily reached, entered, or used by people who have a disability”.
When you go for a walk, have you seen in your city “curb ramps”? Well, that’s accessibility! Curb ramps on the street corners create access for people using wheelchairs, walkers and strollers. Or maybe, when you go to a parking lot with your car, there’s a big change (I hope so) that there are some accessible parking!
Isn’t that great?! And in the world wide web, it’s the same. There are those curb ramps or accessible parking you find on the real world.
Web accessibility means that people with disabilities can perceive, understand, navigate and interact with the web, and that they can contribute to the web. This also benefits others, including older people.
Almost 57 million americans have a disability according to the Census Bureau on July 25, 2012 and an estimated 38.3 million have a severe disability.
- 8.2% of the population have a difficulty lifting or grasping, this could impact their use of a keyboard or a mouse.
- 3.3% have a vision impairment, these people might rely on a screen magnifier or a screen reader.
- 3.1% have a hearing impairment, they might rely on captions for audio and video.
- Around 50% of the population has some kind of clinically significant refractive error, a visual impairment which may be corrected with glasses.
You can read more about this here.
The four categories of disabilities
Do you know the top four things to look at when it comes to web accessibility are? They are visual, hearing, mobility and cognitive.
People who have disabilities are those who are blind, have low vision, or have color blindness.
People who are deaf or hard of hearing require visual representations of the information. Some solutions include closed captioning, blinking error messages and transcripts of the spoken audio.
People with mobility disabilities have physical impairments that limits movement and motor controls such as lifting, walking and typing. These people will need software to control the computer without a mouse or without a keyboard like “voice input” or the ability to enter information at the user’s own pace.
People with cognitive disabilities, such as dyslexia and short-term memory difficulty.
Understanding the diversity of users
Here’s a nice video I found on the Udacity course of Web Accessibility:
Why a11y is so important?
According the United Nations more than 3 billion people are using the internet, in 2000 was 738 million! You can use it for education, employment, government, commerce, health care, recreation and more. It’s so important that the web be accessible in order to provide two of the most important things of all:
- Equal access
- Equal opportunity
Making your web accessible
This task can be so simple or so complex, it depends of many factors such as, size, type of content, complexity, environment. It’s easier to implement all those accessibility features if you do it from the beginning of your web site development but there are some tools which evaluate your site to help you to make your web accessible.
Accessibility Developer Tools
The first one, a Chrome extension: Accessibility Developer Tools. It will add an Accessibility audit and an Accessibility sidebar pane in the “Elements” tab to your Developer Tools.
Go to Audits tab, select the Accessibility audit, and click Run. The results will appear as a list of rules which are violated by the page.
Tenon gives you a nice web UI to help you to identify a11y issues in any environment. You can integrate Tenon in your workflow using the Tenon API, but that comes with a price. But if you want to diagnose and test how is your website going, you can do it for free! You have some options available like choose a user-agent or the viewport size. Something I really like about Tenon is that you can test HTML code!
Wave from WebAIM
If you want to go and found a GOOD website which does a great job in a11y is WebAIM. WebAIM gives you a tool called Wave so you can audit your web and check for errors, warnings, alerts, contrast errors.
Use a screen reader!
As I mentioned one of the four categories of disabilities is “Vision”. People who are blind, have low vision or have color blindness might use a voice reader. You might not know but your computer already has a screen reader!
If you’re on a Mac, you have “VoiceOver” which includes built-in voices that speak over 30 languages. Here you have a guide to use VoiceOver: https://www.apple.com/voiceover/in…
This is an awesome video from Rob Dobson about the Screen Reader Basics
On Windows, you have “Narrator”: https://support.microsoft.com/en-us/…
Some web a11y pro tips:
Make sure that…
- …the components and elements in your page can be accessed by using the keyboard.
- …you can navigate your page using the keyboard and when I mean navigate that you can do it in the “right direction” and not jumping through the whole page.
- …your elements can be used with a screen reader
- …that your page can work without color, go an make your display black and white and see how your page looks like.
- ……your page works in high-contrast mode.
A11y is not an easy task, it’s an important one. This post could be hundreds of pages because a11y is an amazing part of the web. You have to do it the entire time from the birth of your web page, web app, component, progressive web app to the end.
Use the platform
The platform will help you a lot!
Focus states are important, it tells you where the focus is on the page. I know, the outline looks horrible and I know lots of website which set outline none on focus and when I use the tab key I don’t know where I am, (the only thing I know is that the page is moving like crazy). Please, don’t do that, if you want you can go and change its color, its shape, I don’t care but find a way to communicate focus.
tabindex = 0, whatever you put it on that thing become focusable.
There’s a big tool called “Aria”. Aria is what screen reader apps use to read HTML, use it! Some elements have built-in aria, like button or nav.
I’m going to recommend you some amazing resources about a11y which helped me a lot to know more about this!
Rob Dobson is a Developer Advocate at Google and he teaches a11y fundamentals in a new series called “A11ycasts with Rob Dobson” on the Google Developers Channel on YouTube.
There’s an awesome course on Udacity called “Web Accessibility”. It’s hosted by Alice Boxhall a Software Engineer at Google and Rob Dobson.
Some YouTube videos from the Google Chrome Developers channel:
- Accessibility is My Favorite Part of the Platform
- Accessibility (Chrome Dev Summit 2015)
- Accessible Components: Screen readers
- Accessible Components: Keyboard access
- Accessible Components: Labeling
- A11y with Polymer
This was the first conscious exploration of mine of these topics, I’m not an expert but I know that A11y is really important.
Let me know what you think in the comments and let’s make the web better!!