Dominar las bases de la accesibilidad

1

Bases de Accesibilidad Web y Creación de Portafolio Personal

2

Importancia de la Accesibilidad Web en el Desarrollo de Sitios

3

Pautas de Accesibilidad Web: Comprensión y Aplicación

4

Pautas de Accesibilidad Web: Principios y Criterios WCAG

5

Principios de Accesibilidad Web: Perceptible, Operable, Comprensible, Robusto

6

Tecnologías Asistivas para Accesibilidad Web

Presentar el proyecto

7

Creación de un Portafolio Accesible con HTML, CSS y JavaScript

Evaluar la accessibilidad de sitios web

8

Pruebas de Accesibilidad Web con Lighthouse en Chrome

9

Simulación de Accesibilidad Visual en Sitios Web

10

Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos

11

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

12

Pruebas básicas con lector de pantalla VoiceOver en Mac

Refactorizar HTML para ser mas accessible

13

HTML Semántico para Mejora de Accesibilidad Web

14

HTML Semántico: Mejora la Estructura de tu Página Web

15

Refactorización de HTML para Mejorar Semántica y Accesibilidad

16

Mejorando la Accesibilidad Web con HTML Semántico

17

Uso de WAI-ARIA para Mejorar la Accesibilidad Web

18

Uso adecuado de roles en aplicaciones web

19

Accesibilidad Web: Uso de Aria para Lectores de Pantalla

20

Accesibilidad Web: Estados ARIA para Lectores de Pantalla

21

Actualizar HTML para Mejorar la Accesibilidad del Sitio Web

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Mejora de Accesibilidad Web con CSS: Contraste y Colores

23

Estrategias para Mejorar la Accesibilidad de Iconos Web

24

Implementación de Enlaces de Salto para Accesibilidad Web

25

Estilos de Foco y Hover para Accesibilidad Web

26

Optimización de Formularios y Estilos CSS en HTML

Extender la accesibilidad usando JavaScript

27

Interacciones y Accesibilidad en Carruseles Web con JavaScript

28

Accesibilidad en Carruseles: Manejo de Foco con TabIndex

29

Accesibilidad en Carruseles para Lectores de Pantalla

30

Mejoras de Accesibilidad en Modales con HTML y CSS

31

Accesibilidad en Elementos Dinámicos: Mejora de Modales

32

Validación de Formularios Web: Instrucciones Claras y Ejemplos

33

Mejorando la Accesibilidad de Formularios Web

34

Implementación de ARIA Live para Accesibilidad Web

Conclusión

35

Accesibilidad Web: Mejora Continua y Pruebas Prácticas

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Lectores de Pantalla: Uso y Configuración para Accesibilidad Web

11/35
Recursos

¿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:

  1. Inspeccionar elementos: Al inspeccionar la página, busca la sección donde el navegador realiza el "Aria tree" o árbol de accesibilidad.
  2. 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:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 ElementsAccessibilityAccessibility 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.

![](https://static.platzi.com/media/user_upload/11.accessibility-tree-c1c66419-388e-4e36-82d4-ec81f67cac78.jpg)
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

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