wcagmmenu

mmenu.js not WCAG-compliant

My mmenu outputs this HTML:

<nav class="mm-menu mm-menu--offcanvas mm-menu--position-right mm-menu--theme-light mm-menu--opened" 
id="mmenunav"
aria-label="Test"
aria-modal="true"
role="dialog"
inert="true">

This does not appear to be WCAG-compliant. The W3C Validator issues the following errors:

How bad are these errors? Would be ok to ignore them? Or should the mmenu code be fixed?

Solution

  • Just to be clear: The W3C Validator does not verify accessibility in terms of WCAG compliance.

    It’s common to use the validator to test compliance with WCAG 2.1’s Success Criterion 4.1.1: Parsing, but the latter only required the absence of specific errors:

    […] elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique […]

    The mentioned errors don’t fall into these categories. On a side note, that criterion also got removed from the WCAG in version 2.2.

    While such errors, and the bad use of ARIA on their Examples page make me wonder if they aren’t testament to a general lack of code quality, they can be be relativised.

    Nevertheless, you need to check the resulting accessibility by other means.

    This can partly be done with an accessibility checker like Lighthouse within the browser, or external tools, but it also needs manual verifications and ideally usability testing by users of assistive technologies.

    About the errors:

    “Bad value dialog for attribute role on element nav”

    It’s bad practice to change the native role of an element, in this case navigation to dialog, and potentially harmful for accessibility.

    Do not change native semantics, unless you really have to.

    Second Rule of ARIA Use

    In this case here, the landmark role is removed from the navigation, so users of assistive technology wont have a shortcut to jump to the navigation.

    Therefore, the ARIA in HTML Standard explicitly mentions roles that can be assigned to a <nav> element.

    “Attribute aria-modal not allowed on element nav at this point”

    This is kind of a consecutive fault. If the change of role is not accepted, aria-modal wouldn’t be accepted either, as it is an attribute of a dialog.

    It’s telling assistive technology that interaction with elements outside the dialog are not possible, and that focus will not leave the dialog until closed.

    Whether that’s actually the case needs to be tested. All content outside the dialog would need the inert attribute.

    “Bad value true for attribute inert on element nav”

    This is simply incorrect HTML. But since HTML is very forgiving, the pure presence of the inert attribute suffices, and it will still work.