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:54AM

Readers typically honor display:none or vissibility:hidden, do not
read it at all.
If text or element is placed offscreen, readers genreally pick up on it.


On 4/22/13, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> 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
>> >> >> >>
>