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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Manejando cambios dinámicos

34/35
Recursos

Aportes 9

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

aria-live: Se utilizan para establecer la prioridad con la que el lector de pantalla debe tratar a cambios a las regiones en vivo - los valores posibles son: off, politeo assertive. La configuración predeterminada es off. Este atributo es, con mucho, el más importante.

Cuando surgen cambios de forma dinámica, por ejemplo: un mensaje de error por un input faltante en un formulario, o un mensaje de confirmación. Debemos ser capaces de transmitir esa información a usuarios que utilicen lectores de pantallas.
.
El atributo aria-live añade a un elemento para indicar que es una “región viva”, es decir, que su contenido se modifica y actualiza dinámicamente. En nuestro caso es la zona de “Últimas noticias”, que se actualiza cada 10 segundo automáticamente, sin intervención del usuario.
.

  • Off: Es el estado predeterminado.
  • Polite: Espera a que el lector de pantalla termine de leer el elemento actual. Se utiliza cuando el mensaje que se quiere comunicar, no es importante
  • Assertive: Interrumpe la lectura para dar el mensaje. Se utiliza cuando se quiere dar prioridad al mensaje, por ejemplo, en el mensaje de confirmación del envío de un formulario
    .

Aria-live no es el único atributo que se puede utilizar en estos casos. Más información: https://www.usableyaccesible.com/ejemplo_aria_live/ejemplo_liveregions.html

Rarísimo, pero en Orca para que funciona el aria-live con la notificación, tuve que encerrar la misma en un div adicional, de manera que quedara así:

<div aria-live="assertive">
  <div class="notification"></div>
</div>

En cambio, para el mensaje de error debajo del campo funcionó tal cual el ejemplo en el video.

Con este código podemos hacer que se nos enfoque la parte del nombre que esta mal

function validateForm(e){
  e.preventDefault();
  const nameField = document.getElementById("name");
  if(nameField.value ===""){
    document.getElementById('name-error').innerHTML ="Para enviar el formulario se necesita un nombre!";
    setTimeout(function() {
      document.getElementById("name").focus();
    }, 3000);
  }else{
    showNotification();
  }
}

aria-live:

Se utilizan para establecer la prioridad con la que el lector de pantalla debe tratar a cambios a las regiones en vivo, los valores posibles son:

assertive Indica que las actualizaciones de la región con alta prioridad que deben ser presentadas al usuario inmediatamente.

off (default) Indica que las actualizaciones de la región no deberían de ser presentadas al usuario a no ser que el usuario este enfocado en esa región.

polite Indica que las actualizaciones de la región deberían de ser presentadas en la siguiente oportunidad, como al final de que el lector termine de decir la oración o cuando el usuario hace una pausa para escribir.

Por acá les dejo una lectura acerca de aria-live y de los valores que puede tomar 😄

Esta propiedad me encantó! 😃

aria-live no lo conocía, ahora entiendo lo importante que es usar estos atributos