WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Robert Fentress
Date: Jul 23, 2018 7:58AM

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>