Skip to main content

A complete guide on making a website accessible

(Image credit: Image Credit: Atm2003 / Shutterstock)

The web is the most valuable resource available today. As such, it should be accessible to all people. This includes people with disabilities. As the web was constructed and developed without special attention to people with disabilities, there’s a wide effort in recent years to reverse this trend and level the playing field, meaning, allowing people with disabilities the same ease of use of the web that the rest of us are used to.

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

In this guide, we’ll provide necessary information on making your website accessible to people with disabilities.

Why you should make your website accessible

  • 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 during 2019
  • You increase the potential audience that will be able to use your website – 26 percent of adults in the U.S. have some type of disability (that’s 1 in 4 adults)
  • People with disabilities deserve the same access and ease of use of the web

(Image credit: CDC)

The principles of web accessibility

Before getting into how to make your website accessible, let’s look at the principles of web accessibility and the components that need to act in unison in order to achieve ADA compliance.

When developing a website, or in the process of making an existing website accessible, all content - text, images, sounds, and videos - should be made readable and understandable, while the navigation should be made approachable and easily controlled. 

This is achieved through the use of authoring tools and evaluation tools - adjusting code elements and testing functionality.

Last, web browsers, media players, and every element of your website should be compatible with assistive technologies that people with disabilities use to navigate the web.

(Image credit: W3C)

To breakdown the various disabilities and their 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 
  • Elimination of flashing elements and automated play 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. Website accessibility audit
  2. UI and design adjustments
  3. Compatibility with screen-readers and keyboard navigation

Auditing your website for accessibility issues gives you a clear picture of where you stand and what are actions you need to take in order to achieve full WCAG compliance.

Next, you need to implement the recommendations of the audit 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.

It should be noted that although many website owners ‘take care’ only of UI and design adjustments (since they are achieved more easily) they account for only 30 percent of the WCAG requirements. The other 70 percent of requirements deal with compatibility with assistive technologies and are implemented on the code level. 

It should also be noted that compliance isn’t a scale, you are either WCAG compliant or you don’t. So as a website owner it is advisable to not fall into the easy-fix trap. 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 that control the appearance of text and visual elements of the website. To allow control of these elements you’ll need to install on your website an Accessibility Interface - 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:

(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, 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 the “highlight links” is turned 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 (70 percent 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 website, meaning, on the code-level.

Screen readers compatibility is achieved by implementing Accessible Rich Internet Applications (ARIA) tags that add additional information to various elements of the website, 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, opening and closing tabs) to various keys on the keyboard to allow complete mouse-less navigation of the website. 

In conclusion

Making your website accessible for people with disabilities is no longer an option. It is required by law and enforced through WCAG compliance.

In order to make your website accessible and be compliant, you need to first audit your website for accessibility issues and then remediate your website by implementing compatibility with screen readers and keyboard navigation and install 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 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 updated and changed continuously, so is your accessibility compliance strategy should be. You need to implement a strategy that continuously audits and remediates your website to keep it compliance at all times.  

Oren Rofman, technology writer