HTML
ARIA

Sintaxis

• aria-live
• aria-relevante
• aria-autocompletar
• revisado por aria
• aria-desactivado
• aria expandida
• aria-haspopup
• aria escondido
• aria-invalido
• aria-label
• nivel de aria
• aria-multilínea
• aria-multiselectable
• orientación aria
• aria presionada
• aria-readonly
• aria requerido
• aria seleccionado
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext
• ariaatómico
• aria ocupado
• efecto aria-drop
• aria arrastrado
• aria-activedescendant
• aria-controles
• aria-descrita por
• aria-flowto
• aria-labelledby
• aria-posee
• aria-posinset
• aria-setsize

Observaciones

role = "alerta"

Un mensaje con información importante, y generalmente sensible al tiempo.

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>

Tenga en cuenta que he incluido tanto role="alert" como aria-live="assertive" al mismo tiempo. Estos son atributos sinónimos, pero algunos lectores de pantalla solo admiten uno u otro. Al usar ambos simultáneamente, por lo tanto, maximizamos las posibilidades de que la región en vivo funcione como se espera.

Fuente - Heydon Pickering 'Algunos ejemplos prácticos de ARIA'

role = "alertdialog"

Un tipo de diálogo que contiene un mensaje de alerta, donde el enfoque inicial va a un elemento dentro del diálogo.

<div role="alertdialog">
  <h1>Warning</h1>
  <div role="alert">Your session will expire in 60 seconds.</div>
</div>

role = "application"

Una región declarada como una aplicación web, a diferencia de un documento web. En este ejemplo, la aplicación es una calculadora simple que podría sumar dos números juntos.

<div role="application">
  <h1>Calculator</h1>
  <input id="num1" type="text"> + <input id="num2" type="text"> =
  <span id="result"></span>
</div>

role = "artículo"

Una sección de una página que consta de una composición que forma parte independiente de un documento, página o sitio.

---

Establecer una función de ARIA y / o un atributo aria- * que coincida con la semántica implícita predeterminada de ARIA no es necesario y no se recomienda ya que estas propiedades ya están establecidas por el navegador.

<article>
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</article>

Usaría role=article en elementos no semánticos (no recomendado, no válido)

<div role="article">
  <h1>My first article</h1>
  <p>Lorem ipsum...</p>
</div>

---

W3C Entry para role=article

role = "banner"

Una región que contiene principalmente contenido orientado al sitio, en lugar de contenido específico de la página.

<div role="banner">
  <h1>My Site</h1>

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

role = "button"

Una entrada que permite acciones activadas por el usuario cuando se hace clic o se presiona.

<button role="button">Add</button>

role = "cell"

Una celda en un contenedor tabular.

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <td role="cell">95</td>
    <td role="cell">14</td>
    <td role="cell">25</td>
  </tbody>
</table>

role = "checkbox"

Una entrada verificable que tiene tres valores posibles: verdadero, falso o mixto.

<p>
  <input type="checkbox" role="checkbox" aria-checked="false">
  I agree to the terms
</p>

role = "columnheader"

Una celda que contiene información de encabezado para una columna.

<table role="grid">
  <thead>
    <tr>
      <th role="columnheader">Day 1</th>
      <th role="columnheader">Day 2</th>
      <th role="columnheader">Day 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
<table>

role = "combobox"

Una presentación de un selecto; por lo general, es similar a un cuadro de texto donde los usuarios pueden escribir antes para seleccionar una opción o escribir para ingresar texto arbitrario como un nuevo elemento en la lista.

<input type="text" role="combobox" aria-expanded="false">

Normalmente, usaría JavaScript para construir el resto de la funcionalidad de selección de lista o encabezado de tipo.

role = "complementario"

Una sección de soporte del documento, diseñada para ser complementaria al contenido principal en un nivel similar en la jerarquía DOM, pero sigue siendo significativa cuando se separa del contenido principal.

<div role="complementary">
  <h2>More Articles</h2>

  <ul>
    <!-- etc -->
  </ul>
</div>

role = "contentinfo"

Una gran región perceptible que contiene información sobre el documento padre.

<p role="contentinfo">
  Author: Albert Einstein<br>
  Published: August 15, 1940
</p>

role = "definición"

Una definición de un término o concepto.

<span role="term" aria-labelledby="def1">Love</span>
<span id="def1" role="definition">an intense feeling of deep affection.</span>

role = "dialog"

Un diálogo es una ventana de aplicación que está diseñada para interrumpir el procesamiento actual de una aplicación con el fin de solicitar al usuario que ingrese información o que requiera una respuesta.

<div role="dialog">
  <p>Are you sure?</p>
  <button role="button">Yes</button>
  <button role="button">No</button>
</div>

role = "directorio"

Una lista de referencias a miembros de un grupo, como una tabla de contenido estática.

<ul role="directory">
  <li><a href="/chapter-1">Chapter 1</a></li>
  <li><a href="/chapter-2">Chapter 2</a></li>
  <li><a href="/chapter-3">Chapter 3</a></li>
</ul>

role = "documento"

Una región que contiene información relacionada que se declara como contenido del documento, a diferencia de una aplicación web.

<div role="document">
  <h1>The Life of Albert Einstein</h1>
  <p>Lorem ipsum...</p>
</div>

role = "form"

Una región de hito que contiene una colección de elementos y objetos que, en conjunto, se combinan para crear un formulario.

El uso del elemento HTML semánticamente correcto <form> implica la semántica ARIA predeterminada, lo que significa que role=form no es obligatorio, ya que no debe aplicar un rol de contraste a un elemento que ya es semántico, ya que agregar un rol invalida la semántica nativa de un elemento.

Establecer una función de ARIA y / o un atributo aria- * que coincida con la semántica implícita predeterminada de ARIA no es necesario y no se recomienda ya que estas propiedades ya están establecidas por el navegador.

<form action="">
  <fieldset>
    <legend>Login form</legend>
    <div>
      <label for="username">Your username</label>
      <input type="text" id="username" aria-describedby="username-tip" required />
      <div role="tooltip" id="username-tip">Your username is your email address</div>
    </div>
    <div>
      <label for="password">Your password</label>
      <input type="text" id="password" aria-describedby="password-tip" required />
      <div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
    </div>
  </fieldset>
</form>

Usaría role=form en elementos no semánticos (no recomendado, no válido)

<div role=form>
  <input type="email" placeholder="Your email address">
  <button>Sign up</button>
</div>

role = "grid"

Una cuadrícula es un control interactivo que contiene celdas de datos tabulares organizados en filas y columnas, como una tabla.

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
</table>

role = "gridcell"

Una celda en una cuadrícula o treegrid.

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">17</td>
      <td role="gridcell">64</td>
      <td role="gridcell">18</td>
    </tr>
  </tbody>
<table>

role = "grupo"

Un conjunto de objetos de la interfaz de usuario que no están destinados a ser incluidos en un resumen de página o tabla de contenido por tecnologías de asistencia.

<div role="group">
  <button role"button">Previous</button>
  <button role"button">Next</button>
</div>

role = "encabezado"

Un encabezado para una sección de la página.

<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>

role = "img"

Un contenedor para una colección de elementos que forman una imagen.

<figure role="img">
  <img alt="A cute cat." src="albert.jpg">
  <figcaption>This is my cat, Albert.</figcaption>
<figure>

role = "link"

Una referencia interactiva a un recurso interno o externo que, cuando se activa, hace que el agente de usuario navegue a ese recurso.

En la mayoría de los casos, no es necesario establecer una función de ARIA y / o un atributo aria- * que coincida con la semántica implícita predeterminada de ARIA, ya que estas propiedades ya están establecidas por el navegador.

Fuente: https://www.w3.org/TR/html5/dom.html#aria-usage-note

role = "list"

Un grupo de elementos de lista no interactivos.

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

role = "listbox"

Un widget que permite al usuario seleccionar uno o más elementos de una lista de opciones.

<ul role="listbox">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Normalmente, usaría JavaScript para construir la funcionalidad de selección múltiple.

role = "listitem"

Un solo elemento en una lista o directorio.

<ul role="list">
  <li role="listitem">One</li>
  <li role="listitem">Two</li>
  <li role="listitem">Three</li>
</ul>

role = "log"

Un tipo de región en vivo donde la nueva información se agrega en un orden significativo y la información antigua puede desaparecer.

<ul role="log">
  <li>User 1 logged in.</li>
  <li>User 2 logged in.</li>
  <li>User 1 logged out.</li>
</ul>

role = "main"

El contenido principal de un documento.

<!-- header & nav here -->
<div role="main">
  <p>Lorem ipsum...</p>
</div>
<!-- footer here -->

role = "marquee"

Un tipo de región en vivo donde la información no esencial cambia con frecuencia.

<ul role="marquee">
  <li>Dow +0.26%</li>
  <li>Nasdaq +0.54%</li>
  <li>S&amp;P +0.44%</li>
</ul>

role = "math"

Contenido que representa una expresión matemática.

<img role="math" alt="y=mx+b" src="slope.png">

role = "menu"

Un tipo de widget que ofrece una lista de opciones para el usuario.

<ul role="menu">
  <li role="menuitem">New</li>
  <li role="menuitem">Open</li>
  <li role="menuitem">Save</li>
  <li role="menuitem">Close</li>
</ul>

role = "menubar"

Una presentación de menú que generalmente permanece visible y generalmente se presenta horizontalmente.

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

role = "menuitem"

Una opción en un grupo de opciones contenidas en un menú o barra de menú.

<ul role="menubar">
  <li role="menuitem">File</li>
  <li role="menuitem">Edit</li>
  <li role="menuitem">View</li>
  <li role="menuitem">Help</li>
</ul>

role = "menuitemcheckbox"

Un menuitem comprobable que tiene tres valores posibles: verdadero, falso o mixto.

<ul role="menu">
  <li role="menuitem">Console</li>
  <li role="menuitem">Layout</li>
  <li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
</ul>

role = "menuitemradio"

Un menuitem comprobable en un grupo de roles de menuitemradio, solo uno de los cuales se puede verificar a la vez.

<ul role="menu">
  <li role="menuitemradio" aria-checked="true">Left</li>
  <li role="menuitemradio" aria-checked="false">Center</li>
  <li role="menuitemradio" aria-checked="false">Right</li>
</ul>

role = "navegación"

Una colección de elementos de navegación (generalmente enlaces) para navegar por el documento o documentos relacionados.

<ul role="navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

role = "note"

Una sección cuyo contenido es parentético o auxiliar al contenido principal del recurso.

<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p role="note">Lorem ipsum...</p>

role = "option"

Un elemento seleccionable en una lista de selección.

<ul role="listbox">
  <li role="option">Option 1</li>
  <li role="option">Option 2</li>
  <li role="option">Option 3</li>
</ul>

role = "presentación"

Un elemento cuya semántica implícita de rol nativo no se asignará a la API de accesibilidad.

<div style="float:left;">Some content on the left.</div>
<div style="float:right;">Some content on the right</div>
<div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->

role = "barra de progreso"

Un elemento que muestra el estado de progreso de las tareas que llevan mucho tiempo.

<progress role="progressbar" value="25" max="100">25%</progress>

role = "radio"

Una entrada que se puede verificar en un grupo de roles de radio, solo uno de los cuales se puede verificar a la vez.

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

role = "region"

Una gran sección perceptible de una página web o documento, que el autor considera que es lo suficientemente importante como para incluirla en un resumen de la página o en una tabla de contenido, por ejemplo, un área de la página que contiene estadísticas de eventos deportivos en vivo.

<div role="region">
  Home team: 4<br>
  Away team: 2
</div>

role = "radiogroup"

Un grupo de botones de radio.

<div role="radiogroup">
  <input role="radio" type="radio" aria-checked="true"> One<br>
  <input role="radio" type="radio" aria-checked="false"> Two<br>
  <input role="radio" type="radio" aria-checked="false"> Three
</div>

role = "row"

Una fila de celdas en un contenedor tabular.

<table>
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr role="row">
      <!-- etc -->
    </tr>
  </tbody>
</table>

role = "rowgroup"

Un grupo que contiene uno o más elementos de fila en una cuadrícula.

<table>
  <thead role="rowgroup">
    <!-- etc -->
  </thead>
  <tbody role="rowgroup">
    <!-- etc -->
  </tbody>
</table>

role = "rowheader"

Una celda que contiene información de encabezado para una fila en una cuadrícula.

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <th role="rowheader">Day 1</th>
      <td>65</td>
    </tr>
    <tr>
      <th role="rowheader">Day 2</th>
      <td>74</td>
    </tr>
  </tbody>
</table>

role = "scrollbar"

Un objeto gráfico que controla el desplazamiento del contenido dentro de un área de visualización, independientemente de si el contenido se muestra completamente dentro del área de visualización.

<div id="content1">Lorem ipsum...</div>
<div
  role="scrollbar"
  aria-controls="content1"
  aria-orientation="vertical"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25">
    <div class="scrollhandle"></div>
</div>

role = "search"

Una región emblemática que contiene una colección de elementos y objetos que, en conjunto, se combinan para crear un servicio de búsqueda.

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</button>
</div>

role = "searchbox"

Un tipo de cuadro de texto destinado a especificar criterios de búsqueda.

<div role="search">
  <input role="searchbox" type="text">
  <button role="button">Search</button>
</div>

role = "separator"

Un divisor que separa y distingue secciones de contenido o grupos de menuitems.

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

role = "control deslizante"

Una entrada de usuario donde el usuario selecciona un valor dentro de un rango determinado.

<div
  role="slider"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25">
    <div class="sliderhandle"></div>
</div>

role = "spinbutton"

Una forma de rango que espera que el usuario seleccione entre opciones discretas.

<input
  role="spinbutton"
  aria-valuemax="100"
  aria-valuemin="0"
  aria-valuenow="25"
  type="number"
  value="25">

role = "status"

Un contenedor cuyo contenido es información de asesoramiento para el usuario, pero no es lo suficientemente importante como para justificar una alerta, pero a menudo se presenta como una barra de estado.

<div role="status">Online</div>

role = "switch"

Un tipo de casilla de verificación que representa los valores de activación / desactivación, a diferencia de los valores marcados / desactivados.

<select role="switch" aria-checked="false">
  <option>On</option>
  <option selected>Off</option>
</select>

role = "tab"

Una etiqueta de agrupación que proporciona un mecanismo para seleccionar el contenido de la pestaña que se va a representar al usuario.

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>

role = "table"

Una sección que contiene datos ordenados en filas y columnas. La función de tabla está destinada a contenedores tabulares que no son interactivos.

<table role="table">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <!-- etc -->
  </tbody>
</table>

role = "tablist"

Una lista de elementos de tabulación, que son referencias a elementos de tabpanel.

<ul role="tablist">
   <li role="tab">Introduction</li>
   <li role="tab">Chapter 1</li>
   <li role="tab">Chapter 2</li>
</ul>

role = "tabpanel"

Un contenedor para los recursos asociados con una pestaña, donde cada pestaña está contenida en un cuadro.

<ul role="tablist">
  <li role="tab">Introduction</li>
  <li role="tab">Chapter 1</li>
  <li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
  <!-- etc -->
</div>

role = "cuadro de texto"

Entrada que permite texto de forma libre como su valor.

<textarea role="textbox"></textarea>

role = "timer"

Un tipo de región activa que contiene un contador numérico que indica la cantidad de tiempo transcurrido desde un punto de inicio, o el tiempo restante hasta un punto final.

<p>
  <span role="timer">60</span> seconds remaining.
</p>

role = "toolbar"

Una colección de botones de función de uso común representados en forma visual compacta.

<ul role="toolbar">
  <li><img alt="New" src="new.png"></li>
  <li><img alt="Open" src="open.png"></li>
  <li><img alt="Save" src="save.png"></li>
  <li><img alt="Close" src="close.png"></li>
</ul>

role = "tooltip"

Una ventana emergente contextual que muestra una descripción de un elemento.

<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

Normalmente, la información sobre herramientas estaría oculta. Usando JavaScript, la información sobre herramientas se mostrará después de un retraso cuando el usuario se desplace sobre el elemento que describe.

role = "árbol"

Un tipo de lista que puede contener grupos anidados de subnivel que se pueden contraer y expandir.

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>

role = "treegrid"

Una cuadrícula cuyas filas se pueden expandir y contraer de la misma manera que para un árbol.

role = "treeitem"

Un elemento de opción de un árbol. Este es un elemento dentro de un árbol que puede expandirse o contraerse si contiene un grupo de subnivel de treeitems.

<ul role="tree">
  <li role="treeitem">
    Part 1
    <ul>
      <li role="treeitem">Chapter 1</li>
      <li role="treeitem">Chapter 2</li>
      <li role="treeitem">Chapter 3</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 2
    <ul>
      <li role="treeitem">Chapter 4</li>
      <li role="treeitem">Chapter 5</li>
      <li role="treeitem">Chapter 6</li>
    </ul>
  </li>
  <li role="treeitem">
    Part 3
    <ul>
      <li role="treeitem">Chapter 7</li>
      <li role="treeitem">Chapter 8</li>
      <li role="treeitem">Chapter 9</li>
    </ul>
  </li>
</ul>