WebAIM - Web Accessibility In Mind

E-mail List Archives

ARIA to distinguish sections with same HTML tag

for

From: Colleen Gratzer
Date: Jan 18, 2020 7:11AM

I wanted to confirm that aria-labelledby or aria-label can be used
interchangeably and ask, if in the following situation, one would be
better than the other.

Say I have a main nav and then a nav for blog pagination on a web page.
The code might be like this:

<nav aria-label="Main"> for the main/site navigation and <nav
aria-label="Blog"> for the blog pagination.

But I could also have for the blog:

<nav aria-labelledby="blog-heading">
<h2 class="screen-reader-text" id="blog-heading">Blog Navigation</h2>

(and then a list.)
Does it matter?

Thanks!

Colleen Gratzer
Certified Branding Expert + Accessibility Specialist, Gratzer Graphics LLC
https://gratzergraphics.com
Design Mentor and Host of the Design Domination podcast
http://creative-boost.com