Digital accessibility: Hover and focus style

Navigating through a website with just a keyboard is challenging. Instead of using a mouse to hover and focus, point and click, you can only tab over the interactive elements to advance you to the next section. Approximately 20 million people in the USA have difficulty lifting or grasping, significantly impacting their ability to use a mouse. Without the ease of tab navigation, disabled people are more likely to leave a page in search of digital accessibility.

Today, accessibility in the physical world is regulated by the ADA. People with disabilities have dedicated parking spaces, ramps, and even wide entryways so they may patron their favorite businesses. Screen reader and keyboard access along with caption and transcripts have enabled better access to digital experiences. However, the pandemic has made the need for digital accessibility experiences to be greater. From mobile apps to websites, many organizations are beginning to learn why it is so important to factor in human-centered design when building or optimizing their existing digital product or website.

While most digital experiences today lack baseline accessibility, it is important for organizations to begin to take notice and plan for the future. A complete overhaul of a digital product may not be necessary, but a simple WCAG 2.1 Compliance test is recommended to learn where an organization may need to start.

Hover and Focus

One of the recommended optimizations a company should consider when evaluating where to start is Focus style. Hover and focus styles let users know what they're interacting with. Focus styles are essential for keyboard users to know what element they're focusing on. Some best practices include but are not limited to:

• All interactive elements should have a focus style, including links, buttons, form inputs, menu items, etc.
• Focus styles should be visually obvious and meet contrast requirements for interactive elements (3:1) - they're usually styled as an outline or underline
• Don't just rely on hover - hover only lets you know something is interactive. They also don't work on touch devices. Focus means an element is ready for user input (i.e. if I focus on a button and press enter, I've now "pressed" that button)

Now, let’s try tabbing through these websites to see if you can always tell what element you're focused on. Try interacting with the application with only your keyboard.

Spotify: Listening is everything

Target : Expect More. Pay Less.

Websites for Artists by FASO - The Leading Provider of Professional Artist Websites

As you can see, we are slowly becoming aware of the opportunities that exist to optimize a user’s experience. As more organizations start thinking about the impact this has on the disabled community, it’s important to incorporate interactive styles from the beginning. Keep in mind that focus states are required by WCAG AA standards - 2.4.7 Focus Visible.

Developer and Designer Tips

If you are a developer and/or designer on a team focused on improving the user experience, make sure to:

• Style pseudo-classes for :hover :focus and :active in your style sheets for interactive elements. If you're removing the underline on links, be sure you're replacing that behavior with another distinct hover and focus state behavior, while keeping color contrast in mind.
• Follow this guide on interaction states if working in mobile or with material design

• Make sure to design different states for active, hover, and focus (as well as other states if necessary - inactive, unselected, selected). Share clear documentation with the team.

Committing to Accessibility

By becoming aware of the opportunities that exist to make your organization’s digital products more accessible, you are joining a community of responsible, forward-thinking businesses who aspire to make the world more equitable. In support of this mission, our team is sharing a list of their go-to tools for making products user-friendly for the widest audience. It’s a small step in the right direction to make your products digitally accessible for everyone.

*Disabled People

Our use of the term “disabled” here is inspired by thought leadership from the disability community, including Lawrence Carter Long’s #SayTheWord Campaign, which aims to de-stigmatize disability and recognize the impact of structural ableism. At the same time, we recognize that language isn’t universal and some prefer to use “people with disabilities,” thus why we use both terms. Ultimately, we believe in centering those most impacted and using the language that the community prefers.