# Cómo empezar - Accesibilidad. DESY. Sistema de diseño del Gobierno de Aragón.

## Cómo empezar Índice de páginas

Cómo empezar

# 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](https://www.w3.org/TR/WCAG22 "Se abre en ventan nueva") 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](https://www.boe.es/diario_boe/txt.php?id=BOE-A-2018-12699).

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](https://olgacarreras.blogspot.com/ "Se abre en ventana nueva") y consultar el [libro gratuito Accesibilidad Web. WCAG 2.2 de forma sencilla](https://olgacarreras.blogspot.com/2024/02/libro-accesibilidad-web-wcag-22-de.html "Se abre en ventana nueva") 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.

-   [Tutoriales de accesibilidad web y ARIA en Mozilla Web Developer](https://developer.mozilla.org/es/docs/Web/Accessibility "Se abre en ventana nueva")
-   [Bloques de contenido en W3C - ARIA Landmarks](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html "Se abre en ventana nueva")
-   [Patrones de semántica en W3C - ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/ "Se abre en ventana nueva")
-   [Criterios de Accesibilidad Web (WCAG) 2.2 en W3C](https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad.html "Se abre en ventana nueva")
-   [Observatorio de Accesibilidad Web](https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad.html "Se abre en ventana nueva")

## 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 semántica correcta. Nuestras [plantillas](plantillas.html) y [patrones](patrones.html) 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](estilos.html).

## Qué debes tener en cuenta

### Etiquetado y semántica Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

Utiliza nuestros [estilos de texto](estilos-tipografia.html) y consulta los [usos correctos](estilos-tipografia-usos.html)

-   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.
-   Enlaces: `<a>`. Si se abre en nueva ventana o pestaña, deberás indicarlo en el atributo `title`. En el caso de enlazar documentos, [debes indicar el formato y el tamaño en el enlace](estilos-tipografia-usos.html#enlaces).
-   Bloques comunes: `<header>`, `<footer>`, `<main>`. Los bloques de [plantillas](plantillas.html) 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](https://www.w3schools.com/tags/att_global_lang.asp "Se abre en ventana nueva")
-   **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.

### Formularios Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

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](componente-formularios.html) y [patrones sobre cómo pedimos información](patrones.html#cmo-pedimos-informacin) para conocer las buenas prácticas, el etiquetado y los parámetros que debes tener en cuenta en cada input.

### Responsive en anchuras pequeñas Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

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.

### Contraste y uso del color Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

Los [estilos de color DESY](estilos-color.html) 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.

### Navegación con el teclado Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

Es obligatorio facilitar la navegación de tu sitio web a través de un [**mapa web**](patrones-pagina-otras.html#mapa-web) disponible en el [pie de página](componente-footer.html).

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](componente-cabeceras.html#accesibilidad).
-   **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.

### Utilización de lectores de pantalla Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

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](https://nvda.es/ "Se abre en ventana nueva") en Windows y [VoiceOver](https://support.apple.com/es-es/guide/voiceover/welcome/mac "Se abre en ventana nueva") 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?

### Contenidos enlazables Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

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](https://departamentodecienciaaragon.atlassian.net/wiki/spaces/PORTAL/pages/97714242/Accesibilidad+de+documentos+Word+y+PDF "Se abre en ventana nueva") para saber cómo construirlos. Ten en cuenta que [debes indicar el formato y el tamaño en el enlace](estilos-tipografia-usos.html#enlaces).
-   **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.

### Declaración de accesibilidad Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

Se trata de un [modelo normalizado de declaración de accesibilidad](https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad/implantacion-rd-1112-2018/declaracion_accesibilidad.html#Instrucciones "Se abre en ventana nueva") que se obtiene tras [realizar una revisión de accesibilidad](https://administracionelectronica.gob.es/pae_Home/pae_Estrategias/pae_Accesibilidad/implantacion-rd-1112-2018/revisiones_accesibilidad.html "Se abre en ventana nueva") de tu sitio web.

Es obligatorio enlazar a la declaración de accesibilidad desde el [pie de página](componente-footer.html). Consulta el [patrón de página de la declaración de accesibilidad](patrones-pagina-otras.html#declaracin-de-accesibilidad) para obtener más información.