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: Robert Fentress
Date: Jul 23, 2018 8:51AM

So is the issue with the Farmers <http://farmers.gov>; page the repetitive
use of the phrase "navigation," especially as things are surfaced in NVDA?

That raises another issue in my mind, which is whether to use the phrase
"navigation" in labels for `<nav>` regions. To me, this seems duplicative
as well. If you are using a navigation region, then screen readers will
surface something like the phrase "navigation" anyway, so it seems kinda
pointless. It sort of like providing alt text for an image that says
"Image of a person on a bicycle," rather than, "Person on a bicycle." That
is why, rather than label my site navigation "Site Navigation", I'm
labelling it "Site". But, then, I'm using aria-label, which is one of the
arguments for using it. If you used aria-labelledby, you'd have to do
something more involved to avoid that extra noise, like this: `<h2><span
id="label">Site</span> Navigation</h2>`. I mean, I guess that's not a big
deal, but it seems less than ideal somehow.

On a separate note, I see the Farmers page has nested `<nav>` regions.
Functional
Accessibility Evaluator <https://fae.disability.illinois.edu/> flags things
like this as errors
<https://fae.disability.illinois.edu/pages/164c7921ad31c31b/rc/landmarks/page/1/landmark10/>,
though I haven't been able to find anything in any specs that supports
this. Other checkers don't seem to flag it either. Is this an error, a
best practice violation, or neither? Opinions? Why is this problematic,
aside from the best practice of not having too many navigation regions in
general?

On Mon, Jul 23, 2018 at 10:09 AM Meacham, Steve - FSA, Kansas City, MO <
<EMAIL REMOVED> > wrote:

> 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>
> > > at http://webaim.org/discussion/archives
> >
>
>
>
> 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.
> > > > >


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