WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Re: SPAM-LOW: Re: visual focus for anchor tags

for

Number of posts in this thread: 6 (In chronological order)

From: Dawn Budge
Date: Mon, Feb 14 2011 10:27AM
Subject: Re: SPAM-LOW: Re: visual focus for anchor tags
No previous message | Next message →

Are you using a css reset? Is there outline:0; anywhere in your code?
If so, there shouldn't be:
http://www.dawnbudge.co.uk/index.php/2009/08/get-some-focus-css-outline/
Thanks,Dawn

----------------------------------------
From: "William Lawrence" < = EMAIL ADDRESS REMOVED = >
Sent: 14 February 2011 17:13
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Subject: SPAM-LOW: Re: [WebAIM] visual focus for anchor tags

Correct me if I'm wrong or missing your question, but...

Expected browser behavior is that only when an anchor element contains
an HREF attribute in the opening anchor tag will the anchor element
ever receive visual focus.

If anything else is happening that is providing unexpected behavior
across different browsers, then the issue may exist in a different
layer of the DOM, e.g. CSS or JavaScript.

Cheers!
William

On Mon, Feb 14, 2011 at 10:44 AM, Hoffman, Allen 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?
> Why is focus lost for anchor tags?
> Why does even FireFox use such a not so highly visible focus indicator
> for anchor tags?
>
>
> Allen Hoffman
>

From: Jukka K. Korpela
Date: Mon, Feb 14 2011 2:48PM
Subject: Re: visual focus for anchor tags
← Previous message | Next message →

William Lawrence wrote:

> Expected browser behavior is that only when an anchor element contains
> an HREF attribute in the opening anchor tag will the anchor element
> ever receive visual focus.

I would not expect an anchor (A) element without HREF to ever receive focus
without extra code (such as TABINDEX attribute). Maybe that's what you meant
too, but I wanted to emphasize that it's not just a matter of missing visual
indication of focus - the element just isn't part of the tabbing order or
otherwise focusable.

The URL of a problem page would have helped a lot in addressing the problem.
Actually, without it, there probably isn't much more one can say about it.

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

From: Hoffman, Allen
Date: Tue, Feb 15 2011 12:42PM
Subject: Re: visual focus for anchor tags
← Previous message | Next message →

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>

-----Original Message-----
From: Jukka K. Korpela [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, February 14, 2011 4:34 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] visual focus for anchor tags

William Lawrence wrote:

> Expected browser behavior is that only when an anchor element contains
> an HREF attribute in the opening anchor tag will the anchor element
> ever receive visual focus.

I would not expect an anchor (A) element without HREF to ever receive
focus
without extra code (such as TABINDEX attribute). Maybe that's what you
meant
too, but I wanted to emphasize that it's not just a matter of missing
visual
indication of focus - the element just isn't part of the tabbing order
or
otherwise focusable.

The URL of a problem page would have helped a lot in addressing the
problem.
Actually, without it, there probably isn't much more one can say about
it.

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

From: Jukka K. Korpela
Date: Tue, Feb 15 2011 2:12PM
Subject: Re: visual focus for anchor tags
← Previous message | Next message →

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/

From: William Lawrence
Date: Tue, Feb 15 2011 9:00PM
Subject: Re: visual focus for anchor tags
← Previous message | Next message →

> 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.

I second what Jukka said.

However, on a more important note, and one that would've avoided this
issue altogether, is that the purpose of the link must be determined
from the link text alone. Without text content between the opening and
closing tags of the anchor element, irregardless of platform or user
agent, that link will cause more confusion than it's worth.

William

From: Dawn Budge
Date: Wed, Feb 16 2011 3:21AM
Subject: Re: visual focus for anchor tags
← Previous message | No next message

Hi,
as an aside to your original question, do you know you can also use IDs on
any element as well as name attributes on anchors? Works on modern
browsers inc. IE6. You have to go way back to find one that doesn't
(Netscape 4 I think?)
e.g.<a href="#content>Skip to content</a>logos, navigation, etc.
<div id="content">main content</div>
Hope that helps.Dawn

----------------------------------------
From: "Hoffman, Allen" < = EMAIL ADDRESS REMOVED = >
Sent: 15 February 2011 19:41
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] visual focus for anchor tags

Code:

Skip function:

src="images/spacer.gif" alt="Skip Navigation" border="0" height="10"
width="10" />

Anchor:

-----Original Message-----
From: Jukka K. Korpela [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Monday, February 14, 2011 4:34 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] visual focus for anchor tags

William Lawrence wrote:

> Expected browser behavior is that only when an anchor element contains
> an HREF attribute in the opening anchor tag will the anchor element
> ever receive visual focus.

I would not expect an anchor (A) element without HREF to ever receive
focus
without extra code (such as TABINDEX attribute). Maybe that's what you
meant
too, but I wanted to emphasize that it's not just a matter of missing
visual
indication of focus - the element just isn't part of the tabbing order
or
otherwise focusable.

The URL of a problem page would have helped a lot in addressing the
problem.
Actually, without it, there probably isn't much more one can say about
it.

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