it-swarm.dev

La mejor práctica para usar aria-label como selector para el estilo

Estoy diseñando una tabla que tiene celdas de tabla con marcas de verificación (no interactivas). Los iconos de marca de verificación se agregan a través de CSS. Como no hay contenido accesible, agregué un aria-label a ella. Ahora me pregunto si es una buena idea usar este atributo como un selector CSS para agregar esos iconos de marca de verificación como este:

td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

Aprendí que usar los atributos ARIA como selectores es generalmente una buena práctica, al menos para los atributos relacionados con el estado como aria-hidden, aria-expanded etc. En este caso tenía sentido para mí tener el estilo td acoplado a la etiqueta correspondiente. Pero, por supuesto, si esas etiquetas cambian en algún momento, también tendré que adaptar el CSS.

¿Conoces otros inconvenientes aparte de eso? ¿O tienes ideas sobre cómo resolver esto con más elegancia?

6
josi

Para representar estados de control que no se transmiten de forma nativa en HTML, como expandido (por ejemplo), luego apoyarse en los atributos ARIA como selectores de estilo puede ser una buena opción.

En este caso, depende de CSS para agregar contenido a una página basada en ARIA. No creo que lo necesite. Primero, soporte para aria-label (en <td>s así como otros elementos) puede ser inestable en combinaciones de navegador/lector de pantalla más antiguas , y en segundo lugar, puede admitir contenido generado por CSS en combinaciones de navegador/lector de pantalla más antiguas Más inestable. Sin embargo, no sé nada de sus usuarios para saber si esto es importante.

Esto también supone que el CSS se carga sin ningún problema (caídas de la red, etc.).

Esto significa que algunos usuarios nunca pueden escuchar ni ver el valor en la celda.

Intento asegurarme de que el contenido sin procesar esté disponible independientemente de si el CSS se carga para darle estilo, y también trato de limitar mi dependencia de ARIA.

Habiendo dicho eso, aria-hidden el apoyo es, en general, históricamente mejor que las dos cuestiones que menciono anteriormente.

Déjame arrojar otra idea a tu manera. Esto no es necesariamente mejor, pero creo que es más robusto cuando se consideran usuarios desconocidos AT configuraciones y posibles problemas de red.

Puse el texto y la marca de verificación en el <td>. Si el CSS nunca se carga (o los usuarios están en un navegador realmente antiguo), no es gran cosa. Lo peor que sucederá es que un usuario vea/escuche "Sí, compruebe".

Entonces el aria-hidden se asegura de que la marca de verificación no se anuncie a los lectores de pantalla. El CSS oculta el texto de los usuarios videntes. Y creo que tienes el efecto que deseas.

<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
3
aardrian

¿Conoces otros inconvenientes aparte de eso?

Al usar aria-label atributo como selector de estilo, técnicamente no hay problema.

  • Con respecto a este uso de aria-label

En sí mismo no es suficiente para ser un texto alternativo válido para todo tipo de problemas de accesibilidad.

Muy pocas personas usan un lector de pantalla. Si aria-label puede ser una ayuda para ellos (dependiendo del soporte del lector de pantalla, vea la respuesta @aardrian), no es útil para una gran parte de la población.

Un código UTF-8 especial que representa una marca de verificación no es más que una imagen visual, y los usuarios pueden esperar, por ejemplo, tener una información sobre herramientas. Para el caso, se recomienda el atributo title, usado conjuntamente con aria-label para un mejor soporte de navegador y lector de pantalla.

Alguien que usa una lupa de pantalla o con un trastorno cognitivo, puede acceder al texto alternativo de la marca de verificación sin tener que desplazarse al encabezado de la tabla de la columna.

El problema seguirá siendo importante para alguien con discapacidades motoras porque tener que desplazarse para ver el encabezado o usar el mouse para ver qué significa esta marca de verificación sigue siendo muy difícil.

TLDR: ARIA no brinda accesibilidad universal para todo tipo de discapacidades

2
Adam