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 23, 2013 6:12AM

Hi

If the container you speak of is itself a div, you may want to go the
aria-region route.
role="region" aria-label="Label for this container and its contents"
(unless one of the standard aria landmarks applies).
Of course one has to think carefully before feeling they have to hide
an entire aria of text and other controls visually but make it
available to screen readers, it is definitely a bit of a last resort
solution.

To stop speech in NVDA, press the ctrl key, I do that pretty much by
default in any screen reader.
A lot of novice users navigate either by arrow keys (just arrow down
through the website, i.e. through NVDA's virtual buffer document of
the website)
the tab key (of course then they only see focusable elements).
or bring all the links onthe website up in a listbox, usually in
alphabetical order (I think it is nvda key f7, though I don´t do this
much so I am not sure, incidentally on a laptop, set the NVDA key to
be capslock, it is in the global preferences dialog).

"e" jumps straight to the edit field and read its label.
b jumps to the next button
t to the next table (if any).

A quick NVDA exercise using Twitter:
You can try to go to, for instance, your Twitter page.

(http://www.twitter.com)
Try to get to the tweet timeline by pressing arrow down (until your
wrist starts hurting)
Alternatively, you can press 1, then 2, and you are at the beginning
of the timeline (there is an h1 heading, then the tweets themselves
are inside an h2 heading).
To get to the edit field to post a tweet you just have to press "e" twice.
An example of where, say, aria-descried by would be awesome can be
seen by going to the top of the Twitter page and press "b" a few
times.
There is a recommended list of users you may follow, each one has a
follow button that comes before their information (in html order).
If you only press "b" all you hear is "follow" "follow", you have no
idea who you are following unless you arrow down to see the info (and
you can be confused in the beginning, not being sure if the "follow"
button belongs with the text above it, or below it, only if you go to
the first user in the list do you realize the button comes before the
user info it belongs with).
NVDA should say "follow username" where username is the name of the
user, and if it were programmatically associated with its button.
Another problematic design is looking at your direct messages (there
are two issues mainly, one could be solved by aria-expanded, the other
has to do with html order), may be we'll leave that to you as an
exercise. ;)


That's enough to catch yor interest I think ;)
-B
Have fun.
-B

On 4/23/13, Dave Merrill < <EMAIL REMOVED> > wrote:
> 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
> > > >