Since the passing of the Americans with Disabilities Act (ADA), the law requires all websites to be accessible. Although the ADA does not specify a standard for web accessibility, the Web Content Accessibility Guidelines 2.0 have been consistently upheld as the standard for web accessibility. So what does this mean for your website? The WCAG encompasses virtually every aspect of a website. Therefore, it is up to site designers and web developers alike to adhere to these standards.
There are four overarching guidelines that a website must follow to be accessible. The site must be: perceivable, operable, understandable, and robust. Each guideline defines a specific aspect of interacting with a website. These guidelines each have their own intricacies, so for this post, we will focus on how to make a site operable.
For a website to be considered “operable,” all functionality must be available by keyboard. In other words, for each element on a website that is accessible by mouse, you must also be able to navigate to and interact with that element by keyboard. One of the most common accessibility errors in relation to operability is inaccessible navigation dropdowns. A user with a mouse may be able to hover over a menu item and readily access hidden dropdowns. However, if the functionality for a dropdown menu does not also cater to “focus states,” a keyboard user would not be able to access vital content. So, what is “keyboard focus,” and how do we make websites keyboard accessible?
Level A compliance of the WCAG states that all website content should be operable through a keyboard interface. Keyboard accessibility is an essential piece of web accessibility. Some people are unable to maintain consistent muscle control or have little to no use of their hands. Therefore, when navigating a site, the user should be able to move through the content by both mouse or keyboard. Similar to a mouse user following the location of their mouse pointer, the keyboard user will use the tab or arrow keys to navigate. In addition, keyboard users can navigate through interactive elements on the site using “focus indicators” or focus states. This lets the user know where they are on the web page and exactly which element they can interact with.
The appearance of a focus indicator is generally a clearly visible box around an interactive element or outline. However, the style and color of the focus state of an element can always be changed through CSS. Web developers must use caution when altering the appearance of the website’s focus states. Although the style of the outline can be changed, developers should always avoid completely removing it (outline: 0 or outline: none) as this can cause confusion as to where the user focus is on the web page.
Since keyboard users rely on keyboard focus to navigate a website, it is also important to keep in mind that functionality on the site should not prevent the user from moving focus to another element. Preventing keyboard focus from moving is called a keyboard trap and should be avoided. Similarly, altering the natural focus order by changing the tab index values of certain elements can also cause confusion.
For ADA in general, it is best practice to alter the focus appearance and order as little as possible unless absolutely necessary. For more information about ADA compliance, visit our website.