Mejoras de Accesibilidad en Modales con HTML y CSS

Clase 30 de 35 • Curso de Accesibilidad Web

Resumen

¿Cómo mejorar la accesibilidad de los modales en una página web?

La accesibilidad web es un tema clave para garantizar que todos los usuarios puedan interactuar con el contenido en línea, incluyendo aquellos con discapacidades. Los modales, que son elementos emergentes en las interfaces de usuario, presentan un desafío particular. Aquí, se abordarán algunas técnicas para mejorar la accesibilidad de un modal, asegurando que sea funcional y fácil de usar para todos.

¿Cómo hacer un modal accesible para teclado?

Un paso fundamental es garantizar que los usuarios puedan abrir y cerrar el modal utilizando únicamente el teclado. Esto implica asegurarse de que todos los elementos interactivos puedan ser enfocados y activados sin necesidad de un ratón.

Mover la clase interactiva al elemento adecuado: En el ejemplo proporcionado, la clase necesaria para abrir el modal estaba en el elemento imagen. Es más efectivo moverla al botón que recibe la interacción del teclado.

<!-- Original -->
<div class="project">
    <img src="path-to-image.jpg" alt="Proyecto Imagen">
</div>

<!-- Modificado -->
<div class="project">
    <button class="modal-trigger">Abrir Modal</button>
    <img src="path-to-image.jpg" alt="Proyecto Imagen">
</div>

Asegurar el foco: Verificar que el elemento reciba el foco al navegar por el teclado y que pueda ser activado al presionar "Enter".
Cerrar el modal con un botón accesible: Incluir un botón para cerrar el modal que sea funcional con el teclado.
```
<button class="modal-close">Cerrar</button>
```

¿Cómo mejorar la estructura HTML para la accesibilidad?

La estructura del HTML de un modal también juega un papel crucial en su accesibilidad. Incorporar cabezales y asegurarse de que el texto esté bien organizado es vital.

Utilizar encabezados adecuados: Asegurarse de que el texto importante del modal esté en un <h2>, proporcionando un orden jerárquico claro.
```
<h2 class="modal-header">Título del Modal</h2>
```
Proveer texto alternativo para imágenes: Incluir descripciones en el atributo alt de las imágenes para describir su contenido.
```
<img src="image-path.jpg" alt="Descripción de la imagen">
```

¿Cómo aplicar CSS correcto para garantizar la usabilidad?

El diseño también influye en la accesibilidad. Asegurarse de que el modal sea visible y fácil de interactuar es esencial.

Definir el tamaño del modal: Fijar un tamaño razonable para el modal, de modo que no ocupe toda la pantalla y sea manejable.
```
.modal {
    width: 600px;
    height: auto;
    top: 5%;
    margin: auto;
}
```
Asegurar el contraste suficiente: Garantizar que el texto tenga un buen contraste con el fondo para facilitar su lectura.

Al seguir estas directrices, se puede aumentar significativamente la accesibilidad de un modal, proporcionando una mejor experiencia de usuario para todos, independientemente de sus habilidades. Además, puedes explorar cómo con JavaScript se podría enfocar el modal de forma automática al abrirse y cómo podrían añadirse funciones adicionales de cierre mediante el teclado. Sigamos avanzando juntos en la creación de interfaces inclusivas.

Carolina Fernandez Gonzalez

student•

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.

Ivan Camilo Buitrago Buitrago

student•

estoy totalmente de acuerdo

Rubén Ernesto Aragón Gil

student•

de acuerdo

jorge llanque

student•

Con ESC no hubiera sido lo mismo?

Emmanuel Jose Lamprea Florez

student•

Yo creo que si, la mayoría presionamos la tecla ESC, pero bueno es otra forma de hacerlo.

Bernardo Ayala Montezuma

student•

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"))
}

Cynthia Jazmín Romero

student•

Claro, porque de no tener el botón de cierre el modal hubiese tenido una "trampa para el foco del teclado", ¿cierto?

Estefany Salas

Team Platzi•

Si, porque el overlay normalmente no es enfocable para el teclado entonces no se podría salir del modal 👩🏻‍💻

Juan Esteban Galvis

student•

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"
        />

Beto Toro

student•

Gracias parcero 💪🏼

Andres Rivera

student•

Siempre he tenido la duda si la etiqueta semantica ideal para un modal es <aside />o ```

<dialog /> ```

Brandon Argel Verdeja Domínguez

student•

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 😃

Sergio Estrella

teacher•

Recién estoy aprendiendo JS, y me parece genial lo que puede llegar a hacer :D

Tomás Felipe Beltrán Pulido

student•

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

Tomás Felipe Beltrán Pulido

student•

¿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

luimarco daniel Carrascal Diaz

student•

tamalito

Usuario anónimo

user•

Anyelo Leonardy Alvarez Baquero

student•

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)});
  });

Rodrigo Figeroa Popoca

student•

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()
}

Efraín Hernández García

student•

La lógica está muy entendible del JS

Christian David Sánchez

student•

Muy bien. Continuemos :)

Ariel Sebastián Contreras

student•

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
}```

CRISTIAN BARBERO PÉREZ

student•

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.

Luis Felipe Silgado Cortázar

student•

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.

CRISTIAN BARBERO PÉREZ

student•

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;
}

Miguel Angel Reyes Moreno

student•

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;
  }
}

Naldo Duran

student•

👌