During the latter part of this past week, I performed an accessibility “audit” for an organization I’ve done this type of work for in the past and unfortunately haven’t done much for in recent months. It feels good to be at it again.
And the web developer’s work I was evaluating was missing one of the most basic concepts of accessible web design. They removed the focus indicator from their links. I thought I’d share how I got around this potential show stopper with a little browser feature I’ve had to use possibly a couple other times for situations not quite as serious as this proved to be, but I think this will be worth the effort.
But before I drone on, it seems this needs to be said at least one more time. You really should avoid removing the focus indicator from web sites. Now I understand why one would do it. In some browsers the outline shows when you click on a link and that complicates certain aesthetic goals. And there are ways around this (largely).
But, as the link above demonstrates, this isn’t a new concern. This is merely me taking my sweet ass time at getting to a point. Which isn’t my main point, bear with me, I’ll get there. Revisiting practices that have since passed “pressing” relevancy can sometimes help your current processes. Take my “audit” this past week as a perfect example.
My testing approach
The manner in which I initially approach evaluating the accessibility of a website is by starting with a specific means of input. The keyboard. And with the outline removed from the focus state of links, it makes web life much, much harder for certain demographics. Enter “user defined style sheets.”
As an aside, which is somewhat related to what I’m writing about today, Juicy Studio recently posted an interesting article concerning icon fonts and user defined style sheets. Worth a read.
I’m relatively certain user defined style sheets are a feature in all browsers. I cannot recall it not being present. Though I’m sure it hasn’t always been a feature in web browsers. My time on the web predates the mass implementation of CSS, so I’m sure it was absent at some point in my early internet exploits. This is why web browser vendors include such features in their products. To allow users to customize their experience to better suit their preferences and/ or needs. But don’t use this as an excuse not to include focus styles. Or anything else CSS related, for that matter.
Pushing on, that’s exactly what I did. I created a separate style sheet. Saved it to my hard drive. Then told my browser (Safari in this case) I wanted to use it by selecting the style sheet in my browsers preferences (again, in Safari, under Preferences > Advanced and choose “other” — and navigating to the spot where you saved your style sheet, when prompted, and choosing it — in the drop down menu beside “style sheet”)*.
Without further ado
So in said style sheet I wrote a bunch of lines of code that give me focus indication on any focusable landmark on any webpage should my custom style sheet be chosen;
/* 1. I used the all selector (*) prior to the focus pseudo-element, as opposed to a generic "a" selector, to insure the styles I declared below are applied to anything that receives focus.
* 2. Use of !important's ensure conflicts are overridden by my styles.
* 3. These declarations are likely better applied to a simple "a" selector rather than the :focus state. */
*:focus { /* 1 */
display: inline-block !important; /* to ensure the outline wraps a linked image. 3 */
outline: 3px solid #f00 !important; /* 2 */
position: relative !important; /* This and the next line help make sure the outline is on top of everything. 3 */
z-index: 10000 !important; /* 3 */
}Not the prettiest bit of CSS ever written, as I stated above with the !important’s and styles that don’t really belong on the focus state (see my post The frustrations of VoiceOver for one reason why not). But those lines of code allowed me to complete my scathing evaluation.
* In order for the style sheet to become active, with Safari at least, you need to quit and restart the browser.