HTML

Lesson 08

Interactive elements

Use native controls for actions so interaction behavior comes with the element.

Good Code

toolbar.html
<button type="button" aria-pressed="false">
  <!-- Native buttons bring keyboard and focus behavior with them. -->
  Save draft
</button>

Bad Code

toolbar.html
<div class="button" onclick="saveDraft()">
  <!-- A clickable div must recreate button behavior by hand. -->
  Save draft
</div>

Review Notes

What to review

Good Code

The good version uses a native button, which already participates in keyboard interaction, focus order, and accessibility APIs.

Bad Code

The bad version may be styled to look identical, but the generic div has to recreate expected button behavior by hand.

Takeaways

  • Reach for a native button when the user is triggering an action.