Accesibilidad para diseñadores y programadores de la Junta de Andalucía

Contenido EN ELABORACIÓN

Qué significa que el contenido es accesible

Los contenidos deben publicarse siguiendo ciertas pautas para ayudarnos a tener en cuenta todo tipo de discapacidades (motriz, visual, auditiva, cognitiva…) a la hora de estructurar una web.

Toda la información digital, ya sea en un sitio web, aplicación, o documento digital es accesible si:

Su contenido puede ser percibido por las personas independientemente de sus sentidos.
Pueden acceder a ellos a través del del dispositivo que usan.
La información es legible y comprensible a la audiencia.
Se usan estándares web para la creación de dicho contenido ya que así pueden ser correctamente interpretado por diferentes dispositivos.

¡No se trata de cumplir las normas punto por punto porque lo dice la ley, se trata de hacer contenidos que sean accesibles para todos!

Siempre que sea posible, piensa en la accesibilidad mientras creas los contenidos o archivos desde la aplicación de origen, como por ejemplo un procesador de texto o una aplicación de composición de páginas.

WCAG 2.1 - Pautas más importantes a tener en cuenta para diseñadores y programadores

Proporciona alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.
Crea contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.
Facilita a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.
Proporciona a los usuarios el tiempo suficiente para leer y usar el contenido.
No diseñes contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.
Proporciona medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.
Hacer que los contenidos textuales resulten legibles y comprensibles.
Sigue los estándares web para que los productos de apoyo y agentes de usuarios pueden acceder al contenido e transmitir la información al usuario. (Si usas HTML)

Criterios de éxito aplicables para diseñadores

Principios	A	AA	AAA
Perceptible	Estructura y relaciones del contenido son correctas. No hay instrucciones con características sensoriales. No hay información basada sólo en color. Pausar o detener el audio, o un mecanismo para controlar el volumen de audio.	Contraste de color (mínimo) El texto puede redimensionarse hasta un 200 por ciento sin pérdida de contenido o funcionalidad. Evitar usar Imágenes de texto.	Contraste de color (Mejorado) Audio de fondo bajo o sin sonido. Presentación Visual mejorada. Imágenes de texto (Sin excepción)
Operable	La funcionalidad es operable por teclado. Existe un medio para salir del foco de un elemento. Por ejemplo cerrar un tooltip. El límite de tiempo para realizar acciones puede ajustarse o desactivarse. Pausar, detener, ocultar multimedia. Umbral de tres destellos o menos. Hay un mecanismo disponible para eludir bloques de contenido (por ejemplo, paginador). Texto de enlaces comprensibles (en su contexto).	Existe más de una manera para localizar o acceder al contenido importante del sitio. Los encabezados y etiquetas describen el tema o propósito. El foco está diseñado y puede distinguirse en cualquier elemento interactivo de la interfaz.	Teclado (sin excepciones) No hay tiempo para realizar acciones. Las interrupciones pueden ser pospuestas o suprimidas por el usuario. La re autenticación no implica pérdida de datos. Las páginas no contienen nada que destelle más de tres veces por segundo. Se informa al usuario su localización. Permite identificar el propósito de cada enlace con sólo el texto.
Comprensible	No cambia el contexto al recibir el foco. No cambia el contexto al accionar input. Hacer que los contenidos textuales resulten legibles y comprensibles. Labels o instrucciones para cada elemento de formulario.	Navegación consistente. Identificación consistente. Sugerencias para corregir el error en el lugar donde se cometió. Prevención de errores.	Definiciones de palabras inusuales. Contenido suplementario para texto de nivel de lectura avanzado. Los cambios se realizan cuando el usuario los solicita y pueden deshacerse. La ayuda está disponible en contexto. Se requiere confirmación para acciones de envío/finalización o son reversibles.
Robusto	Productos de apoyo y agentes de usuario pueden acceder al contenido.

Criterios de éxito aplicables para programadores

Principios	A	AA	AAA
Perceptible	Alternativas textuales para contenido no textual Sólo audio y sólo vídeo (grabado) Subtítulos (grabados) Audio descripción Estructura y relaciones del contenido son correctas No hay instrucciones con características sensoriales No hay información basada sólo en color.	Subtítulos (en directo) Audio-descripción (grabada) Contraste de color (mínimo) El texto puede redimensionarse hasta un 200 por ciento sin pérdida de contenido o funcionalidad. Evitar usar Imágenes de texto	Subtítulos en lengua de señas Audiodescripción ampliada (grabada) Medio alternativo (grabado) Alternativa para solo audio en vivo. Contraste de color (Mejorado) Presentación Visual mejorada Imágenes de texto (Sin excepción)
Operable	La funcionalidad es operable por teclado Existe un medio para salir del foco de un elemento. Por ejemplo cerrar un tooltip. El límite de tiempo para realizar acciones puede ajustarse o desactivarse. Pausar, detener, ocultar multimedia. Umbral de tres destellos o menos. Eludir bloques de contenido Navegable por títulos de páginas Orden del foco es el esperado. Texto de enlaces comprensibles (en su contexto)	Existe más de una manera para localizar o acceder al contenido importante del sitio. Los encabezados y etiquetas describen el tema o propósito. El foco está diseñado y puede distinguirse en cualquier elemento interactivo de la interfaz.	Teclado (sin excepciones) No hay tiempo para realizar acciones. Las interrupciones pueden ser pospuestas o suprimidas por el usuario. La re autenticación no implica pérdida de datos. Las páginas no contienen nada que destelle más de tres veces por segundo. Se informa al usuario su localización. Permite identificar el propósito de cada enlace con sólo el texto. Usar Encabezados de sección para organizar contenido.
Comprensible	Idioma de la página esta predeterminado. No cambia el contexto al recibir el foco. No cambia el contexto al accionar input. Hacer que los contenidos textuales resulten legibles y comprensibles. Labels o instrucciones para cada elemento de formulario.	El idioma de cada pasaje o frase en el contenido puede ser determinado por software Navegación consistente. Identificación consistente. Sugerencias para corregir el error en el lugar donde se cometió. Prevención de errores.	Definiciones de palabras inusuales Significado expandido de abreviaturas Mecanismo para identificar la pronunciación de palabras ambiguas. Los cambios se realizan cuando el usuario los solicita y pueden deshacerse. La ayuda está disponible en contexto. Se requiere confirmación para acciones de envío/finalización o son reversibles.
Robusto	Validar el contenido sigue estándares web Productos de apoyo y agentes de usuario pueden acceder al contenido.

Checklist: buenas prácticas de accesibilidad para diseñadores

Cuando diseñes:

Proporciona suficiente contrastes de color de los textos estáticos, interactivos y sus estados, respecto a su contexto y colores de fondo.
Utiliza el color para sólo para complementar el contenido y no como única diferenciación entre elementos que deban distinguirse.
Asegura que los elementos interactivos se diferencian de los estáticos por color, forma, tamaño.
Legibilidad de textos. Evita las variantes light de la fuente y el tamaño del texto menor a 13px.
Que el lenguaje de los componentes sean lo más sencillos posibles y puedan ser comprendidos por todos los usuarios.
Que la navegación sea clara y que haya elementos que ayuden al usuario a orientarse e ir hacia atrás o delante.
Crea enlaces de texto y botones comprensibles incluso fuera de contexto y que sean perceptibles.
Que los títulos y estructura semántica sean visualmente reconocibles a primera vista. (secciones, artículos, menú).
Utiliza un tamaño mínimo de elementos interactivos (por ejemplo, botones de iconos) de 44 pixeles de área clickeable.
Diseña cada estado de los elementos interactivos como enlaces o componentes de formulario.
Ayuda al usuario diseñando mensajes de error y ayuda.
Haz que los elementos se vean, posicionen y comporten de manera consistente y predecible en toda la interfaz.
Sigue los patrones de diseño con los que el usuario acostumbra a interactuar.
Evita usar imágenes o iconos que contengan texto, si utilizas infografías proporciona una alternativa textual a las mismas.

Checklist: buenas prácticas de accesibilidad para diseñadores

Todas las imágenes funcionales y elementos multimedia deben tener texto alternativo que describa el contenido.
Todos los elementos y componentes interactivos deben ser accesibles por teclado, lectores de pantalla, interfaces de voz, entre otros.
Asegura que el orden de lectura y navegación por teclado son iguales, es lógico e intuitivo.
Que el foco sea siempre visible y distinguible al interactuar y navegar por teclado. Que se posicione en lugares esperados y que pueda activarse o navegarse con teclas específicas.
Identifica el lenguaje principal de cada página y si hay cambios de lenguaje en el contenido.
Cada control de formulario debe tener su etiqueta asociada correctamente.
Ayuda a los usuarios a prevenir y corregir errores al introducir datos en formularios.
Asegura que estás utilizando código semántico y sigues las especificaciones de HTML/CSS propuestas por el W3C.
Otorga código semántico a componentes interactivos customizados.
Si se crean controles personalizados en HTML asegura que son accesibles para los productos de apoyo, no sólo ratón. Utiliza atributos ARIA indicando el tipo, nombre, rol, estado, propiedades y atributos.
Usa atributos de WAI-ARIA como técnica complementaria para proporcionar significado a componentes personalizados. Utiliza siempre que puedas controles HTML nativos.
Utiliza herramientas para evaluar el código y la accesibilidad de la aplicación manual y automáticamente. Valida continuamente.
Revisa que los colores de los texto estáticos, interactivos y estados (hover, focus) tienen un contraste adecuado con los validadores de contraste de color.

Índice