Recursos de accesibilidad web

Crea componentes y sitios siguiendo las pautas de accesibilidad para el contenido web y mejores prácticas.

Lista de accesibilidad

La información sobre accesibilidad web está principalmente disponible en inglés y es difícil de entender debido a su lenguaje técnico. Existen una enorme cantidad de documentos, y si no tienes experiencia y conocimiento previo es difícil encontrar y comprender lo que estás buscando.

Esta lista existe para ser usada como ayuda a la hora de crear componentes y sitios que sean inclusivos. Está basada en las pautas de accesibilidad para el contenido web 2.1 y mejores prácticas. Cada elemento en la lista contiene:

  • Descripción
  • Pasos para verificar
  • Criterio de conformidad correspondiente (si el criterio corresponde a triple A será considerado como mejores prácticas)
  • Enlaces con recursos (opcional)

Animaciones

Existe una opción para desactivar animaciones

Existe opción de poner en pausa animación que dura más de 5 segundos

Color

Contenido textual tiene una relación de contraste mínima de 4.5:1

Estructura

Encabezados son descriptivos

Página tiene enlace para saltar a contenido

Orden lógico de encabezados

Todo el contenido de la página debe estar dentro de un punto de referencia

Formularios

Mensajes de error están asociados al control correspondiente

Fieldset y legend son usados para agrupar elementos de formulario

Campos obligatorios y opcionales son etiquetados como tal

Etiquetas deben estar asociadas al control correspondiente

Controles de formulario deben tener una etiqueta visible

Ofrece instrucciones si los campos tienen restricciones

Mensajes de error describen el problema y sugiere cómo arreglarlo

Mensajes de error son presentados en formato de texto

Etiquetas están visualmente cerca de su control

Usa autocompletado en campos que piden información personal

HTML

Encabezados usan código semántico

Listas deben usar código semántico

Usa enlaces para ir a otra página o sección

Botones son usados al generar una acción

Imágenes y contenido no textual

Imágenes no decorativas deben tener atributo alt que describa propósito

Imágenes decorativas tienen un atributo alt vacío

Elementos svg decorativos tienen un atributo aria-hidden

Nombre accesible y etiqueta

Botones y enlaces tienen un nombre accesible

La etiqueta visible de controles debe ser incluida en el nombre accesible

Propósito de enlaces y botones puede ser determinado por etiqueta

Otros

No dependas de funcionalidad de gestos basada en múltiples puntos

El lenguaje principal de la página puede ser identificado

Título de página es descriptivo

Teclado y foco

Elementos que reciben foco no deben crear un cambio de contexto

Elementos interactivos invisibles no deben recibir foco

El foco de elementos sigue un orden lógico

Elementos interactivos deben tener un foco visible

Zoom

Hacer zoom quita la posición fija de elementos

Se puede hacer zoom hasta 400% sin pérdida de contenido