Skip Navigation
Madison, Wisconsin
Powderkeg Web Design
October 21, 2019

What goes into making an ADA Compliant and Accessible Website Design?

Brittany
Brittany
What goes into making an ADA Compliant and Accessible Website Design?

We have gotten a lot of questions about website accessibility and ADA compliance. Website accessibility is the inclusive practice of ensuring that there are no barriers that prevent interaction with, or access to, websites by people with disabilities. In a nutshell, it’s making sure that everyone can use your website no matter how they access the internet.

So, what does it mean to be disabled? Here are the 4 main categories of disabilities[source]:

  1. Visual: Includes blindness, low vision, color-blindness.
  2. Hearing: Deafness and hard-of-hearing
  3. Motor: Inability to use a mouse, slow response time, limited fine motor control.
  4. Cognitive: Learning disabilities, distractability, inability to remember or focus on large amounts of information.

Though different studies have variable results, most studies find that roughly one fifth (20%) of the population has some type of disability. Not every one of these people have disabilities that affect their ability to use the internet, but many do.

Why Develop ADA Accessible Websites?


Legalities

Schools, universities, and government entities have legal obligations for ensuring their website is accessible. In 2018, there were at least 2,250 federal lawsuits about allegedly inaccessible websites[source].

Everyone benefits.

Accessibility helps everyone, not just those with disabilities.

It’s the right thing to do.

Ultimately, we have the obligation to make sure that everyone can access information on the internet. The internet is no longer just a novelty, it’s a crucial utility in today’s society. From W3C:

“The web has the potential to revolutionize the day-to-day lives of millions of people with disabilities by increasing their ability to independently access information, communication, entertainment, commerce, and other aspects of life that most people take for granted.”

What does the ADA require for an accessible website?


From the Bureau of Website Accessibility:
“Title II and Title III of the ADA are the two sections that are most relevant for questions of web accessibility:

  • Title II prohibits disability-based discrimination on the part of state and local governments.
  • Title III prohibits disability-based discrimination for “places of public accommodations”: private businesses that are open to the public, such as restaurants, hotels, movie theaters, museums, and doctor’s offices.

The U.S. Department of Justice has repeatedly held that while the ADA does not specifically address the question of web accessibility, its language is still broad enough to include websites as part of your business operations. The legal consensus is that if Title II or Title III apply to your organization, then they also apply to your website.”

 

Web Content Accessibility Guidelines (WCAG)


W3C is a group that determines the protocols and standards for the web. They developed the Web Content Accessibility Guidelines (WCAG) in order to set some accessibility standards as required by the ADA. There are 4 main principles of the WCAG. An accessible website must be:

  1. Perceivable: Web content is made available to the senses – sight, hearing, and/or touch.
  2. Operable: Interface forms, controls, and navigation are operable.
  3. Understandable: Information and the operation of user interface must be understandable.
  4. Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

With these 4 principles in mind, we can go over what are the big changes you can make to ensure your website is more accessible and in line with ADA requirements.

What This Article Will Go Over


A. Content

  1. Alt Text
  2. Content Formatting
  3. Language
  4. Links and Buttons
  5. Video & Audio

B. Design

  1. Colors & Contrast
  2. Forms
  3. More About Links and Buttons

C. Development

  1. Focus Indicators
  2. Text Resizing
  3. Become More Screen-Reader Friendly
  4. Make Your Website More Keyboard Friendly
  5. Testing Your Website’s Accessibility

 

A. Content


1. Alt Text

This is one that probably everyone knows about! It’s an easy one to tackle. WebAIM’s WCAG Guideline 1.1.1 requires:
“Images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.”

Example of what Alternative Text does.

The best way to do this is to enter in descriptive text of your image into the alt tag of your image. If you are looking at the HTML, it looks like this: alt=”Insert Your Alternative Text Here“. If you have a content management system such as WordPress, you will have a field where you can type your alternative text. It looks something like this:

Alt text field in your content management system

When determining what to use as your alt text, the alt attribute should typicallySource:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases “image of …” or “graphic of …” to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

 


2. Content Formatting

There are a few different aspects to formatting your content for accessibility, but the most important one is to use your header tags appropriately and set up your content hierarchy clearly.

Header Tags

Web users with no disabilities often land on a web page and visually scan the page to look for big, bold text (headings) to get an idea of the structure of the content and page. People who need to use screen readers don’t have this ability! Screen reader programs and other assistive technologies have the ability to let their user jump through the web page by heading tags alone. It’s important that actual header tags (h1, h2, h3, etc.) are used because screen readers rely on those specific tags to be able to determine the page layout and structure.

In addition to actually using header tags, it is important to use them correctly. It’s good practice to use the tags in order and nest them. Lower level headings should be contained within headings of the next highest level (i.e., one should not skip heading levels, such as from an h2 to an h4, going down the page and h3’s should be nested under h2’s.).

A couple of other content formatting notes:

  • Don’t center-align your text. It’s visually much harder to read, even for those without any kind of disability.
  • Divide your content up into chunks. It’s overwhelming when you see a page with a brick wall of content! When you break up your content into more digestible sections, it won’t be nearly as overwhelming to your users.

 


3. Language

WCAG Guideline 3.1.5 states:
A more understandable alternative is provided for content that is more advanced than can be reasonably read by a person with roughly 9 years of primary education.

If your content is difficult to get through, those with cognitive abilities will not easily be able to understand it. While this might not be able to be helped in all situations, there are just some basic rules to go by when writing or editing your content.

  • Leave out or remove industry jargon that is not actually helpful for your audience.
  • Keyword stuffing for SEO is considered deceptive and malicious and will confuse those who are using screen readers.
  • Provide definitions for abbreviations and acronyms.

 


4. Links & Buttons

Link and button text should make sense out of context. Screen readers allow users to jump through the website by moving from one link to another (without reading the static content in between them). Screen readers also allow users to pull up a list of all the links on a page and move directly to the one they want. Once you know this, you can then see that using ambiguous language on links and buttons can be problematic. If these users are only hearing a bunch of links that say “Learn More” or “Click Here”, they’re not getting any information about where that link is actually taking them. Use language that is unambiguous and gives the user some idea of what that link is for.

For example, if you are linking to a product page, your link should say “Products” rather than “Click Here”. Also, make your link/button text intuitive and succinct. A link that says “Click here to see today’s weather forecast,” for example, would be better when shortened to just “Today’s Weather Forecast.”

Button text should be as descriptive as possible. See Organic Products is better than Learn More.

 


5. Video & Audio

Videos and audio can, not surprisingly, pose difficulty for those who are blind, have low-vision, are hard-of-hearing, deaf, and even people who are in situations where video cannot be played with volume. There are several ways to ensure that all members of your audience can access that content.

a. Transcripts

To provide the most basic accessibility, provide a text transcript of your video or audio file. You can type out your transcript, put it on a separate page, and link to it from your video description. Many users are deaf or hard-of-hearing and can ready well, but prefer to read at their own pace. Transcripts are great for these users!

There are normal transcripts, which contains the text version of the audio from your video. There are also descriptive transcripts–these also have text that help describe what is visually happening in the video.

b. Audio Descriptions

Audio Descriptions of a video are for those who are blind or who have low-vision and cannot see what is happening. The audio description will include everything that is said in the video, as well as descriptions of what is happening visually.

c. Captions

Captions help provide context to your users who are deaf or hard of hearing. They are also helpful for those who are better at processing text than audio. You can type out your own captions yourself, use YouTube’s captioning service, or find other third party companies that do it for you. When you provide captions, it’s also a good idea to provide a full transcript, as well.

B. Design


1. Colors & Contrast

To make your website more accessible for those with low vision or color-blindness, in addition to making it easier for everyone else to read, it’s important that color is used carefully. Here are a few big things to consider:

Contrast

Low contrast can make it difficult, or impossible, for someone with low-vision or color-blindness to read your content. WCAG Guideline 1.4.3 states:

  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text – at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold – has a contrast ratio of at least 3:1.

Low contrast text vs. high contrast text

Don’t Use Only Color to Convey Information

WCAG Guideline 1.4.1 states:

  • Color is not used as the sole method of conveying content or distinguishing visual elements.
  • Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.

A great example is outlined below. A user who has low-vision or color-blindness may not be able to tell which form field has the error. When we add an icon with an error message, there’s no missing it! The icon, text, and color cover all of our bases and make life much easier for everyone.

Don't use color only to convey information

 


2. Forms

Forms can be frustrating for the most proficient web users. In terms of design, here are some key items to remember:

  1. Use clear, always visible labels (they should not disappear when the form field is in focus).
  2. Use high contrast on form field borders.
  3. Don’t ask unnecessary questions.
  4. Submit button should be clear and easy to spot.

In this example below, you can see the dramatic difference these 4 simple rules can make! To learn more about online form best practices, check out my in-depth blog post about forms.

 

 


2. More About Links & Buttons

In the last section, we talked about the language used for links and buttons. Now, let’s talk about the design of links and buttons! When we combine things we have already covered, here is what we should keep in mind for links and buttons:

  1. Color contrast requirements must be met.
  2. Language should be clear and concise.
  3. Don’t use only color to convey information.

Let’s look at the example below. On the left, we can see that none of the items we already know have been applied. The color contrast in the button is too low, the text in the button is not as concise as it could be, and the text link (“Hyde Planter”) is using only color to indicate that it’s a link.

Buttons and links should have high contrast, consise language, and more than color to indicate functionality.

On the right, we see that the color contrast ratio between the button color and text color is sufficient, the text has been pared down, and the text link has better contrast in addition to having an underline to indicate it is a link.

 


3. Navigation

Don’t mess with your website’s navigation! Period! And by that, I mean that it should stay the same on all of your content pages. WCAG Guideline 3.2.3 states:

Navigation links that are repeated on web pages do not change order when navigating through the site.

Imagine you are going through the woods and there are signs pointing the way for you. If you decide to go back and the signs are pointing in different directions than you remember, that would lead to a lot of confusion! Now imagine trying to do that blindfolded while the signs yell out to you what they say. That would be a lot worse, right? That’s what many users who need to use screen readers are doing. And when things change on every page, you’re causing a lot of frustration.

During the design stage of your website, go through and think out your site map. Ensure you have a consistent and easy-to-understand navigation and stick to it.

C. Development


1. Focus Indicators

Focus indicators are those little outlines you see around your navigation items or other links when you use the Tab key to move through a website.

Focus Indicators Example

The main purpose of focus indicators is to guide people who are using only their keyboard to navigate around your website. Visually, these focus indicators allow your users to see where they’re at and understand what each element on the screen is. The default, basic focus indicator is usually a small, black outline. It’s also easy to style these with your own CSS to really help it fit in with your website’s styling.


2. Text Resizing

Often times, users with low-vision will customize their own browser settings so that the text on websites is larger and much easier to read. When developing a website, it’s important not to restrict the ability for people to zoom in on the website and ensure that zooming in does not “break” the layout of the site. This is much less of an issue than it used to be thanks to the fact that most websites are built responsively.


3. Become More Screen-Reader Friendly

It’s tempting to get ambitious and develop a website that looks wonderful and functions beautifully, but code-wise, is absolutely unusable for anybody using screen readers or other assistive technology. There are a few key things for web developers to remember to help comply with ADA standards:

a. Use Landmark Tags

In the HTML of your website, your developers should be using “Landmark Tags” for each section of your website’s pages. For example, the navigation can be wrapped in a “nav” tag, the main content in a “main” tag, the footer in a “footer” tag, and so on. These Landmarks are actually able to be navigated by screen readers so that users can use them as shortcuts to jump right to them if they want.

b. Use Headings and Other HTML elements correctly

If your developers can use the pre-set rules of HTML and CSS as it is already defined, it will take you a long way to becoming more accessible. This includes using Header Tags appropriately, as we discussed earlier in this article. Screen reader users can also navigate by tables, lists, buttons, forms, links, images, etc. so it is important that proper HTML semantic structure.

c. Use ARIA framework

ARIA (Accessible Rich Internet Applications) is a protocol defined by W3C to enhance and support accessibility of scripted and dynamic content. Examples of scripted or dynamic content include sliders, navigation drop-down menus, drag-and-drop, and much more. There’s SO much to go over with what ARIA is and how it works that it’s not worth getting into here. Check out this video for an overview on how it helps make websites more accessible:


4. Make Your Website More Keyboard-Friendly

I’ve already gone over some ways to do this, but to learn some more, read my article called Accessibility Tip: Make Your Website Keyboard Accessible.


5. Testing Your Website’s Accessibility

If you’d like to run some tests on your own website to see how you’re doing, there are a number of resources to do so!

  1. Axe Chrome Extension by Deque: You can use this tool from your inspector panel to run a quick accessibility test right in your browser!
  2. NoCoffee Vision Simulator: You can use this tool right in your browser to see how different vision impairments, including color blindness, will impact how users see your website.
  3. Use Your Built-In Screen Reader: Turn on the computer or phone’s built-in screen reader to see how you can navigate the website! Using your screen reader will take some practice, but it really helps to get a little glimpse into how people use this.
  4. Try tabbing through your website: Load up your website and don’t click anything. Instead, use your keyboard ONLY to see how far you can get. Can you see your focus indicators? Can you actually navigate the website? If you can, that’s fantastic! It’s likely, however, you’ll spot some red flags right away trying this test method.

 


Conclusion

While website accessibility standards have been around for quite a while, the internet as a whole still has quite a bit of work to do in order to actually meet them. There are very, very few sites out there that are completely accessible. However, even implementing a few of these higher-level changes can make a big difference for a lot of people!