Would you like to talk to a human?

Our expert online marketing team is here to help. Contact us today.

Get Started Now

ADA Compliance Tips for Website Developers

A simple checklist of things to consider when creating an ADA compliant website
Mar 9, 2019

The internet is for everybody. That is something every developer should intrinsically understand as they write code. You can never take for granted that you know how a user will interact with what you are building. ADA compliance should be more than just meeting a government requirement. It should be about giving your users the best experience possible.

Most of the basic rules for ADA compliance fall into three categories.

  1. HTML structure
  2. Color Contrast
  3. Additional Enhancements

HTML Structure

The good news is that ADA best practices for writing HTML match up pretty well with general best practices and really well with SEO best practices. Web crawlers and screen readers both need well-structured content that can be read by a machine.  

Semantic HTML

Header, footer, section, nav, aside, and many other semantic tags help to give structure to your page. They tell machines what each piece of content is doing on your page.  If a vision impaired user wants to quickly get to your navigation, a screen reader should find that in a <nav> tag. If a <blockquote> is found it should be an actual quote, not just random indented text.  <table>’s should contain table data, not big blocks of text you wanted to align in columns.

Tags like <b> and <i> have been replaced with <strong> and <em> because they better describe what they are being used for. “Bold” only implies a visual change, while “Strong” implies a level of importance. Same with “Italic” vs “Emphasis”.  Your code should describe itself as much as possible.

Heading Order

To a lot of developers, headings are just quick ways to show a different visual text style, but they also denote a structure to your content.  A <h1> should always be the first heading used on your page and it should be followed by either another <h1> or an <h2>. Screen readers will tell users what heading level they are on, so jumping from an <h1> to <h3> to <h2> becomes confusing and inhibits their ability to quickly scan through a site.

Link Text

Since visually impaired users can’t scan website content with their eyes, they do so by tabbing between links and headings. Because of this, the context around a link can often be lost if you use generic phrases like “click here” or “read more” as your link text.

It is also important to limit repeating the same link in the same area of a page. If you have both an image and a title linking to an article, try to make that one link instead of two. That will help take away the need for the user to listen to redundant information as they are tabbing through links.

Color Contrast

Color contrast is one of the more overlooked aspects of ADA compliance. For existing sites, it can be very difficult to go back and change all of the colors on a site to meet the requirements.  For new sites, it severely limits your design opportunities.

The contrast ratio required currently is 4.5 to 1 for standard sized text and 3 to 1 for text over 14pt. There are tools online that can help you test those color contrast ratios https://contrast-ratio.com/.  

Text in images also needs to meet the color contrast requirements, so don’t forget to check all of your graphics and logos.

Additional Enhancements

There are many additional enhancements you can and should add to your site to help improve the experience impaired visitors have on your site.  

Skip to Content Links

Since screen readers start each page at the very first element in your sites body, it is very helpful to give users a way to skip past all of your header content.  Make <a class=”skip-main” href=”#main”>Skip to main content</a> the first element on the page and hide it using absolute positioning.

Tab Indexing and Reading Order

Since CSS allows you to move around elements and change the order that things are displayed in, it is important to pay attention to the order of your elements in the actual code. The tabindex attribute can be used to force a specific tab order but can be troublesome to maintain, so be careful. It also allows you to remove an element from the tab order by setting it to tabindex=”-1”.

Aria Attributes

Aria Attributes are a set of attributes that allow you to add additional accessibility features where it is not possible through standard HTML. There are three main types of features you can use aria for: Roles, Properties, and States.

Roles

Roles allow you to define what an element on your page is or what it does. Semantic HTML takes care of a lot of this for you, but sometimes you will want to add some additional information by using descriptors such as role=”search” or role=”banner”.  

Properties

These define the properties of an element. Aria-label, for example, can be used to define a string that labels the current element. Aria-controls is used to identify whose contents or presence are controlled by the current element. There are many more properties available, but they all can be used to add specific information for visually impaired users https://www.w3.org/WAI/PF/aria-1.1/states_and_properties.

States

States are special properties that define the current conditions of elements. Aria-disabled can be used to say if a form input is disabled or not. Aria-hidden can be used to hide an element from screen readers. As with properties, there are many different state attributes you can set to help give additional information to your users.

Testing

The most important part of ADA compliance is testing. There are so many rules and requirements that it is easy to miss something during development. The WAVE tool provided by WebAIM is the most common tool used for testing compliance. They even have a handy Chrome extension that can quickly let you test any page you are working on.

Additional testing can be done by installing an actual screen reader. This is a good way to understand why these rules are important and what the actual user experience on your website is like for visually impaired users.

Testing Tools

Author:

Brandon Perdue

Developer

I was introduced to web development at the age of 15 when my friends started their first band. We decided they needed a website and I've been a programmer ever since. From there I made some websites and a few simple Flash games before choosing to make this my career. I went to Eastern Washington University and double majored in Computer Information Systems and Multimedia. I got a job with a local Web Agency named Design Spike out of college and worked there for 10 years. In 2018 I joined Zipline Interactive and have been overjoyed to merge my experience with theirs and create some fantastic websites.
More Articles
I was introduced to web development at the age of 15 when my friends started their first band. We decided they needed a website and I've been a programmer ever since. From there I made some websites and a few simple Flash games before choosing to make this my career. I went to Eastern Washington University and double majored in Computer Information Systems and Multimedia. I got a job with a local Web Agency named Design Spike out of college and worked there for 10 years. In 2018 I joined Zipline Interactive and have been overjoyed to merge my experience with theirs and create some fantastic websites.
More Articles

Are you looking to improve the accessibility of your website?

We can help. Our skilled team has extensive experience designing and retrofitting ADA compliant website experiences that are accessible to anyone. If you have questions or would like to talk to one of our experts, please contact us today.

Contact Us!

LEAVE A COMMENT ON THIS ARTICLE

Ask a question, make a comment, or tell us we're wrong.

Related Articles

A sampling of other articles you may enjoy if you liked this one.

Bodine Electric Company Website Launch
Bodine Electric Company’s Improved Website Gets in Motion

You may not have heard of Bodine Electric Company, but as the world’s largest producer of electri...

Read More
Why Content is King and Why that is a Good Thing
Why Content is Still King – And Why That’s a Good Thing

“Content Is King” is an SEO philosophy that’s been around since before SEO was even an indust...

Read More
Medcurity Takes the Confusion out of HIPAA Compliance

Since being signed into law in 1996, the Health Insurance Portability and Accountability Act (HIPAA...

Read More