:focus on Accessibility
Navigating the web has many approaches with regards to Accessibility. As a software engineer building an eCommerce web page, we strive to be inclusive and allow our pages to be accessible by all users. As part of our ADA user base support, we utilize a variety of tools and resources to support decisions on how we should implement functionality in our applications.
For power users, removing your hands from the keyboard may impair productivity during a workday. Alternatively, for a user with limited mobility, the keyboard is their only option to navigate a web page.
How does a user know where they are on a web page? Every browser renders HTML elements that can be focused and each browser has its own focus style. Examples of focusable elements are: button, form elements, links; however, not all elements can capture focus like: div, p, or img.
On Internet Explorer the focus style is dotted rectangle and similar on Firefox, but in Chrome the style is a blue shadowed outline and similarly in Safari the style is a lighter blue shadowed outline.
The browsers default focus style may not be the most appealing and is often overridden with a custom style like below.
a:focus,
button:focus,
input:focus {
outline: 1px solid grey;
}This override will set a solid grey outline around anchor, button, and input elements when focused. Although this is a quick fix to align focus styles across browsers, you are overlooking visibility issues.
To support this case, consider Web Content Accessibility Guidelines (WCAG). There are two specs that will help determine using default or customized focus style.
First, 1.4.11
When an elements focus style is overwritten you will have to consider the contrast ratio of the element and its surrounding elements. If the contrast is not visible enough then the focus style is not apparent enough when the element is focused.
Second, 2.4.7
In the use case where focus outline was overwritten to `outline: none;` the focus style is no longer visible to the user. If the element is focused with a custom style, there’s no guarantee that one focus style will apply to all elements on the page. Instead of one style for all you may have to overwrite focus style for elements on different parts of your web page.
Conclusion
Based on the specs 1.4.11 & 2.4.7; we’ve opted to using the default focus style across all our pages. We’re able to rely on the browser default to apply focus style on focusable elements and reduce CSS overrides. Do you customize your focus frame style?
Are you interested in learning more about ADA at Walmart? Check out:
https://medium.com/walmartlabs/being-accessible-always-5ada0a7ac048
