Can duplicate uses of landmarks be distinguished by HTML structure? - html

Question

A website I administrate through a CMS provider has two header elements and two nav elements on most pages. The headers are the top banner with our logo and page title for the main page content. The nav elements are a top navigation and a left side navigation. The tool I use to flag accessibility issues is flagging these as "Non-distinguishable landmarks" as they have neither 'aria-label' nor 'aria-labelledby'.
Contacting my CMS provider they stated that the structure of the html fully achieves distinguishing landmarks. That multiple instances of the same class of element is fine if there is other HTML that differentiates them. That ARIA labels are not needed, though some encourage their use or find them preferable.
Reaching out to support with the accessibility tool, they reiterate basically what the tool explained, that aria-labels are needed to distinguish repeated landmarks.
Working through both support staffs, each made it clear they were passing along information from another member of their organization for clarification so it is possible some information is getting dropped.
The following is redacted for readability, but I can provide further if relevant.
<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">
Departments » Human Resources
.
.
.
I expect that the aria-labels will be needed, but could use some expertise to determine the right direction.

Answer 1

I've never tested this myself, but going by the WCAG documentation, I'm going to say it needs the aria related attributes to be properly accessible.
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.
Source: Technique H97: Grouping related links using the nav element
As mentioned on the H97 page, this is related to fulfilling WCAG Success Criterion 1.3.1: Info and Relationships,