Valid ARIA Roles In JSX
ID |
javascript.jsx_aria_role_valid |
Severity |
high |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
JavaScript |
Tags |
accessibility, jsx, reliability |
Rationale
An unrecognised role is dropped by the accessibility tree, and the element falls back to the
implicit role of its tag — for a div that is no role at all. The element then looks annotated in
the source and is anonymous to a screen reader, which is worse than never having set a role, because
the author stops looking.
The twelve abstract roles fail the same way for a different reason: they exist to organise the ARIA
taxonomy and are explicitly not for authors, so role="widget" is as inert as a typo while looking
far more deliberate.
<div tabIndex={0} role="buton" /> // FLAW - misspelt, the element keeps no role
<div role="widget" /> // FLAW - abstract role, never valid in markup
<div role="button" tabIndex={0} /> // OK
<div role="switch checkbox" tabIndex={0} /> // OK - a fallback list, most specific first
<div role="doc-abstract" /> // OK - the DPUB-ARIA module vocabulary
<div role={kind} /> // OK - computed at runtime, not judged hereARIA allows a whitespace-separated fallback list, most specific first, so every token is judged on
its own and the first bad one is reported. The module vocabularies layered on ARIA, DPUB-ARIA
(doc-) and Graphics ARIA (graphics-), are recognised by prefix rather than enumerated. Role
tokens are matched case-insensitively, as browsers read them.