axe-core
axe-core copied to clipboard
Bug: does not report missing name on element with role="form" (ARIA 1.2)
Ref: https://github.com/dequelabs/axe-core-npm/issues/329
This is a best practice, not a violation
Things have changed since 2021 because axe reports the missing accessible name now as a best practice. That’s a good thing, but the error message is misleading. If you have a form with an explicit form role but no label, axe reports, “ARIA role form is not allowed for given element”. That’s not true because the role is allowed. It’s the missing accessible name that causes the issue.
Here's an example.
<h2>No role</h2>
<!-- fine -->
<form>
<label for="name1">Name</label>
<input id="name1">
</form>
<h2>Role only</h2>
<!-- causes a best practice error -->
<form role="form">
<label for="name2">Name</label>
<input id="name2">
</form>
<h2>Role with aria-label</h2>
<!-- fine -->
<form role="form" aria-label="My form">
<label for="name3">Name</label>
<input id="name3">
</form>
@matuzo This appears to be a bug in axe-core. The ARIA in HTML spec allows a form element to have role=form, but our code does not allow it. Updating the allowedRoles to allow form fixes the issue.
Would you mind opening a pr with a fix?