En este post voy a intentar explicar de la mejor manera posible para qué sirve y cómo usar la poco conocida propiedad azimuth en CSS. Para entender su función, hay que decir que se trata de una propiedad que pertenece a la categoría de hojas de estilo auditivas. Es decir, no es una propiedad que vaya dirigida a modificar la apariencia visual de una web, sino que está enfocada a la maquetación auditiva, por así decirlo, de un portal.
Existen múltiples ocasiones en las que una web es interpretada por aplicaciones que leen el portal y lo reproducen como audio. El ejemplo más claro está en los navegadores que usan las personas con deficiencias visuales, interpretan la web como texto para que se pueda escuchar la información.
En este contexto, la propiedad azimuth va orientada a darle dinamismo al audio de esa interpretación y poder especificar qué canales vamos a usar y el grado en los mismos. En palabras de la W3C, azimuth ‘proporciona un modo natural de articular varias voces separadamente, como en la vida real (las personas raramente están todas en el mismo lugar en un cuarto)’. Por lo que si tenemos varios textos, podríamos hacer que cada uno se interprete en una posición diferente para crear un efecto envolvente.
Esta propiedad se usa definiendo la posición en la que se encontrará el audio dentro de un ángulo de 360 grado alrededor del oyente. Por defecto 0 grados delante, 90 sería derecha, 180 detrás y 270 izquierda. Pero según el caso, puede interesar invertir el ángulo para que 0 grados sea detrás y 180 delante. Para ello, antes del valor pondremos ‘behind’. Podemos usar grados personalizados o valores prefijados que tienen una equivalencia a un ángulo determinado. A continuación os dejo una tabla con los valores y sus correspondencias en grados.
| left-side | equivale a ‘270deg’ y a ‘270deg’ usando behind. |
| far-left | equivale a ‘300deg’ y a ‘240deg’ usando behind. |
| left | equivale a ‘320deg’ y a ‘220deg’ usando behind. |
| center-left | equivale a ‘340deg’ y a ‘200deg’ usando behind. |
| center | equivale a ‘0deg’ y a ‘180deg’ usando behind. |
| center-right | equivale a ’20deg’ y a ‘160deg’ usando behind. |
| right | equivale a ’40deg’ y a ‘140deg’ usando behind. |
| far-right | equivale a ’60deg’ y a ‘120deg’ usando behind. |
| right-side | equivale a ’90deg’ y a ’90deg’ usando behind. |
| leftwards | resta 20 grados al ángulo actual. |
| rightwards | suma 20 grados al ángulo actual. |
Como se puede ver, la correspondencia de los grados varía si usamos ‘behind’ o no, que es algo a tener en cuenta. De modo que vamos a ver unos ejemplos de sintaxis que podemos utilizar.
h1{ azimuth: 90deg }
p { azimuth: right-side }
.texto { azimuth: behind right-side }En los tres casos el sonido se posicionaría a la derecha, en un ángulo de 90 grados. Claro que a la hora de escucharlo y sacarle partido, todo dependerá del sistema de sonido a través del cual se reproduce, mono, stereo, 5.1, etc.
Es innegable las claras ventajas que tiene todo esto para la accesibilidad, aunque no es necesario implementarlo para cumplir los estándares de validación de la WAI. Digamos que lo que hace es enriquecer la experiencia de navegación para que sea más atractiva y cómoda.
Deja una respuesta