Spark Design System
Accessibility
Native HTML
Use native HTML elements or attributes first before using ARIA
Why it matters
Native HTML elements convey the semantics to assistive technology users without any additional effort because it is already mapped to the accessibility APIs. Misusing ARIA results in a much more inaccessible experience than when not using ARIA.
Example 1
Prefer the HTML checkbox over the ARIA checkbox
Don't
<div role="checkbox">…</div>Do
<input type="checkbox">Example 2
Building a heading that is a tab without changing the native semantics
Don't
<h2 role="tab">heading tab</h2>Do
<div role="tab"><h2>heading tab</h2></div>Collaborators
- Designers (agree on meanings).