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
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.
Existen diversas combinaciones de lectores de pantalla y navegadores que funcionan mejor juntas:
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.
Al desarrollar un sitio web accesible, es importante prestar atención a varios elementos clave:
Para revisar cómo un lector de pantalla mapea la información de tu sitio web, puedes utilizar las herramientas para desarrolladores del navegador:
Usar herramientas como Web Accessibility Evaluator puede ofrecerte una visión clara sobre cómo la accesibilidad está implementada en tu sitio web.
Si revisamos un recurso bien elaborado, puedes ver que incluye:
Este nivel de detallado compromiso no solo mejora la accesibilidad sino también la usabilidad de tu sitio web para todos los usuarios.
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
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
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.
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?