WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hidden headings with aria-labelledby or just aria-label best for for labelling landmark regions?

for

From: Meacham, Steve - FSA, Kansas City, MO
Date: Jul 23, 2018 8:08AM

I've found that putting aria-label on a <nav> element can also be problematic. See farmers.gov for an example.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Robert Fentress
Sent: Monday, July 23, 2018 8:59 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Hidden headings with aria-labelledby or just aria-label best for for labelling landmark regions?

What are folks thoughts on using headings with landmark regions? For instance, I've seen people place a heading in a `<nav>` region and then use it as the label with `aria-labelledby` pointing to the IDREF of the heading. I used to do this, but the more I think about it, the less I like it. It seems better to me, somehow to reserve headings for content (like in `<main>` and possibly `<aside>`), and instead to just use `aria-label` for things that are more interface-related, like regions with the `navigation`, `search`, and `banner` roles.

A good rule of thumb might be, that if there is a visible heading, use that to label the region with `aria-labelledby`. If not, that is probably a good sign that `aria-label` is more appropriate.

One of the reasons why using hidden headings seems wrong is that it makes things more noisy. Screen readers will voice both the region label when the user enters the region, and the heading itself when they get to that.

Then, there is the related issue of whether the headings should just be visually hidden or removed using `display:none`. Only hiding them visibly means screen reader users can still use the heading navigation affordances, at the cost of that duplicative voicing. Hiding them from everyone with `display:none` gets around that, but then the only thing this buys you is the ability to navigate by heading should CSS be turned off altogether. Of course, these days, turning off CSS altogether will likely make your site go all fubar anyway.

Thoughts?

Best,
Rob

--
*Rob Fentress*
*Web Accessibility Solutions Designer*
Accessible Technologies at Virginia Tech Electronic Business Card (vCard) <http://search.vt.edu/search/person.vcf?person=1154847>;
LinkedIn Profile
<https://www.linkedin.com/in/rob-fentress-aa0b609?trk=profile-badge>
VT Zoom Personal Conferencing <https://virginiatech.zoom.us/my/rob.fentress>
This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.