One of the most important aspects of building or designing a website for a client is ensuring that the website can be accessed, navigated through and read by individuals who use assistive technology.
For extensive reading on this subject, a great place to start is with the Section 508 accessibility guidelines located here.
The section 508 guidelines contain links to the W3C Web Accessibility Initiative, and of particular concern to those of us who build websites is this page that discusses how people with disabilities use the web: https://www.w3.org/WAI/people-use-web/
All web designers and developers should familiarize themselves with the Web Content Accessibility Guidelines, then go through their checklist to make sure all of the items listed have been implemented – either by themselves or by whomever created the CMS theme they are using to create their website.
One of the guidelines listed has to do with focus indicators. Focus indicators are a clearly visible indicator of some sort that let a user know exactly which element of a web page they are actively focusing on (with the Tab key of their keyboard for example).
It is an accessibility requirement that websites should allow the user to navigate through them using only the Tab and arrow keys (if needed). When they do this, it is recommended to supply the user with some type of clear visual cue – such as an outline surrounding a navigation item, or the background of a form field that changes to a different color when focused on.
This section of the WCAG in particular deals with a visible focus indicator:
Success Criterion 2.4.7 Focus Visible
Understanding Focus Visible |
How to Meet Focus Visible
(Level AA)
Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.
See also this W3 article: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
I recently ran into an issue on a client’s website where their developer had removed these visible focus indicators. I tried tabbing through their website and was given no cues or clear idea which element or section I had landed on. A quick look at the code revealed that the CSS for outline had been set to “none”.
Oftentimes “outline” will be set to “0” which does the same thing – it removes the built-in browser functionality that lets users with disabilities know where they are on the page. I’m not sure why, but I’ve seen this on quite a few websites. Try to avoid using outline:0 or any styles similar to this when customizing your client’s or your website’s CSS.
For my client, I first attempted to remedy this by using the following code, which only partially worked. It wasn’t ideal for this particular client, because the outlined focus indicator appeared on mouse over, as well as when the element on the page was tabbed to:
a:focus, a:hover, a:active {
outline: 1px solid white;
}
To remedy this, I simply removed the a:active and a:hover pseudo classes from the CSS, so now my code appears like this:
a:focus {
outline: 1px solid tan;
}
Since I didn’t want to alter the already-established mouse-hover action, I removed everything except the “focus” pseudo class, then added an outline to it. Now the outline only appears when a user tabs through this client’s website.
Do you have any pain points in terms of implementing accessibility measures on websites or blogs? What have you noticed that seems to be lacking in the area of accessibility compliance, for the websites that you have visited?
Please let me know in the comments. I welcome and thank you for your feedback!
