• lucysmithcornerstone

    (@lucysmithcornerstone)


    Hello, I am not a developers but I am beginning our companies journey into becoming WCAG compliant.

    We have installed an accessibility tool bar called Recite me and it is throwing up and error with our mega menu. We currently use the free versions but can move to pro if needed. My website developers have said to come and ask here.

    The details are as follows

    Failure of Success Criterion 4.1.1 due to duplicate values of type ID | Error Location 1

    <li class=”mega-menu-row” id=”mega-menu-10260-0″ style=””> <ul class=”mega-sub-menu” sty…</li>

    html > body > div:nth-child(6) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div > div > div > div > ul > li:nth-child(5) > ul > li

    Your “LI” element has an ID value of “mega-menu-10260-0” which is used more than once on the page. Ensure every single ID value is unique and not duplicated.

    the full code is

    <li class=”mega-menu-row” id=”mega-menu-10260-0″ style=””> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-column mega-menu-columns-4-of-12″ id=”mega-menu-10260-0-0″ style=””> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-menu-item-14306″ id=”mega-menu-item-14306″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/complaints-overview-2024/&#8221; style=””>Complaints<span class=”mega-indicator” data-has-click-event=”true” style=””></span></a> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-14304″ id=”mega-menu-item-14304″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/complaints-overview-2024/&#8221; style=””>Complaints Overview</a></li><li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-13243″ id=”mega-menu-item-13243″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/make-a-complaint-feedback-compliment/&#8221; style=””>Make a complaint, give feedback or a compliment</a></li><li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-13244″ id=”mega-menu-item-13244″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/how-we-deal-with-complaints/&#8221; style=””>How we deal with complaints</a></li> </ul> </li> </ul> </li><li class=”mega-menu-column mega-menu-columns-4-of-12″ id=”mega-menu-10260-0-1″ style=””> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-menu-item-10264″ id=”mega-menu-item-10264″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/have-your-say/&#8221; style=””>Get involved<span class=”mega-indicator” data-has-click-event=”true” style=””></span></a> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-13280″ id=”mega-menu-item-13280″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/rep/&#8221; style=””>Resident Engagement Panel</a></li><li class=”mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-13484″ id=”mega-menu-item-13484″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/estate-champion/&#8221; style=””>Estate Champion</a></li><li class=”mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-14087″ id=”mega-menu-item-14087″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/gardening-competition/&#8221; style=””>Gardening Competition</a></li> </ul> </li> </ul> </li><li class=”mega-menu-column mega-menu-columns-3-of-12″ id=”mega-menu-10260-0-2″ style=””> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-home mega-menu-item-has-children mega-menu-item-12733″ id=”mega-menu-item-12733″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/&#8221; style=””>Service you can expect<span class=”mega-indicator” data-has-click-event=”true” style=””></span></a> <ul class=”mega-sub-menu” style=””> <li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-13282″ id=”mega-menu-item-13282″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/customer-service-standards/&#8221; style=””>Customer service standards</a></li><li class=”mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-13283″ id=”mega-menu-item-13283″ style=””><a class=”mega-menu-link” href=”https://www.cornerstonehousing.net/tenant-handbook/&#8221; style=””>Tenant Handbook</a></li> </ul> </li> </ul> </li> </ul> </li>

    Description

    This describes a failure condition where duplicate ID errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type ID can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use ID values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.Checking that ID attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.In most markup languages, ID values are attribute values, for example in HTML and SVG.XML documents that use only the xml:id attribute as an ID attribute, parsing the XML document with a validating parser that supports the xml:id specification is sufficient.

    Is anyone able to help and direct me to a way of fixing this issue?

    thanks

    Lucy

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi Lucy,

    Thanks for posting a link. Your theme is outputting exactly the same menu twice (once for desktop, once for mobile), hence the duplicate IDs. Your developers will need to remove the duplicate menu from the page and ensure the remaining menu is shown for both desktop and mobile.

    Regards,
    Tom

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.