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

Manejando el foco del teclado - el carousel

28/35
Recursos

Aportes 20

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Tabindex: Indica si su elemento puede ser enfocado, y si participa en la navegaci贸n secuencial del teclado.

Valores de Tabindex:

  • Valor negativo(-1): El elemento debe ser enfocado, pero no debe de ser accesible a trav茅s de la navegaci贸n.
  • Valor positivo (>0): Debe poder ser enfocado y su orden relativo es definido por el valor del atributo.
  • Valor de 0: Debe ser enfocado y ser accesible a trav茅s de la navegaci贸n secuencial del teclado, pero su orden relativo es definido por convenci贸n de la plataforma.

wow鈥 solo hasta cuando uno mismo empieza a hacer el proyecto se da cuenta la cantidad de cosas que pasan desapercibidas para que la p谩gina aparezca aparentemente 鈥渟encilla鈥 y de f谩cil accesibilidad y navegabilidad. Considero que la mayor铆a, entre ellas yo, nunca imaginamos cuantos cambios se deben hacer, al principio del curso tan solo pens茅 que era agregar algunas herramientas y listo. Pero hay que revisar l铆nea por l铆nea el c贸digo, ahora entiendo porqu茅 se debe tener en cuenta desde el inicio de nuestro proyecto. Me encant贸 el curso y desde la primera clase me mantuve a la expectativa. Desde hace a帽os tuve la inquietud de reaizar una p谩gina accesible pero no sab铆a todo lo que se deb铆a tener en cuenta y lo hab铆a olvidado. Super genial el curso.

Mi explicaci贸n a los n煤meros y funcionamiento del carrousel es:

Esta programado sumando y restando valores, para mostrar un contenido y sumar o resta dependiendo si se mover谩 a la izquierda o derecha.

El 0 es el inicial (Proyecto 1,2,3)
El -270 muestra Proyecto 2,3,4
El -540 muestra Proyecto 3,4,5

Cada que va la derecha resta y a la izquierda suma (Seg煤n veo en el JavaScript)

Yo us茅 el IntersectionObserver:

function observeElement(elements, behaviour) {
  new IntersectionObserver(behaviour).observe(elements)
}
function updateAriaHidden( [entry] ) {
  const {target, isIntersecting} = entry
  if(isIntersecting) {
    target.removeAttribute('aria-hidden')
    target.querySelector('button').setAttribute('tabindex', "0")
  } else {
    target.setAttribute('aria-hidden', true)
    target.querySelector('button').setAttribute('tabindex', "-1")
  }
}

...

const projects = [...document.querySelectorAll('.project-container li')]
  projects.forEach(project => observeElement(project, updateAriaHidden))

Alguna raz贸n espec铆fica para que los n煤meros del switch sean esos?

Lo logr茅

El switch dentro del JavaScript, solo mejora en este caso la navegaci贸n del carrusel por el teclado. La accesibilidad por mouse se mantiene

Accesibilidad - JS

  • Eliminar un elemento usando tabindex="-1"
  • setAttribute: Agrega un nuevo atributo.
  • remoteAttribute: Elimina un atributo

Recursos complementarios a la clase 馃槃

Tab index 鉂わ笍

Ok, me perd铆 con la funci贸n de javascript

Ten铆a el tabindex en el <li> y no entend铆a por qu茅, a pesar de que ten铆a el tabindex="-1" en el elemento que contiene a los dem谩s elementos el lector segu铆a teniendolo en cuenta y enfocandolo.
.
Luego me di cuenta que es as铆 porque el <li> no es enfocable mientras en <button> si es enfocable, esa en la raz贸n por la que el lector segu铆a leyendo los botones 4 y 5 del carrusel a pesar de que yo tenia el tabindex="-1" en el elemento <li> que conten铆a ese <button>

Creo que los temas del foco del teclado y c贸mo funcionan los lectores son bastante importantes tenerlos en cuenta para construir la mejor experiencia para los usuarios. Con esto en mente, yo no ten铆a muy calro c贸mo funcionaba as铆 que me di a la tarea de probar con el lector y el navegador (en mi caso, screen reader de google chrome) como funcionaba esto y puedo extraer las siguientes conclusiones.
.
Disclaimer:
.
Los lectores no funcionan igual, encontr茅 diferencias entre el lector de Windows y el de google chrome. Y no s茅 si le pasa a los dem谩s, pero son un poco tediosos de usar, a veces los comandos funcionan y a veces no, al menos eso me pas贸 a mi.
.
Las pruebas que hice fueron principalmente con screen reader de google chrome
.
Conclusiones.

  • El lector del navegador tiene como dos formas de leer. Por una parte hace toda la lectura de la pagina incluyendo texto y titulos. Por otra parte hace la lectura a trav茅s de los elementos enfocables como botones, enlaces, etc.
    .
  • Tabindex hace que un elemento sea enfocable por la navegaci贸n con el teclado, eso significa que se lo puedes agregar, por ejemplo, a un h2 y ahora, cuando est茅s navegando con el teclado podr谩s enfocar ese h2 y el lector lo leer谩.
    .
  • Sin embargo, el lector tambi茅n leer谩 ese h2 si no tiene el tabindex colocado, lo leer谩 en su lectura normal como parte de la pagina, pero obviamente no podr谩s colocarle sobre 茅l en la navegaci贸n con el teclado si no tiene el tab index.
    .
  • Aria-label te permite agregarle una descripci贸n a un elemento que normalemente no la tiene. Por ejemplo, puedes agregarle un arial-label a una <ul> para describir qu茅 contiene esa <ul> y el lector leer谩 para el usuario esa descripci贸n. Si no lo agregas, el lector le informar谩 al usuario que es una <ul>, le dir谩 cuantos elementos tiene pero no habr谩 descripci贸n de esa <ul>.
    .
  • El lector leer谩 esas descripciones de arial-label en su modo de lectura normal de la pagina, pero si no le colocas un tabindex, no la leer谩 en el modo de navegaci贸n con el teclado
    .
    Con estas conclusiones en mente creo que algunas practicas que se pueden extraer son:
    .
  1. Darle descripciones a las secciones, listas y lo que consideres necesario para que el usuario sepa d贸nde est谩 con arial-label
  2. Por c贸mo funciona el lector, no se necesita hace enfocable con tabindex todos los elementos de la pagina.
  3. El lector va a leer todo el contenido en su modo de lectura, incluyendo titulos, parrafos, elementos interactivos como botones.
  4. Tambi茅n puedes navegar a trav茅s de los elementos que no tienen tabindex y que no son interactivos, al menos en screen reader es con la tecla 鈥淚nsert鈥 + las flechas. Es como la navegaci贸n con el teclado pero a trav茅s de todos los elementos y no solo los interactivos
    .
    .
    Si tienen correcciones de esto o hay algo incorrecto, por favor respondan a este comentario

Si no les funciona, revisen en qu茅 funci贸n est谩n metiendo el switch; me pas贸 que la primera se la puse al clickLeft y la segunda no hallaba d贸nde meterla, entonces me perd铆 un poco.

0 es el valor por defecto de tabindex

No es recomendable utilizar tabindex > 0 ya que podr铆a ser dif铆cil ara el usuario saber cual elemento ser谩 el siguiente. Podr铆a asignarse a cada uno de los elementos de la pagina en el orden deseado pero no seria mantenible. La mejor practica es tener siempre tab index 0 y que sigan el orden l贸gico de la pagina y usar el -1 para aquellos que no se muestran visualmente

El valor de tabindex es igual a la cantidad de gente que has matado: nunca deber铆a ser mayor a cero

Una forma mas optima de hacer esto, es crear dos obetos para cada boton que contengan las funciones que va a realizar en cada caso:

const valuesRight = {
	'-270': function () {
		document.querySelector('.project1').setAttribute('tabindex', '-1');
		document.querySelector('.project4').removeAttribute('tabindex');
	},
	'-540': function () {
		document.querySelector('.project2').setAttribute('tabindex', '-1');
		document.querySelector('.project5').removeAttribute('tabindex');
	},
};
const valuesLeft = {
	'-270': function () {
		document.querySelector('.project5').setAttribute('tabindex', '-1');
		document.querySelector('.project2').removeAttribute('tabindex');
	},
	0: function () {
		document.querySelector('.project4').setAttribute('tabindex', '-1');
		document.querySelector('.project1').removeAttribute('tabindex');
	},
};

Asi, luego en cada funcion solo mandamos a llamar el objeto con su propiedad de acuerdo al valor que guarde la variable newValue y como sabemos que nos devolvera una funcion, la ejecutamos, de este modo:

En la funcion clickRight: valuesRight[`${newValue}`]();
En la funcion clickLeft: valuesLeft[`${newValue}`]();

Entiendo que la intenci贸n es que la navegaci贸n sea igual en teclado y mouse, pero no lo estamos haciendo m谩s complicado en teclado ? No ser铆a m谩s facil para un persona con teclado navegar directamente entre todos los elementos con el Tab, y no ponerla a deslizar el slider cada 3 elementos ?