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
Dominar las bases de la accesibilidad
¿Listo para hacer la web un mejor lugar para todos sus usuarios?
Conociendo la importancia de la accesibilidad web
Aprendiendo sobre WCAG y sus criterios de conformidad
Profundizando los 12 criterios de conformidad
Los 4 principios de WCAG
Tecnología Asistivas - cuáles son y cómo funcionan
Presentar el proyecto
Instalación del proyecto y primeros pasos
Evaluar la accessibilidad de sitios web
Pruebas automáticas con Lighthouse
Pruebas con simuladores de discapacidades visuales
Pruebas manuales con tu teclado
Pruebas manuales con lectores de pantalla
Pruebas manuales con VoiceOver
Refactorizar HTML para ser mas accessible
¿Qué es el HTML semántico y por qué es importante?
Usando HTML semántico en el header de nuestro sitio
Usando HTML semántico en el contenido principal de nuestro sitio
Usando HTML semántico en footer de nuestro sitio
ARIA - Accessible Rich Internet Applications
ARIA roles
ARIA properties
ARIA states
Overview del proyecto con los retos resueltos
Utilizar CSS para aumentar la acessibilidad de un sitio web
Contrastes de color
Iconos
Skip Links
Estilos de foco y hover
Overview retos resueltos con CSS
Extender la accesibilidad usando JavaScript
Manejando el foco del teclado - botones
Manejando el foco del teclado - el carousel
Coordinando el foco del teclado con el foco de lectores de pantallas
Manejando modales
Mejorando la accesibilidad con teclado de nuestro modal
Ayudando a nuestros usuarios a interactuar correctamente con el sitio
Validando formularios
Manejando cambios dinámicos
Conclusión
Siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
14 Días
22 Hrs
32 Min
3 Seg
Pruebas manuales con lectores de pantalla
11/35Recursos
Aportes 27
Preguntas 1
Ordenar por:
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.
-
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 😲
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í:
.
.
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…
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.
Hola otra vez yo, el estandar en lectores es NVDA porque es software libre y se ha creado una gran comunidad al rededor, tiene su propia comunidad en español, jaws es de pago asi que aunque es muy potente( tambien algo mas complejo que el anterior) no tiene tantos usuarios en habla hispana, sin embargo hay algo llamado Lisencia pais, donde los gobiernos compran este software para que cualquiera de sus ciudadanos puedan acceder a el "Gratis" Colombia la tiene. el de mac pues aja es mac asi que..... el de chrome vox creo que no es muy usado, y para linux esta orca pero conseguir informacion sobr el o aprenderlo autodidacticamente me fue muy dificil, asi que lo abandone, ahora ya me interesan los subsistemas de linux para Windows xD Sabian ustedes que hay programadores ciegos? me encantaria conocer a alguno.
tamalito
Recursos complementarios
1:32 no se dice envidia :v?
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?