html - 能否通过 HTML 结构区分地标的重复使用？

Question

我通过 CMS 提供商管理的网站在大多数页面上都有两个 header 元素和两个导航元素。标题是顶部横幅，带有我们的 Logo 和主页内容的页面标题。导航元素是顶部导航和左侧导航。我用来标记可访问性问题的工具将这些标记为“不可区分的地标”，因为它们既没有“aria-label”也没有“aria-labelledby”。

联系我的 CMS 提供商，他们表示 html 的结构完全实现了区分地标。如果有其他 HTML 可以区分同一类元素的多个实例，那么它们就可以了。 ARIA 标签不是必需的，尽管有些人鼓励使用它们或发现它们更可取。

通过辅助工具提供支持，他们基本上重申了该工具所解释的内容，即需要咏叹调标签来区分重复的地标。

通过两名支持人员的工作，每个人都明确表示他们正在传递组织内另一名成员的信息以进行澄清，因此可能会丢弃某些信息。

为了便于阅读，以下内容经过编辑，但如果相关，我可以提供进一步的信息。

<div class="sitewrapper  site_template mainSpan_wrapper">
    <div class="mainSpan" id="mainSpan_wrapper_Screen">
        <!--stopindex-->
        <div id="skipnav" tabindex="-1">
            <a href="#sitebody" tabindex="-1">
                <img alt="Skip to page body" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>

            <a title="Home" href="/home" tabindex="-1">
                <img alt="Home" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>

            <a title="Services" href="/services" tabindex="-1">
                <img alt="Services" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>

            <a title="Departments" href="/departments" tabindex="-1">
                <img alt="Departments" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>

            <a title="About Us" href="/about-us" tabindex="-1">
                <img alt="About Us" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>

            <a title="I Want To..." href="/i-want-to-" tabindex="-1">
                <img alt="I Want To..." src="/DefaultContent/Default/_gfx/spacer.gif" /></a>

        </div>
        <!--startindex-->

        <header id="siteheader" class="">
            <!--stopindex-->
            <h1 class="wcag_only">My organization</h1>
            <a id="home_link" href="/home">Home</a>

            <a class="menu_trigger mobile_only" href="javascript:void(0);">Menu</a>
            .
            .
            .

        </header>
        <div class="standardthreecolumnlayout clearfix" id="sitebody">

            <div id="ColumnUserControl1" class="column   top_col clearfix  "  >
                <div class=" main_menu_widget">

                    <nav class="regularmegamenu mainnav" id="menuContainer_617_0_403">
                        <ul class="dropdownmenu clearfix">
                            <li class="megamenu_first" id="dropdownrootitem1"><a class="dropdownrootitem1" href="/home" title="Home" data-navid="1" target="_self">Home</a></li>
                            .
                            .
                            .
                        </ul>
                    </nav>
                </div>
            </div>


            <div id="ColumnUserControl2" class="column   left_col  "  >
                <nav id='leftNav_618_0_403' class='nocontent sidenav mobile_list vi-sidenav-desktop   '>
                    <h2 class="mobile_only mobile_header">Navigation Menu</h2>
                    .
                    .
                    .
                </nav>
            </div>

            <div class="column right_col">
                    <div class="column right_col">

                        <div id="ColumnUserControl3" class="column   banner_col clearfix  "  >


                            <a id="pagebody"></a>
                            <header id="widget_621_571_403" class="title_widget clearfix on_page " >

                                    <p class="breadcrumb">
                                                <a href="/departments">Departments</a> » <a href="/departments/human-resource">Human Resources</a> 
                                                .
                                                .
                                                .

我预计将需要 aria-labels，但可以使用一些专业知识来确定正确的方向。

Answer 1

我自己从未对此进行过测试，但根据 WCAG 文档，我想说它需要与 aria 相关的属性才能正确访问。

When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-label or aria-labelledby attribute.

来源:Technique H97: Grouping related links using the nav element

正如 H97 页面上提到的，这与履行 WCAG Success Criterion 1.3.1: Info and Relationships 有关。 ,