WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Apr 22, 2013 8:52AM

One option to be aware of, though it only works for screen readers.
You can make an element such as a paragraph ora div into a heading by using ARIA
use attributes role="heading" aria-level="a value from 1 to 6".
This way screen readers interpret the element as a heading (with level
indicated by the level attribute), but visually or ssemantically it is
not a heading otherwise.
see
http://www.w3.org/TR/wai-aria/roles#heading
(aria headings)
Cheers
-B

On 4/22/13, Jared Smith < <EMAIL REMOVED> > wrote:
> http://webaim.org/techniques/css/invisiblecontent/
>
> This provides a pretty good summary of the techniques. There is also a
> newer CSS clip technique that is being used that works similar to
> off-screen content. The key is that display:none or visibility:hidden
> will (usually) hide content from all users, including screen reader
> users.
>
> It doesn't matter if the styles are applied directly (inline) or via a
> class.
>
> Jared
> > > >