Cómo empezar Índice de páginas
Accesibilidad
Las webs, herramientas y documentos del Gobierno de Aragón están obligados a cumplir con el estándar AA de las Web Content Accesibility Guidelines (WCAG) 2.2 y la UNE-EN 301549:2022, como se establece en el Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público.
Debemos conseguir que el mayor número de personas posible pueda percibir y operar nuestros productos digitales en cualquier tipo de dispositivo. Todos debemos implicarnos en este proceso y tener en cuenta estos criterios desde su concepción.
Recursos
Accesibilidad Web. WCAG 2.2 de forma sencilla
Recomendamos tomar como referencia el blog Usable y Accesible y consultar el libro gratuito Accesibilidad Web. WCAG 2.2 de forma sencilla para obtener más información y recursos útiles aplicables en tu flujo de trabajo.
Portales de información
Si tienes dudas sobre cómo funciona una etiqueta, cuáles son sus atributos ARIA, cómo se construye un elemento o la normativa aplicable, puedes consultar los portales de información oficiales.
Accesibilidad con DESY
Recuerda
- El sistema de diseño por sí mismo no garantiza la accesibilidad, pero si te facilitará el desarrollo.
- Si no conoces los atributos ARIA, no los utilices. Es mejor no usarlos que usarlos mal.
- Intenta evitar widgets externos de accesibilidad como lectores de pantalla incrustados en portales o de etiquetado automático. A menudo es un parche que obstaculiza las propias herramientas de asistencia que cada persona se ha configurado en su equipo y dificulta la navegabilidad. Debes tener en cuenta la accesibilidad desde el principio del proyecto y etiquetar los elementos con criterio.
Deberás utilizar, en cada componente, los atributos ARIA y etiquetas de manera adecuada, y tener una jerarquía y sintaxis correcta. Nuestras plantillas y patrones te ahorrarán tiempo de maquetación.
Es posible que necesites un componente, configuración, patrón o plantilla específico para tu proyecto que no proporcione DESY. Puedes implementar o desarrollar nuevos, asegúrate de que cumple los requisitos AA de accesibilidad y es coherente con nuestros estilos.
Qué debes tener en cuenta
Utiliza nuestros estilos de texto y consulta los usos correctos
- Encabezados:
<h1>-<h6>. Deben seguir un orden coherente y el título del contenido de la página debe ser un único<h1>. - Párrafos: Texto que sigue a los encabezados. No dejes
<p>vacíos, ni escribas texto directamente dentro de un<div>. - Listas: Utiliza
<ul>para listas sin orden y<ol>para ordenadas. No simules items de lista con guiones o números. - Bloques comunes:
<header>,<footer>,<main>. Los bloques de plantillas te ayudarán a estructurar tu página.
Otras consideraciones que te permitirán añadir información útil a lectores de pantalla.
<hr>: Línea de separación.<abbr>: Describe la palabra abreviada. Por ejemplo: Avda.<q>: Cita. Por ejemplo:Esto es una cita
lang: Atriuto que especifica el lenguaje del contenido del elemento. Más información sobre el atributo lang- No utilices el elemento
<br>para forzar saltos de línea y espaciados. Esto genera problemas de usabilidad para las personas con lectores de pantalla.
Utiliza extensiones de navegador para consultar la jerarquía de contenido y la legibilidad de la página cuando desactivas el CSS.
La construcción de un formulario es muy importante. Puede suponer una barrera de entrada para las personas si no son capaces de navegar por él, entender y percibir la información.
Consulta la sección de componentes de formularios y patrones sobre cómo pedimos información para conocer las buenas prácticas, el etiquetado y los parámetros que debes tener en cuenta en cada input.
Un contenido digital debe poder adaptarse a distintos dispositivos y formatos. Diseña y desarrolla primero en anchuras pequeñas para solucionar problemas de interfaz. Partiendo de un entorno más restrictivo llegarás a interfaces más consistentes cuando las adaptes a anchuras mayores en pantallas de escritorio.
Testea rápidamente cómo se comporta el contenido de tu web para validar las soluciones desarrolladas.
-
Cambia las dimensiones de la ventana de tu navegador
¿Tienes elementos fijos que impiden ver el contenido?¿Hay elementos desbordados?
-
Cambia el tamaño de letra en la configuración de tu navegador
¿Tu contenido es legible?¿Se desborda? Asegúrate de construir en unidades parametrizadas
remen lugar de unidades absolutaspxpara evitar problemas de escalabilidad.
Los estilos de color DESY cumplen accesibilidad y los utilizamos en los componentes de manera que siempre se respete el contraste mínimo para que cualquier persona pueda percibir las acciones y el contenido correctamente.
- No utilices sólo colores, imágenes o iconos para transmitir información. Acompaña con una etiqueta de texto o atributos ARIA que describan su propósito.
- Utiliza extensiones del navegador que te permitan analizar el contraste entre los colores de fondo y texto de tu página para detectar cuáles incumplen el criterio.
Es obligatorio facilitar la navegación de tu sitio web a través de un mapa web disponible en el pie de página.
Una manera rápida de revisar que tu web es navegable por teclado es utilizar el tabulador para saltar entre los elementos accionables. Debes tener en cuenta los siguientes puntos:
- Enlaces de saltar al contenido: Utilizamos un componente oculto para saltar la navegación de las cabeceras.
- Foco visible: Al tabular, el elemento coge el foco y debe aparecer resaltado en amarillo. No lo ocultes, siempre debe ser visible.
- Navegación en grupos de elementos: La navegación por un formulario, listados o grupos de botones es muy importante. Mantén una navegación ordenada y consistente por cada uno de los elementos. Debes poder llegar a todos ellos, ya sean selectores, árboles o desplegables. La jerarquía de etiquetas te ayudará a que la navegación por teclado sea similar a la visual.
- Avisos y notificaciones: Cuando aparece una notificación de error, un mensaje modal o un aviso importante, el foco debe saltar al título del bloque. Dependiendo de su importancia debe hacerlo instantáneamente o al terminar la lectura del bloque actual. Revisa los parámetros de accesibilidad de nuestros componentes para asegurar que su comportamiento es correcto.
- Desplegables y pop-ups: En ocasiones, al desplegar un contenido es necesario que el foco salte a un accionable concreto. Por ejemplo, al botón de cerrar en un menú o al primer item de un listado.
Puedes utilizar extensiones del navegador para consultar el orden que sigue el foco.
La forma más rigurosa de testear que el comportamiento de tu web es el correcto, es instalando un lector de pantalla como NVDA para Chrome y Firefox en Windows y VoiceOver en macOS. Se trata de una asistente avanzado muy personalizable, con atajos de teclado propios y su propia curva de aprendizaje.
Intenta navegar con teclado, sin mirar a la pantalla y únicamente escuchando las descripciones que te proporciona la herramienta. Empatiza con una persona con discapacidad e intenta localizar las barreras que va a encontrar, o testea con personas que utilicen esta herramienta en su día a día.
- ¿Puede acceder a todos los botones?
- ¿Se entienden los datos que piden los formularios?
- ¿Son claras las acciones y los enlaces?
- ¿Hay información que se pierda?
Aunque produzcas contenidos enlazables que se encuentran fuera de tu web, también deberán cumplir accesibilidad.
- Documentos PDF y Word: Consulta la guía de accesibilidad de contenidos PDF y Word del Portal del Gobierno de Aragón para saber cómo construirlos.
- Publicaciones en Redes Sociales: Utiliza el campo de texto alternativo para imágenes que te proporciona cada plataforma.
- Vídeos: Deben tener subtítulos. Youtube es capaz de incluirlos de manera automática, pero recomendamos incrustarlos en el vídeo o configurarlos en el reproductor.
Se trata de un modelo normalizado de declaración de accesibilidad que se obtiene tras realizar una revisión de accesibilidad de tu sitio web.
Es obligatorio enlazar a la declaración de accesibilidad desde el pie de página. Consulta el patrón de página de la declaración de accesibilidad para obtener más información.