WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Visibly hidden headings to label regions and landmarks

for

From: Max Starkenburg
Date: Sep 2, 2020 10:49AM


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 REMOVED>
https://maxwell.fyi


On Wed, Sep 2, 2020 at 11:58 AM Max Starkenburg < <EMAIL 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 REMOVED>
> https://maxwell.fyi
>
>
> On Tue, Sep 1, 2020 at 8:37 PM David Engebretson Jr. <
> <EMAIL 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
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Murphy, Sean
>> Sent: Tuesday, September 01, 2020 4:30 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Visibly hidden headings to label regions and
>> landmarks
>>
>> 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
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Vaibhav Saraf
>> Sent: Wednesday, 2 September 2020 3:47 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: [WebAIM] Visibly hidden headings to label regions and landmarks
>>
>> [External Email] This email was sent from outside the organisation – be
>> cautious, particularly with links and attachments.
>>
>> 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
>> >> >> at http://webaim.org/discussion/archives
>> >> >> >> at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >>
>