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

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Manejando el foco del teclado - el carousel

28/35
Recursos

Aportes 13

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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 ‚Äúsencilla‚ÄĚ 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)

Alguna raz√≥n espec√≠fica para que los n√ļmeros del switch sean esos?

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

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 ?