La idea de agregar elementos de accesibilidad a CSS es que los developers podamos adaptar nuestras creaciones a todos los tipos de usuarios y que todos puedan disfrutar como se arma nuestra página web. Estas son algunas de las opciones de accesibilidad que tiene css
Con esta regla podemos darle a algunos elementos un comportamiento particular si el usuario prefiere que los elementos se muevan lo justo y necesario. Es sumamente util para regular como se verán las animaciones en dispositivos en los que sus usuarios prefieren no ver animaciones.
Un ejemplo en código:
/*Acá defino por primera vez la animación que quiero que haga el elemento*/
.animation {
animation: pulse 1s linear infinite both;
}
/*Ahora definiré que no la haga si el usuario prefiere no ver animaciones*/
@media (prefers-reduced-motion) {
.animation {
animation-name: dissolve;
}
}
En este caso, la animación ocurrirá normalmente salvo que el usuario en su configuración del sistema haya decidido que no quiere ver movimientos mas allá de los fundamentales pasa manejar el sistema. En la mayoria de los casos, las animaciones son mas esteticas que necesarias.
La propiedad smooth-behavior nos permite regular como se verá el scroll en el navegador. Tiene dos propiedades: smooth y auto. Auto conserva el movimiento normal mientras que smooth da un scroll un poquito mas suave, definido por el sistema operativo para que, si el usuario lo desea, el movimiento no sea tan brusco.
La propiedad aria-hidden permite ocultar o mostrar cosas a lectores de pantalla o algun otro dispositivo de accesibilidad. No va a cambiar en nada la forma en la que se muestra un elemento en pantalla sino si alguna API de accesibilidad debe leerlo o no. Tiene dos valores: true o false. Si es true el elemento se esconde, si es false el elemento se muestra.