Is Your Website Accessible? 14 Steps to Move Towards Inclusion

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.