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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

2D
4H
38M
11S

Pruebas manuales con lectores de pantalla

11/35
Recursos

Aportes 24

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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 鈥淎ccessibility Tree鈥 aparece 鈥淚gnored鈥 incluso recargando la p谩gina? me pas贸 en mi web y en la p谩gina de Platzi.

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 鈥淎ccesibility 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