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?

Start by Recognizing the Problem

Some of the most common impairments that can affect the way people use the web include:

• Visual
• Hearing
• Neurological
• Physical 
• Mental 
  

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:

• On mobile phones, smart watches, smart TVs, and other devices with small screens or different input modes.
• People with temporary disabilities such as a broken arm or lost glasses.
• People with situational limitations—those in bright sunlight or in an environment where audio is not allowed.
• People on a slow, limited, or even expensive bandwidth connection.

Why Address Accessibility?

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

Checklist: 14 Steps to Make Your Website Accessible

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>.</h2></h3></h2></h3>

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.

‍

Create Your Accessible Website

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:

• For in-depth insights and ideas on web accessibility, we encourage you to turn to the main source: the Web Content Accessibility Guidelines. Its latest version was introduced as early as August 2020.
• Web Accessibility Guidelines FAQ offers quick answers on the topic.
• Webaim.org is a stellar resource uniting developers, webmasters and individuals with disabilities who share the goal of making the web more accessible.
• Consider hiring designers with a disability — look into Liz Jackson’s The Disabled List. 
  
  

This article was contributed by Tsvetelina Miteva, a design writer at Readymag.