by | Mar 1, 2019 | Top List, Web Design

We live in a world where technology has become a primary resource for information. It’s important for websites to be mindful of being accessible to anyone, includes those with disabilities. The Americans with Disabilities Act (ADA) has made this clear and prohibits the discrimination against individuals with disabilities in all aspects of life, including the World Wide Web, ensuring that these individuals are provided with the same civil rights and opportunities as everyone else. To aid in making your website universally accessible, I’ve compiled a list of the Top 10 Don’ts for ADA Compliance.
According to the Web Content Accessibilities Guidlines (WCAG), the four main principles for ADA accessibility are:
Perceivable – The information and user interface components must be presentable to users in a way they can perceive Operable –  The user interface components and navigation must be operable Understandable – The information and the operation of the user interface must be understandable Robust – The content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologie
Failure to hit these four principles will deem your website non-compliant to ADA standards. 

Perceivable 

Don’t Forget to provide text alternatives for any non-text content

Non-text content such as images will need descriptive alt-text to illustrate what is going on in the picture that is provided. As for videos, captions help to describe the dialog and any background noise going in each scene. These text alternatives are needed in order to be changed into other forms that other people need, such as large print, braille, speech, symbols, or simpler language.
Ebay Alt-txt provided for image advertising Nikon Camera

Alt text provided for image. (blog.prototypr.io)

Don’t Forget to create adaptable content

The information needs to be presented in a way that can be adapted to different situations without losing information or structure.

Don’t make it harder for users to see and hear content

Provide enough color contrast between the foreground and background. WebAIM is one of the resources that we use to ensure that the color contrast meets ADA compliance. It is recommended to have a color contrast of at least 4.5:1 , but it is preferred to be 7:1. There should be mechanism available for users to control audio volume that is independent from the overall system volume level. Text should be re-sizable for those who need larger text.
Insufficient Color Contrast between Input field and background

Input text and border against the light background do not meet the contrast ratio guidline. (blog.prototypr.io)

Operable 

Don’t forget to make all functionality available from a keyboard

There are many people that are unable to use a mouse, so it is important to keep all functionality accessible from the keyboard. All functional and interactive elements, such as links or input fields should also have a clear focus state to guide users to their location on the page. Make sure that there are no keyboard traps that prevent the user from continuing to access your content.
Keyboard Functionality with Focus State
Location indicated by focus state. (blog.prototypr.io)

Don’t rush timed content

Any type of moving or auto-updating information should implement some sort of feature that can turn off the time limit, adjust the time limit at least 10 times the length of the default setting, or warns the user before the time expires.

Don’t design content in a way that is known to cause seizures

There should not be any flashing lights that occurs more than three times per second.

Don’t forget to provide ways to help users find the content they need, navigate, and determine where they are on a website

Be sure to provide a link for users to skip to the page’s main content. This is important especially for sites that have large, multi-layered navigation menus. This allows users to bypass blocks of content in order to go straight to the information they need.

Use the content text to determine the purpose of the link that is within the anchor tag itself.

Provide more than one way to locate a web page. Examples of this would include providing a Site map page, a search function and links to all the pages in the navigation bar and/or footer.

Provide the user with information about their current location. This can be indicated by the following:

  • breadcrumbs, trailing the pages the user has accessed to get to their current page
  • site map
  • highlighting the current location in the navigation bar
Content Text used as the Purpose of the Link

Content text used as the purpose of the link. (bitsofco.de)

Understandable

Don’t make web pages appear and operate in unpredictable ways

It helps to keep navigation elements consistent throughout the whole website. Components that have the same functionality within a set of web pages should be identified consistently.

Don’t forget to help prevent user errors

When presenting input elements on forms, provide labels and simple instructions to clearly indicate its purpose. It also helps to provide error messages that describe what is needed in simple and understandable text when the input is incorrect. Also give the user chances to go back to correct information before submission.
Simple instructions provided to create a strong password

Instructions for creating a strong password. (bitsofco.de)

Robust

Don’t forget to maximize capability

The usability and accessibility needs to be understood by current and future users, including assistive technologies such as screen readers.
For more information on web accessibility and guidelines check out the links below! Web Accessibility Guidlines (WCAG) 2.0 Accessible Website Example Good Examples of Accessible Web Sites
Related Articles

Web Design Evolution Through the Decades

With the invention of the Internet, the world’s information has become accessible, literally, within the palm of our hands. Technology has grown throughout the past three decades and web design has shown its own evolution over time. We’ve come a long way from the...

Maxmedia Creates Location Map Graphic
Maxmedia Creates Location Map Graphic Mobile

Facebook IconTwitter Icon  Filled instagram icon  Youtube Icon   LinkedIn Icon   Pinterest Icon

250 N Orange Ave #990 Orlando, FL 32801 | Info@maxmediacreates.com | 407.984.7979

© 2018 Maxmedia Creates

All rights reserved  |   Privacy Policy | Accessibility Statement

If you have any problems accessing this site, please contact Maxmedia Creates at 407-984-7979 or send an email to info@maxmediacreates.com