Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ARIA 1.1: aria-level is required with role="heading"

See original GitHub issue

Hello and thank you for this excellent package!

I ran axe-core testing against a component of mine that uses this package and encountered this error:

    Expected the HTML found at $('.DayPicker-Caption') to have no violations:

    <div class="DayPicker-Caption" role="heading"><div>September 2019</div></div>

    Received:

    "Required ARIA attributes must be provided (aria-required-attr)"

    Fix any of the following:
      Required ARIA attribute not present: aria-level

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.3/aria-required-attr?application=axeAPI

I realize that this could a be a fault of axe-core instead of react-day-picker. The key issue is that while an element with role="heading" should have an implicit aria-level of 2, the outcome is not consistent and the attribute is marked as required. Even if aria-level=2 was intentional, it may not be correct depending on the context where the heading ends up.

Some useful discussion around the implementation of this rule is available here: https://github.com/dequelabs/axe-core/issues/814

I am not sure what the ideal fix would be. Maybe the heading role is replaced with another technique or aria-level is included?

Issue Analytics

State:
Created 4 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

reintroducingcommented, Sep 7, 2019

I think another possible solution is similar to whats outlined here: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html

Can use an aria-live attribute instead.

0reactions

gpblcommented, Mar 26, 2022

Closing as we’ve released v8: this issue belongs to a version which is not longer maintained, and it is likely fixed. In case, please open a new issue. Thanks!

Top Results From Across the Web

ARIA: heading role - Accessibility - MDN Web Docs - Mozilla

The heading role defines this element as a heading to a page or section, with the aria-level attribute providing for more structure.

Accessible Rich Internet Applications (WAI-ARIA) 1.1 - W3C

WAI-ARIA divides the semantics into roles (the type defining a user interface element) and states and properties supported by the roles. Authors ...

Make 'aria-level' a required attribute on elements with ... - GitHub

aria-level has been moved to required attribute in Aria1.1 role=heading https://www.w3.org/TR/wai-aria-1.1/#heading.

Required ARIA attributes must be provided | Axe Rules

For more information about which ARIA role, state, and property attributes are allowed by role, see Accessible Rich Internet Applications (WAI-ARIA) 1.1 ......

Beautifulsoup: Replace all <div> with aria-level attributes with ...

You can use del.attrs to delete all attributes from tag: for div in soup.select("div[aria-level]"): div.name = f'h{div["aria-level"]}' del ...