FROM CACHE - en_header

ARIA IDs are not unique HELP for hamburger menu: Accessibility HELP

ladyday16kmc
Excursionist
12 0 5

I don't understand why these items are failing in accessibility, in the lighthouse audit. 

Screenshot 2021-07-30 4.39.20 PM.pngScreenshot 2021-07-30 4.48.47 PM.png

Replies 5 (5)
Parmegastore
Excursionist
17 1 1

so here is what i could figure out. it seems like the link <a> item and the list <ul> of a dropdown has the same id well not completely. The ones id attribute might be MenuParent-3 but its link might have a aria-controls property also MenuParent-3. I think this is what makes lighthouse pick it up as a duplicate because i cant find where its duplicated anywhere else and I've looked at the html closely. Im going to attempt fixing the liquid files and il let you know what i did if i succeed.

 

Parmegastore
Excursionist
17 1 1

Alight my suspicion was correct, inside of the site-nav.liquid are these lines of code

<a
          href="{{ link.url }}"
          class="site-nav--link"
          data-meganav-type="parent"
          aria-controls="MenuParentAC-{{ parent_index }}"
          aria-expanded="false"
          {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
            {{ link.title | escape }}
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
        </a>
        <ul
          id="MenuParent-{{ parent_index }}"
          class="site-nav--dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}"
          data-meganav-dropdown>
          {% for childlink in link.links %}
            {% if childlink.links != blank %}
            {% assign child_index = forloop.index %}

 in line 5 you can see i changed 

aria-controls="MenuParent-{{ parent_index }}" to aria-controls="MenuParentAC-{{ parent_index }}"

That fixed it in my lighthouse

ladyday16kmc
Excursionist
12 0 5

I implemented the changes to the code that you suggested. Lighthouse is still picking them up as not having unique aria ID's. Does the AC need to be added to the id="MenuParent-{{parent_index}}"? Does the AC need to be added to the aria-controls="MenuChildren-{{parent_index}}-{{child_index}}" ?Screen Shot 2022-01-21 at 9.50.07 AM.png

Parmegastore
Excursionist
17 1 1
ladyday16kmc
Excursionist
12 0 5