labelledby - html role attribute

¿Hay razones para no usar los estados y roles de ARIA como selectores en CSS?

Question

Actualmente estoy trabajando para hacer un sitio accesible utilizando, entre otras cosas, las etiquetas ARIA. Se me ocurrió que los atributos como aria-invalid serían buenos selectores para mi CSS, en lugar de usar una clase .error .

El beneficio de esto es un HTML más simple y significativo, que es más fácil para mí enlazar desde CSS (y JS). Dicho esto, no he visto hacer esto en otros lugares, por lo que sospecho que existen inconvenientes para aprovechar las etiquetas de accesibilidad para el estilo. Sospecho que el uso de selectores de atributos sin restricciones hace que el CSS tenga menos rendimiento, pero ¿hay otras desventajas que no he considerado?

Answer 1

Debe comprender que los atributos como aria-invalid deben evitarse en primer lugar. Siempre debe usar semántica nativa si está disponible (por ejemplo, se required en elementos de entrada). Esto se llama la primera regla de ARIA .

Creo que lo que realmente desea es agregar estilo a los estados y propiedades ARIA calculados . Lamentablemente esto no es compatible con CSS en este momento.

En resumen: no hay nada de malo en usar [aria-invalid] como un selector de CSS. Simplemente no te ayudará mucho porque debes evitar ese atributo en primer lugar.

Answer 2

Los selectores de atributos son una forma muy flexible de administrar estilos para CSS a gran escala porque los selectores de atributos siempre tendrán una especificidad de 0-0-1-0 .

[aria-*] son perfectos para usar como ganchos de estilo, y también recomiendo usar atributos [data-*] para llenar los huecos en los que puede necesitar uno único. Ciertamente, los selectores de clase deberían seguir utilizándose, sin embargo, puede hacer algunas extensiones de estilo muy elegantes con selectores de atributos:

[data-foo] {
color: red;
}
[data-foo="bar"] {
color: blue;
}
[data-foo="fizz"] {
color: green;
}

Cada uno de estos selectores tiene la misma especificidad, y la cascada permitirá que los estilos se apliquen de manera apropiada.

Puede crear su propia forma de clases usando el selector [attr~="value"] si es necesario.

El uso del selector "atributo contiene" puede ser útil para una técnica que llamo "imágenes con clase"

Uno de los beneficios ocultos de usar atributos sobre las clases es el aumento de rendimiento en JavaScript. En lugar de tener que verificar la presencia de una clase en un elemento (que es muy fácil de equivocar), los navegadores han soportado getAttribute , hasAttribute y setAttribute durante mucho tiempo.