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.
- HTML structure
- Color Contrast
- 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
Tags like and have been replaced with and 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 an <h2>. Screen readers will tell users what heading level they are on, so jumping from an <h2> to an <h1> 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 Skip to main content 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
Looking to get more leads online?
The Zipline team can help design and develop a website for your business that gets more leads and profit. By strategically aligning the website to your goals, we can help you do more with less. Contact us today to start the conversation.
