Are you ready to start thinking about accessibility in your design process? Below you will find our top 10 Web Content Accessibility Guidelines (WCAG) requirements.
Note, this is not a comprehensive list of the requirements. This is a list of things we think are a good place to start, and help to not only make your site more accessible, but also more user friendly in general. Want to read more about accessibility? Read my posts on Inclusive Design and Accessible Design.
The First Principle of Accessibility: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
1. Provide text alternatives
All non-text content has a text alternative available to all users.
1.1.1 Non-text Content — Level A
For accessibility purposes this will mean people who use screen readers or who are deaf can access your content. But think about someone on the bus who doesn’t have their headphones and they find a video they want to watch on their phone. If the video has subtitles they can still watch the video without bothering everyone else on the bus.
Example
Providing alt tags for images, subtitles for videos, or tables with data for charts.
2. Color alternatives
Color is not the only way your designs convey information, indicate an action, prompt a response, or distinguish a visual element.
1.4.1 Use of Color — Level A
This will make your content accessible to color blind users, people who rely on screen readers, or people who have night shift turned on. It also means your designs will be easier to understand for everyone else.
Example
Form fields in error state that are highlighted in red have accompanying text stating the error. A pie chart uses labels with lines connecting each label to its section.
3. Adequate color contrast
The colors of text and the background of text have a contrast ratio of at least 4.5:1.
1.4.3 Contrast (Minimum) — Level AA
If your contrast is too low it will be hard for people with impaired vision to read. Remember, impaired vision can be caused by a lot of things, including old age, being far away from the screen, forgetting your glasses/contacts at home, etc.
Tip
You can use this tool to check the contrast between your text and background.
4. No images of text
When technically feasible, do not have text in images.
1.4.5 Images of Text — Level AA
[embedit snippet=”10-accessibility-requirements-that-will-help-your-ux-cloudberry-text-image”]
This will make it easier for people who use a screen reader, but it also allows people to copy and paste the text and the text will resize if the browser is zoomed in or out.
Example
Instead of an image file for a button, use CSS and HTML for color and text.
The Second Principle of Accessibility: Operable
User interface components and navigation must be operable.
5. Keyboard access
All functionality and interactions can be performed with just a keyboard (no mouse required). If you can move to a component of the page using a keyboard, then you should be able to move away from that component using only a keyboard.
2.1.1 Keyboard — Level A & 2.1.2 No Keyboard Trap — Level A
A lot of disabilities can make it hard/impossible for people to use a mouse (including a broken arm or sprained wrist), so for them, using a keyboard is the only way to navigate your page. It can also be handy in case your mouse batteries die!
Example
An application that uses drag and drop also supports “cut” and “paste” or form controls to move objects. If you tab into an app or modal, there should be a clear way to get back to the main experience from the keyboard.
6. Control moving elements
For moving, blinking, scrolling, or auto-updating information,
there are controls that allow the user to pause, stop, hide or control the content.
2.2.2 Pause, Stop, Hide — Level A
Some people need more time than others to process information. Also, don’t you hate it when a site has auto-playing music or videos and you can’t turn it off?!
Example
A stock ticker has “pause” and “restart” buttons, an animation runs in the upper portion of the page but has a “freeze animation” button near the bottom of the animation.
7. Descriptive titles
Web pages should have titles that explain the subject of the page, make sense out of context, and are as short as possible.
2.4.2 Page Titled — Level A
This makes it easier for people using screen readers to know where they are and if the page they are on is where they want to be.
Example
Instead of using a generic page title, such as, “Blog post,” use a descriptive title related to the content – “Accessibility Checklist.”
8. Descriptive links
Button labels and link copy, including copy around the link, should let users know what happens when clicked.
2.4.4 Link Purpose (In Context) — Level A
Sometimes screen readers read links and buttons out of context. This helps those users (and everyone else) understand what’s going on. You don’t want people guessing what happens if they click (because they probably won’t).
Example
Instead of a button labeled “next” it says “continue to checkout”
9. Descriptive headings
Headings and labels describe the topic or purpose of the content or component.
2.4.6 Headings and Labels — Level AA
This is particularly useful for people who process information slower or have limited short term memory. But it’s also useful for all users! People generally don’t read, they scan content, and this will make your content much more scannable.
Example
Form fields are consistently labeled describing what the user should enter in the field, sections of a web page should be formatted as a header and let the user know what they will find in each section.
The Third Principle of Accessibility: Understandable
Information and the operation of user interface must be understandable.
10. Consistent navigation
Navigational components should appear in the same order and in the same place on all pages.
3.2.3 Consistent Navigation — Level AA
If the navigation is changed from page to page, it is disruptive and adds to the cognitive load of all your users. Some people with cognitive disabilities will have a much harder time adjusting, making the site hard to impossible to navigate.
Example
If there is a search icon in the upper right corner of the navigation on the home page, it should be there on all pages in the site.