Mejoras de Accesibilidad en Modales con HTML y CSS
Contenido del curso
Carolina Fernandez Gonzalez
Ivan Camilo Buitrago Buitrago
Rubén Ernesto Aragón Gil
jorge llanque
Emmanuel Jose Lamprea Florez
Bernardo Ayala Montezuma
Cynthia Jazmín Romero
Estefany Salas
Team Platzi
Juan Esteban Galvis
Beto Toro
Andres Rivera
Brandon Argel Verdeja Domínguez
Tomás Felipe Beltrán Pulido
Sergio Estrella
Profesor
Carolina Gómez
luimarco daniel Carrascal Diaz
Carolina Gómez
Tomás Felipe Beltrán Pulido
Usuario anónimo
User
Anyelo Leonardy Alvarez Baquero
Rodrigo Figeroa Popoca
Efraín Hernández García
Christian David Sánchez
Ariel Sebastián Contreras
CRISTIAN BARBERO PÉREZ
Luis Felipe Silgado Cortázar
CRISTIAN BARBERO PÉREZ
Miguel Angel Reyes Moreno
Naldo Duran
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.
estoy totalmente de acuerdo
de acuerdo
Con ESC no hubiera sido lo mismo?
Yo creo que si, la mayoría presionamos la tecla ESC, pero bueno es otra forma de hacerlo.
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")) }
Claro, porque de no tener el botón de cierre el modal hubiese tenido una "trampa para el foco del teclado", ¿cierto?
Si, porque el overlay normalmente no es enfocable para el teclado entonces no se podría salir del modal 👩🏻💻
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" />
Gracias parcero 💪🏼
Siempre he tenido la duda si la etiqueta semantica ideal para un modal es <aside />o ```
Hola Andres, tal vez ya encontraste la respuesta, pero de igual manera, ahora la mejor opción es utilizar la etiqueta <dialog></dialog> incluso tiene algunas cosas que te ayudan a configurar el modal, como: los atributos open / close y también ya tiene un pseudoelemento ::backdrop para el fondo del modal, y en javascript tiene otras cosas para facilitar el paso de datos, aside puede servir para crear un modal, y de hecho era el tag correcto semánticamente hasta que añadieron el de dialog. Documentación MDN
Espero haya resuelto tu duda 😃
Hola a todos, tengo una pregunta. Logré cambiar el código en los 3 archivos para poder salir del modal con la tecla esc, pero el modal no se presenta adecuadamente: parece como si el h2 se "subiera", pero, en su padre (modal), h2 es el primer elemento y no hay padding o margin suficiente para recrear lo que veo, por lo que no entiendo qué sucede con el modal. Me gustaría contar con la ayuda de alguien para revisar esto y resolver. Gracias de antemano. Dejo el enlace al repo: https://github.com/Tom4sBeltr4n/accesibilidad/settings
Recién estoy aprendiendo JS, y me parece genial lo que puede llegar a hacer :D
Accesibilidad en modales
Los modales son un reto para la accesibilidad porque muchos de sus cambios solo se comunican de forma visual. En esta clase se trabaja en mejorar un modal para que también sea usable con teclado y lectores de pantalla.
Primero se revisa el estado actual del modal y se detecta que no se puede abrir con el teclado, ya que la interacción solo está ligada al clic del mouse. El problema es que la clase que activa el modal estaba aplicada a una imagen (div) y no a un botón, que es el elemento correcto para recibir interacción con teclado.
Para solucionarlo:
Luego se mejora la estructura del HTML del modal:
Después se hacen ajustes de estilos en el CSS:
Finalmente:
Se deja preparado el camino para la siguiente clase, donde se verá cómo enfocar el modal con JavaScript al abrirlo y cerrarlo usando el teclado.
tamalito
No esta malo, pasa que se requiere conocimientos de html y demás para hacer esta clase.
¿Es necesario usar element.target.className.includes()? Me da la sensación de que usarlo puede causar problemas para cuando tenemos una clase project y otra project-container, que en muchos casos pueden tener un tamaño distinto (por ejemplo, cuando .project es un hijo de .project-container y tiene hermanos con esa misma clase)
Gracias de antemano
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 }```
Alguien sabe porqué pasa lo siguiente:
Si no le asigno una clase a las imágenes del carousel, al picar con el ratón en ellas no se muestra el modal, si la enfoco con Tab sí que se abre.
Si le pongo una clase cualquiera, por ejemplo project-img sí que se abre al picar con el ratón.
Es como si la imagen tapase el botón, que es el que tiene el event listener y no se pudiera picar en él.
Creo que deberías formular tu pregunta completa, lo que te entendí es:
Si no le asigno una clase a las imágenes del carousel, al picar con el ratón en ellas no abren el modal. R/ Porque el código Js que sale en los videos busca elementos por la clase aginada, entonces si no hay clase, no encuentra los elementos.
Si no le asigno una clase a las imágenes del carousel, al picar con el ratón en ellas no se ven bien. R/ Porque el css busca esos elementos por clase, entonces si no hay clase, no aplica estilos.
Si estas no eran tus preguntas, por favor indícalo para buscar una respuesta adecuada.
Es el primer caso que has puesto, pero obviamente si no le pongo clase utilizo un selector de etiqueta, ahí no está el problema.
La cuestión es que con este código se abre el modal:
<li class="project1-container"><button class="project1 project"><img src="images/project1.png" class="project-img" alt="Mi primer proyecto"/></button></li>
.project-img { border-radius: 5px; border: 2px solid #000; display: inline-block; height: 400px; margin: 0 8px; transition: all 0.2s ease-in-out; width: 250px; object-fit: cover; }
Y con este no se abre al clicar, pero si llego con el Tab y hago Enter se abre correctamente:
<li class="project1-container"><button class="project1 project"><img src="images/project1.png" alt="Mi primer proyecto"/></button></li>
.project-container img { border-radius: 5px; border: 2px solid #000; display: inline-block; height: 400px; margin: 0 8px; transition: all 0.2s ease-in-out; width: 250px; object-fit: cover; }
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; } }
👌
