Lesson 10

ARIA restraint

Use native HTML first and add ARIA only when it describes behavior that HTML cannot express.

aria
accessibility
semantics

Good Code

dialog-actions.html

<button type="button">
  <!-- Native buttons provide the role before ARIA adds only the missing label. -->
  Save changes
</button>
<button type="button" aria-label="Close dialog">
  x
</button>

Bad Code

dialog-actions.html

<div role="button" aria-checked="true" aria-label="Submit">
  <!-- ARIA roles and states conflict with the element behavior here. -->
  Save changes
</div>
<span role="img" aria-label="Close dialog">x</span>

Review Notes

What to review

Good Code

The good version starts with native controls and uses ARIA only where the visible icon needs an accessible name that screen readers can announce.

Bad Code

The bad version adds roles and states that do not match the elements or behavior, which can make the interface more confusing than plain HTML.

Takeaways

Prefer native semantics; ARIA should clarify, not paper over the wrong element.