The Importance of Humanizing ADA Compliance: Focus Indicators

Most developers are familiar with the dreaded mixture of frustration, confusion, and exasperation when told that a site they are working on will need to be compliant with the Americans with Disability Act (ADA). The reason is – making a project ADA compliant often requires ripping apart the existing code and coaxing the website to meet a numerous list of requirements.

However, creating an ADA compliant site doesn’t need to be this challenging. In fact, instead of looking at the ADA as a series of rules to follow, if we, as developers, ask the why behind each requirement, the work actually ends up becoming an intriguing puzzle about user experience.

Questions like “How could we make our website more usable” arise and replace the discussion of “What’s the minimum thing we need to do to make sure we don’t get in trouble.” The aim of this blog post series, “The Importance of Humanizing ADA Compliance,” is to discuss and elaborate on how a certain guideline helps persons with disability. Hopefully, reading the why will make ADA seem more… well…. Human.

Making Indicators Visible and Interactive

In this post I will focus on the following guideline:
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Was there a time when you used a piece of technology and you weren’t sure if your inputs were registered? Perhaps you clicked on a button to view more information, but nothing showed up. Or maybe you swiped to the left on your phone to delete an item in your cart, but it stayed on the screen for a couple of seconds too long before it suddenly disappeared.

We dive into ADA web compliance for digital commerce with ADA experts on Blue Acorn iCi’s The Funnel: An Experience Driven Commerce Podcast. Listen here.

Lack of immediate feedback can be incredibly frustrating and sometimes concerning if you are in the middle of something important like submitting a paper or paying for an item online. But, figuring out a solution to this problem isn’t anything new in the world of user experience and design. Conventions already exist to combat these annoyances in the form of a variety of indicators (e.g. underline, spinning pinwheel, etc.).

The 2.4.7 guideline tackles this same problem, except for those who navigate through the website with the help of a keyboard. In all browsers, any user should be able to get to the next item (e.g. link, button, form field, etc.) by clicking the tab button. This is considered making the items “focused.” Focusing an item allows users to interact with that element via the keyboard. For example, if a link is “focused,” the user can then click Enter to effectively click that link. Here is where a good indicator can make a difference. Having the indicator styled properly not only gives the user feedback of “Hey, I can now interact with this item,” but it also shows the user that that specific item is the one they’re handling.

Default Focus Indicator

By default, most browsers have some sort of style that gets applied to the item that the user tabs to. Here are the default focus indicator for the common browsers:

You may have noticed that all of these focus indicators are different. While it is tempting to tamper with the styles to ensure consistency across browsers and/or provide better compliance to brand colors, design, etc., it is recommended that the styles are left alone since they provide immediate and accurate feedback. But, this doesn’t mean that you can’t modify the focus indicators. In fact, some websites, such as WebAIM, have modified their focus indicator for links so that they are much more contrasting and accessible:

The focus style for links on WebAIM’s website has the text turning red with a very contrasting yellow highlight.

Modifying the Default Focus Indicator

When modifying the default focus indicator, it is especially important to think about the why. In this case, why is having the ADA requirement, 2.4.7, important? It’s important because the indicator helps users recognize a) that pressing the tab did something, b) a specific item in the page has focus, and c) the item can be interacted with. As long as such user experience is kept in mind while modifying the focus indicator, the changes most likely won’t cause a violation.

Here are some examples of good stylized focus indicators that remove the default outline:

Making a site ADA compliant does not have to bring on a headache. Asking questions like “How could we make our website more usable” can help to remind developers that in the end, they are creating technology for human interaction. We at Blue Acorn iCi always explore and consider the full scope of our users’ experience when we architect a solution to the problem.

However, I believe that it will be crucial for the community as a whole to do the same as more and more people use the internet to accomplish their tasks every single day.

Does your website need an ADA audit? Reach out to our team of experts to get started.