主页 / coding / 问题 / 79266321
Accepted
Shtole
Asked: 2024-12-10 04:04:59 +0800 CST

<nav> 中的 <ul> 是否需要 aria-label？

  • 772

我有以下代码：

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

自动可访问性测试工具显示一个问题：“未找到可访问的文本”，其叙述者子系统将其叙述为：“进入导航 - 包含 4 个项目的列表”。

我应该添加aria-label="Navigation links"到吗<ul>？

html

1 个回答

  1. Best Answer

    从技术上讲，不，WCAG 并不要求列表具有可访问的名称。此外，屏幕阅读器用户会听到列表位于导航地标中，因此在列表中添加“导航链接”这样的可访问名称实际上只是多余的信息，我不建议这样做。

    如果您要在此处添加可访问的名称，则应将其放在 nav 元素上。如果这是网站的主导航，那么您可能会将类似内容添加aria-label="main"到 nav 元素中。但是，如果页面上只有一个 nav 元素，并且它位于标题中，那么即使这样做也可能有些过头了。

    • 2

相关问题