Los medios auditivos (Aural Media o Speech Media) son un módulo de CSS diseñado originalmente para permitir que los sintetizadores de voz y los lectores de pantalla interpreten las páginas web, controlando aspectos como el tono de voz, la velocidad, el volumen y las pausas.
| Propiedad | Descripcion |
|---|---|
| voice-volume | Controla el volumen de a voz sintetica. silent|x-soft|soft|medium|loud|x-loud|+6db |
| voice-rate | Controla velocidad del habla. normal|x-slow|slow|fast|s-fast|80% |
| voice-family | Permite elegir el tipo de voz que leerá el contenido, de manera similar a font-family. |
| speak | Determina si el texto debe ser leído o no. Es el equivalente auditivo a display: none|auto|never|always |
| cue-before | Permiten reproducir un sonido (un archivo de audio corto) inmediatamente antes de que se lea un elemento, útil para alertar al usuario sobre un cambio de sección o un aviso importante. |
| cue-after | Permiten reproducir un sonido (un archivo de audio corto) inmediatamente después de que se lea un elemento, útil para alertar al usuario sobre un cambio de sección o un aviso importante. |
Las propiedades de medios auditivos originales de CSS2 (speech-rate, voice-family, pitch, etc.) fueron depreciadas. El estándar moderno se trasladó al módulo CSS Speech Module (Nivel 3), pero su soporte por parte de los navegadores actuales y lectores de pantalla (como NVDA, JAWS o VoiceOver) es casi nulo. En la práctica real del desarrollo web, la accesibilidad auditiva se maneja mediante HTML semántico y atributos ARIA.
/* Especificación CSS2 (Depreciada) */
@media aural {
h1 { speech-rate: large; }
}
/* Especificación CSS3 (Moderna pero con soporte muy limitado) */
@media speech {
h1 { voice-volume: loud; }
}
.alerta {
cue-before: url('ping.wav') -3dB;
}
Dado que los navegadores no procesan estas propiedades CSS, la accesibilidad auditiva real se logra en el HTML, asegurando que los lectores de pantalla entiendan la estructura del documento:
Semántica pura: Usar <main>, <nav>, <article>, <button> correctamente. Los lectores de pantalla anuncian automáticamente el tipo de elemento.
Atributos ARIA: Atributos como aria-label, aria-hidden="true" (para que no se lea visualmente algo decorativo), o aria-live="polite" (para avisar dinámicamente al usuario cuando algo cambia en la pantalla sin interrumpirlo).
Si estás trabajando en mejorar la accesibilidad de un sitio web, enfocar los esfuerzos en la estructura del marcado e implementar buenas prácticas de ARIA garantiza que la experiencia auditiva sea impecable en cualquier dispositivo actual.