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
Bases de Accesibilidad Web y Creación de Portafolio Personal
Importancia de la Accesibilidad Web en el Desarrollo de Sitios
Pautas de Accesibilidad Web: Comprensión y Aplicación
Pautas de Accesibilidad Web: Principios y Criterios WCAG
Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto
Tecnologías Asistivas para Accesibilidad Web
Presentar el proyecto
Creación de un Portafolio Accesible con HTML, CSS y JavaScript
Evaluar la accessibilidad de sitios web
Pruebas de Accesibilidad Web con Lighthouse en Chrome
Simulación de Accesibilidad Visual en Sitios Web
Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos
Lectores de Pantalla: Uso y Configuración para Accesibilidad Web
Pruebas básicas con lector de pantalla VoiceOver en Mac
Refactorizar HTML para ser mas accessible
HTML Semántico para Mejora de Accesibilidad Web
HTML Semántico: Mejora la Estructura de tu Página Web
Refactorización de HTML para Mejorar Semántica y Accesibilidad
Mejorando la Accesibilidad Web con HTML Semántico
Uso de WAI-ARIA para Mejorar la Accesibilidad Web
Uso adecuado de roles en aplicaciones web
Accesibilidad Web: Uso de Aria para Lectores de Pantalla
Accesibilidad Web: Estados ARIA para Lectores de Pantalla
Actualizar HTML para Mejorar la Accesibilidad del Sitio Web
Utilizar CSS para aumentar la acessibilidad de un sitio web
Mejora de Accesibilidad Web con CSS: Contraste y Colores
Estrategias para Mejorar la Accesibilidad de Iconos Web
Implementación de Enlaces de Salto para Accesibilidad Web
Estilos de Foco y Hover para Accesibilidad Web
Optimización de Formularios y Estilos CSS en HTML
Extender la accesibilidad usando JavaScript
Interacciones y Accesibilidad en Carruseles Web con JavaScript
Accesibilidad en Carruseles: Manejo de Foco con TabIndex
Accesibilidad en Carruseles para Lectores de Pantalla
Mejoras de Accesibilidad en Modales con HTML y CSS
Accesibilidad en Elementos Dinámicos: Mejora de Modales
Validación de Formularios Web: Instrucciones Claras y Ejemplos
Mejorando la Accesibilidad de Formularios Web
Implementación de ARIA Live para Accesibilidad Web
Conclusión
Accesibilidad Web: Mejora Continua y Pruebas Prácticas
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Lectores de Pantalla: Uso y Configuración para Accesibilidad Web
11/35Recursos
¿Qué son los lectores de pantalla y cómo funcionan?
Los lectores de pantalla son herramientas esenciales en la accesibilidad web, permitiendo a personas con discapacidades visuales navegar por internet. Estos software leen en voz alta el contenido de las páginas web mediante un mapeo del HTML semántico, ayudando a interpretar la información que es relevante para el usuario. Su uso no se limita exclusivamente a las discapacidades visuales; cualquiera que prefiera la lectura auditiva puede utilizarlos.
¿Qué combinaciones de lectores de pantalla y navegadores se utilizan?
Existen diversas combinaciones de lectores de pantalla y navegadores que funcionan mejor juntas:
- NVDA (NonVisual Desktop Access): Generalmente usado con Mozilla Firefox.
- JAWS (Job Access With Speech): Frecuentemente utilizado con Microsoft Edge.
- VoiceOver: Incorporado por defecto en dispositivos Apple, adecuado para Safari y Google Chrome.
- ChromeVox: Funciona bien con Google Chrome, pero puede presentar algunos inconvenientes.
Cada combinación puede ofrecer diferentes niveles de efectividad, por lo que es crucial experimentar con distintas herramientas para encontrar la que mejor se adapte a las necesidades del usuario.
¿Qué debemos considerar al implementar accesibilidad web?
Al desarrollar un sitio web accesible, es importante prestar atención a varios elementos clave:
- Manipulación de lectores de pantalla: Aprende a encender, apagar, pausar, avanzar y retroceder en las lecturas.
- Personalización: Los usuarios con lectores de pantalla suelen adaptar estas herramientas a sus preferencias. Incorpora opciones de personalización para enriquecer la experiencia del usuario.
- Elementos de enfoque: Asegúrate de que los elementos significativos sean reconocibles y focalizables por los lectores de pantalla.
¿Cómo verificar la accesibilidad en los navegadores?
Para revisar cómo un lector de pantalla mapea la información de tu sitio web, puedes utilizar las herramientas para desarrolladores del navegador:
- Inspeccionar elementos: Al inspeccionar la página, busca la sección donde el navegador realiza el "Aria tree" o árbol de accesibilidad.
- Aria tree: Este mapeo recoge toda la estructura semántica del HTML, distinguiendo qué contenido es relevante para lectura en voz alta y qué es puramente decorativo.
Usar herramientas como Web Accessibility Evaluator puede ofrecerte una visión clara sobre cómo la accesibilidad está implementada en tu sitio web.
Ejemplos de contenido accesible
Si revisamos un recurso bien elaborado, puedes ver que incluye:
- Título del sitio
- Enlaces accesibles: Con labels claros.
- Texto alternativo en imágenes
- Roles y funciones claras: Que permiten la navegación tanto por teclado como con lector de pantalla.
Este nivel de detallado compromiso no solo mejora la accesibilidad sino también la usabilidad de tu sitio web para todos los usuarios.
¿Qué otros recursos utilizar para mejorar la accesibilidad?
La búsqueda de recursos y herramientas para educarse en términos de accesibilidad es esencial. Aunque muchos materiales se encuentran en inglés, es importante fomentar la creación de más contenidos en español para expandir el acceso a la información.
Adoptar e implementar todas estas medidas no solo garantiza que las personas con discapacidades visuales tengan una experiencia web más inclusiva, sino que también mejora la experiencia de usuario para todos los visitantes de tu sitio web. ¡Sigue aprendiendo y adaptando tus conocimientos para hacer de la web un espacio accesible para todos!
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?