Pautas para desarrolladores

Contenido

Criterios de éxito más relevantes

Principios A AA AAA
Perceptible

1.1.1 Alternativas textuales para contenido no textual

1.2.1 Sólo audio y sólo vídeo (grabado) 

1.2.2 Subtítulos (grabados)

1.2.3 Audio descripción

1.3.1 Estructura y relaciones del contenido son correctas

1.3.3 No hay instrucciones con características sensoriales

1.4.1. No hay información basada sólo en color.

1.2.4 Subtítulos (en directo)

1.2.5 Audio-descripción (grabada)

1.4.3. Contraste de color (mínimo)

1.4.4. El texto puede redimensionarse hasta un 200 por ciento sin pérdida de contenido o funcionalidad.

1.4.5. Evitar usar Imágenes de texto

1.2.6 Subtítulos en lengua de señas

1.2.7 Audiodescripción ampliada (grabada)

1.2.8 Medio alternativo (grabado)

1.2.9 Alternativa para solo audio en vivo.

1.4.6. Contraste de color (Mejorado)

1.4.8. Presentación Visual mejorada

1.4.9. Imágenes de texto (Sin excepción)

Operable

2.1.1 La funcionalidad es operable por teclado

2.1.2 Existe un medio para salir del foco de un elemento. Por ejemplo cerrar un tooltip.

2.2.1 El límite de tiempo para realizar acciones puede ajustarse o desactivarse.

2.2.2. Pausar, detener, ocultar multimedia.

2.3.1. Umbral de tres destellos o menos.

2.4.1 Eludir bloques de contenido

2.4.2 Navegable por títulos de páginas

2.4.3. Orden del foco es el esperado.

2.4.4 Texto de enlaces comprensibles (en su contexto)

2.4.5 Existe más de una manera para localizar o acceder al contenido importante del sitio.

2.4.6 Los encabezados y etiquetas describen el tema o propósito.

2.4.7 El foco está diseñado y puede distinguirse en cualquier elemento interactivo de la interfaz.

2.1.3 Teclado (sin excepciones)

2.2.3 No hay tiempo para realizar acciones.

2.2.4 Las interrupciones pueden ser pospuestas o suprimidas por el usuario.

2.2.5. La re autenticación no implica pérdida de datos.

2.3.2 Las páginas no contienen nada que destelle más de tres veces por segundo.

2.4.8. Se informa al usuario su localización.

2.4.9 Permite identificar el propósito de cada enlace con sólo el texto.

2.4.10 Usar Encabezados de sección para organizar contenido.

Comprensible

3.1.1 Idioma de la página esta predeterminado.

3.2.1 No cambia el contexto al recibir el foco.

3.2.2 No cambia el contexto al accionar input.

3.3.1 Hacer que los contenidos textuales resulten legibles y comprensibles.

3.3.2 Labels o instrucciones para cada elemento de formulario.

3.1.2 El idioma de cada pasaje o frase en el contenido puede ser determinado por software

3.2.3 Navegación consistente.

3.2.4 Identificación consistente.

3.3.3 Sugerencias para corregir el error en el lugar donde se cometió.

3.3.4 Prevención de errores.

3.1.3 Definiciones de palabras inusuales

3.1.4 Significado expandido de abreviaturas

3.1.6 Mecanismo para identificar la pronunciación de palabras ambiguas.

3.2.5 Los cambios se realizan cuando el usuario los solicita y pueden deshacerse.

3.3.5 La ayuda está disponible en contexto.

3.3.6 Se requiere confirmación para acciones de envío/finalización o son reversibles.

Robusto

4.1.1. Validar el contenido sigue estándares web

4.1.2. Productos de apoyo y agentes de usuario pueden acceder al contenido.

   

Checklist para desarrolladores

  • 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 personalizados.
  • 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 accesbilidad 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