Tutorial de Accesibilidad Web HTML

Cuando creas una página mediante HTML siempre deberías tener en mente la accesibilidad a la misma. Esto significa que debemos pensar en las personas con alguna discapacidad, ya sea parcial o completa. Existen usuarios con problemas de visión o totalmente ciegos. Del mismo modo, también existen personas con problemas de audición que esperan disponer de subtítulos cuando ven algún vídeo.

Todo esto es algo en lo que la mayor parte de los desarrolladores no suelen pensar, ya que no se le da la importancia que merece. Realmente, son muy pocas las cosas que tendremos que hacer para satisfacer las necesidades de la mayor parte de usuarios con alguna discapacidad. Cuando un usuario es ciego, no podrá leer lo que pone en la pantalla, por lo que el ratón será un elemento totalmente inútil. Estos usuarios se mueven por la página mediante lectores de pantalla, usando ciertas teclas para saltar por diferentes apartados de la misma. Existen extensiones para Chrome como Screen Reader for Chrome o ChromeVox Classic que se utilizan para leer los contenidos que se ven en pantalla. Con ellas puedes hacerte una idea de la experiencia de usuario de muchas personas.

No es imprescindible que una aplicación o una página sea totalmente accesible en sus inicios, pero sí algo que se debería tener en cuenta en alguna mejora o futura versión. Además, si eres o quieres ser un desarrollador web, has de saber que en el sector público todas las páginas han de ser accesibles para cualquier persona. Tampoco es raro que en muchas de las empresas más grandes del mundo hagan preguntas acerca de tus conocimientos de accesibilidad web en sus entrevistas. De hecho, en su día fue uno de los pilares fundamentales en entrevistas que he tenido con empresas como FaceBook.

En este tutorial vamos a ver las cosas más importantes que debes tener en cuenta a la hora de construir una interfaz web accesible. No las veremos todas, ya que serían demasiadas para lo que se pretende con este tutorial de introducción, pero sí aquellas más importantes.

HTML semántico

Es importante estructurar una página usando las etiquetas semánticas correctas, de modo que sea posible discernir cuál es el contenido principal de la misma o cuál el secundario. Del mismo modo, los encabezados también ayudan a saltar por las diferentes partes del texto.

Centrándonos en los encabezados de una página, el más importante debe ser el h1, que se debería corresponder con el título de la página. Seguidamente, debes usar encabezados h2 para los encabezados de segundo nivel de profundidad, encabezados h3 para los de tercer nivel de profundidad y así hasta llegar al encabezado h6, que rara vez se utiliza:

<h1>Primer nivel</h1>
    <h2>Segundo nivel</h2>
        <h3>Tercer nivel</h3>
        <h3>Tercer nivel</h3>
    <h2>Segundo nivel</h2>
    <h2>Segundo nivel</h2>
        <h3>Tercer nivel</h3>
            <h4>Cuarto nivel</h4>
                <h5>Quinto nivel</h5>
                <h5>Quinto nivel</h5>
            <h4>Cuarto nivel</h4>
	<h3>Tercer nivel</h3>
    <h2>Segundo nivel</h2>

También es importante utilizar la etiqueta strong para resaltar el texto y la etiqueta em para ponerlo en cursiva, ya que las etiquetas b e i no se consideran etiquetas semánticas que aporten información más allá de la visible, a pesar de que el resultado sea aparentemente el mismo. Los lectores de pantalla darán al usuario la opción de navegar hasta cada uno de los encabezados disponibles.

<strong>Texto destacado con significado semántico</strong>
<em>Texto en cursiva con significado semántico</em>

No nos olvidemos tampoco de las listas, ya que si sitúas párrafos separados, los lectores de pantalla o screen readers no serán capaces de identificar que se trata de elementos relacionados. Además, también debemos tener en cuenta el uso de listas ordenadas o no ordenadas según corresponda.

Un lector de pantalla organizará los siguientes elementos y dará al usuario la opción de leer la lista no ordenada:

<ul>
  <li>Primer elemento no ordenado</li>
  <li>Segundo elemento no ordenado</li>
</ul>

El lector también informará al usuario de que una lista es secuencial:

<ol>
  <li>Primer elemento ordenado</li> 
  <li>Segundo elemento ordenado</li>
</ol>

También es una buena práctica describir el contenido de las tablas mediante la etiqueta caption:

<table>
  <caption>Edades</caption>
  <tr>
    <td>Manuel</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Edu</td>
    <td>35</td>
  </tr>
</table>

Del mismo modo, también deben usarse las etiquetas thead, tbody y tfoot para identificar la cabecera, el cuerpo y el pie de las tablas HTML.

Usa el atributo alt

Proporcionar una descripción de las imágenes mediante el atributo alt es ya un requerimiento para poder validar los estándares HTML de una página, además de una buena práctica:

<img src="foto-edu.png" alt="Imagen de mi cara">

El atributo alt permite que las personas ciegas puedan recibir una descripción de la imagen y, además, también permitirá mostrar una descripción de la misma en caso de que no sea posible mostrar la imagen. Es casi imprescindible si quieres tener una buena puntuación SEO, ya que es uno de los muchos factores de peso que los buscadores utilizan.

Usa el atributo role

El atributo role permite asignar diferentes roles a cada uno de los elementos de la página. Los roles permiten identificar en qué consisten los diferentes elementos de la página. Sin embargo, no todos los elementos necesitan tener asignado un rol, sino solo aquellos más relevantes. Los lectores de pantalla son capaces de inferir el rol adecuado de cada elemento en la mayor parte de los casos en base al código HTML existente.

Estos son algunos de los roles más utilizados:

• complementary: El rol complementary sirve para identificar una sección de la página que se relaciona con el contenido principal de la misma, pero que también podría tener sentido de forma independiente. Un ejemplo de ello sería una barra lateral con enlaces o información relacionada con el artículo principal. Siempre que sea posible, debe usarse la etiqueta semántica aside en estos elementos.
• list: El rol list sirve para identificar una lista de elementos. Suele usarse junto con el rol listitem, usado para identificar los elementos de la lista.
• listitem: El rol listitem se utiliza para identificar los elementos que se encuentran en el interior de los elementos que tienen el rol list, usados a modo de contenedor.
• main: El rol main se usa para identificar el contenido principal de un documento. Se trata del contenido central de la página, sin el cual no tendría sentido su existencia.
• navigation: El rol navigation se usa para identificar aquellos grupos de enlaces que se utilizan para navegar por el sitio web o por los contenidos de la propia página.
• region: El rol region se utiliza para identificar áreas del documento que los autores han identificado como relevantes, proporcionando un mecanismo de navegación sencillo cuando ningún otro rol se adapta.
• tab: El rol tab sirve para indicar aquellos elementos interactivos dentro de una lista de pestañas que mostrarán su respectivo contenido al hacer clic en ellos.
• tabpanel: El rol tabpanel se usa para identificar los paneles de contenido con los que se corresponde cada elemento con el rol tab.
• alert: El rol alert puede usarse para proporcionar ciertos mensajes al usuario. Por ejemplo, se usará cuando algún elemento se actualice en pantalla. El lector de pantalla leerá el mensaje automáticamente y lo cerrará.
• alertdialog: El rol alertdialog funciona exactamente igual que el rol alert. La única diferencia reside en que es el usuario el que deberá cerrar el mensaje de alerta.
• application: El rol application sirve para indicar que el elemento que lo incluye y todos sus descendientes deben ser tratados igual que una aplicación de escritorio, saltándose las técnicas de interpretación HTML tradicionales.
• article: El rol article sirve para indicar la sección de la página que podría conformar la página por sí misma dentro del documento. También se suelen incluir en su interior contendios relacionados como información acerca del autor, comentarios o noticias.
• heading: El rol heading se usa para definir la cabecera de una página o de una sección, agregando más información estructural a la página.
• banner: El rol banner se usa para reprensentar contenido genérico dentro de una página, que suele estar situado en la cabecera de la misma. En en el interior del elemento con este rol podría estar el nombre del sitio web, el logotipo del mismo o ciertos elementos destacados.
• form: El rol form se utiliza en aquellos elementos que engloban a otros que proporcionan la misma funcionalidad que un formulario.
• button: El rol button se usa, tal y como su nombre indica, para reprensentar aquellos elementos en los que el usuario puede hacer clic. En un lector de pantalla, estos elementos se representarán como si fuesen botones.
• textbox: El rol textbox se usa para identificar aquellos elementos en los que es posible introducir texto.
• checkbox: El rol checkbox se usa para indicar elementos interactivos que es posible seleccionar o marcar. Estos elementos deben contener también el atributo aria-checked para identificar así su estado.
• table: El rol table se utiliza para identificar los elementos que tienen estructura tabular no interactiva, con sus contenidos organizados en filas y columnas, sin que necesariamente tenga que tratarse de un elemento de tipo table.
• cell: El rol cell sirve para indicar aquellos elementos que forman parte de un conjunto de elementos que se encuentran en un mismo contenedor, sin que este contenga información acerca de las cabeceras delas filas o de las columnas del mismo.
• row: El rol row se usa para identificar un conjunto de celdas organizadas en filas con estructura tabular, que no siempre han de ser tablas HTML necesariamente. Un elemento con rol row puede contener más celdas, cuadrículas o grids de celdas o cabeceras de columnas, además de una cabecera de fila.
• rowgroup: El rol rowgroup se usa para indicar aquellos elementos con estructura tabular que contienen grupos de filas o elementos row.
• search: El rol search se usa para identificar aquellos elementos de la página que permiten buscar contenidos en la misma, ya sean contenidos de la propia página o de otras páginas.
• contentinfo: El rol contentinfo se usa para indicar aquella información que se suele repetir al final de cada página, como el copyright de la misma o ciertos menús con enlaces. Es habitual aplicar este rol a la etiqueta footer.
• document: El rol document se suele utilizar para indicar indicar a los lectores de pantalla que deben leer el contenido que hay en su interior. Suele usarse en widgets relativamente complejos.
• feed: El rol feed se usa para indicar una lista de artículos. Los artículos del feed se agregan o eliminan de la lista cuando el usuario hace scroll por los mismos. En muchos casos estos feeds pueden ser infinitos.
• dialog: El rol dialog se usa para indicar aquellos elementos que están separados de la interfaz principal de la página, situados habitualmente sobre el resto de contendios de la misma. Pueden ser elementos modales, pudiendo interactuar con los contenidos del elemento dialog, o no modales, en cuyo caso todavía será posible interactuar con los contenidos que estén fuera del elemento con rol dialog.
• img: El rol img se usa para identificar todos aquellos elementos que puedan ser considerados como imágenes. Estos elementos pueden contener imágenes, emojis, texto o cualquier otro elemento visual similar a una imagen.
• figure: El rol figure se usa para indicar aquellos elementos visuales o esquemáticos que no es posible englobar en otros roles, como bloques de código, conjuntos de imágenes o esquemas; todo aquello que no sea información textual en general.
• grid: El rol grid se usa con aquellos elementos que contienen una o más filas con celdas. Deberá ser posible navegar por cada una de las celdas con el teclado.
• gridcell: El rol gridcell se usa con los elementos que estén en el interior de un elemento con rol grid. Se usan para emular el funcionamiento de las etiquetas td de las tablas HTML.
• listbox: El rol listbox se usa con aquellos elementos de entre los cuales el usuario puede seleccionar uno o más de uno. Estos elementos son estáticos y a diferencia de las etiquetas select, pueden contener imágenes.
• switch: El rol switch se usa con los elementos cuya funcionalidad equivale a las etiquetas checkbox de HTML, salvo porque en lugar de usar los estados checked (seleccionado) y unchecked (no seleccionado), usa los estados on (activado) y off (desactivado).
• timer: El rol timer permite identificar los elementos que incluyen contadores numéricos que cuentan el tiempo desde un punto de inicio hasta otro final.

Puedes encontrar más información detallada acerca de lada uno de los roles existentes en este enlace. No será necesario que agregues roles a las etiquetas HTML que ya identifican semánticamente su contenido, como por ejemplo las etiquetas nav, form, button, table, ul o li.

Vamos a tomar como ejemplo un elemento nav que podríamos definir tal y como ves a continuación:

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/noticias">Noticias</a></li>
    <li><a href="/contacta">Contacta</a></li>
  </ul>
</nav>

Si por algún motivo te vieses obligado a usar una etiqueta div en lugar de una etiqueta nav, tendrías que usar el rol navigation en dicha etiqueta:

<div role="navigation">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/noticias">Noticias</a></li>
    <li><a href="/contacta">Contacta</a></li>
  </ul>
</div>

En resumen; el atributo role se usa para dar significado a aquellos elementos de la interfaz que carecen del mismo.

Usa los atributos aria

Los atributos ARIA definen la semántica que puede se aplicada a los diferentes elementos HTML. ARIA es un acrónimo de Accessible Rich Internet Applications, que significa Aplicaciones Enriquecidas Accesibles de Internet. A continuación vamos a ver algunos de estos atributos:

• aria-label: Este atributo se utiliza para describir textualmente al elemento en el que se incluye:

  <p aria-label="Descripción del texto aquí">...</p>

  Este atributo es habitual en campos de texto que carecen de etiquetas, como por ejemplo un campo de búsqueda. En ocasiones es posible que un usuario pueda inferir la utilidad de algún elemento, pero puede que un lector de pantalla lo tenga más complicado, por lo que el atributo aria-label resulta útil en muchos casos.

• aria-labelledby: Este atributo establece una conexión entre un elemento y el elemento que lo etiqueta. Por ejemplo, podemos tener un campo de texto input y una etiqueta label, en cuyo caso los lectores de texto serán capaces de establecer una conexión gracias al atributo for de la etiqueta. Sin embargo, cuando queremos establecer conexiones usando otras etiquetas HTML, debemos usar el atributo aria-labelledby para establecer la conexión:

  <h2 id="titulo">Título de la película</h2>
  
  <div aria-labelledby="titulo">
  Sinópsis de la película
  </div>

• aria-hidden: En ocasiones podrías querer que los lectores de pantalla ignoren algunos elementos que no contienen información relevante. Para ello puedes usar el atributo aria-hidden, que acepta los valores true y false. Si se usa el atributo con el valor true en algún elemento, los lectores de pantalla lo ignorarán:

  <div aria-hidden="true">Información poco importante</div>

• aria-describedby: Este atributo establece una conexión entre un elemento y otro que se corresponde con su descripción:

  <button aria-describedby="descripcion-boton" >Enviar formulario</button>
  
  <div id="descripcion-boton">Haz clic en el botón para enviar el formulario</div>

• aria-describedat: Este atributo permite especificar una URL en la que debería decribirse el contenido del elemento sobre el que se aplica el atributo:

  <img src="/gato.png" aria-describedat="http://descripcion.com/gato" />

• aria-level: Este atributo permite establecer un orden jerárquico para los diferentes elementos de una estructura, que habitualmente será de árbol, aunque también se suele aplicar en listas de pestañas u otros elementos secuenciales. Partiendo de 1, el nivel debería aumentar a medida que aumenta la profundidad de los elementos:

  <div id="nodo-1" aria-level="1">Nodo 1</div>
    <div id="nodo-1-1" aria-level="2">Nodo 1,1</div>
      <div id="nodo-1-1-1" aria-level="3">Nodo 1,1,1</div>
      <div id="nodo-1-1-2" aria-level="3">Nodo 1,1,2</div>
    <div id="nodo-1-2" aria-level="2">Nodo 1,2</div>
  <div id="nodo-2" aria-level="1">Nodo 2</div>
    <div id="nodo-2-1" aria-level="2">Nodo 2,1</div>
    <div id="nodo-2-2" aria-level="2">Nodo 2,2</div>

• aria-multiline: Este atributo se usa para indicar si un campo de texto acepta una o varias líneas, Acepta los valores true o false, siendo false su valor por defecto:

  <textareas id="descripcion" aria-multiple="true"></textarea>

• aria-orientation: Sirve para indicar si la orientación de un elemento es vertical u horizontal. Acepta los valores horizontal o vertical, siendo horizontal el valor por defecto:

  <img src="/imagen.jpg" aria-orientation="vertical" />

• aria-busy: Sirve para indicar si un elemento y sus descendientes están cargando datos en el momento actual. Acepta los valores true o false, siendo false su valor por defecto:

  <div id="usuarios" aria-busy="true">
  ...
  </div>

• aria-flowto: Permite saltarse el orden lógico o visual de los elementos e indicar el siguiente elemento al que deben saltar los lectores de pantalla. Acepta como valor el id del siguiente elemento o una lista de ids, dando al usuario la opción de escoger el siguiente elemento de entre los de la lista en este último caso:

  <ul>
    <li id="a" aria-flowto="c">Elemento 1</li>
    <li id="b">Elemento 2</li>
    <li id="c">Elemento 3</li>
  </ul>

• aria-multiselectable: Este atributo se usa para indicar si el usuario podrá seleccionar uno o más elementos de una lista o de un elemento con varios descendientes. Si su valor es false solamente se podrá seleccionar un elemento, o más de un elemento si su valor es true. Su valor por defecto es false:

  <ul role="tablist" aria-multiselectable="true">
    <li id="tab-1">Tab1</div>
    <li id="tab-2">Tab2</div>
  </ul>

• aria-checked: Este atributo se utiliza para indicar el estado actual de un elemento que puede ser posible seleccionar, por lo que su funcionalidad debería ser la misma que la de un elemento input de tipo checkbox. Puede tener los valores true o false:

  <div id="check-option" aria-checked="true"></div>

• aria-controls: Se utiliza para indicar aquel elemento o elementos cuyos contenidos son controlados por el elemento actual. Acepta una referencia o id como valor.

  <button onclick="gestionarPanel('A');" role="tab" aria-controls="elemento-a">Selector 1</button>
  <button onclick="gestionarPanel('B');" role="tab" aria-selected="elemento-b">Selector 2</button>
  
  <div role="tabpanel" id="elemento-a">...</div>
  <div role="tabpanel" id="elemento-b">...</div>

• aria-disabled: Indica que es posible percibir el elemento actual por pantalla, pero que está desactivado, por lo que no es editable ni es posible interactuar con él. Acepta los valores true o false, siendo false su valor por defecto:

  <div id="elemento-clicable" aria-disabled="true"></div>

• aria-grabbed: Este atributo se usa con aquellos elementos que es posible arrastrar y soltar, indicando si un elemento ha sido agarrado o o no. De estarlo, el atributo aria-grabbed tendrá el valor true, o false en otro caso:

  <ul>
    <li id="el-1" aria-grabbed="true">Elemento 1</li>
    <li id="el-2" aria-grabbed="false">Elemento 2</li>
  </ul>

• aria-dropeffect: Se usa con aquellos elementos que es posible arrastrar y soltar, e indica el resultado que se obtiene cuando se suelta el elemento en otro elemento que lo acepte. Se aceptan uno o más valores, estando en este último caso separados por espacios. Los posibles valores son los siguientes:
  • copy: Se creará una copia del elemento original y será copiada en el destino al soltar el elemento.
  • execute: Se ejecutará una función que soporte el elemento de destino cuando se suelte el elemento, usando el elemento original como parámetro de dicha función.
  • link: Se creará una referencia al elemento original en el destino al soltar el elemento.
  • move: El elemento original se eliminará del contenedor originen y se moverá el contenedor de destino..
  • none: No sucederá nada, por lo que se cancelará el acción.
  • popup: Se mostrará una ventana emergente o popup que permitirá al usuario seleccionar entre alguna de las opciones anteriores, además de poder cancelar el evento.

  El valor por defecto del atributo aria-dropeffect es none.

  <ul">
    <li id="el-1" aria-dropeffect="move>Elemento 1</li>
    <li id="el-2" aria-dropeffect="move>Elemento 2</li>
  </ul>

• aria-expanded: Este atributo se utiliza para indicar si un elemento o conjunto de elementos están expandidos o colapsados. Suele usarse, por ejemplo, en los submenús de los menús desplegables. Acepta los valores true, false o undefined, siendo este último su valor por defecto:

  <ul role="navigation>
    <li><a href="/inicio">Inicio</a></li>
    <li>
      <a href="/informacion">Información</a>
      <ul class="nav-submenu" aria-expanded="true">
        <li><a href="/programacion">Programación</a></li>
        <li><a href="/aplicaciones">Diseño</a></li>
      </ul>
    </li>
  </ul>

• aria-haspopup: Este atributo se usa para indicar que un elemento dispone de un popup o submenú relacionado que se activará al interactuar con el elemento. Los tooltips no se cuentan como popups:

  <div aria-haspopup="true" id="subir-archivo">Archivo</div>

• aria-invalid: Este atributo se usa para indicar que el valor introducido por el usuario en el elemento actual no es válido. El lector de texto o navegador debe informar al usuario del error, además de proporcionar sugerencias para las posibles correcciones. El atributo solamente ha de estar presente si se han introducido datos en el elemento o campo, salvo que el usuario haya intentado enviar un formulario y el campo use el atributo aria-required, en cuyo caso, el atributo aria-invalid podrá tener un valor aunque no se hayan introducido datos. Acepta los siguientes valores:
  • grammar: Se ha detectado un error gramatical en el valor.
  • spelling: Se ha detectado un error ortográfico en el valor.
  • true: El valor introducido ha fallado la validación.
  • false: No se han detectado errores en el valor.

  El valor por defecto del atributo aria-invalid es false. Aquí tienes un ejemplo de uso:

  <input type="test" aria-invalid="true"/>

• aria-live: Este atributo se usa para indicar que el contenido de un elemento se modifica o actualiza de forma dinámica cada cierto tiempo sin necesidad de que intervenga el usuario. Acepta los siguientes valores:
  • off: No se alertará al usuario de los cambios. Esta opción suele utilizarse cuando el contenido de la actualización es poco relevante.
  • polite: Se alertará al usuario de los cambios, pero sin interrumpir su tarea actual. Por ejemplo, se alertará al usuario cuando termine de escribir o de leer algún otro contenido.
  • assertive: Se alertará al usuario de los cambios inmediatamente, independientemente de que hayan terminado su tarea actual o no. Este valor debe restringirse a avisos muy importantes.

  El valor por defecto del atributo aria-live es off. Aquí tienes un ejemplo de uso:

  <div role="region" id="informacion-coche" aria-live="polite">
    <h2 id="modelo">No se ha seleccionado nada</h2>
    <p id="descripcion-modelo">Selecciona un modelo para ver su descripción</p>
  </div>

• aria-atomic: Con este atributo es posible especificar las partes de un contenido dinámico que queremos que sean anunciadas al usuario. Acepta los valores true o false, siendo false su valor por defecto. Si su valor es true, se anunciarán al usuario todos los elementos, hayan cambiado o no, pero si su valor el false, se anunciarán al usuario exclusivamente aquellos elementos que hayan cambiado.

  <ul id="noticias" aria-live="polite" aria-atomic="true">
    <li>Noticia 1</li>
    <li>Noticia 2</li>
    <li>Noticia 3</li> </ul>

• aria-autocomplete: Este atributo sirve para indicar si se proporcionan sugerencias escritura para un elemento. Acepta los siguientes valores:
  • both: Se mostrará una lista de posibles sugerencias, además de aquella que está seleccionada.
  • inline: Se mostrará un texto con una sugerencia acerca de cómo rellenar el campo.
  • list: Se mostrarán una lista de elecciones de entre las cuales los usuarios podrán seleccionar una.
  • none: No se mostrarán suferencias de escritura.

  El valor por defecto del atributo aria-autocomplete es none. Aquí tienes un ejemplo de uso:

  <input type="text" aria-readonly="true" aria-owns="lista-ciudades" aria-autocomplete="list" role="combobox" id="seleccion-ciudad">
  <ul aria-expanded="true" role="listbox" id="lista-ciudades">
    <li role="option" id="opcion-1">Madrid</li>
    <li role="option" id="opcion-2">Barceloan</li>
  </ul>

• aria-owns: Se utiliza para identificar una relación de parentesco visual o contextual. Aceptar como parámetro el id o loas ids de los elementos que pertenecen al elemento actual:

  <input type="text" aria-owns="lista-paises">
  <ul aria-expanded="true" role="listbox" id="lista-paises">
  ...
  </ul>

• aria-posinset: Define la posición numérica de un elemento en la lista de elementos actual. Si todos los elementos están ya presentados en el DOM, este atributo no es necesario, que el lector o el navegador es capaz de deducir la posición de cada elemento. Sin embargo, si solamente se muestran por pantalla algunos elementos de la lista, esta propiedad sí es necesaria. Este atributo acepta un número entero como valor:

  <h2 id="frutas">Frutas</h2>
  <ul role="listbox" aria-labelledby="frutas">
    <li role="option" aria-setsize="4" aria-posinset="2">Piña</li>
    <li role="option" aria-setsize="4" aria-posinset="3">Naranja</li>
  </ul>

• aria-setsize: Sirve para indicar el número de elementos total de una lista de elementos. Este atributo suele usarse junto con el atributo aria-posinset:

  <h2 id="colores">Colores</h2>
  <ul role="listbox" aria-labelledby="colores">
    <li role="option" aria-setsize="16" aria-posinset="2">Verde</li>
    <li role="option" aria-setsize="16" aria-posinset="3">Rojo</li>
    <li role="option" aria-setsize="16" aria-posinset="4">Azul</li>
  </ul>

• aria-selected: Este atributo se usa para indicar si un elemento está o no seleccionado. Es similar a los atributos aria-checked o aria-presed. Se suele usar con widgets de selección simple o múltiple. Acepta el valor true si el elemento está seleccionado o false si no lo está:

  <ul>
    <li role="tab" id="elemento-a" aria-selected="true">Selector 1</li>
    <li role="tab" id="elemento-b" aria-selected="false">Selector 2</li>
  </ul>

• aria-sort: Este atributo se usa para indicar si los elementos de una tabla o cuadrícula están ordenados en orden ascendente o descendente. Esta propiedad solamente se debe aplicar a las cabeceras de las tablas o de los elementos grid. Acepta los siguientes valores:
  • ascending: Los elementos se ordenan en orden ascendente.
  • descending: Los elementos se ordenan en orden descendente.
  • other: Se utiliza otro algoritmo de ordenación.
  • none: No existe un orden definido, siendo este el valor por defecto.

  Ejemplo de uso del atributo aria-sort:

  <table role="grid">
    <thead>
      <tr role="row">
        <th scope="col" role="columnheader" aria-sort="ascending">Fruta▲/th>
        <th scope="col" role="columnheader">Cantidad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Naranja</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Manzana</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Pera</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>

• aria-valuenow: En ocasiones existen elementos o widgets que permiten seleccionar un ratón de entre un rango de valores. Suelen estar representados por sliders o barras de progreso. Este atributo permite establecer el valor actual o el valor por defecto, de haberlo, de estos elementos:

  <div role="slider" aria-valuenow="20"></div>

• aria-valuemin: Permite establecer el valor mínimo de un elemento que permita seleccionar valores, como un slider o barra de progreso:

  <div role="slider" aria-valuenow="20" aria-valuemin="1" aria-valuemax="100"></div>

• aria-valuemax: Permite establecer el valor máximo de un elemento que permita seleccionar valores, como un slider o barra de progreso:

  <div role="slider" aria-valuenow="20" aria-valuemin="1" aria-valuemax="100"></div>

• aria-valuetext: Permite establecer el valor en forma de texto legible de un elemento que permita seleccionar valores. Si este atributo está presente, también debería estarlo el atributo aria-valuenow:

  <div role="slider" aria-valuenow="20" aria-valuetext="perro"></div>

Y estos han sido los atributos aria más utilizados.

Usa el atributo tabindex

El atributo tabindex se usa para cambiar el orden mediante el cual los elementos mostrados en pantalla se seleccionan cuando se pulsa el tabulador. Por defecto, solamente los enlaces y los formularios pueden ser seleccionados de esta forma, pudiendo saltar rápidamente de un elemento a otro. Sin embargo, podrías querer que los usuarios puedan seleccionar otros elementos.

El atributo tabindex acepta un número como valor que se corresponde con el orden de selección. Si agregas tabindex="0" a un elemento, será posible seleccionarlo siguiendo el flujo de selección habitual:

<div tabindex="0">
  ...
</div>

Si agregas tabindex="-1" a un elemento, ya no será posible seleccionarlo o saltar a él cuando se pulse el tabulador:

<div tabindex="-1">
  ...
</div>

Si quieres ver una guía completa con todas las consideraciones oficiales referentes a la accesibilidad web, consulta este enlace, en donde se muestran todas las recomendaciones.

---