E-mail List Archives
Thread: How best to code "hidden" headings?
Number of posts in this thread: 11 (In chronological order)
From: Cliff Tyllick
Date: Tue, Jan 27 2009 8:40AM
Subject: How best to code "hidden" headings?
No previous message | Next message →
I'm participating in a discussion among Drupal developers about the differences between different methods of adding headings for screen readers to pick up without having those headings appear onscreen---you know, the classic case of wanting a "Site Navigation" for screen readers to read without having to add that heading to the visual design, where (at least in the designer's opinion) it's obvious that it's site navigation.
Mike Gifford, the developer who is trying to get a solution built into Drupal's next release (and perhaps backported to the current release) has posed his question in the WebAIM forum ( http://webaim.org/forums/viewtopic.php?id=356 ). I'm hoping those who know more about CSS, screen readers, and the ways screen readers work with CSS can help Mike be sure the solution he implements is valid.
Again, if Mike can get this wrapped up soon, this accessibility enhancement stands a good chance of being incorporated into the core code of Drupal 7.
Thanks!
Cliff Tyllick
Web development coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512-239-4516
= EMAIL ADDRESS REMOVED =
From: Jens Meiert
Date: Tue, Jan 27 2009 8:55AM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
> I'm participating in a discussion among Drupal developers about the
> differences between different methods of adding headings for screen readers
> to pick up without having those headings appear onscreen
Two cents, literally: WebAIM itself once published a technique that's
considered accessible [1] – however these techniques do collide with
guidelines from a few search engines [2,3].
[1] http://www.webaim.org/techniques/css/invisiblecontent/
[2] http://www.google.com/support/webmasters/bin/answer.py?answer=66353
[3] http://help.yahoo.com/l/us/yahoo/search/basics/basics-18.html
--
Jens Meiert
http://meiert.com/en/
From: Jared Smith
Date: Tue, Jan 27 2009 11:00AM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
On Tue, Jan 27, 2009 at 8:50 AM, Jens Meiert < = EMAIL ADDRESS REMOVED = > wrote:
> Two cents, literally: WebAIM itself once published a technique that's
> considered accessible [1] – however these techniques do collide with
> guidelines from a few search engines [2,3].
Though there is no indication that this particular technique actually
results in any search engine issues. It is used on many web sites,
including our own, that enjoy very good search engine rankings.
This approach should only be used in places where it is truly
necessary. For the most part, the only time you would want to provide
content for screen reader users but not other sighted users is when
there is content that is clearly available visually, but that may not
be apparent to screen reader users.
On the WebAIM site we use it to:
1. Provide a label for the search input box which is clearly
identified visually.
2. To identify the beginning of breadcrumbs. Again, visual users can
see the breadcrumb text as a whole and understand the convention.
3. To identify the beginning of the advertisements - also very
apparent visually, but not so much to someone listening linearly.
Jared Smith
WebAIM
From: Dean Hamack
Date: Tue, Jan 27 2009 12:00PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
The stuff about being penalized for hiding content is
nonsense. The search engine spiders ignore css, and have no way of
determining whether your content is hidden or not. If people got penalized
for hiding content, every site that has collapsible menus would be banned.
I use the WebAim method on all of my sites and it works well. I use it to
replace the name of my site with a logo image, hide the skip navigation
link, and to hide the occasional form label. The only thing it doesn't work
with is legends.
> On Tue, Jan 27, 2009 at 8:50 AM, Jens Meiert < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Two cents, literally: WebAIM itself once published a technique that's
>> considered accessible [1] however these techniques do collide with
>> guidelines from a few search engines [2,3].
From: Moore, Michael
Date: Tue, Jan 27 2009 12:40PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
Dean wrote:
<dean>I use the WebAim method on all of my sites and it works well. I
use it to
replace the name of my site with a logo image, hide the skip navigation
link, and to hide the occasional form label. The only thing it doesn't
work
with is legends. </dean>
<mike>
Why do you hide the skip navigation link? How do people who do not use a
screen reader but rely on tab navigation because they cannot use a mouse
get to it?</mike>
Mike
From: Dean Hamack
Date: Tue, Jan 27 2009 12:50PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
Hi Mike,
I've always hidden it because my (obviously incorrect) belief was that the
only people who would benefit from it are those using screenreaders or
mobile devices. I never considered those who couldn't use a mouse.
Something to reconsider I suppose.
On 1/27/09 11:36 AM, "Moore, Michael" < = EMAIL ADDRESS REMOVED = >
wrote:
> Why do you hide the skip navigation link? How do people who do not use a
> screen reader but rely on tab navigation because they cannot use a mouse
> get to it?
From: Jared Smith
Date: Tue, Jan 27 2009 1:20PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
On Tue, Jan 27, 2009 at 12:45 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> I've always hidden it because my (obviously incorrect) belief was that the
> only people who would benefit from it are those using screenreaders or
> mobile devices. I never considered those who couldn't use a mouse.
>
> Something to reconsider I suppose.
Yes. There are many sighted, keyboard-only users that would benefit
from the link. In fact, they would likely see more benefit from the
link than blind/visually-impaired users because sighted users
typically aren't using software that allows them to navigate in
complex ways (by heading, form, list, etc.) like screen readers do.
One possible solution is to allow the link to become visible when it
receives keyboard focus. That way screen reader users hear it and
sighted keyboard users see it when the 'tab' to it, but other users
are not even aware it is there. You can do this by simply changing the
CSS code on :focus to remove the absolute positioning and sizing. If
you're using our code, this is all documented at
http://webaim.org/techniques/css/invisiblecontent/#skipnavlinks
Jared Smith
WebAIM
From: ben morrison
Date: Tue, Jan 27 2009 4:10PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
On Tue, Jan 27, 2009 at 5:58 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> On Tue, Jan 27, 2009 at 8:50 AM, Jens Meiert < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Two cents, literally: WebAIM itself once published a technique that's
>> considered accessible [1] – however these techniques do collide with
>> guidelines from a few search engines [2,3].
>
> Though there is no indication that this particular technique actually
> results in any search engine issues. It is used on many web sites,
> including our own, that enjoy very good search engine rankings.
>
> This approach should only be used in places where it is truly
> necessary. For the most part, the only time you would want to provide
> content for screen reader users but not other sighted users is when
> there is content that is clearly available visually, but that may not
> be apparent to screen reader users.
I concur, I work for yahoo and we use off-screen techniques ourselves
to aid accessibility.
simple rule, if you are using it to spam you will get caught and penalised.
Ben
--
Ben Morrison
From: ben morrison
Date: Tue, Jan 27 2009 4:15PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
On Tue, Jan 27, 2009 at 7:36 PM, Moore, Michael
< = EMAIL ADDRESS REMOVED = > wrote:
> <mike>
> Why do you hide the skip navigation link? How do people who do not use a
> screen reader but rely on tab navigation because they cannot use a mouse
> get to it?</mike>
You can use css focus attributes to show the skip link when using
keyboard navigation, Ithink the wasp site used it and a write up or an
example... 1 sec...
http://www.webstandards.org/
(press tab a few times)
ben
--
Ben Morrison
From: ben morrison
Date: Tue, Jan 27 2009 4:20PM
Subject: Re: How best to code "hidden" headings?
← Previous message | Next message →
On Tue, Jan 27, 2009 at 6:50 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> I use the WebAim method on all of my sites and it works well. I use it to
> replace the name of my site with a logo image, hide the skip navigation
> link, and to hide the occasional form label. The only thing it doesn't work
> with is legends.
You can use a span inside a legend and position that offscreen...
ben
--
Ben Morrison
From: Jens Meiert
Date: Wed, Jan 28 2009 4:50AM
Subject: Re: How best to code "hidden" headings?
← Previous message | No next message
> however these techniques do collide with guidelines from a few
> search engines [2,3].
This is just a fact (that me, I neither judge, deny, confirm, or
comment in any way). Inevitably, there is some "conflict of interest"
when it comes to hiding content. Also consider that there's a
difference between saying and doing.
--
Jens Meiert
http://meiert.com/en/