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: Bryan Garaventa
Date: Apr 22, 2013 5:27PM

Yes, this is true. If you add role=heading and set a level via aria-level
attribute, screen readers that support ARIA will see these elements as
headings, and work with them accordingly. For instance, you can use 'h' and
'shift+h' to jump between them, press 'insert+f6' in JAWS to bring them up
in the headings list, and so on.

The container does need to be screen reader accessible though, meaning that
it cannot be hidden using display:none or visibility:hidden. This does work
correctly if the container is positioned offscreen however, if you want to
hide it visually.

Some other safe ARIA attributes if you like, include aria-required as was
mentioned here earlier, which can be set on required form fields.
Additionally aria-describedby is also sometimes useful on form fields to
announce constraint information at times.

Also, if you are using an A tag with an Href attribute as a submit element
for form fields, adding role="button" will make this less confusing for
screen reader users, since a button is expected to submit forms.

The use of role=main can cause some weird content reading issues in JAWS
12/13 at times when form fields are involved, which can be circumvented by
using role=form on the container, which was pointed out by Steve Faulkner on
another list.
(http://www.html5accessibility.com/tests/div-landmark.html)

----- Original Message -----
From: "Dave Merrill" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, April 22, 2013 10:52 AM
Subject: Re: [WebAIM] Best way to hide headings from visual users while
keeping them in the outline


>I don't think I saw a response to my question about whether elements set up
> with role="heading" aria-level="2" would be part of the actual outline
> that
> a reader saw and offered as navigation points.
>
> Is that how it works?
>
> Dave Merrill
>
>
> On Mon, Apr 22, 2013 at 10:52 AM, 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
>> > >> > >> > >> >
>> >> >> >>
>
>
>
> --
> Dave Merrill
> > >