0Pricing
HTML Academy · Lesson

role button alert dialog and landmark

Apply ARIA roles to communicate element purpose to assistive tech.

role button alert dialog and landmark is a free HTML Academy lesson on CoddyKit — lesson 2 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.

role=button

Use role="button" when a non-button element must act as a button (rare):

<span
  role="button"
  tabindex="0"
  onclick="handleClick()"
  onkeydown="e.key==='Enter'||e.key===' ' ? handleClick() : null"
  aria-pressed="false"
>
  Toggle Feature
</span>
<!-- Better: use a real <button> element! -->
<!-- Only use role="button" when you cannot change the HTML element -->

role=alert

role="alert" announces content changes immediately to screen readers:

<div role="alert" id="error-msg"></div>

<script>
// When injecting an error:
document.getElementById('error-msg').textContent = 'Invalid email address.';
// Screen readers announce this immediately without the user moving focus
// role="alert" implies aria-live="assertive" aria-atomic="true"
</script>

role=dialog

role="dialog" marks a modal dialog component:

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
  id="confirm-dialog"
  tabindex="-1"
>
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p id="dialog-desc">This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

dialog Element vs role=dialog

Modern HTML5 has a native <dialog> element:

<dialog id="confirm" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<script>
document.getElementById('confirm').showModal();
</script>
<!-- Native dialog handles focus trap and Escape key automatically -->

Landmark Roles Overview

ARIA landmark roles organize the page into navigable regions:

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>
<form role="form" aria-label="Search">...</form>
<section role="region" aria-label="Stats">...</section>
<!-- Note: prefer semantic HTML elements over ARIA roles
     Only add role= when using generic divs/spans -->

Multiple Navigation Landmarks

When a page has multiple nav elements, distinguish them with aria-label:

<nav aria-label="Primary navigation">
  <ul>...</ul>
</nav>

<nav aria-label="Table of contents">
  <ol>...</ol>
</nav>

<nav aria-label="Footer links">
  <ul>...</ul>
</nav>
<!-- Screen reader landmark list shows: "Primary navigation, navigation"
     "Table of contents, navigation" etc. -->

role=status

role="status" announces non-urgent updates politely:

<!-- Use for: success messages, loading complete, items added -->
<div role="status" aria-live="polite" id="cart-status"></div>

<script>
// When item added to cart:
document.getElementById('cart-status').textContent = '3 items in cart';
// Screen reader announces this when it finishes reading current content
// Less urgent than role="alert"
</script>

role=region

role="region" creates a named landmark section:

<section
  role="region"
  aria-labelledby="stats-heading"
>
  <h2 id="stats-heading">Site Statistics</h2>
  <dl>...</dl>
</section>
<!-- role="region" only creates a landmark IF it has an accessible name
     Without aria-label or aria-labelledby, it is not a landmark -->

role=search

role="search" marks the search functionality:

<form role="search" action="/search">
  <label for="q">Search</label>
  <input type="search" id="q" name="q">
  <button type="submit">Go</button>
</form>
<!-- role="search" landmark: screen readers list it as "Search, search"
     Users jump directly to the search form -->

role=presentation and none

role="presentation" (alias: role="none") removes semantics from an element:

<!-- Table used for layout (bad practice, but if inherited): -->
<table role="presentation">
  <tr><td>Layout column 1</td><td>Layout column 2</td></tr>
</table>
<!-- role="presentation" removes the table semantics
     Screen reader won't announce it as a table
     Children's semantics are also affected -->

Quick Check

What is the difference between role=alert and role=status?

Recap: ARIA Roles

Common ARIA roles:

  • role="button" — non-button acting as button (add tabindex + JS)
  • role="alert" — immediate assertive announcement
  • role="dialog" — modal dialog (prefer native <dialog>)
  • role="status" — polite update announcement
  • role="region" — named section landmark
  • role="search" — search form landmark

Frequently asked questions

Is the “role button alert dialog and landmark” lesson free?

Yes — the full text of “role button alert dialog and landmark” 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 “role button alert dialog and landmark”?

Apply ARIA roles to communicate element purpose to assistive tech. 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 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “role button alert dialog and landmark” 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