The Importance of ADA-Compliant Website Design

Ready to talk? We'd love to help.

elderly woman using accessible website on laptop

Does Your Business Meet ADA Compliance Standards?

When you think of accessibility, do you think of things like ramps outside of public buildings or handicap bathroom stalls? Accessibility no longer relates to just physical business, but also now the digital world. According to the World Health Organization (WHO), over 2 billion people live with a disability, 20% of whom live with great functional difficulties in their day-to-day lives. So, making your website ADA compliant is not only legally the “right thing to do.” It also increases your site’s appeal to a sizable potential customer base.

For accessibility, there are two main guidelines to follow for the standards and requirements of your website: the American Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG). ADA guidelines require certain businesses to make accommodations for people with disabilities. The guidelines also require that website content should be accessible to all users including blind users, deaf users, and others who must navigate the web by screen readers, voice commands, or other assistive technologies.

 

Designing Your Website for Accessibility and Inclusion

While the ADA covers a wide range of other business practices other than just website design, WCAG focuses solely on web accessibility. WCAG was developed to create a single, shared standard for online content accessibility that meets the needs of all user types, including those with disabilities. The WCAG standards break down to four basic principles:

  • Perceivable: Website information and other web elements must be presented to users in ways they can perceive.
  • Operable: Users must be able to operate and navigate the website.
  • Understandable: Users must be able to read and understand the website content.
  • Robust: Content must be accessible to users as technologies advance.

WCAG 2.0 guidelines are also categorized into three levels of conformance in order to meet the needs of different groups and different situations:

  • A (lowest)
  • AA (mid-range)
  • AAA (highest)

Level A prohibits elements that make the website inaccessible. Websites that do not at least meet Level A are impossible or very difficult for people with disabilities to use. Level AA is used in most accessibility rules and regulations, including the ADA. To meet Level AA requirements, your site must be usable and understandable for the majority of people with or without disabilities. AAA compliance is the highest level of accessibility where a website must meet all A and AA criteria and the color contrast between foreground and background is greater and even more strict.

 

How Are Different Disabilities Impacted by Accessibility?

To understand why ADA compliance is so important, it helps to understand the different types of disabilities and how they are impacted by the consumption of web content. Those with different types of disabilities encounter different types of barriers when using the web.

Given the visual nature of the web, users who are blind or visually impaired will face many barriers when using a website. Blind users will often use a screen reader and may additionally use a refreshable Braille display to convert website text to Braille.

Visually-impaired users with low vision are often able to see website content if the screen is magnified or if the content contrast is altered using different programs. Low-vision users are less likely than blind users to use a screen reader, though in some cases they will.

Website users who are deaf, on the other hand, encounter relatively fewer barriers on the web than blind and visually-impaired users. For most deaf users, their greatest barrier when using the web is audio-based content. Video accessibility issues can be fixed by providing text-based alternatives to the audio script. All users with disabilities face their own unique challenges when using the web, often relating in terms of usability.

 

 

The 4 Basic Accessible Web Design Requirements

To help get you started making your website design and functionality more accessible to people with disabilities, below are four basic areas to focus on and are best practices to help you meet the WCAG requirements.

1. Colors & Contrast

One of the most important aspects of accessible web design is the use of colors. Colors play a big role in accessible web design because of the different sight disabilities – including color blindness. Certain color combinations can make text and objects not viewable for users when used incorrectly.

It is recommended to use colors that provide contrast, specifically for content on color backgrounds. It’s important that text and other elements are legible on screen for all users, including those with low vision or color deficiencies. To meet the minimum AA standards, text and interactive elements should have a color contrast ratio – how bright or dark colors appear on a screen – of at least 4.5:1 (7:1 for AAA minimum).

2. Typography & Font Sizes

Typography and the size of fonts on a website are also important for accessibility and allowing users to comfortably read content. Steps to take to make web content easier to read include:

  • Use a large enough font size for body text – the minimum should be 16px.
  • Don’t make lines too long or too short – maintain a line length that creates comfortable reading.
  • Select a typeface that emphasizes clarity and legibility when it’s small or large.
  • Use headings to communicate visual hierarchy, but do not select heading tags for style purposes.
  • Use your type size and line width to determine a line height that people can comfortably read.

3. Images, Video, and Other Media

It’s essential that website media is accessible to all users including images, video, audio scripts, and more. The easiest way to make images on your website more inclusive is to add descriptive alt text to the image. Alt text (short for alternative text) helps describe what we see in an image. When users are viewing a website with a screen reader or other assistive device, this alt text will represent the image(s) on the page. (Bonus tip: alt text should also be optimized with appropriate keywords for SEO purposes.)

When it comes to videos, there are a few different ways to ensure the video content is accessible for users:

  • Captions: Offer users the ability to turn on captions for a video.
  • Transcripts: Offer a transcript document detailing the full video.
  • Accessible Video Players: Use external sources, like Youtube and Vimeo, since video files can be a huge drain on your website’s performance. Give users full control of the video player by displaying video controls.

 

Ingredients to Mobile-Friendly Website

 

4. Mobile Accessibility

Designing for mobile accessibility continues to increase in importance. More users are browsing the web on mobile devices – vs. desktops and laptops – than ever before. Mobile accessibility impacts all web users, not just those with a disability.

One of the most common issues created by mobile devices is small screen sizes. A small screen size places practical limits on how much information can be viewed at one time by a user. There are a couple of best practices for combating this problem.

First, you can minimize the amount of information displayed on mobile devices. Another recommendation is to use text sizes that are compatible for users to read even on smaller screens. When designing for mobile, it’s also important to consider proper spacing between interactive elements. This will help to prevent users from clicking on the wrong target element.

 

A Web Design Agency You Can Trust

Concerned about a lawsuit for failing to meet AA or AAA WCAG standards for your website? Request your complimentary website ADA compliance scan and we’ll uncover potential vulnerabilities focusing on 3 main categories:

  1. Screen-reader adjustments (for non-seeing users)
  2. Keyboard navigation adjustments (for motor-impaired users)
  3. UI, design, and readability adjustments (for vision-impaired users)

Searching for an experienced web design and development team to help make your website usable for everyone? Our team of website design specialists has the knowledge and experience to build websites that meet ADA compliance guidelines and standards. Reach out to BNP Engage today to get started on your journey.

Blake PertlJanuary 31, 2022by Blake Pertl