0Pricing
HTML Academy · Lesson

When to Use ARIA vs Native HTML

Follow the first rule of ARIA: prefer native semantics.

When to Use ARIA vs Native HTML is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is ARIA?

ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML to improve accessibility for assistive technologies. It fills gaps when native HTML semantics are insufficient.

The First Rule of ARIA

The most important ARIA guideline: don't use ARIA if native HTML can do it:

<!-- BAD: ARIA on a div -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>

<!-- GOOD: use a real button -->
<button type="submit">Submit</button>

<!-- Native HTML elements:
  - Are keyboard accessible by default
  - Have correct semantics built in
  - Work in more contexts
  - Require less code
-->

When Native HTML Is Not Enough

ARIA is needed when:

  • Custom UI components don't have an HTML equivalent (tabs, combobox)
  • Native element's role needs to be overridden
  • Dynamic content updates need to be announced
  • Complex relationships between elements need to be explicit

ARIA Does Not Add Behavior

A critical misunderstanding: ARIA adds accessibility metadata — it does not add functionality:

<!-- Adding role="button" to a div does NOT:
  - Make it keyboard-focusable (add tabindex="0")
  - Make Enter/Space activate it (add event listeners)
  - Make it styled like a button (add CSS)
-->

<!-- You must implement ALL behavior yourself -->
<!-- Native <button> handles all this for free -->

The ARIA Taxonomy

ARIA has three categories of attributes:

  • Roles — define what an element is: role="button", role="dialog"
  • Properties — describe static characteristics: aria-label, aria-required
  • States — describe dynamic conditions: aria-expanded, aria-checked

Semantic HTML vs ARIA Equivalents

Most HTML elements already have implicit ARIA roles:

<nav>   ≡  role="navigation"
<main>  ≡  role="main"
<aside> ≡  role="complementary"
<header> ≡ role="banner" (page-level)
<footer> ≡ role="contentinfo" (page-level)
<button> ≡ role="button"
<a href> ≡ role="link"
<h1-h6> ≡ role="heading"
<ul>    ≡  role="list"

Common Valid Uses of ARIA

Legitimate ARIA usage examples:

<!-- 1. Custom dropdown (no native equivalent): -->
<div role="combobox" aria-expanded="false">...</div>

<!-- 2. Loading state announcement: -->
<div role="status" aria-live="polite">Loading results...</div>

<!-- 3. Override landmark label: -->
<nav aria-label="Primary navigation">...</nav>

<!-- 4. Associate error with input: -->
<input aria-describedby="error-msg">
<span id="error-msg" role="alert">Invalid email</span>

Invalid ARIA Usage

Common ARIA mistakes:

<!-- BAD: ARIA role contradicts the element -->
<h2 role="button">Heading</h2>  <!-- don't turn a heading into a button -->

<!-- BAD: ARIA on an unsupported element -->
<div role="listitem">Item</div>  <!-- listitem must be inside list role -->

<!-- BAD: ARIA where HTML works fine -->
<p role="paragraph">Text</p>  <!-- p already has paragraph semantics -->

<!-- BAD: aria-label on hidden element -->
<span aria-hidden="true" aria-label="something">  <!-- contradictory -->

Landmark Roles

ARIA landmark roles help screen reader users navigate page regions:

<div role="banner">     <!-- header for the whole page -->
<div role="navigation">  <!-- major navigation -->
<div role="main">        <!-- main content -->
<div role="complementary"> <!-- aside content -->
<div role="contentinfo"> <!-- page footer -->
<div role="search">      <!-- search form -->
<div role="form">        <!-- form with label -->

<!-- These are ONLY needed if using divs instead of semantic elements -->
<!-- Prefer the native HTML elements instead -->

Testing ARIA Implementation

How to verify your ARIA is correct:

  • Use the Accessibility panel in Chrome/Firefox DevTools
  • Listen with VoiceOver (Mac) or NVDA (Windows)
  • Run axe DevTools extension
  • Check the accessibility tree — does it reflect what you expect?

ARIA Hidden Pitfall

Common aria-hidden mistake:

<!-- BAD: aria-hidden on element that still receives focus -->
<button aria-hidden="true">Close</button>
<!-- The button is still focusable but invisible to screen readers
     Screen reader users reach it via Tab but hear nothing -->

<!-- GOOD: for focus + hide, use hidden attribute or display:none: -->
<button hidden>Close</button>  <!-- removes from both tab order and AT -->

<!-- Or: if you must keep visible: -->
<button style="display:none" aria-hidden="true">Close</button>

Quick Check

What does adding role="button" to a div automatically give you?

Recap: ARIA vs Native HTML

ARIA essentials:

  • First rule: use native HTML when possible
  • ARIA adds semantics only — you must implement behavior
  • Three categories: Roles, Properties, States
  • Landmark roles help screen reader navigation
  • Test with DevTools Accessibility panel and screen reader

Frequently asked questions

Is the “When to Use ARIA vs Native HTML” lesson free?

Yes — the full text of “When to Use ARIA vs Native HTML” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “When to Use ARIA vs Native HTML”?

Follow the first rule of ARIA: prefer native semantics. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “When to Use ARIA vs Native HTML” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. When to Use ARIA vs Native HTML
  2. role button alert dialog and landmark
  3. aria-label aria-labelledby and aria-describedby
  4. aria-hidden and aria-live
← Back to HTML Academy