如何解决Bootstrap v5站点中Logo与Home导航的冗余链接无障碍告警？

针对你遇到的Logo与Home链接触发WAVE冗余告警的问题，先逐个分析你提出的方案利弊，再给出更平衡的可行方案：

现有方案分析 #

• 方案1：移除Logo链接：违背通用UI最佳实践，很多用户（包括低视力无障碍用户）已习惯点击Logo返回首页，移除链接会降低整体可用性，不推荐。
• 方案2：移除Home链接：对依赖文本导航的屏幕阅读器用户不友好，这类用户可能无法识别Logo的跳转功能，会导致找不到明确的首页入口，不可取。
• 方案3：合并为单个链接：完全可行，Bootstrap可轻松适配移动端和桌面端，下面会给出具体实现。
• 方案4：忽略告警：虽然是提示级告警，但冗余链接会让屏幕阅读器用户重复听到相同的跳转目标，增加操作负担，建议处理。

推荐方案一：保留视觉布局，隐藏单个链接的无障碍语义 #

这是最轻量化的解决方案，无需修改UI布局，只需给其中一个链接添加aria-hidden="true"，让屏幕阅读器只识别一个有效链接：

实现代码（推荐版） #

<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
    <div class="container">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 给Logo链接添加aria-hidden，屏幕阅读器忽略，但保留点击功能 -->
        <a class="navbar-brand" href="/" aria-hidden="true">
            <img src="/Images/company_logo.png" alt="Company logo">
        </a>
        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

反向实现（适合更依赖Logo导航的场景） #

如果希望屏幕阅读器优先识别Logo链接，可给Home链接添加aria-hidden="true"，同时修改Logo的alt文本明确跳转目标：

<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
    <div class="container">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">
            <img src="/Images/company_logo.png" alt="Home - Company logo">
        </a>
        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link active" href="/" aria-hidden="true">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

推荐方案二：合并为单个语义链接，适配全端布局 #

如果你希望从语义上彻底消除冗余，可将Logo与Home链接合并为一个，通过Bootstrap的响应式类适配移动端和桌面端：

<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
    <div class="container">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 移动端单独显示Logo链接 -->
        <a class="navbar-brand d-lg-none" href="/" aria-label="Home">
            <img src="/Images/company_logo.png" alt="Company logo">
        </a>
        <div class="collapse navbar-collapse" id="navbarToggler">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <!-- 桌面端将Logo嵌入Home链接 -->
                    <a class="nav-link active d-flex align-items-center" href="/">
                        <img src="/Images/company_logo.png" alt="Company logo" class="d-none d-lg-block me-2">
                        Home
                    </a>
                </li>
                <li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

逻辑说明 #

• 桌面端（lg及以上）：Logo显示在Home文本左侧，属于同一个链接，保持传统导航栏布局。
• 移动端：单独显示Logo链接（符合移动端导航习惯），折叠菜单里只显示Home文本，避免重复。

总结 #

方案一是最推荐的选择：既能保留所有用户的操作习惯（视觉用户可点击Logo或Home），又能消除无障碍工具的冗余告警，同时无需大幅修改代码或UI布局。

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