Skip to main content

A complete guide to making a website accessible

people sat together using a laptop
(Image credit: Photo by John Schnobrich on Unsplash)

The internet is the most valuable resource available to the modern world, and as such should be accessible to all, including people with disabilities. Because the World Wide Web was developed and built without bearing disabled people in mind, there’s now a wide-ranging effort to reverse this trend, at the same time levelling the playing field to provide people with disabilities with the same ease of use the rest of us are used to.

This effort is led and regulated by the Web Accessibility Initiative (WAI) developed by the World Wide Web Consortium (W3C), and is enforced by law through the Americans with Disabilities Act (ADA). Enacted in 1990, the ADA states that all sites should comply with the Web Content Accessibility Guidelines (WCAG).

In this guide, we provide the necessary information that you'll need for making your website accessible to people with disabilities.

Why you should make your website accessible

infographic showing percentages of Americans with disabilities

Over one in four Americans have a type of disability, so it's important to consider them when building a website (Image credit: CDC)

There are multiple reasons making a website accessible to all is integral to building a website, including that:

  • It is required and enforced by law
  • If your website isn’t accessible, you open yourself to the possibility of lawsuits: 2,256 website accessibility lawsuits were filed in federal courts in 2019
  • You increase the potential audience that will be able to use your website – 26% of adults in the US have some type of disability (that’s 1 in 4)
  • People with disabilities deserve the same access and ease of use of the web

The principles of web accessibility

an infographic showing the flow of content between developers and users

Users need to be considered at the development stage, so that they can appreciate content whatever their ability levels (Image credit: W3C)

Before we get into how you can start making your website accessible, we need to take a look at the principles of web accessibility, and the components that need to be acting in unison in order to achieve ADA compliance.

When developing a website, or when undertaking the process of making an existing website accessible, all content (text, images, sounds, and videos) should be made readable and understandable, while navigation should be welcoming and easily controlled. 

This is achieved via authoring and evaluation tools, as well as adjusting code elements and testing functionality. Web browsers, media players, and every element of your site should be compatible with assistive technologies: the systems that people with disabilities use to navigate the web.

Here's a breakdown of various disabilities and their website accessibility needs:

  • Compatibility with screen readers: the software blind people use to navigate the web
  • Full keyboard navigation (without the use of a mouse) for people with motor disabilities
  • Contextual assistance for people with cognitive disabilities
  • Focus and guidance for people with ADHD (Attention Deficit Hyperactivity Disorder)
  • Elimination of flashing elements and automated playing of videos for people with epilepsy

Now that we understand the principles behind web accessibility, let’s see how it’s done in practice.

How to make your website accessible

The process of making a website accessible can be divided into three main efforts:

  1. A website accessibility audit
  2. UI and design adjustments
  3. Compatibility with screen readers and keyboard navigation

Auditing a website for accessibility issues presents you with a clear picture of where you stand, and what actions you must take in order to achieve full WCAG compliance. You need to implement the audit's recommendations on the two levels mentioned - front-end UI and design adjustments, and back-end code adjustments - to allow compatibility with screen readers and keyboard navigation.

Although many website owners ‘take care’ only of UI and design adjustments (since they are achieved more easily), it should be noted that these account for only 30% of the WCAG requirements. The other 70% deals with compatibility with assistive technologies, and these areas are implemented on the code level. 

You should also note that compliance isn’t a scale: you're either WCAG compliant or you're not. So as a website owner, it's advisable not to fall into the trap of the easy-fix. Achieving full compliance is in the best interest of your business.

How to enable UI and design adjustments for users with disabilities

UI and design adjustments allow users with disabilities to control the appearance of text and visual elements on a website. To allow control, you’ll need to install an accessibility interface, or a menu available for people with disabilities.

Here’s an example of the menu from Sprouts Farmers Market that uses accessiBe's web accessibility solution:

Sprouts Farmers Market's website's accessibility options

Sprouts Farmers Market's websites accessibility options are listed in this menu (Image credit: Sprouts)

What’s seen above is only a portion of the menu. Here are the adjustments that are available for users via the Accessibility Interface:

  • Ability to enlarge the font
  • Ability to adjust line and letter spacing
  • Ability to change the color scheme (contrast, saturation, greyscale, and background color)
  • Ability to highlight titles
  • Ability to highlight links
  • Ability to mute sounds
  • Ability to stop animations and automated video playing
  • Ability to hide images
  • Ability to enlarge or change the color of the cursor
  • Ability to apply reading assistance (masks and guiding lines)

Here’s an example from Invicta for when “highlight links” is turned on:

Invicta's webpage with the highlight links option switched on

Invicta's webpage with the highlight links option switched on (Image credit: Invicta)

How to achieve compatibility with screen readers and keyboard navigation

As mentioned, this is where the heavy lifting needs to be carried out (the aforementioned 70% of the WCAG requirements). Two things need to be accomplished:

  • Have your website ‘communicate’ with screen readers to allow navigation for blind people, and people with impaired vision
  • Allow people with motor disabilities to navigate your website using only the keyboard

These are carried out in the back-end of your site, or on the code-level. Screen reader compatibility is achieved by implementing Accessible Rich Internet Applications (ARIA) tags. These add information to various website elements like links, icons, images, and navigation to allow better contextual understanding for the screen readers.

Keyboard navigation compatibility is achieved by adding functionalities for scrolling and clicking (links, buttons, menu items, and opening and closing tabs) to various keys on the keyboard: to allow complete, mouse-less navigation of the website. 

Conclusion

Making a website accessible for people with disabilities is no longer just an option. It is required by law, and enforced through WCAG compliance. To make your site accessible and to be compliant, you need to first audit your site for accessibility issues, and then remediate it by implementing compatibility with screen readers and keyboard navigation, as well as installing an accessibility interface.

By carrying out these three steps, you’ll achieve WCAG compliance, protect your business from lawsuits, and increase your potential audience. There’s also one more important factor to consider: achieving accessibility compliance is not a one-time effort: it’s an ongoing one. 

As websites are dynamic, and are continuously updated and changed, so should your accessibility compliance strategy be. You need to implement a strategy that continuously audits and remediates your site, to keep it compliant at all times.  

Oren Rofman is a senior technology writer. He's particularly interested in information technology, big data and the cloud