1 of 30

Powered By

Web

A11Y

2 of 30

HTML4 vs HTML5

FORMS AND TABLES

JAVASCRIPT

Agenda

3 of 30

HTML4 vs HTML5

*Screen Reader

4 of 30

Es la tecnología que utiliza el usuario final.

5 of 30

Solo ¼ de las WCAG se pueden testear automáticamente

6 of 30

Componentes personalizados con JS y ARIA lo necesitan

7 of 30

Cada SR responde diferente a A11Y API

8 of 30

7 barreras comunes

  1. Imágenes sin texto alternativo
  2. El uso de tablas
  3. Problemas de contraste
  4. Estructura de la información
  5. Links descriptivos
  6. Formularios sin etiquetas y mal orden de lectura
  7. Ausencia de soporte por teclados o foco visual.

9 of 30

→ Lectores de pantalla:

  • NVDA (open source para Windows)
  • JAWS (Windows)
  • VoiceOver (Mac)
  • TalkBack (Android), etc.

→ Emulador de lectores:

  • ChromeVox
  • VM con JAWS.

10 of 30

Herramientas Automáticas

01

11 of 30

Reporte:

  • Axe & Axe-Core

12 of 30

→ Reporte:

  • Accessibility insights for Web

13 of 30

→ Reporte:

  • Koa11y (app)

14 of 30

→ Reporte:

  • Accessibility insights for Web

15 of 30

Testeo manual

‣ Navegación por teclado.

‣ Si se pueden hacer test a usuarios reales ¡MEJOR!

16 of 30

17 of 30

18 of 30

Testear en Windows

19 of 30

7 barreras comunes

  1. Imágenes sin texto alternativo
  2. El uso de tablas
  3. Problemas de contraste
  4. Estructura de la información
  5. Links descriptivos
  6. Formularios sin etiquetas y mal orden de lectura
  7. Ausencia de soporte por teclados o foco visual.

20 of 30

NVDA

02

Non Visual Desktop Access

21 of 30

22 of 30

23 of 30

24 of 30

NVDA

NonVisual Desktop Access (NVDA) es un lector de pantalla gratuito y de código abierto para el sistema operativo Microsoft Windows. Al proporcionar retroalimentación a través del habla sintética y el Braille, permite a las personas ciegas o con problemas de visión acceder a las computadoras que ejecutan Windows sin más costo que una persona vidente.

25 of 30

How free screen reader NVDA changes lives

26 of 30

Verde linea punteada

Azul linea punteada

Rojo solido

muestra que NVDA está en modo exploración, y este es el objeto del navegador.

indica que NVDA está en modo de enfoque, es decir, los tipos de teclas se pasan al control.

muestra que NVDA está en modo de exploración, y este es el objeto / control enfocado. Cuando es grueso muestra objeto enfocado.

27 of 30

Atajos más usados

28 of 30

Testear en Mac

29 of 30

VoiceOver

03

30 of 30

Configuraciones Previas

Cuando VoiceOver está activado, puede ingresar los comandos de VoiceOver utilizando las teclas Fn y numéricas con el modificador VoiceOver, como alternativa al uso de las teclas de función (F1 a F12). Por ejemplo, para abrir la Utilidad VoiceOver, puede presionar Control-Opción-Fn-8 (en lugar de Control-Opción-F8).

Si usa las teclas de función (F1 a F12), es posible que deba presionar y mantener presionada la tecla Fn, dependiendo de cómo configure el comportamiento de las teclas de función en las preferencias del teclado.