How to Make Your Website ADA Compliant

two people working on a computer together
According to the United States Census 1 in 5 Americans have a disability. Just some of the disabilities affected by poor ADA compliance include blindness, poor vision, hard of hearing, deaf, physical disabilities and cognitive disabilities. Recently high profile companies like Netflix have had lawsuits charged based on poor ADA compliance. Although losing money in a lawsuit is a concern, we should remember ADA compliance is a social justice issue. Nearly everyone knows a person with a disability. Not having a way for them to navigate the web, which is the main way most of us connect with each other, is discrimination. This post is not to shame you into caring about ADA compliance but to educate you on the number of people who are being affected by the lack of access to your website and to share some tips on how you can improve the web for everyone.

Tip 1: Rethink your Visual Design

Low contrast colors and elements for designers are used create interesting visuals and hierarchy, however, low contrast of colors, element, and size of fonts are very difficult for people with poor vision. When designing remember to create enough contrast so people can easily see what is on your website.

Tip 2: Rethink your UX

UX is already a very popular field of interest but not enough emphasis is placed on how people with disabilities are navigating websites. Think about how someone using a screen reader moves around your site. Just like people who visually read a site people with screen readers skim sites and will not always review all the content. To fix this, break content into smaller chunks so that important information does not get lost.

Tip 3: Rethink your Content

Content mostly has to do with the wording of your website, especially the descriptions of elements. The wording of buttons can be especially challenging for people using screen readers. Most websites will have buttons that say “click me” or “info”. Call to actions need to be more descriptive. For example, a button can say “Sign up for a free trial”. Also, add a clear description to images. One of the biggest errors in ADA compliance is the naming of images. Do not name images “product1234”. Give images a clear description of what is in the photograph so that people with screen readers have a clear idea of what is in the image.

Tip 4: Rethink Website Development

Screen readers use the HTML to read a website. Before writing a line of code, consider how that code will be read. Important attributes to know are alt text, aria-label, tabindex. For a quick description, alt attribute add alternate descriptions to images. Aria labels provide labels to html elements that would not otherwise be read by screen readers. Tabindex controls the order screen readers will read a website’s content. Building the website will be easier if you plan out the design, content and user experience before you start building.

Tip 5: Test, Test and Test again!

No matter how well you planned and built your website quality assurance should always be a priority. Test your site using a screen reader. Use websites like http://wave.webaim.org/ to catch many ADA compliance errors. Finally, have someone else review your website. If budget allows have your website audited and if not have a friend review it and buy them pizza for their effort. As of today, my own website does not meet ADA standards and I am currently updating my site so that it does. Although there is little chance that a personal site of being sued, ADA compliance is everyone’s responsibility. I hope that one day the internet will be a place we can all enjoy and use to connect with each other regardless of disabilities.

Resources:

http://wave.webaim.org/ http://wave.webaim.org/ https://www.stoel.com/legal-insights/article/self-imposed-ada-audits-the-developer%E2%80%99s-best-opt
Is Your Website ADA Compliant?
https://www.cbsnews.com/news/a-flood-of-suits-demand-websites-accommodate-the-disabled/