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: Dave Merrill
Date: Apr 23, 2013 5:03AM

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