E-mail List Archives
Thread: Visibly hidden headings to label regions and landmarks
Number of posts in this thread: 11 (In chronological order)
From: Vaibhav Saraf
Date: Tue, Sep 01 2020 11:46AM
Subject: Visibly hidden headings to label regions and landmarks
No previous message | Next message →
Hi Everyone,
I have observed that many of the developers associate the visibly hidden
headings with the page regions mostly with the use of aria-labelled-by
attribute. So they will be announced to the screen reader as, for instance,
navigation landmark (+) heading label (+) heading level. Many of the
Google's websites extensively use this approach.
I have also seen another implementation where the first element inside a
region is a visibly hidden heading. They aren'y programmatically associated
in the case. They work exactly the same with NVDA and JAWS as in the first
case. My friend told me that this approach will face badly with VoiceOver,
I have never used VO so seeking information about the same.
How well is the thought of providing the label as a heading, what I prefer
is that labelling should be done using 'aria-label' attribute and headings
probably should be available to all. However this approach looks good as
long it serves a pleasant experience to most combinations of browser and
SRs.In my understanding WCAG has no direct emphasis around the topic I want
to discuss or probably I am not able to understand it. I seek your opinion
about the scenario.
Thanks,
Vaibhav
From: Murphy, Sean
Date: Tue, Sep 01 2020 5:29PM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
From a screen reader point of view. I see this as screen noise. If I have a region with the exact name as the heading, which is the next line. Then there is no added value due to both elements are page section components. This is over usage of aria when it is not required.
If it actually fails a SC. This time of morning, I cannot recall our internal discussions on this point. As we have had them. My guidance is to use one or the other. As you don't need to have headings on a page if they are visually design that way. If you have headings visually designed, then you don't need the region section.
Sean
Regards
Sean Murphy
Sean Murphy | Senior Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917
Digital Systems Launch Page
Accessibility Single source of Truth
From: Birkir R. Gunnarsson
Date: Tue, Sep 01 2020 5:49PM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
Technically, landmarks and headings are two different things:
* A landmark describes areas of the page (or screen), regardless of content
* A heading labels and describes the structure of the content on the page
Ideally users should be able to navigate successfully by either.
Unfortunately, labeled regions are spoken in context of navigation,
thus making heading navigation irritatingly verbose.
Keep in mind that landmarks only need accessible names if there are
multiple instances of the same landmark region on the page (banner,
main and contentinfo should never have an accessible name).
There is no strong WCAG SC that governs this scenario, (other than
4.1.2 if a landmark region requires an accessible name, you can look
that up in the landmark roles section of the ARIA spec).
It's been a 12-hour day so I just can't bother looking it up in the
spec today, though I might be able to muster up the courage tomorrow.
For each role definition, look in the characteristics table at the
bottom of the definition and see if it has an accessible name required
entry.
On 9/1/20, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
> From a screen reader point of view. I see this as screen noise. If I have a
> region with the exact name as the heading, which is the next line. Then
> there is no added value due to both elements are page section components.
> This is over usage of aria when it is not required.
>
>
> If it actually fails a SC. This time of morning, I cannot recall our
> internal discussions on this point. As we have had them. My guidance is to
> use one or the other. As you don't need to have headings on a page if they
> are visually design that way. If you have headings visually designed, then
> you don't need the region section.
>
> Sean
>
> Regards
> Sean Murphy
>
>
>
> Sean Murphy | Senior Digital System specialist (Accessibility)
> Telstra Digital Channels | Digital Systems
> Mobile: 0405 129 739 | Desk: (02) 9866-7917
> Digital Systems Launch Page
> Accessibility Single source of Truth
>
>
From: David Engebretson Jr.
Date: Tue, Sep 01 2020 6:38PM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
I think using region naming and a visibly hidden heading directly after the region naming as a great way to make sure that folks who navigate by headings, and folks who navigate by regions, will get equal structural information as to the regions that make up the web page.
It might be "noisy" to a screen reader user who is navigating by arrow keys but I don't think, and the screen reader survey seems to agree statistically, that all screen reader users navigate pages in the same way. Personally I know that regions should give me a quick glimpse of the visual sections of the page and headings should give me context to the textual content of the page, but I don't think most of us screen reader users are as savvy as those of us in the web accessibility field.
The more opportunity for equal access the better, in my opinion.
Best,
David
From: Murphy, Sean
Date: Wed, Sep 02 2020 3:47AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
David,
Not many users from my experience know how to navigate by regions or understand the concept. If there is solid research proving this otherwise, please share.
Regards
Sean Murphy
Sean Murphy | Senior Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917
Digital Systems Launch Page
Accessibility Single source of Truth
From: Steve Green
Date: Wed, Sep 02 2020 4:01AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
That's been my experience in our user testing. I am certain no one has ever used regions to navigate and I don't even remember people commenting on them. I suspect they are only used by the top few percent of the most proficient and technologically aware screen reader users, but we intentionally exclude people like that from most of our user testing projects.
Steve Green
Managing Director
Test Partners Ltd
From: Birkir R. Gunnarsson
Date: Wed, Sep 02 2020 4:16AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
Our (admittedly limited) user testing backs that up, which is why I
only focus on marking header, main and footer as landmarks, rest is,
well, technically nice but practically doesn't do much, and too many
landmarks are confusing in any case.
On 9/2/20, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> That's been my experience in our user testing. I am certain no one has ever
> used regions to navigate and I don't even remember people commenting on
> them. I suspect they are only used by the top few percent of the most
> proficient and technologically aware screen reader users, but we
> intentionally exclude people like that from most of our user testing
> projects.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
>
From: Vaibhav Saraf
Date: Wed, Sep 02 2020 5:08AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
>On 9/2/20, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> That's been my experience in our user testing. I am certain no one has
ever
> used regions to navigate and I don't even remember people commenting on
> them. I suspect they are only used by the top few percent of the most
> proficient and technologically aware screen reader users, but we
> intentionally exclude people like that from most of our user testing
So this actually looks to be a good idea from user experience point of
view. Also this piece of knowledge is fascinating to me, what I first
learnt was to navigate through landmarks.
Thanks all for the insights!!
On Wed, 2 Sep 2020 at 15:46, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> Our (admittedly limited) user testing backs that up, which is why I
> only focus on marking header, main and footer as landmarks, rest is,
> well, technically nice but practically doesn't do much, and too many
> landmarks are confusing in any case.
>
> On 9/2/20, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> > That's been my experience in our user testing. I am certain no one has
> ever
> > used regions to navigate and I don't even remember people commenting on
> > them. I suspect they are only used by the top few percent of the most
> > proficient and technologically aware screen reader users, but we
> > intentionally exclude people like that from most of our user testing
> > projects.
> >
> > Steve Green
> > Managing Director
> > Test Partners Ltd
> >
> >
> >
From: Jared Smith
Date: Wed, Sep 02 2020 8:24AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
Data on region/landmark navigation: https://webaim.org/projects/screenreadersurvey8/#landmarks
I would suggest having both regions and headings, but labeling the region with a heading is not advised because it results in unnecessary repetition. The clear exception would be when role="region" is in place, in which case it must have an ARIA label.
Jared
From: Max Starkenburg
Date: Wed, Sep 02 2020 9:58AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | Next message →
During a recent code review of a site change I was making, in which I was
trying to replace a use of a visually-hidden span used to label a region
via aria-labelledby (as presumably unnecessarily complex / redundant) with
aria-label, the reviewer brought up this article indicating that aria-label
values can get lost in translation
<https://adrianroselli.com/2019/11/aria-label-does-not-translate.html>
(whether when sending text to be translated or also by automatic browser
translation tools). Even though we don't translate the sites we work on, I
guess I wasn't feeling like put up much of a fight to avoid
the noise/redundancy others have mentioned in this thread (less justified
in our particular case, being in a span instead of heading), and could
concede that we do have many international students, some of whom might
possibly use automated translation tools on our sites.
Also putting this out there, for whatever it's worth: it seems that at
least some browser and screen reader combos, when navigating by heading,
will also announce to the user when they are newly entering or exiting
regions, so some users primarily navigating by headings (instead of
arrowing) might still get some noisy redundancy if a page has
visually-hidden headings in combination with aria-labelledby (e.g. I can
hear "entering *Site Menu* navigation, heading level two *Site Menu*" on a
page with such markup, in Edge with JAWS, though that admittedly doesn't
seem to be a commonly used combo).
Max
--
Maxwell M. Starkenburg
= EMAIL ADDRESS REMOVED =
https://maxwell.fyi
On Tue, Sep 1, 2020 at 8:37 PM David Engebretson Jr. <
= EMAIL ADDRESS REMOVED = > wrote:
> I think using region naming and a visibly hidden heading directly after
> the region naming as a great way to make sure that folks who navigate by
> headings, and folks who navigate by regions, will get equal structural
> information as to the regions that make up the web page.
>
> It might be "noisy" to a screen reader user who is navigating by arrow
> keys but I don't think, and the screen reader survey seems to agree
> statistically, that all screen reader users navigate pages in the same way.
> Personally I know that regions should give me a quick glimpse of the visual
> sections of the page and headings should give me context to the textual
> content of the page, but I don't think most of us screen reader users are
> as savvy as those of us in the web accessibility field.
>
> The more opportunity for equal access the better, in my opinion.
>
> Best,
> David
>
>
From: Max Starkenburg
Date: Wed, Sep 02 2020 10:49AM
Subject: Re: Visibly hidden headings to label regions and landmarks
← Previous message | No next message
Slight correction to my previous post. My code reviewer had actually linked
to these articles when requesting I revert my change that replaced
aria-labelledby with aria-label (not the one I linked to in my post, though
it overlaps in relevance):
aria-label is a xenophobe
<https://heydonworks.com/article/aria-label-is-a-xenophobe/> (by Heydon
Pickering), and
My Priority of Methods for Labeling a Control
<https://adrianroselli.com/2020/01/my-priority-of-methods-for-labeling-a-control.html>
(by Adrian
Roselli)
Max
--
Maxwell M. Starkenburg
= EMAIL ADDRESS REMOVED =
https://maxwell.fyi
On Wed, Sep 2, 2020 at 11:58 AM Max Starkenburg < = EMAIL ADDRESS REMOVED = >
wrote:
> During a recent code review of a site change I was making, in which I was
> trying to replace a use of a visually-hidden span used to label a region
> via aria-labelledby (as presumably unnecessarily complex / redundant) with
> aria-label, the reviewer brought up this article indicating that
> aria-label values can get lost in translation
> <https://adrianroselli.com/2019/11/aria-label-does-not-translate.html>
> (whether when sending text to be translated or also by automatic browser
> translation tools). Even though we don't translate the sites we work on, I
> guess I wasn't feeling like put up much of a fight to avoid
> the noise/redundancy others have mentioned in this thread (less justified
> in our particular case, being in a span instead of heading), and could
> concede that we do have many international students, some of whom might
> possibly use automated translation tools on our sites.
>
> Also putting this out there, for whatever it's worth: it seems that at
> least some browser and screen reader combos, when navigating by heading,
> will also announce to the user when they are newly entering or exiting
> regions, so some users primarily navigating by headings (instead of
> arrowing) might still get some noisy redundancy if a page has
> visually-hidden headings in combination with aria-labelledby (e.g. I can
> hear "entering *Site Menu* navigation, heading level two *Site Menu*" on
> a page with such markup, in Edge with JAWS, though that admittedly doesn't
> seem to be a commonly used combo).
>
> Max
> --
> Maxwell M. Starkenburg
> = EMAIL ADDRESS REMOVED =
> https://maxwell.fyi
>
>
> On Tue, Sep 1, 2020 at 8:37 PM David Engebretson Jr. <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> I think using region naming and a visibly hidden heading directly after
>> the region naming as a great way to make sure that folks who navigate by
>> headings, and folks who navigate by regions, will get equal structural
>> information as to the regions that make up the web page.
>>
>> It might be "noisy" to a screen reader user who is navigating by arrow
>> keys but I don't think, and the screen reader survey seems to agree
>> statistically, that all screen reader users navigate pages in the same way.
>> Personally I know that regions should give me a quick glimpse of the visual
>> sections of the page and headings should give me context to the textual
>> content of the page, but I don't think most of us screen reader users are
>> as savvy as those of us in the web accessibility field.
>>
>> The more opportunity for equal access the better, in my opinion.
>>
>> Best,
>> David
>>
>>