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

驴Qu茅 es el HTML sem谩ntico y por qu茅 es importante?

14

Usando HTML sem谩ntico en el header de nuestro sitio

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:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

PRENDER VOICEOVER


.
PAUSAR VOICEOVER


.
MOVER ADELANTE

.
MOVER ATR脕S

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

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

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 鈥榦rca鈥 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.

  • 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

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 鈥淚magen 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 鈥渧oz鈥濃



VoiceOver para Safari, ChromeVox para Chrome

en cada etiquetas es necesario poner el nombre

Alt+Super+S Para Ubuntu 馃槃