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

ARIA states

20/35
Recursos

Aportes 18

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

Estados de ARIA: Comunican estados y cambios de estados en elementos que se suelen comunicar visualmente.

A帽adimos a la etiqueta de <li> el atributo: aria-hidden=鈥渢rue鈥 para que el lector de pantalla solo lea los elementos visibles en el estado actual de la p谩gina.

馃椏 ARIA states

<h4>Ideas/conceptos claves</h4>

Estados de ARIA comunican estados y cambios de estados en elementos que se suelen comunicar visualmente

<h4>Apuntes</h4>
  • Existen veces que mostramos casos que solo pasan cuando algo cambia en la pantalla
    • Impidiendo que personas con discapacidades visuales no podr谩n notar ese cambio
    • Debemos dar una experiencia del sitio a personas discapacitadas al igual que damos importancia a personas sin ning煤n problema
  • Si tenemos un checkbox
    • Sabemos que esta seleccionado por que est谩 marcado
    • Alguien con discapacidad quiz谩s no pueda ver eso
  • Un lector de pantalla no se dar谩 cuenta que algunas cosas no se est谩n mostrando
  • Podemos usar el atributo aria-hidden para ocultar algunas cosas de los lectores de pantalla
<li aria-hidden="true">...</li>

RESUMEN: Podemos brindar una experiencia similar a usuarios con discapacidades al igual que usuarios que tienen todos los beneficios f铆sicos, usando estados los cuales comunicar谩n que cosas se estar谩n mostrando en pantalla

Con ChromeVox los items del carrousel se mueven autom谩ticamente hasta el ultimo ley茅ndolos. Si les agrego el aria-hidden se mueven igualmente pero los deja de leer馃

En esta parte pienso que al se deber铆a indicar que hay m谩s items en las lista y que mueva el forward button para observar los items que faltan, como se puede hacer esto?

Adem谩s de los estados y propiedades mencionados, existen otros m谩s, aqu铆 los pueden consultar https://www.w3.org/TR/wai-aria-1.0/states_and_properties

Entonces es mejor poner aria en el primer elemento que lee el lector de pantalla

Yo lo tengo igual que la profe pero mi lector de pantalla me dice que hay 5 elementos. Algui茅n sabe por qu茅?

  • Lo importante es que las personas que navegan con un lector de pantalla le demos una experiencia casi igual a las personas que utilizan tecnolog铆as asistivas

Qu茅 son

Comunican estados y cambios de estados en elementos que se suelen comunicar visualmente. Tenemos que comunicar los diferentes estados que tengamos en nuestras aplicaciones a nuestros usuarios

  • **aria-hidden="true" 鈫 nos ayuda a esconder el contenido del carrusel para que el Voice Over no lo lea cuando a煤n no hemos tenido interacci贸n con el carrusel**
<li aria-hidden="true"><button><img src="/images/project4.png" class="project project4" alt="Mi cuarto proyecto"></button></li>
          <li aria-hidden="true"><button><img src="/images/project5.png" class="project project5" alt="Mi quinto proyecto" ></button></li>
tamalito
Me quedo con esta frase: No es justo que le demos otra experiencia, solo porque de otra manera como nosotros la estamos usando.

Algunos recursos complementarios:

Estados: Estados de ARIA comunican estados y cambios de estados en elementos que se suelen comunicar visualmente.

<aside aria-hiden="true/false"><nav>etc</nav></aside>

A帽adimos a la etiqueta de <li> el atributo: aria-hidden=鈥渢rue鈥 para que el lector de pantalla solo lea los elementos visibles en el estado actual de la p谩gina, entonces si le a帽adimos display: none; o visibility: hidden; el aside no ser谩 considerado por lectores de pantalla ni tampoco por la navegaci贸n secuencial del teclado.

Los aria states por medio de qu茅 se pueden cambiar?
En el caso de que, por ejemplo en el carrusel se muestre el objeto que estaba oculto al principo.

Si por ejemplo tuvi茅ramos una tabla con much铆simos campos y esa tabla la tuvi茅ramos paginada, ser铆a necesario usar aria-hidden para los campos que no se muestran todav铆a porque est谩n en otras p谩ginas de la tabla? Gracias.

驴C贸mo ser铆a la interacci贸n cuando le da al bot贸n de mostrar lo que sigue del carrousel?
驴De qu茅 manera puede darse cuenta que ah铆 hay m谩s por ver, de una manera accesible para la persona que leer谩 nuestra web? 驴o ser谩 mejor no tener objetos ocultos?

perfecto

n