Accessibility and top-bar with dropdown

I am working on getting a site to pass accessibility checks and am struggling with the aria roles on the top bar navigation with dropdowns. I continue to get this error: Required ARIA parents role not present: menu, menubar, group

I keep editing the code, to no avail. Any suggestions? I may have edited too much! :slight_smile:

FYI: I’m using AXE dev tools to check the code.

<div class="top-bar no-js" id="main-nav">
  <nav class="top-bar-left" aria-label="main menu">
    <ul class="dropdown menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" role="menubar">
      <!--<li class="menu-text">Undergraduate Admissions</li>-->
      <li role="none" class="is-dropdown-submenu-parent"><a role="menuitem" href="apply/" tabindex="0">Apply</a>
        <ul class="menu vertical">
			<li class="show-for-small-only"><a role="menuitem" href="apply/">Apply to UB</a></li>
          	<li><a role="menuitem" href="apply/howtoapply.php">Apply as a Freshman</a></li>
          	<li><a role="menuitem" href="apply/admissioncriteria.php">Freshman Admission Criteria</a></li>
          	<li><a role="menuitem" href="apply/importantdates.php">Important Dates</a></li>
          	<li><a role="menuitem" href="apply/freshmanmajorinfo.php">Special Requirements for Certain Majors</a></li>
          	<li><a role="menuitem" href="apply/early-assurance.php">Early Assurance Programs</a></li>
          	<li><a role="menuitem" href="apply/advancedplacement.php">AP, IB, Other Credit</a></li>
          	<li><a role="menuitem" href="apply/educationalopportunity.php">Educational Opportunity Program (EOP)</a></li>
          	<li><a role="menuitem" href="apply/applyingfaq.php">Applying FAQ</a></li>
        </ul>
      </li>
      <li><a href="visit/" tabindex="0">Visit</a>
        <ul class="menu vertical">
         	<li class="show-for-small-only"><a href="visit/">Visit UB</a></li>
          	<li><a href="visit/tours.php">Video Tour</a></li>
        </ul>
      </li>
      <li><a href="academics/">Academics</a>
        <ul class="menu vertical">
         	<li class="show-for-small-only"><a href="academics/">Academics</a></li>
          	<li><a href="academics/areasofstudy.php">Majors &amp; Programs</a></li>
          	<li><a href="academics/scholarlycommunities.php">Scholarly Communities</a></li>
          	<li><a href="academics/about-ub.php">UB Fast Facts</a></li>
        </ul>
      </li>
      <li><a href="costs/" aria-haspopup="true" aria-controls="menuCost">Costs &amp; Aid</a>
        <ul class="menu vertical" id="menuCost">
          	<li class="show-for-small-only"><a href="costs/">Costs &amp; Aid</a></li>
          	<li><a href="costs/scholarships.php">Scholarships</a></li>
			<li><a href="costs/scholarshipsfaq.php">Scholarships FAQ</a></li>
          	<li><a href="costs/financialaid.php">Financial Aid</a></li>
        </ul>
      </li>
      <li><a href="experience/" aria-haspopup="true" aria-controls="menuUBE">UB Experience</a>
        <ul class="menu vertical" id="menuUBE">
          <li class="show-for-small-only"><a href="experience/">Get to Know UB</a></li>
          <li><a href="experience/campus-life.php">Campus Life</a></li>
          <li><a href="experience/buffalo.php">Life in Buffalo</a></li>
        </ul>
      </li>
      <li><a href="https://ubconnect.buffalo.edu/register/inquiryform/">Request Info</a></li>
      <li class="info-for"><a href="#" aria-haspopup="true" aria-controls="menuInfo">Info for</a>
        <ul class="menu vertical" id="menuInfo">
          <li><a href="highschool/">Prospective Freshmen Students</a></li>
          <li><a href="transfer/">Prospective Transfer Students</a></li>
          <li><a href="https://buffalo.edu/internationaladmissions.html">Prospective International Students</a></li>
          <li><a href="accepted/">Accepted Students</a></li>
          <li><a href="parents/">Parents</a></li>
          <li><a href="counselors/">School Counselors</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  
  	<div class="top-bar-right">
		<div class="search" role="search">
			<form id="siteSearch" name="siteSearch" action="search.php" method="POST">
				  <label for="search" class="visuallyhidden">Search</label>
				  <input id="search" type="text" placeholder="Search Admissions" name="search" value="">
				  <input type="image" name="submitbutton" alt="search" src="img/search-go.png">
			</form>
		</div>
	</div>
		
  </div>```

Hey @mhenny the error message tells you the issue. You have an element identified with a role for menu items but no element identified with a role for their parent, the menu. Find your menu element and assign it the role of menu and that should fix it.

I haven’t spent a lot of time with ARIA but I should probably start using it more. I guess I’ve just focused on good Semantic HTML. ARIA should not be used as a substitute for good Semantic HTML but can be used to enhance the accessibility after semantic html.

Hope this helps.