WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: visual focus for anchor tags

for

From: Jukka K. Korpela
Date: Feb 15, 2011 2:12PM

Hoffman, Allen wrote:

> Code:
>
> Skip function:
> <a href="#content" class="skipnav" title="Skip Navigation"><img
> src="images/spacer.gif" alt="Skip Navigation" border="0" height="10"
> width="10" /></a>
>
> Anchor:
> <a href="#content" title="begin main content" name="content"></a>

Thank you for the additional information. In this case the code snippets are
sufficient for understanding what the issue is. Originally, you wrote:

"Just noticed that IE7 when tabbed to an anchor tag loses visual focus
indication.
FireFox puts a small red dot there in this circumstance.
Anybody know if IE8 or 9 fix this?"

In the code you posted, the second <a> element has empty content, so I would
not expect any visual indication of focus for it. But Firefox 3.6 indeed
shows a small dot (one pixel, I would say), positioned a little above the
top of the line. To me, it seems that its color is the link color being
applied, by default blue or magenta (maybe red in some circumstances). This
only happens when the element is focused on with tabbing or by an invocation
of the focus() function - not when the "Skip Navigation" link is used.

On IE 8, there is no focus indication for such an element. It gets focused,
though - I tested this using an onfocus event handler.

On the practical side, the Firefox behavior looks like an anomaly, if not a
bug, but the code (markup) is anomalous, too. A link that has empty content
and points to itself is not a normal link, and although there's probably
some good intent behind it, it would more natural to use just an
id="content" attribute on the first element of the main content.

--
Yucca, http://www.cs.tut.fi/~jkorpela/