WebAIM - Web Accessibility In Mind

E-mail List Archives

Best way to hide headings from visual users while keeping them in the outline

for

From: Dave Merrill
Date: Apr 22, 2013 8:28AM

It looks to me like people are sometimes going to want to create headings
that visual users don't see, but that are part of the outline.

The most common example I've seen is a set of headings that group links in
the footer. Without a dedicated heading "containing" them, they end up
randomly attached to the last higher-level header in the page body,
not appropriate That "container" heading isn't needed for visual users,
but should be part of the outline, so they're grouped under it.

What's the best way to accomplish this so it plays well with assistive
technologies? The obvious CSS would be:

- display:none on the element itself
- the same in a CSS class applied to the element
- position:absolute; left: -2000px or top:-2000px applied to the element
- the same in a CSS class applied to the element

Does it make a difference to readers etc which way that's done? Is there
some better way?

Do readers try to be smart and ignore outline elements that are hidden
visually? Do all those techniques get picked up as hidden?

Thanks,
--
Dave Merrill