Início / coding / Perguntas / 79266321
Accepted
Shtole
Asked: 2024-12-10 04:04:59 +0800 CST

aria-label é necessário para <ul> em <nav>?

  • 772

Tenho o seguinte código:

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

Uma ferramenta de teste automático de acessibilidade mostra um problema: “Nenhum texto acessível foi encontrado” e seu subsistema narrador o narra assim: “Navegação inserida - Lista com 4 itens”.

Devo adicionar aria-label="Navigation links"ao <ul>?

html

1 respostas

  1. Best Answer

    Tecnicamente, não, o WCAG não exige que a lista tenha um nome acessível. Além disso, usuários de leitores de tela ouvirão que a lista está em um marco de navegação, então adicionar um nome acessível de "Links de navegação" à lista é realmente apenas uma informação redundante e eu não recomendaria isso.

    Se você fosse adicionar um nome acessível aqui, ele estaria no elemento nav. Se esta for a navegação principal do site, então você pode adicionar algo como aria-label="main"ao elemento nav. Mas se você tiver apenas um elemento nav na página, e ele estiver no cabeçalho, então até isso pode ser exagero.

    • 2

relate perguntas