El primer consejo es simple: si está utilizando el rol ARIA, debe asegurarse de que se comporte de la manera que espera que sea. Por ejemplo, si agrega un elemento
y define sus roles ARIA como un «botón», debe habilitar JavaScript, que es necesario para proporcionar la interacción de teclado esperada para el botón.
3. Use ARIA para agregar, no quitar, semántica accesible.
Las tecnologías de asistencia necesitan cierta información para determinar el significado y el propósito de los elementos de la interfaz de usuario. Esta información se conoce como semántica de disponibilidad.
Cuando se ejecuta correctamente, ARIA proporciona semántica de accesibilidad. Mal hecho, reemplaza la semántica de accesibilidad.
ARIA puede proporcionar esta información requerida de dos maneras: enmascarando el contenido original o dándole significado. Por ejemplo, suponga que tiene un menú de navegación con varios elementos de menú. Cada uno de estos elementos representa y está vinculado a una página importante de su sitio, por lo que los usuarios pueden hacer clic en uno de estos elementos, como «Acerca de», e ir a la página que deseen.
En HTML, estos elementos de navegación serían los elementos de anclaje o . Pero para transmitir a las tecnologías de asistencia y las tecnologías de asistencia que se trata de elementos de menú, no enlaces, se debe agregar el ‘elemento de menú’ de la función ARIA. Esto ocultaría la semántica original para hacer que HTML sea más accesible para los usuarios de tecnología de asistencia.
ARIA también puede mejorar el contenido original para describir el componente de la interfaz de usuario de una manera que la tecnología de asistencia pueda entender. Por ejemplo, el atributo aria-expanded le dice que el menú no es solo un menú, sino un menú desplegable.
La fuerza del ARIA es también su peligro. Los autores web pueden anular la semántica de accesibilidad cuando hacen un mal uso de ARIA. Por ejemplo, si el autor de una página web crea un elemento de tabla y luego le agrega un «registro» de función ARIA, los usuarios de tecnología de asistencia no podrán verlo como una tabla.
Ejemplos de accesibilidad de ARIA
WAI proporciona un conjunto completo de estándares web para usar ARIA en HTML. Hay docenas de roles, estados y propiedades para definir los elementos de la interfaz de usuario disponibles, que incluyen:
- Cuadros de diálogo de alerta y mensaje
- Migas de pan
- botones
- Carruseles
- Cuadrículas
- Gemelos
- Menús, barras de menú o botones de menú
- Controles deslizantes
- Mesas
Puede encontrar ejemplos de cualquiera de los elementos anteriores en Especificación WAI Authoring Practice 1.2. A continuación, nos limitaremos a tres elementos: una alerta, un botón y un cuadro de lista. El primero le mostrará cómo usar el rol ARIA. El segundo muestra cómo usar los estados de ARIA y el tercero muestra cómo usar las propiedades de ARIA. Veamos los ejemplos a continuación.
Ejemplo de rol de ARIA
Incluido ejemplo proporcionado por WAI, un botón de alerta, cuando se hace clic, activa un mensaje.
En el código HTML siguiente, puede ver un elemento de botón seguido de un elemento div con la función ARIA establecida en «alerta». Este rol identifica el div como un contenedor donde se agregará o actualizará el contenido de la alerta.
<button type="button" id="alert-trigger">
Trigger Alert
</button>
<div id="example" role="alert"></div>
<!-- The following script element contains the content that will be inserted into the alert element. -->
<script type="text/template" id="alert-template">
<p><span lang="da">Hej</span>, hello, <span lang="it">ciao</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕</span></p>
</script>
Ejemplo de estado ARIA
Incluido ejemplo proporcionado por WAI, el botón es un botón de alternancia accesible que se puede apagar o encender. Cuando presiona este botón en particular, por ejemplo, el ícono cambia de «sonido encendido» a «sonido apagado».
En el HTML a continuación, puede ver el rol de ARIA y los dos atributos de ARIA utilizados. El rol de ARIA identifica un elemento de anclaje como un widget de botón. Dado que es específicamente un botón de alternar, tiene un estado presionado en el aria. Cuando el botón está apagado, el valor de estado es falso. Cuando el botón está encendido, el estado es real.
El segundo atributo de aria, aria-hidden, se aplica al archivo SVG. Establecido en «verdadero», el atributo oculto de aria eliminó el elemento SVG para evitar que los lectores de pantalla lo lean. Como este ícono es puramente decorativo, eliminar este elemento puede mejorar la experiencia del usuario de la tecnología de asistencia.
<p>
This
<q>
Mute
</q>
toggle button uses an
<code>
a
</code>
element.
</p>
<a tabindex="0"
role="button"
id="toggle"
aria-pressed="false">
Mute
<svg aria-hidden="true" focusable="false">
<use xlink:href="images/mute.svg#icon-sound"></use>
</svg>
</a>
Un ejemplo de una propiedad ARIA
Incluido ejemplo proporcionado por WAI, el cuadro de lista se puede desplazar y permite al usuario seleccionar un elemento de una lista de opciones.
En el HTML a continuación, puede ver los dos roles ARIA y el atributo ARIA. El rol ARIA establecido en «cuadro de lista» identifica un elemento de lista desordenado que tiene comportamientos de lista y contiene opciones de lista. Cada elemento de la lista tiene una función ARIA establecida en «opción», que identifica cada elemento seleccionable que contiene el nombre de la opción.
La propiedad aria-labelledby se establece en el mismo valor que el nombre del ID de segmento que contiene la etiqueta del cuadro de lista. Esto proporciona al usuario de la tecnología de asistencia un nombre reconocible del objeto.
<p>
Choose your favorite transuranic element (actinide or transactinide).
</p>
<div class="listbox-area">
<div>
<span id="ss_elem" class="listbox-label">
Transuranium elements:
</span>
<ul id="ss_elem_list"
tabindex="0"
role="listbox"
aria-labelledby="ss_elem">
<li id="ss_elem_Np" role="option">
Neptunium
</li>
<li id="ss_elem_Pu" role="option">
Plutonium
</li>
<li id="ss_elem_Am" role="option">
Americium
</li>
<li id="ss_elem_Cm" role="option">
Curium
</li>
<li id="ss_elem_Bk" role="option">
Berkelium
</li>
<li id="ss_elem_Cf" role="option">
Californium
</li>
<li id="ss_elem_Es" role="option">
Einsteinium
</li>
<li id="ss_elem_Fm" role="option">
Fermium
</li>
<li id="ss_elem_Md" role="option">
Mendelevium
</li>
<li id="ss_elem_No" role="option">
Nobelium
</li>
<li id="ss_elem_Lr" role="option">
Lawrencium
</li>
<li id="ss_elem_Rf" role="option">
Rutherfordium
</li>
<li id="ss_elem_Db" role="option">
Dubnium
</li>
<li id="ss_elem_Sg" role="option">
Seaborgium
</li>
<li id="ss_elem_Bh" role="option">
Bohrium
</li>
<li id="ss_elem_Hs" role="option">
Hassium
</li>
<li id="ss_elem_Mt" role="option">
Meitnerium
</li>
<li id="ss_elem_Ds" role="option">
Darmstadtium
</li>
<li id="ss_elem_Rg" role="option">
Roentgenium
</li>
<li id="ss_elem_Cn" role="option">
Copernicium
</li>
<li id="ss_elem_Nh" role="option">
Nihonium
</li>
<li id="ss_elem_Fl" role="option">
Flerovium
</li>
<li id="ss_elem_Mc" role="option">
Moscovium
</li>
<li id="ss_elem_Lv" role="option">
Livermorium
</li>
<li id="ss_elem_Ts" role="option">
Tennessine
</li>
<li id="ss_elem_Og" role="option">
Oganesson
</li>
</ul>
</div>
</div>
Agregando la semántica necesaria con ARIA
Comprender y usar las funciones, los estados y las propiedades de ARIA en el marcado puede ayudarlo a crear sitios web con elementos de interfaz de usuario complejos que sean accesibles para todos los usuarios, incluidos aquellos que dependen de lectores de pantalla y aquellos que no pueden usar un mouse. Ahora que ha aprendido los conceptos básicos de ARIA, puede comenzar a seguir las otras pautas de accesibilidad web para que su sitio cumpla totalmente con las normas.
