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

Pruebas básicas con lector de pantalla VoiceOver en Mac

12/35
Recursos

¿Cómo realizar pruebas de accesibilidad con VoiceOver en Mac?

VoiceOver es un lector de pantalla integrado en todos los dispositivos Mac que facilita la navegación mediante comandos de voz. Aprender a utilizar este herramienta es esencial para evaluar la accesibilidad de los sitios web. Antes de comenzar, es crucial entender cómo activar y utilizar VoiceOver, ya que una manipulación incorrecta podría llevar a conclusiones erróneas sobre la accesibilidad.

¿Cuáles son los comandos básicos de VoiceOver?

Para manejarnos correctamente con VoiceOver, debemos familiarizarnos con los siguientes comandos clave:

  • Activar VoiceOver: Presionar Función + Comando + F5.
  • Pausar la voz: Utilizar la tecla Control.
  • Apagar VoiceOver: Utilizar las flechas con la X que aparece en el diálogo.
  • Navegar hacia adelante: Con Control + Opción + Flecha derecha.
  • Navegar hacia atrás: Con Control + Opción + Flecha izquierda.

Estos comandos permiten tener un control básico sobre la navegación y la lectura de contenido con VoiceOver.

¿Cómo realizar pruebas de navegación en un sitio web?

La navegación básica es crucial para asegurarnos de que todos los elementos en un sitio web sean accesibles para quienes usan lectores de pantalla. Vamos a ilustrar cómo se utiliza VoiceOver en un sitio web cualquiera:

  1. Activar VoiceOver: Abre el sitio web y activa VoiceOver con Función + Comando + F5.
  2. Detener la voz: Hay momentos en los que queremos detener la voz; esto se hace presionando Control.
  3. Avanzar a través del contenido web: Usa Control + Opción + Flecha derecha.
  4. Acceder al contenido web: Cuando VoiceOver indique la entrada a un área web, presiona Control + Opción + Mayeras + Flechas abajo.

Así se puede evaluar cómo VoiceOver interactúa y describe los elementos del sitio web.

¿Qué información ofrece VoiceOver sobre los elementos web?

VoiceOver proporciona información valiosa sobre los elementos de un sitio web, como:

  • Elementos no etiquetados: Si encuentras imágenes no etiquetadas, el lector mencionará "imagen sin etiquetar", lo que indica un área de mejora en la accesibilidad.
  • Encabezados y zonas de navegación: VoiceOver puede identificar encabezados y describe si estás dentro de un banner o navegación, permitiendo entender mejor la estructura.
  • Enlaces y botones: Comparar cómo VoiceOver describe estos elementos entre un sitio accesible y uno ineficaz es un buen indicador de la accesibilidad.

¿Qué se espera lograr al implementar accesibilidad en sitios web?

Cuando optimizamos sitios para usuarios de lectores de pantallas, como VoiceOver, se garantiza una experiencia de navegación fluida y significativa. Estos lectores proporcionan instrucciones detalladas sobre cómo navegar y destacan elementos importantes, mejorando así la usabilidad.

Con estas pruebas, identificamos áreas a mejorar que posteriormente ajustaremos con HTML, CSS y JavaScript para potenciar la accesibilidad. Continúa explorando y aprendiendo cómo estas herramientas se implementan en proyectos futuros. ¡La accesibilidad está al alcance!

Aportes 29

Preguntas 2

Ordenar por:

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

Windows+Ctrl+Enter
Para entrar al VoiceOver de Windows

sería bueno que en los videos de la profe colocaran en la pantalla la imagen de los comandos para saber cuales son las teclas ya que cada tecla según el país tiene un nombre diferente !

Es INCREÍBLE como cambió mi perspectiva sobre una página web desde que comencé este curso, nunca más voy a dejar una página con poca accesibilidad. GRAN CLASE.

Comando para ChromeVox:
ChromeVox modifier key = Search

Turn on braille captions = Search + A, B

Show ChromeVox Menus = Search + Period

Next heading = Search + H

Previous heading = Search + Shift + H

Enter Learn Mode = Search + O, K

Next group = Search + Ctrl + Down

Next object = Search + Right

Next line = Search + Down

Next word = Search + Shift + Ctrl + Right

Next character = Search + Shift + Right

PRENDER VOICEOVER


.
PAUSAR VOICEOVER


.
MOVER ADELANTE

.
MOVER ATRÁS

Me encanta, solo faltaría añadirle una clase donde haga la prueba con NVDA para los que tenemos Windows.

Deberían mostrar el manejo de las herramientas también para los que tenemos Windows, supongo que la mayoría aquí

Necesitamos aprender 5 comandos:

  1. Cómo prenderlo
  2. Cómo apagarlo
  3. Cómo navegar hacia adelante
  4. Cómo navegar hacia atrás
  5. Detener la voz

En Windows se activa: Tecla Windows + Ctrl + Enter

Los screen readers darán información al usuario sobre qué está en la pantalla, por eso debemos tener muy buena semántica.

Esto fue un despertar para mi, no tenía idea que funcionaba así

Definitivamente uno de los mejores cursos que he visto por su importancia de inclusión a más personas.

En cualquier distribución GNU/Linux con escritorio GNOME, para activar el lector de pantallas: Meta+Alt+S
En cualquier otro escritorio, instalar el paquete ‘orca’ a través de tu gestor de paquetes.
Documentación: https://help.gnome.org/users/orca/stable/

  • Es el lector de pantalla que viene en las máquinas Mac
  • En windows podemos ver el narrador del sistema operativo con windows + ctrl + enter

Ya sabemos lo que hace falta, ahora… manos a la obra! 😄

En Linux mint es: Encender: **alt + super/window + s** Apagar: Una pesadilla ;v hay que reiniciar la pc para que **Orca** deje de funcionar XD
Hola, estaba escribiendo un comentario cuando se reprodujo automaticamente la siguiente clase y perdi todo lo escrito, basicamente un usuario de lector de pantalla evita tener que navegar todo por tabulador, puesto que esto se hace aun mas tedioso cuanto mas se complegise una pagina web, . existe algo llamado navegacion por tecla , asi se puede navegar por encabezados, landmarks botones, links etc etc. por cierto en movile existe el talbak, tambien las apps moviles deben ser accesibles

VoiceOver es el lector de pantalla por defecto de Mac, para activarlo presiona el shortcut Fn + Cmd + F5. Y para navegar a traves de la pagina manten presionado option + control mientras te mueves con las flechas del teclado.

Muy triste mae “Imagen sin etiquetar, Imagen sin etiquetar” :c

profe!! como que no sirven los links que puso

Excelente no sabia esto.

De todos los lectores de pantalla el que mejor funciona es Chrome Vox , JAWS de Microsoft ya no ha recibido actualizaciones desde hace mucho

Al probar VoiceOver en esta misma página, el foco queda atrapado en el campo de Buscar en Platzi (usando Ctrl+Opt+Flechita)… No se puede salir de ahí usando sólo esa combinación…

Perfecto

Instale el ChromeVox Classic Extension y no tiene un botón para apagar 😦 .
Esta es la extensión de ChromeVox que instale : https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn

excelente

También sirve seleccionar el texto que deseamos escuchar, click derecho del mouse y tendremos la opción de “voz”…



VoiceOver para Safari, ChromeVox para Chrome

en cada etiquetas es necesario poner el nombre

Alt+Super+S Para Ubuntu 😄