Dominar las bases de la accesibilidad

1

¿Listo para hacer la web un mejor lugar para todos sus usuarios?

2

Conociendo la importancia de la accesibilidad web

3

Aprendiendo sobre WCAG y sus criterios de conformidad

4

Profundizando los 12 criterios de conformidad

5

Los 4 principios de WCAG

6

Tecnología Asistivas - cuáles son y cómo funcionan

Presentar el proyecto

7

Instalación del proyecto y primeros pasos

Evaluar la accessibilidad de sitios web

8

Pruebas automáticas con Lighthouse

9

Pruebas con simuladores de discapacidades visuales

10

Pruebas manuales con tu teclado

11

Pruebas manuales con lectores de pantalla

12

Pruebas manuales con VoiceOver

Refactorizar HTML para ser mas accessible

13

Usando HTML semántico en el header de nuestro sitio

14

¿Qué es el HTML semántico y por qué es importante?

15

Usando HTML semántico en el contenido principal de nuestro sitio

16

Usando HTML semántico en footer de nuestro sitio

17

ARIA - Accessible Rich Internet Applications

18

ARIA roles

19

ARIA properties

20

ARIA states

21

Overview del proyecto con los retos resueltos

Utilizar CSS para aumentar la acessibilidad de un sitio web

22

Contrastes de color

23

Iconos

24

Skip Links

25

Estilos de foco y hover

26

Overview retos resueltos con CSS

Extender la accesibilidad usando JavaScript

27

Manejando el foco del teclado - botones

28

Manejando el foco del teclado - el carousel

29

Coordinando el foco del teclado con el foco de lectores de pantallas

30

Manejando modales

31

Mejorando la accesibilidad con teclado de nuestro modal

32

Ayudando a nuestros usuarios a interactuar correctamente con el sitio

33

Validando formularios

34

Manejando cambios dinámicos

Conclusión

35

Siguientes pasos

No tienes acceso a esta clase

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

Pruebas manuales con VoiceOver

12/35
Recursos

Aportes 27

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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 !

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

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.

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

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/

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.

PRENDER VOICEOVER


.
PAUSAR VOICEOVER


.
MOVER ADELANTE

.
MOVER ATRÁS

  • 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

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

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

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

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”…



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

VoiceOver para Safari, ChromeVox para Chrome

en cada etiquetas es necesario poner el nombre

Alt+Super+S Para Ubuntu 😄