Cuándo usar ARIA frente a HTML nativo

¿Qué es ARIA?

La primera regla de ARIA

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

Cuando HTML nativo no es suficiente

ARIA no añade comportamiento

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

La taxonomía de ARIA

HTML semántico frente a equivalentes de ARIA

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

Usos válidos habituales de ARIA

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

Uso no válido de ARIA

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

Roles de referencia

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

Pruebas de la implementación de ARIA

Problema habitual con aria-hidden

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

Comprobación rápida

Repaso: ARIA frente a HTML nativo