HTML, CSS y ARIA son estándares del consorcio W3C para etiquetar el contenido, controlar su presentación y gestionar su disponibilidad para los productos de apoyo.
El consorcio W3C desglosa técnicas específicas para cada uno de ellos:
A continuación se desglosan algunas técnicas relevantes para garantizar la accesibilidad.
Hacer el contenido navegable por teclado
En este ámbito, como responsable del contenido debes revisar que:
- Todos los componentes interactivos deben ser alcanzables, navegables y operables utilizando el teclado.
- El contenido al navegar por teclado sigue el mismo orden de lectura el dispuesto visualmente en la interfaz. Este orden deber ser lógico e intuitivo.
- El foco del teclado debe ser visible para todas las personas.
- Cuando se activa una acción por teclado, el foco debe mostrarse en el lugar esperado por el usuario. Por ejemplo, si se abre una ventana de diálogo, el foco se mostrará activo y visible en el primer elemento interactivo esperado por el usuario dentro de dicha ventana.
- Permite que los usuarios controlen la interfaz, componentes como vídeos, audios o carruseles no deben reproducirse automáticamente al entrar en una página.
- Asegura que al navegar con el teclado, el foco no queda atrapado en ningún componente y se puede navegar hacia delante y hacia atrás.
- Proporciona ayudas para que los usuarios puedan alcanzar fácilmente los contenidos tabulando. Por ejemplo, utiliza “Skip links” o enlaces que aparecen al principio de la interfaz para llegar antes al contenido, crea listados al principio del contenido, añade atajos de teclado.
- Proporciona un comportamiento de teclado predecible siguiendo las recomendaciones de navegación propuestas por WAI-ARIA para controles personalizado
Garantizar el uso correcto con lectores de pantalla
- Identifica que el idioma de la página y los cambios de idioma utilizando el atributo HTML "lang"
- Define una jerarquía clara de encabezados, <H1>, <H2> ..., No omitas ni los anides incorrectamente saltándote niveles.
- Utiliza el marcado semántico para transmitir la estructura de la interfaz y el significado de los elementos interactivos y no interactivos.
- Proporciona enlaces de salto o skip links en la parte superior de la interfaz para ayudar a llegar al contenido central.
- Añadir texto alternativo para imágenes funcionales y multimedia.
- Para los controles personalizados, agrega atributos WAI-ARIA para informar sobre su semántica.
- Asegúrate de seguir los estándares de W3C para HTML y CSS.
- Utiliza los atributos ARIA sólo como técnica complementaria.
Hacer el foco perceptible
El foco proporciona el equivalente de la ayuda visual al utilizar un ratón pero cuando se utiliza un dispositivo teclado.
Los elementos que deben mostrar el foco cuando se navega son:
- Enlaces
- Botones
- Campos de formularios / Contoles como textareas, select boxes, radio buttons, etc.)
- Items de menú
- Elementos que se activan por hover como los tooltips
- Widgets, como seleccionar una fecha de un calendario.
Ten en cuenta estos consejos:
- El foco debe coincidir con el flujo visual y el orden de lectura lógico. Después de realizar una acción, el foco debe desplazarse a un lugar esperado.
- Diseña el foco accesible: que cumpla el del contraste de color (WCGA 2.1- 1.4.11) y no utilices solo un cambio en el color de fondo. Los indicadores predeterminados definidos por los navegadores no son lo suficientemente visibles.
- Mantén la propiedad CSS “:focus” y no lo anules de la interfaz usando “outline:0.”
Definir controles personalizados con atributos WAI-ARIA
Los sistemas operativos definen un conjunto de interfaces que permiten exponer información sobre objetos y eventos a los productos de apoyo. Cuando no se utilicen componentes semánticos, el C3C recomienda seguir las Prácticas WAI-ARIA Authoring Practices 1.1 para proporcionar datos accesibles a los servicios de apoyo.
ARIA es un conjunto de atributos que se pueden agregar a los elementos HTML para comunicar la semántica de los elementos de la interfaz de usuario a las tecnologías de asistencia para que los usuarios puedan percibir el contenido específico.
Por ejemplo, cuando se usa un formulario HTML semántico, los lectores de pantalla pueden leer en voz alta los elementos para usuarios ciegos, pero eso no ocurre en widgets dinámicos, complejos o personalizados cuando el HTML nativo no se puede usar correctamente.
Sin embargo, aplicar solo los atributos de ARIA no garantiza que todas las tecnologías de asistencia obtengan acceso, por lo que es necesario programar comportamientos y funcionalidades accesibles, como el acceso mediante el teclado.
Si necesitas crear un componente personalizado asegúrate de añadirle los atributos name, rol y los estados, si tuviera. Además, asegúrate de que
- El nombre y el rol pueden ser determinados programáticamente; los estados, las propiedades y los valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios a estos elementos está disponible para los agentes de usuario, incluidas los productos de apoyo.
- Los roles, estados y propiedades pueden verificarse automáticamente durante el proceso de desarrollo.