When the web was first created, it was meant to provide equal access to information and remove barriers to communication for everyone. Yet today, it’s far from fully accessible for over a billion people with disabilities (about 15% of the world’s population). And with global aging and medical advancements extending the lives of those with disease or injuries, this gap will only get bigger.
So what can you do?
Some of the most common impairments that can affect the way people use the web include:
For some, there are special assistive technologies that help them navigate the web. For example, blind people often use screen readers: technology that converts display text into synthesized speech or refreshable Braille. People with motor disabilities can use puff-and-sip systems—tools that work similarly to a joystick, but controlled with breath. They recognize sips or puffs and translate them into mouse clicks or keyboard characters.
‘Web access’ is an umbrella term encompassing “websites, tools, and technologies that are designed and developed so people with disabilities can perceive, understand, navigate, and interact with the web and contribute to it.” Still, web accessibility also benefits people without disabilities:
In making the Internet a place of equal opportunities, there are many practical benefits to making your website accessible.
• Accessibility enhances the brand voice
Now more than ever, it’s important to take a stance on inclusion. Having an accessible website tells the world that you are attentive to all customers and honor best practices. This makes it more appealing for clients to support and recommend you.
• Accessibility expands market outreach
Those with disabilities are part of an overlooked market, yet it’s not a niche one. Design that excludes a segment of consumers will fail to reach its full market potential. People with disabilities are often underserved and/or misunderstood by businesses. But with the help of accessibility features, many of them could very well become loyal users or customers.
• Accessibility minimizes legal risk
In many countries, such as the USA, EU, UK, Israel, and Japan, it’s a legal requirement not to discriminate against people due to their disability. In fact, accessibility lawsuits are on the rise. In 2017, the number of such lawsuits filed in US federal courts totaled about 800 cases. Just two years later, the number of cases nearly tripled to over 2,200.
• Accessibility spurs innovation
Accessibility in products and services often solves unanticipated problems for average users and improves usability.
Case: In the early evolution of the iPhone, Apple began considering the implications that a touchscreen device would be helpful for their blind customers. Iterating over several years behind the scenes, the company invested its resources to develop the predecessor of VoiceOver, the world’s first gesture-based screen reader. With it, users could interact with objects on the screen and intuitively gauge their location and context from audio cues. Within weeks of the launch, Apple received a special commendation from the National Federation of the Blind ‘for designing the first fully accessible touchscreen interface.’
Sir Tim Berners-Lee—better known as the father of the Internet—put an emphasis on web accessibility in the early 90s, and it’s still evolving to this day. In 1999, the W3 Consortium released its first set of Web Accessibility Guidelines, which has been updated several times since then. Based on these guidelines, we’ve put together a general checklist to make sure your website is accessible.
1. Enable alt tags for images
Alt tags don’t just improve search ratings. They’re also accommodating to visually-impaired visitors using a screen reader with their browser. If your webpage has decorative images that don’t add information to the content, add an empty alt text field (alt="") so that assistive technologies ignore them.
2. Don’t use autoplay
Autoplay content can be both irritating and a real barrier to access for people with disabilities. Videos, sounds, and animations that automatically start can be distressing for users with cognitive impairments, impacting their ability to concentrate. Autoplay may also make a website completely inaccessible for people using screen-reading software.
3. Enable controls for multimedia files
Accessible media players provide a user interface that works without a mouse through a speech interface when the page is zoomed larger, and with screen readers.
4. Provide captions for multimedia files
Text versions of speech, like subtitles, along with other important audio content allow different media to be accessible to people with a hearing impairment.
5. Follow a strict outline hierarchy with headlines
Headings are much more than big bold titles. They provide a solid structure to the webpage.
From an accessibility viewpoint, the structure in the code should align with the visual presentation and make sense as a “table of contents” for the page. Make sure your heading levels follow a document outline so screen readers can identify headings and read out the content.
For example, an <h3> tag would designate a subsection within an <h2> section—meaning you should never come across an <h3> that isn’t preceded by an <h2>.
6. Don’t use images for text
If visually-impaired visitors can opt to scale up images, they become blurry and pixelated (vector images won’t lose quality when scaled up). Text must display properly when enlarged, so keep that in mind when choosing fonts and devising the composition and layout.
The Royal Danish Academy of Fine Arts’ Centre for Visibility Design has some enlightening and engrossing research on text legibility.
7. Allow zoom without affecting the layout
Users with impaired vision may prefer to enlarge their browser text or zoom into page content to make it easier to read. Browsers accomplish this in one of two ways: enlarging the font size only, or zooming into the entire page and applying responsive styles, as appropriate. The code should not interfere with the browser’s default settings of enlarging content.
8. Ensure high contrast between objects and the background
Some colors and color pairs may confuse visitors with color blindness. (See the contrast checker at Webaim.org—it’s an invaluable tool for measuring legibility.) Don’t hesitate to add the Lightbox feature to images—an overlay effect that highlights images by filling the screen and dimming out the rest of the page.
9. Make sure color is not used as a prompt or a way to convey information
For people with low vision, color perception deficiencies, or color blindness, they struggle to navigate their way through color-drenched content. Make sure that color is not the only prompt used to convey information (e.g. avoid instructions like “select the red circle to continue”).
10. Avoid rapidly flashing animations and video
Flickering lights may trigger seizures in users with epilepsy. To avoid this risk, make sure web content that flashes or blinks moves at a slow rate. The defined threshold is no more than three flashes in one second.
11. Provide names for all fields in forms
Accessible forms are easy to understand, complete, and submit. Instructions, cues, required form fields, and field formatting requirements must be clearly identified to users. Error recovery should be intuitive and descriptive.
12. Include descriptive titles for links
Make sure the titles of your internal pages are brief and descriptive. This helps people using screen readers know what page they’re on as soon as they land there.
13. Ensure all links to documents feature the document type and size
If you link to a document, make sure that you state what type of document it is (DOC or PDF) and the file size. This will be helpful for people with slow connection or with limited bandwidth.
14. Design a cohesive and easy navigation
Ensure that the website can be navigated using a keyboard (check that the website can be navigated through using “Tab,” “Shift+Tab,” and “Enter” keys). Look at pages in a text only browser to confirm that the site makes sense and appears correctly.
People who don’t have the hand dexterity to use a mouse may be using arrow keys or assistive technology (for example, voice-controlled navigation). Check that the reading and navigation order in your project is clear and intuitive. Remove any function that uses timed keystrokes, like a double tap, to make sure all parts of the website can be accessed without a mouse and/or a touchpad.
Web accessibility is a constantly developing and ever-evolving subject, with this checklist, you have some basic solutions you can reference to fine-tune your website.
All in all, understand the issues others are facing and practice empathy as best you can as you design and develop your website. For more tips, check out these resources:
This article was contributed by Tsvetelina Miteva, a design writer at Readymag.
Fabian Geyrhalter's sharing his process and framework to help you build a brand for yourself and your clients in 24 hours or less.