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

Mejorando la accesibilidad con teclado de nuestro modal

31/35
Recursos

Aportes 20

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Super el curso, un apunte que quiero hacer respecto al Modal. No todos los elementos, como el texto, deben tener foco. Al iniciar el curso fue una de las cosas que se mencion贸. Creo que el foco al abrir el modal deber铆a ir directo al boton de cerrar ya que este elemento si tiene interacci贸n. Ahora bien como manejar este caso para el voiceover, yo hice un ejercicio similar.

<dialog aria-label="Este es un dialogo" aria-describedby="description" open>
    <p id="description">
      Mi descripci贸n
    </p>
    <button>Mi bot贸n</button>
</dialog>

De esta manera usando el elemento dialog se deberia hacer foco al bot贸n cuando se abre el modal pero deber铆a leer la descripci贸n. Si no lo hace con Js se puede enfocar el dialog y el tab pasar铆a al bot贸n.

Ahora bien, <dialog> api no es soportado por algunos navegadores. Para este caso se puede utlizar el aria-role,.

<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
  <button>Close</button>
</div>

Por 煤ltimo, si se tiene problemas con el voiceover que es frecuente cuando se trata de hacer focus a un elemento que se requiere leer como los elementos p, que no son interactuables, se puede hacer uso del tabindex=-1 .

  <p id="dialog1Desc" tabindex="-1">You can change your details at any time in the user account section.</p>

De esta manera programaticamente se puede enviar el foco a ese elemento haciendo que el voiceover lo lea para luego al presionar tab el elemento no es interactuable y tiene sentido, como mencione al inicio no todos los elementos deben tener foco.

document.querySelector("#dialog1Desc").focus();

Nota: NO USAR TABINDEX en el elemento de dialog

http://keycode.info/
UNA MUY MUY BIENA PAGINA PARA PROGRAMADORES WEB

Que 煤til informaci贸n y qu茅 bonita risa :3

Otra cosa que faltar铆a es que cuando el modal se abre y se va enfocando los elementos, que el foco no se salga del modal, es decir, despues de enfocar el 煤ltimo elemento, que se vaya al primero.
Tambi茅n, cuando se cierre el modal, que el foco regrese al 煤ltimo elemento enfocado antes de que el modal se abriera.

El focus() se env铆a a un elemento cuando se enfoca. Este evento es impl铆citamente aplicable a un conjunto limitado de elementos, tales como elementos de formulario ( <input>, <select>, etc.) y enlaces ( <a href>). En versiones recientes del navegador, el evento se puede extender para incluir todos los tipos de elementos al establecer expl铆citamente la tabindexpropiedad del elemento . Un elemento puede enfocarse mediante comandos del teclado, como la tecla Tabulador, o haciendo clic con el mouse sobre el elemento.

Heads up: el uso de 鈥渒eyCode鈥 ha sido deprecado en favor de 鈥渒ey鈥, que usa los nombres de las teclas en lugar de un c贸digo num茅rico.
Referencias:

Creo que algo mejor que forzar un H1 o cualquier elemento a ser focuseable, en el caso del modal, ser铆a mejor buscar los elementos focuseables que haya disponibles, y hacerle foco a ese.

const focusableElements = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
var firstFocusable = focusableElements[0];

Viendo todo esto creo que a煤n me falta aplicar javascript correctamente en mis proyectos, esto me motiva a seguir mejorando

Genial el aporte de keycode 馃槷

Otra manera de cerrar el modal (es lo mismo pero con el operador ternario)

/*Cierra modal con tecla Esc*/
function listenForEsc(e) {
  e.keyCode === 27 ? closeModal(e) : null
}

馃く Esta muy genial esto. Toca repasar JS pero 馃槄

No sabia de la pagina de keycode.info

Algunos recursos

Actualmente html tiene una nueva etiqueta para el uso de los modales
el cual es <dialog>
el cual tiene dos propiedades para abrir que son show() y showModal() y para cerrarlo con close()

la diferencia entre show() y showModal() es que en show() abre como un cuadro de dialogo justo por debajo de donde es llamado y te permite seguir interactuar con el resto de la pagina y showModal() se abre como un modal en todo el centro de la pantalla y con un background difuminado(por defecto sin uso de css) y no te permite interactuar con el resto de la pagina

Buena clase.

Funciona, se cerr贸 mi modal.

muy buen curso

La clase pasada d铆 una soluci贸n para el reto de poner la imagen del modal que hac铆as click pero me equivoque dado que no funcionaba para teclado, este es el correcto:

function ImgClick(e) {
  // VALIDAR SI FUE CON EL TECLADO O CON CLICK
  if (e.clientX === 0 && e.clientY === 0) {
    // TECLADO
    let IMG = e.srcElement.classList[0];
    document
      .querySelector("#img-modal")
      .setAttribute("src", `./images/${IMG}.png`);
  } else {
    // CLICK
    let IMG = e.srcElement.src;
    document.querySelector("#img-modal").setAttribute("src", IMG);
  }

  openModal();
}

Y lo visto hoy en clase podemos verificar la tecla as铆 o simplemente con el nombre:

function CloseEsc(e) {
  if (e.key === "Escape") {
    closeModal(e);
  }
}

Un modal es una pantalla que cubre el viewport total o parcialmente, con un contenido emergente.

馃憣