I have the following code:
<nav class="navbar navbar-expand-md">
<div class="container px-0">
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#project1" class="nav-link">Project 1</a>
</li>
<li class="nav-item">
<a href="#project2" class="nav-link">Project 2</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
An automatic accessibility testing tool shows an issue: “No accessible text was found” and its narrator subsystem narrates it as this: “Entered navigation - List with 4 items”.
Should I add aria-label="Navigation links"
to the <ul>
?
Technically, no, WCAG does not require that the list has an accessible name. Furthermore, screen reader users are going to hear that the list is in a navigation landmark, so adding an accessible name of "Navigation links" to the list is really just redundant information and I would not recommend it.
If you were going to add an accessible name here, it would be on the nav element. If this is the main navigation for the site then you might add something like aria-label="main"
to the nav element. But if you only have one nav element on the page, and it is in the header, then even that might be overkill.