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

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Accesibilidad Web

Curso de Accesibilidad Web

Juliana Gómez

Juliana Gómez

Manejando modales

30/35
Recursos

Aportes 13

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Un modal siempre debería tener tres salidas (a mi modo de ver): El botón de cerrar, clic fuera del modal para que se cierre, y con la tecla **esc **del teclado.

Con ESC no hubiera sido lo mismo?

Claro, porque de no tener el bot√≥n de cierre el modal hubiese tenido una ‚Äútrampa para el foco del teclado‚ÄĚ, ¬Ņcierto?

Listo el reto de poner la imagen del proyecto al que le da click de manera din√°mica con JavaScript completado!!

Como vimos cada imagen tiene un evento click, que lleva a una función llamada: openModal que recibe el parámetro e (El cual trae toda la información del evento)

Y tras inspeccionar ese parámetro e la ruta: e.srcElement.currentSrc te devuelve la ruta de la imagen y ya simplemente modifico el atributo src por esta ruta, así:

function openModal(e) {
  /* Este código ya lo tenía la profesora para mostrar el modal */
  document.querySelector(".modal-container").style.display = "flex";

  /* IMG contiene la ruta de la imagen */
  let IMG = e.srcElement.currentSrc;
  /* Pongo esa ruta en el parametro src de la imagen */
  document.querySelector("#img-modal").setAttribute("src", IMG);
}

Y en el HTML para modificar la imagen le puse un id (Eso es lo que llamo en el código javascript anterior):

<img
          id="img-modal"
          src="./images/project1.png"
          class="modal-project-image"
          alt="Proyecto de Ejemplo"
        />

Si quieren que el screenshot del modal cambie dependiendo de a cual proyecto le hagan click, solamente tienen que agregar una linea de código.
.
Busquen en el archivo index.js una función llamada openModal y le agregan esta segunda línea de código que les muestro:
.

/** Esta funcion se llama cuando la persona hace click en cualquier porjecto del carousel */
function openModal(e) {
  document.querySelector(".modal-container").style.display = "flex";
  document.querySelector(".modal-project-image").setAttribute("src", e.target.getAttribute("src"))
}

Reci√©n estoy aprendiendo JS, y me parece genial lo que puede llegar a hacer ūüėĄ

Mi solución al reto.
En el HTML agregue un id al button.

 <li class="project1-container"><button class="project project1" id="newid-1"><img src="./images/project1.png"  class="project-img" alt="Mi primer proyecto" /></button></li>

No supe como obtener directamente el source del e (ya algunos compa√Īeros mostraron como), as√≠ que en mi JS use un switch para cada caso:

 document.querySelectorAll(".project").forEach(element => {
    element.addEventListener("click", e => {
      var newid = element.getAttribute("id");
      switch (newid){
        case "newid-1":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project1.png");
          break;
        case "newid-2":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project2.png");
          break;
        case "newid-3":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project3.png");
          break;
        case "newid-4":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project4.png");
          break;
        case "newid-5":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project5.png");
          break;
        default:
          break;
      }
      return openModal(e)});
  });
function openModal(e) {
  const url = e.target.localName === 'button' 
    ? e.target.firstElementChild.src
    : e.target.src
  document.querySelector(".modal-container").style.display = "flex";
  document.querySelector('.modal-project-image').style.cssText = `
    background: center / cover no-repeat url('${ url }');
  `
  e.stopPropagation()
}

La lógica está muy entendible del JS

Muy bien. Continuemos ūüėÉ

aca solucione el problema de agregar los distintos modales para cada imagen. utilice expresiones regulares para capturar el outerHTML de la direccion en especifico ya que la parte comentada del codigo solo funcionaba con el mouse y usando el teclado y el enter se rompia

function openModal(e) {
  let etiqueta = e.toElement.outerHTML 
  //e.srcElement.currentSrc  o  e.toElement.src
  const regular = /\.\/images\/project\d*\.[a-z]{2,4}/;
  let address = etiqueta.match(regular)
  document.querySelector(".modal-project-image").setAttribute('src',address[0])
  document.querySelector(".modal-container").style.display = "flex";
  document.getElementById("modal-header").focus
}```

La manera en que logré hacer que se mostrara la imagen del modal dependiendo de a cual se hace click:

const imgProyect1 = './images/project1.png'
const imgProyect2 = './images/project2.png'
const imgProyect3 = './images/project3.png'
const imgProyect4 = './images/project4.png'
const imgProyect5 = './images/project5.png'

function openModal(e) {
  document.querySelector(".modal-container").style.display = "flex";
  const imagenModal = document.getElementById('imagen-modal')
  switch (e.target.id) {
    case 'img-carousel1':
      imagenModal.src = imgProyect1
      break;
    case 'img-carousel2':
      imagenModal.src = imgProyect2
      break;
    case 'img-carousel3':
      imagenModal.src = imgProyect3
      break;
    case 'img-carousel4':
      imagenModal.src = imgProyect4
      break;
    case 'img-carousel5':
      imagenModal.src = imgProyect5
      break;
    default:
      break;
  }
}

ūüĎĆ