Introducción a ARIA y la semántica de HTML no nativo
Hasta ahora, recomendamos usar elementos HTML nativos porque le permiten enfocarse compatibilidad con teclados y semántica incorporada, pero hay ocasiones en las que y el HTML nativo no funcionará. Por ejemplo, actualmente no hay elemento HTML estandarizado para una construcción de IU muy común, el menú emergente. Tampoco ¿Hay algún elemento HTML que proporcione una característica semántica, por ejemplo, "el el usuario debe enterarse de esto lo antes posible".
En esta lección, exploraremos cómo expresar semánticas que el HTML no puede por su cuenta.
Aplicaciones de Internet enriquecidas accesibles de la iniciativa de accesibilidad web especificación (WAI-ARIA o solo ARIA) es útil para unir áreas con problemas de accesibilidad que no se pueden administrar con HTML nativo. Funciona al permitirte especificar los atributos que modifican la la forma en que un elemento se traduce en el árbol de accesibilidad. Veamos una ejemplo.
En el siguiente fragmento, usamos un elemento de lista como un tipo de casilla de verificación personalizada. El Casilla de verificación de CSS le da al elemento las características visuales requeridas.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Si bien esto funciona bien para los usuarios videntes, un lector de pantalla no proporcionará ninguna indicación que el elemento debe ser una casilla de verificación, por lo que los usuarios con baja visión pueden pasar por alto la el elemento por completo.
Sin embargo, con los atributos de ARIA, podemos darle al elemento la información que falta
para que el lector de pantalla pueda interpretarlo correctamente. Aquí, agregamos el role y
atributos aria-checked para identificar explícitamente el elemento como una casilla de verificación
para especificar que está marcada
de forma predeterminada. El elemento de lista ahora se agregará
el árbol de accesibilidad y un lector de pantalla lo informará correctamente como casilla de verificación.
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA funciona cambiando y perfeccionando el árbol de accesibilidad del DOM estándar.
Aunque ARIA nos permite modificar sutilmente (o radicalmente) la accesibilidad para cualquier elemento de la página, que es lo único que cambia. ARIA no aumenta el comportamiento inherente de los elementos. no hará que el elemento enfocable o le brindan objetos de escucha de eventos de teclado. Esa sigue siendo parte de nuestra de desarrollo de software.
Es importante entender que no es necesario redefinir la configuración predeterminada
semántica. Más allá de su uso, un archivo HTML estándar <input type="checkbox">
elemento no necesita un atributo de ARIA role="checkbox" adicional para
se anunció correctamente.
También vale la pena señalar que ciertos elementos HTML tienen restricciones sobre qué elementos de ARIA
roles y atributos se pueden usar en ellos. Por ejemplo, a un elemento <input
type="text"> estándar no se le puede aplicar ningún rol o atributo adicional.
Consulta las especificaciones de ARIA en HTML para obtener más información.
Veamos qué otras capacidades puede ofrecer ARIA.
¿Qué puede hacer ARIA?
Como viste con el ejemplo de la casilla de verificación, ARIA puede modificar la semántica de los elementos existentes. o agregar semántica a elementos que no tienen semántica nativa. También puede expresan patrones semánticos que no existen en HTML, como un menú o una pestaña. panel. A menudo, ARIA nos permite crear elementos tipo widget que no serían posibles con HTML sin formato.
- Por ejemplo, ARIA puede agregar texto descriptivo y etiquetas adicionales que solo
a las APIs de tecnología de accesibilidad.
<button aria-label="screen reader only label"></button>
- ARIA puede expresar relaciones semánticas entre elementos que extienden la una conexión superior/secundaria estándar, como una barra de desplazamiento personalizada que controla región específica.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Y ARIA puede hacer que partes de la página estén "vivas", por lo que informa de inmediato tecnología de asistencia cuando cambian.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
Uno de los aspectos centrales del sistema ARIA es su colección de roles. Un rol
en términos de accesibilidad equivale a un indicador abreviado de una IU en particular.
. ARIA brinda un vocabulario de patrones que podemos usar a través de role.
en cualquier elemento HTML.
Cuando aplicamos role="checkbox" en el ejemplo anterior, estábamos diciendo
tecnología de asistencia que el elemento debe seguir la "casilla de verificación" . Que
garantizamos que tendrá un estado marcado (ya sea marcado o no)
y que el estado se puede alternar con el mouse o la barra espaciadora
al igual que un elemento de casilla de verificación HTML estándar.
De hecho, debido a que las interacciones con el teclado
aparecen de forma tan prominente en el lector de pantalla
de uso, es muy importante asegurarse de que, al crear un widget personalizado,
El atributo role siempre se aplica en el mismo lugar que tabindex.
atributo; Esto garantiza que los eventos del teclado
lleguen al lugar correcto
se centra en un elemento y su papel se transmite con precisión.
La especificación de ARIA describe un
Taxonomía de posibles valores para el atributo role y el ARIA asociado
atributos que se pueden usar
junto con esos roles. Este es el mejor
fuente de información definitiva sobre cómo funcionan los roles y atributos de ARIA
y cómo se pueden usar de una manera que sea compatible con los navegadores y
tecnologías de asistencia.
Sin embargo, la especificación es muy densa; un punto de partida más accesible es la ARIA Documento de prácticas de creación , en la que se exploran las prácticas recomendadas para usar los roles de ARIA disponibles y propiedades.
ARIA también ofrece roles de puntos de referencia que amplían las opciones disponibles en HTML5. Consulta el Diseño de roles de punto de referencia Patrones para obtener más información.