`role`, `button`, `alert`, `dialog` et repère

role=button

<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

<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

<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>

Élément dialog et role=dialog

<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 -->

Présentation des rôles de repère

<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 -->

Plusieurs repères de navigation

<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

<!-- 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

<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

<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 et none

<!-- 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 -->

Vérification rapide

Récapitulatif : rôles ARIA