Dominar las bases de la accesibilidad

1

¬ŅListo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas autom√°ticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML sem√°ntico en el header de nuestro sitio

14

¬ŅQu√© es el HTML sem√°ntico y por qu√© es importante?

15

Usando HTML sem√°ntico en el contenido principal de nuestro sitio

16

Usando HTML sem√°ntico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios din√°micos

Conclusión

35

Siguientes pasos

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Pruebas manuales con lectores de pantalla

11/35
Recursos

Aportes 22

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Lectores de Pantalla: Software que mapea las p√°ginas que usamos y las lee en voz alta.

Combinaciones de lectores de pantalla y navegadores:

NVDA - Mozilla Firefox
JAWS - Internet Explorer
VoiceOver - Safari
ChromeVox - Google Chrome

Una gran herramienta complemento para los lectores de pantalla es ANDY que no permite corregir nuestro código y hacer pruebas muy fáciles!
https://www.ssa.gov/accessibility/andi/help/install.html

  • Los lectores de pantalla han abierto a la web a diversas personas que antes no pod√≠an usar los sitios web
  • Son Software que mapea las p√°ginas que usamos y las lee en voz alta. Usadas normalmente por personas que tienen incapacidades visuales.
<h3>Combinaciones de lectores de pantalla y navegadores</h3>
  • Es importante tener en cuenta cuales lectores podemos usar de manera compatible con los diferentes navegadores web

  • NVDA ‚Üí Mozilla Firefox

  • JAWS ‚Üí Microsoft Internet Explorer (EDGE)

  • VoiceOver ‚Üí Sfari

  • ChromeVox ‚Üí Google Chrome

  • Apartado de Chorme DevTools ‚Üí En Elements ‚Üí Accessibility ‚Üí Accessibility Tree

En el curso de Frontend Developer, en una clase se pudo hacer el ejercicio de entrar a YouTube con un lector de voz, y pudimos ver lo mucho que se demoraba en llegar al primer vídeo del home.
Y eso que ten√≠a buen html para saber cu√°ndo llegaba, de no ser as√≠, era imposible saberlo sin ver ūüė≤

Este curso debería ser un must-to para cualquier desarrollador. Yo ya había escuchado de lectores de pantalla, pero aprender como usarlos para crear un producto mas accesible es realmente genial.

Excelente aprender de la existencia del √°rbol de accesibilidad.

Por qu√© hay sitios que en ‚ÄúAccessibility Tree‚ÄĚ aparece ‚ÄúIgnored‚ÄĚ incluso recargando la p√°gina? me pas√≥ en mi web y en la p√°gina de Platzi.

1:32 no se dice envidia :v?

Imagina que estás compilando una interfaz de usuario solo para usuarios de lector de pantalla. Aquí, no necesitas crear una IU visual, solo tienes que brindar suficiente información para que use el lector de pantalla.

.
Lo que crear√≠as es una especie de API que describe la estructura de la p√°gina, similar a la API del DOM, pero puedes terminar con menos informaci√≥n y menos nodos, porque mucha de esa informaci√≥n solo es √ļtil para la presentaci√≥n visual. Puede lucir as√≠:
.

.

Los lectores de pantalla le han abierto la web a personas que antes no podían usarla. Son software que mapean los páginas que usamos y las leen en voz alta.

Lector de pantalla Navegador
NVDA Mozilla Firefox
JAWS Microsoft Internet Explorer
VoiceOver Safari
ChromeVox Google Chrome

En las devtools tenemos el ‚ÄúAccesibility Tree‚ÄĚ que nos muestra qu√© tan accesible es nuestro sitio web.

ūüĎĆ

Chrome Vox: es una extensión de Chrome que brinda la velocidad, versatilidad y seguridad de Chrome a usuarios con discapacidad visual.

Los lectores de pantalla mas utilizados son:
NVA => Mozilla Firefox
JAWS => Internet explorer
VoiceOver => Safari
ChromeVox => Google chrome

Todos los lectores de pantalla mencionados, con excepción al ChromeVox, en realidad son de sistema. O sea, funcionan sobre cualquier parte del sistema operativo aunque se suele asociar cada uno de ellos a los Screen Readers mencionados… Ahhh, y comentario al pasar… JAWS es un excelente Screen Reader, pero a la vez es el ÚNICO PAGO, y cuesta más que un iPhone…

Cuando inspecciono las pagina de WebAIM en Accessibility tree me sale Ignored. Cuando le hago click dice generic ūü§Ē

Impresionante

Muy √ļtiles los lectores de pantalla los he usado un par de veces!

¬Ņalguien sabe cual seria el indicado para microsoft edge?

VoiceOver - Safari