nav标签内的ul元素是否需要添加aria-label属性？

问题代码 #

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

测试情况 #

• 自动无障碍测试工具提示：No accessible text was found
• 屏幕阅读器播报内容：Entered navigation - List with 4 items

解答 #

不需要给该<ul>元素添加aria-label="Navigation links"，原因如下：

• 外层的<nav>是语义化标签，屏幕阅读器已经能识别这是导航区域，播报里的“Entered navigation”已经明确了这个区域的用途，内部列表的上下文足够清晰。
• 测试工具的提示属于误判，<nav>本身就具备无障碍语义标识能力，足以覆盖内部列表的上下文说明需求。
• 如果页面存在多个导航区域（比如主导航、侧边导航、页脚导航），可以给<nav>添加aria-label（例如aria-label="主导航"）来区分不同导航的功能，但单导航场景下这也不是必须操作。

内容的提问来源于stack exchange，提问作者Shtole