How to make your website accessible for people with disabilities

It goes without saying that when websites are properly (and thoughtfully) coded and designed, individuals with disabilities can use them with ease. More specifically, they can perceive, understand, navigate and interact with the Web as well as contribute to it. Web accessibility comprises all disabilities that affect access to the Web, including cognitive, physical, auditory, neurological, visual and speech. 

Web accessibility also helps people without disabilities, including older people, those with a slow internet connection, individuals with situational limitations like in an environment where they cannot listen to audio or in bright sunlight, and people with temporary disabilities such as lost glasses or a broken arm. 

Despite this, most websites are developed without thought and with a number of accessibility barriers that make them difficult or impossible for the disabled to use. 

11 ways you can make your website more accessible for the disabled

Nearly 1 in 5 people have a disability in the U.S., according to the Census Bureau. Even so, most businesses are not willing to invest time (and money) in building customer personas to include all kinds of demographics and disabilities. This has led to a number of web-accessibility lawsuits in the U.S., where web accessibility is regulated under the Americans with Disabilities Act. There were 2,256 ADA website-accessibility lawsuits filed in 2019 alone. 

That said, developing an accessible website is more than just about complying with the ADA guidelines. It is about allowing one-fifth of the population to become part of a community. 

Here are 11 tips for making your website more accessible for the disabled: 

1. Select a CMS that supports accessibility

– After selecting a content management system that suits your needs, choose a template/theme that is accessible. Most CMCs will have tips for creating accessible content and layouts for that template. Do not forget to follow the same guidelines when selecting plug-ins, modules or widgets.

2. Use headings to properly structure your content

– Using headings strategically allows people who use assistive technologies, such as screen readers or and refreshable Braille readers, to navigate your website with ease.


Therefore, stick to the correct order of headings, as well as a separate structure from a presentation by using Cascading Style Sheets. And, instead of choosing a header just because it looks good visually, create a new CSS class to style your text.

3. Add proper Alt Text for images

– While images are an important element on a website, they can be an accessibility barrier to blind users and those with low vision, who rely on assistive technologies that can neither read images or the text in the images. 


Provide Alt Text for all images, so that those who use screen readers can understand the message you are trying to convey by the use of images, including informative images like infographics. 

4. Offer descriptive URLs

– Visually impaired users can use screen readers to scan for links on a website. However, they cannot read the link within the context of the rest of the page. Using descriptive text explains the context of links to the users of screen readers. 


Do not use CTAs like “Click Here” or “Read More” anywhere on the webpage. And avoid adding links to images that cannot support Alt Text.

5. Use color with sensitivity

– People with vision impairments such as glaucoma, retinitis pigmentosa, cataract and diabetic retinopathy have low color contrast sensitivity. 


Additionally, color blindness (color vision deficiency) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world, according to Colour Blind Awareness . Hence, using these colors will prevent these users from understanding your message.


On the other hand, those with disabilities, especially users with learning disabilities, can benefit greatly from color when used to organize and distinguish your content.


Therefore, use color in conjunction with other visual indicators, such as a question mark or an asterisk. Additionally, use visual separators such as whitespace or borders to separate content blocks.

6. Allow people to enlarge font sizes

– For people who cannot read small text sizes, offer them the opportunity to enlarge the font size without breaking the page layout. 

7. Apply ARIA roles

– Accessible Rich Internet Applications help make dynamic content more accessible for the disabled. Screen readers and other assistive tools can use ARIA roles and attributes to understand a website element in greater detail. 


The most common categories of ARIA roles are landmark (screen readers use this for navigation), widget (defines interactive elements that lack semantic equivalents in HTML), document structure (provides a structural description of a section), abstract (helps organize and streamline a document), window (creates a subcategory or subsection of the main document) and live regions (allows assistive tools to detect dynamic content changes on a web page and alert disabled users).

8. Remove distractions from the page

– Reduce distractions from a web page to help people with ADHD and other neurodevelopmental disorders browse, read and focus on the essential elements of the website more with ease. 

9. Make all content accessible with the keyboard

– People with mobility disabilities, such as repetitive stress injuries, may not be able to use a trackpad or mouse. Make sure such individuals can access content through the use of a keyboard by pressing the “arrow” or “tab” keys, or alternative input devices such as mouth stick or single-switch input. Hence, make sure to match the tab order to the visual order, so that users who can only use the keyboard can logically navigate through site content.


Disabled users should also be able to access all interactive elements of your website, including anchor text, URLs, widgets, drop-down menus, CTAs, forms and dialog boxes. 

10. Make dynamic content accessible

– When content updates dynamically, screen readers are not able to catch it. This includes lightboxes, screen overlays, in-page updates, modal dialogs and popups. Keyboard-only users may even get stuck in page overlays, and those who use magnification software might zoom in on the wrong section of the web page.


To make these functions accessible, you can use ARIA roles and alerts, as well as accessibility-specific front-end development frameworks.

11. Make multimedia content accessible

– Multimedia elements including videos can play an important role in increasing the user-engagement on a website. However, users who are blind or visually impaired cannot see visuals, as well as those who are deaf or hard of hearing cannot hear audio. 


To make your website accessible to them, an audio description can be used to describe visual elements, such as images, gestures, and changes in settings. Users who are blind will find it helpful.

Finally

Accessibility is not only a good business practice, but also a moral imperative. Tim Berners-Lee, director, World Wide Web Consortium, said, “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”