E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 19 (In chronological order)

From: Dave Merrill
Date: Mon, Apr 22 2013 8:28AM
Subject: Best way to hide headings from visual users while keeping them in the outline
No previous message | Next message →

It looks to me like people are sometimes going to want to create headings
that visual users don't see, but that are part of the outline.

The most common example I've seen is a set of headings that group links in
the footer. Without a dedicated heading "containing" them, they end up
randomly attached to the last higher-level header in the page body,
not appropriate That "container" heading isn't needed for visual users,
but should be part of the outline, so they're grouped under it.

What's the best way to accomplish this so it plays well with assistive
technologies? The obvious CSS would be:

- display:none on the element itself
- the same in a CSS class applied to the element
- position:absolute; left: -2000px or top:-2000px applied to the element
- the same in a CSS class applied to the element

Does it make a difference to readers etc which way that's done? Is there
some better way?

Do readers try to be smart and ignore outline elements that are hidden
visually? Do all those techniques get picked up as hidden?

Thanks,
--
Dave Merrill

From: Jared Smith
Date: Mon, Apr 22 2013 8:38AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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

From: Dave Merrill
Date: Mon, Apr 22 2013 8:47AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

I don't think that container heading has to be visible to readers as text,
but it should be part of the outline. Do readers typically leave hidden
content out of the outline?

Thanks,
Dave Merrill


On Mon, Apr 22, 2013 at 10:38 AM, Jared Smith < = EMAIL ADDRESS 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

From: Birkir R. Gunnarsson
Date: Mon, Apr 22 2013 8:52AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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 ADDRESS 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
> > > >

From: Birkir R. Gunnarsson
Date: Mon, Apr 22 2013 8:54AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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
>> >> >> >>
>

From: Jared Smith
Date: Mon, Apr 22 2013 8:55AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

On Mon, Apr 22, 2013 at 8:47 AM, Dave Merrill wrote:
> Do readers typically leave hidden content out of the outline?

It depends on how it is hidden. If display:none or visibility:hidden,
etc. is used, it is removed from the document altogether. If it's
hidden off-screen or with CSS clip, then all of the semantics of that
element remain intact. An heading that is visually hidden off-screen
would still be part of the outline, appear in the heading list, be
navigable, etc., as if it weren't hidden at all.

Jared

From: Dave Merrill
Date: Mon, Apr 22 2013 8:59AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

Would elements set up this way be part of the actual outline though? My
understanding from the screen reader users survey is that the outline is a
one of the major ways of navigating through a page. (New to accessibility,
not my primary focus, as you can tell.)

Dave Merrill


On Mon, Apr 22, 2013 at 10:52 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS 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 ADDRESS 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

From: Dave Merrill
Date: Mon, Apr 22 2013 9:01AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

The offscreen behavior seems perfect, just what I was looking for.


On Mon, Apr 22, 2013 at 10:55 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Mon, Apr 22, 2013 at 8:47 AM, Dave Merrill wrote:
> > Do readers typically leave hidden content out of the outline?
>
> It depends on how it is hidden. If display:none or visibility:hidden,
> etc. is used, it is removed from the document altogether. If it's
> hidden off-screen or with CSS clip, then all of the semantics of that
> element remain intact. An heading that is visually hidden off-screen
> would still be part of the outline, appear in the heading list, be
> navigable, etc., as if it weren't hidden at all.
>
> Jared
> > > >



--
Dave Merrill

From: Birkir R. Gunnarsson
Date: Mon, Apr 22 2013 9:06AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

Dave

If you have the time and are not afraid *blink*
download NVDA
http://www.nvda-project.org
You can go to "preferences" "speech" and set speech out put to "none",
then the text the screen reader would speak appears visually in a
window.
Then use h or shift-h to navigate to next or previous heading on a
page, regardless of its level.
Use keys 1 through 6 in the top row of your qwerty keyboard to go to
next heading of that level.
One caviat.
If you have
h1
h2
h1
h3

You can only get to the h3 by going to th second h1 heading first.
Most screen readers only look at current level or higher. Once you get
to a heading of same level or lower, they stop searching.
You can use the "d" key to jump between aria landmarks on a page.
I think 20 mins of playing with it will give you an insight into how
it works for navigation pruposes. I know you may not have the time, no
problem, but I just wanted to suggest the idea to ya.
-B

On 4/22/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
> The offscreen behavior seems perfect, just what I was looking for.
>
>
> On Mon, Apr 22, 2013 at 10:55 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
>> On Mon, Apr 22, 2013 at 8:47 AM, Dave Merrill wrote:
>> > Do readers typically leave hidden content out of the outline?
>>
>> It depends on how it is hidden. If display:none or visibility:hidden,
>> etc. is used, it is removed from the document altogether. If it's
>> hidden off-screen or with CSS clip, then all of the semantics of that
>> element remain intact. An heading that is visually hidden off-screen
>> would still be part of the outline, appear in the heading list, be
>> navigable, etc., as if it weren't hidden at all.
>>
>> Jared
>> >> >> >>
>
>
>
> --
> Dave Merrill
> > > >

From: Dave Merrill
Date: Mon, Apr 22 2013 9:18AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

Thanks for the encouragement to do that. I downloaded it a bit ago, and
while time is an issue, my bigger worry was whether it would have other
effects on my system, and whether uninstalling it would likely succeed and
do a complete job. I need this machine, for work as well as personal use,
so I simply cannot afford to destabilize it in any significant way. That's
me being paranoid I know, but what you really care about you safeguard...

Is it people's experience that NVDA is pretty unintrusive once installed?
Would I be better of creating a portable install on a usb stick, which
looks to be possible?

Thanks,
Dave Merrill


On Mon, Apr 22, 2013 at 11:06 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Dave
>
> If you have the time and are not afraid *blink*
> download NVDA
> http://www.nvda-project.org
> You can go to "preferences" "speech" and set speech out put to "none",
> then the text the screen reader would speak appears visually in a
> window.
> Then use h or shift-h to navigate to next or previous heading on a
> page, regardless of its level.
> Use keys 1 through 6 in the top row of your qwerty keyboard to go to
> next heading of that level.
> One caviat.
> If you have
> h1
> h2
> h1
> h3
>
> You can only get to the h3 by going to th second h1 heading first.
> Most screen readers only look at current level or higher. Once you get
> to a heading of same level or lower, they stop searching.
> You can use the "d" key to jump between aria landmarks on a page.
> I think 20 mins of playing with it will give you an insight into how
> it works for navigation pruposes. I know you may not have the time, no
> problem, but I just wanted to suggest the idea to ya.
> -B
>
> On 4/22/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
> > The offscreen behavior seems perfect, just what I was looking for.
> >
> >
> > On Mon, Apr 22, 2013 at 10:55 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> On Mon, Apr 22, 2013 at 8:47 AM, Dave Merrill wrote:
> >> > Do readers typically leave hidden content out of the outline?
> >>
> >> It depends on how it is hidden. If display:none or visibility:hidden,
> >> etc. is used, it is removed from the document altogether. If it's
> >> hidden off-screen or with CSS clip, then all of the semantics of that
> >> element remain intact. An heading that is visually hidden off-screen
> >> would still be part of the outline, appear in the heading list, be
> >> navigable, etc., as if it weren't hidden at all.
> >>
> >> Jared
> >> > >> > >> > >>
> >
> >
> >
> > --
> > Dave Merrill
> > > > > > > >
> > > >



--
Dave Merrill

From: Birkir R. Gunnarsson
Date: Mon, Apr 22 2013 10:12AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

Hi

Unlike other screen readers, NVDA does not hook into your display
drivers (well, this used to be the case, Windows 8 is changing that,
therefore causing a significant rewrite for a lot of assistive
technology vendors).
NVDA does not require admin privelleges.
I have never experienced NVDA causing any type of stability issues
(which is more than I can say for some other products).
I have run it on XP/Win 7 32 and 64-bit and Win 8, for over 3 years now.

A portable NVDA install can also be created easily, if you feel it is better.
In my experience, NVDA is perfectly save to install ona work machine
and I have never had issues, but of course I can never guarantee
anything like that 100% (nor can anyone), but I would be extremely
surprised if you saw any adverse effects, you would be the first that
I know.
NVDA does work optimally with Firefox, though it does work with IE and
Chrome (there are some smaller issues where some of NVDA's navigation
features or other internet-related functionality do not work 100% in
these combinations).
Cheers
-B

On 4/22/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks for the encouragement to do that. I downloaded it a bit ago, and
> while time is an issue, my bigger worry was whether it would have other
> effects on my system, and whether uninstalling it would likely succeed and
> do a complete job. I need this machine, for work as well as personal use,
> so I simply cannot afford to destabilize it in any significant way. That's
> me being paranoid I know, but what you really care about you safeguard...
>
> Is it people's experience that NVDA is pretty unintrusive once installed?
> Would I be better of creating a portable install on a usb stick, which
> looks to be possible?
>
> Thanks,
> Dave Merrill
>
>
> On Mon, Apr 22, 2013 at 11:06 AM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Dave
>>
>> If you have the time and are not afraid *blink*
>> download NVDA
>> http://www.nvda-project.org
>> You can go to "preferences" "speech" and set speech out put to "none",
>> then the text the screen reader would speak appears visually in a
>> window.
>> Then use h or shift-h to navigate to next or previous heading on a
>> page, regardless of its level.
>> Use keys 1 through 6 in the top row of your qwerty keyboard to go to
>> next heading of that level.
>> One caviat.
>> If you have
>> h1
>> h2
>> h1
>> h3
>>
>> You can only get to the h3 by going to th second h1 heading first.
>> Most screen readers only look at current level or higher. Once you get
>> to a heading of same level or lower, they stop searching.
>> You can use the "d" key to jump between aria landmarks on a page.
>> I think 20 mins of playing with it will give you an insight into how
>> it works for navigation pruposes. I know you may not have the time, no
>> problem, but I just wanted to suggest the idea to ya.
>> -B
>>
>> On 4/22/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
>> > The offscreen behavior seems perfect, just what I was looking for.
>> >
>> >
>> > On Mon, Apr 22, 2013 at 10:55 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>> >
>> >> On Mon, Apr 22, 2013 at 8:47 AM, Dave Merrill wrote:
>> >> > Do readers typically leave hidden content out of the outline?
>> >>
>> >> It depends on how it is hidden. If display:none or visibility:hidden,
>> >> etc. is used, it is removed from the document altogether. If it's
>> >> hidden off-screen or with CSS clip, then all of the semantics of that
>> >> element remain intact. An heading that is visually hidden off-screen
>> >> would still be part of the outline, appear in the heading list, be
>> >> navigable, etc., as if it weren't hidden at all.
>> >>
>> >> Jared
>> >> >> >> >> >> >> >>
>> >
>> >
>> >
>> > --
>> > Dave Merrill
>> > >> > >> > >> >
>> >> >> >>
>
>
>
> --
> Dave Merrill
> > > >

From: David Farough
Date: Mon, Apr 22 2013 10:23AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

I agree with Birkir, NVDA is about as safe an option as you could find,
It does seem a bit flakey if you are using Internet explorer 8 which is
currently our default browser where I work. I just use it with firefox
which does work well.


David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779

From: Dave Merrill
Date: Mon, Apr 22 2013 10:56AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

Thanks for the encouragement Birkir and David, I'll give it a run when I
can free up some time.

Of course the real problem is that readers behave differently from each
other, and differently with different browsers, so whatever I learn is all
a bit mushy. That said, some actual experience is no doubt better for me
than none.

Dave Merril


On Mon, Apr 22, 2013 at 12:23 PM, David Farough < = EMAIL ADDRESS REMOVED =
> wrote:

> I agree with Birkir, NVDA is about as safe an option as you could find,
> It does seem a bit flakey if you are using Internet explorer 8 which is
> currently our default browser where I work. I just use it with firefox
> which does work well.
>
>
> David Farough
> Application Accessibility Coordinator/coordonateur de l'accessibilité
> Information Technology Services Directorate /
> Direction des services d'information technologiques
> Public Service Commission / Commission de la fonction publique
> Email / Courriel: = EMAIL ADDRESS REMOVED =
> Tel. / Tél: (613) 992-2779
>
> >
> This e-mail message is intended for the named recipient(s) and may
> contain information that is privileged, confidential and/or exempt from
> disclosure under applicable law. Unauthorized disclosure, copying or
> re-transmission is prohibited. If you are not a named recipient or not
> authorized by the named recipient(s), or if you have received this
> e-mail in error, then please notify the sender immediately and delete
> the message and any copies.
> >
> Ce courriel est destiné exclusivement au destinataire mentionné en titre
> et peut contenir de l'information privilégiée, confidentielle ou
> soustraite à la communication aux termes des lois applicables. Toute
> divulgation non autorisée, toute reproduction ou réacheminement est
> interdit. Si vous n'êtes pas le destinataire de ce courriel, ou n'êtes
> pas autorisé par le destinataire visé, ou encore, si vous l'avez reçu
> par erreur, veuillez le mentionner immédiatement à l'expéditeur et
> supprimer le courriel et les copies.
>
> > > >



--
Dave Merrill

From: Birkir R. Gunnarsson
Date: Mon, Apr 22 2013 11:05AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

NVDA usually behaves closest to spec (other screen readers, like Jaws,
ttry different coping strategies if markup is not what they expected,
it is imperfect markup combined with screen reader guessing algorithms
that usually create the most confusion).
I know it sounds like screen readers interpret a lot of things vastly
differently.
In practice the difference is not as terrible as you might think, and
it mostly arises when the spec is vague, features are brand new
(html5) or coding is not good (prompting assistive technology to start
guessing).
The situation is, by no means, perfect, but I think one can easily end
up thinking the situation is worse than it is after some of our
speculations on this list, after all we like to push things and tests
all manner of complex things.
Also there is some responsibility on behalf of A.T. manufacturers to
try and implement solutions according to standards, so occasionally
the blame has to lie with them, and they have to update, upgrade, and
fix issues that come up.
We must all respect the standards, else they end up being somewhat pointless.


On 4/22/13, Dave Merrill < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks for the encouragement Birkir and David, I'll give it a run when I
> can free up some time.
>
> Of course the real problem is that readers behave differently from each
> other, and differently with different browsers, so whatever I learn is all
> a bit mushy. That said, some actual experience is no doubt better for me
> than none.
>
> Dave Merril
>
>
> On Mon, Apr 22, 2013 at 12:23 PM, David Farough
> < = EMAIL ADDRESS REMOVED =
>> wrote:
>
>> I agree with Birkir, NVDA is about as safe an option as you could find,
>> It does seem a bit flakey if you are using Internet explorer 8 which is
>> currently our default browser where I work. I just use it with firefox
>> which does work well.
>>
>>
>> David Farough
>> Application Accessibility Coordinator/coordonateur de l'accessibilité
>> Information Technology Services Directorate /
>> Direction des services d'information technologiques
>> Public Service Commission / Commission de la fonction publique
>> Email / Courriel: = EMAIL ADDRESS REMOVED =
>> Tel. / Tél: (613) 992-2779
>>
>> >
>> This e-mail message is intended for the named recipient(s) and may
>> contain information that is privileged, confidential and/or exempt from
>> disclosure under applicable law. Unauthorized disclosure, copying or
>> re-transmission is prohibited. If you are not a named recipient or not
>> authorized by the named recipient(s), or if you have received this
>> e-mail in error, then please notify the sender immediately and delete
>> the message and any copies.
>> >
>> Ce courriel est destiné exclusivement au destinataire mentionné en titre
>> et peut contenir de l'information privilégiée, confidentielle ou
>> soustraite à la communication aux termes des lois applicables. Toute
>> divulgation non autorisée, toute reproduction ou réacheminement est
>> interdit. Si vous n'êtes pas le destinataire de ce courriel, ou n'êtes
>> pas autorisé par le destinataire visé, ou encore, si vous l'avez reçu
>> par erreur, veuillez le mentionner immédiatement à l'expéditeur et
>> supprimer le courriel et les copies.
>>
>> >> >> >>
>
>
>
> --
> Dave Merrill
> > > >

From: Dave Merrill
Date: Mon, Apr 22 2013 11:52AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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

From: Bryan Garaventa
Date: Mon, Apr 22 2013 5:27PM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > >

From: Dave Merrill
Date: Tue, Apr 23 2013 5:03AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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

From: Birkir R. Gunnarsson
Date: Tue, Apr 23 2013 6:12AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > > >

From: Bryan Garaventa
Date: Tue, Apr 23 2013 10:43AM
Subject: Re: Best way to hide headings from visual users while keeping them in the outline
← Previous message | No next message

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
> > >