Front-end

Los usuarios pueden tener diferentes discapacidades. Como diseñador front end, tu rol es garantizar que estos usuarios puedan usar tu app con facilidad.

1. Estructura de la página

Los usuarios tienen que navegar a través de tu app con facilidad.

• Usa semántica HTML para crear un amplio esquema de tu página y organizar el contenido.
• Si tienes que usar divs para interacciones, asegúrate de que son enfocables y están etiquetados apropiadamente.
• No uses el atributo «titles».

Referencias WCAG 2.1

1.3.1 Info and Relationships

2. Imágenes

Si una imagen tiene significado, los usuarios deberían acceder a ella fácilmente y entenderla.

• Añade un texto descriptivo a la imagen.
• Usa null alt text (alt="") cuando el texto que describe la imagen ya está en la página.
• Si una imagen es puramente decorativa, usa null alt text (alt="") o imágenes de fondo de CSS.

Referencias WCAG 2.1

1.1 Text Alternatives (Guideline)

1.1.1 Non-text Content

1.4.5 Images of Text

3. Color & contraste

Los usuarios tienen que ser capaces de distinguir el contenido del fondo.

• Verifica que se aplica un ratio de contraste de al menos 4.5:1 entre el fondo y los textos pequeños usando una herramienta de contraste del color. Para textos grandes (desde 14pt negrita/18 pt regular), el ratio debería ser de al menos 3:1.
• Verifica que la paleta de color encaja con los requerimientos de accesibilidad con herramientas como Accesible Color Palette Builder o Contrast Grid.

Referencias WCAG 2.1

Guideline 1.4.3 – Contrast (Minimum)

1.4.1 Use of Color

4. Accesos de teclado

Los usuarios tienen que poder navegar en tu app usando el teclado.

• Asegúrate de tener una lógica de tabulación y un orden de foco.
• Prueba el acceso del teclado navegando a través de la página usando la tecla tab.
• Garantiza que se puede activar y llegar a todos los elementos interactivos usando las teclas spacebar, enter , o las flechas.
• Asegúrate de que el foco es siempre visible.

Referencias WCAG 2.1

1.3.2 Meaningful Sequence

2.1 Keyboard Accessible (Guideline)

2.1.1 Keyboard

2.1.2 No Keyboard Trap

2.4.3 Focus Order| WCAG 2.0

2.4.7 Focus Visible

5. Lector de pantalla

Los usuarios tienen que ser capaces de navegar usando un lector de pantalla.

• Agrega un atributo de idioma.
• Garantiza que todos los links tienen un texto descriptivo. El texto de los links tiene que ser tan específico como sea posible.
• Usa un lector de pantalla para navegar en tu app. Verifica que todo es introducido correctamente y puedes llevar a cabo todas las tareas.

Referencias WCAG 2.1

1.1.1 Non-text Content

1.3.1 Info and Relationships

2.4.4 Link Purpose (In Context)

Nosotros recomendamos usar aXe para testar la accesibilidad de tu app. Es una buena extensión de Chrome que te permite ver en un momento si tu app tiene problemas de accesibilidad, dónde encontrarlos y cómo arreglarlos.

Encuentra el link de descarga de aXe con instrucciones de uso en nuestra sección de Recursos de diseño.

Si tienes preguntas sobre el nivel de accesibilidad de tu app, únete a nosotros en Slack para hablar con expertos en nuestro canal #accessibility.