Cómo empezar

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 de formularios 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 rem en lugar de unidades absolutas px para 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.

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.