6.1ARIA Best Practices

ARIA (Accessible Rich Internet Applications) supplements HTML semantics. The first rule of ARIA is: if you can use a native HTML element, do not use ARIA. Native elements come with built-in keyboard handling, focus management, and screen reader semantics.

<!-- BAD: div with ARIA role mimicking a button -->
<div role="button" tabindex="0" aria-label="Submit" onclick="submit()">
    Submit
</div>
<!-- Problems: no Enter/Space handling, no form submission, no disabled state -->

<!-- GOOD: native button element -- keyboard, screen reader, and click all work -->
<button type="submit">Submit</button>

<!-- WHEN ARIA IS NECESSARY: custom components with no native equivalent -->
<div role="tablist" aria-label="Product details">
    <button role="tab" aria-selected="true" aria-controls="panel-desc" id="tab-desc">
        Description
    </button>
    <button role="tab" aria-selected="false" aria-controls="panel-specs" id="tab-specs">
        Specifications
    </button>
</div>
<div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc">
    <!-- Description content -->
</div>
<div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs" hidden>
    <!-- Specs content -->
</div>