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 23, 2013 10:43AM

Yes, it can have nested tags, but you should only use role=heading on
containers that could reasonably be considered to be section headings.

As Birkir mentioned, you could use role=region combined with aria-label to
group related content panels as an alternative.

E.G

<div role="region" aria-label="License">
... License content goes here ...
</div>


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


> Thanks for clarifying.
>
> Is it ok to label a content container with role="heading" when it contains
> not just plain text, but child divs, spans, etc, whose eventual text
> content is the desired heading? Or does it really need to be plain text?
>
> (I had literally a few minutes to try out NVDA last night. Frankly, it
> spoke so much it was hard to deal with. On a few web pages I tried that
> weren't designed for accessibility, it started reading off every link on
> the page, way too much. I can see how intentional design in this area is
> very necessary. I felt like a wimp in this new world. Need more time to
> get
> acquainted.)
>
> Thanks,
> Dave Merrill
>
>
> On Mon, Apr 22, 2013 at 7:27 PM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> 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
>> > >> > >> > >>
>> >> >> >>
>
>
>
> --
> Dave Merrill
> > >