Cómo crear un acordeón accesible con Bootstrap

por
Tiempo de lectura: 3 minutos

¡Buenos dias!

Os dejo un nuevo tutorial, para que empecéis el finde con ganas.

En el tutorial de hoy os voy a mostrar como hacer, un un acordeón con Bootstrap, pero vamos a añadir una serie de atributos que además, hacen que este sea accesible para todos.

Espero que os guste, comenzamos:

Paso 1: Configuración básica del HTML y enlace de Bootstrap

Comencemos creando un nuevo archivo HTML y configurando la estructura básica. Asegúrate de enlazar los archivos CSS y JavaScript de Bootstrap en el <head> de tu documento:

Paso 2: Estructura del acordeón

Dentro del <body>, crearemos el contenedor principal para nuestro acordeón. Utilizaremos la clase accordion de Bootstrap:

Dentro del contenedor accordion, agregaremos los paneles del acordeón. Cada panel se representará con la clase card de Bootstrap:

Paso 3: Añadir contenido accesible

Para hacer nuestro acordeón accesible, debemos agregar atributos y enlaces adecuados. En cada panel, agregaremos un encabezado y un contenido, y utilizaremos los atributos id y aria para establecer las relaciones y proporcionar información a las tecnologías de asistencia.

En el encabezado de cada panel, utilizaremos la clase card-header de Bootstrap junto con un botón para controlar la expansión y el colapso del panel:

Asegúrate de que el id del encabezado y del contenido del panel sean únicos y se correspondan correctamente. Utilizamos el atributo aria-expanded para indicar si el panel está expandido o colapsado, y aria-controls para enlazar el botón del encabezado con el contenido del panel.

Paso 4: ¡Prueba tu acordeón accesible!

Ahora que hemos creado nuestro acordeón accesible con Bootstrap, es importante probarlo para asegurarnos de que cumple con las pautas de accesibilidad y funciona correctamente en diferentes dispositivos y tecnologías de asistencia. Realiza pruebas de navegación con el teclado, verifica que los paneles se expandan y colapsen adecuadamente y comprueba si la información se presenta de forma clara y legible.

A continuación os dejo un código de ejemplo y el resultado

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
    <title>Acordeón accesible para devcodelight</title>

</head>

<body>
    <h1 class="text-center">Acordeón accesible con Bootstrap</h1>

    <div class="container">
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Lorem Item 1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ipsum harum provident
                        obcaecati saepe debitis quo non aliquam autem fugit sapiente, voluptatibus, eaque delectus
                        voluptas
                        consectetur libero! Dolorum, accusamus incidunt.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Lorem Item 2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ipsum harum provident
                        obcaecati saepe debitis quo non aliquam autem fugit sapiente, voluptatibus, eaque delectus
                        voluptas
                        consectetur libero! Dolorum, accusamus incidunt.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Lorem Item 3
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ipsum harum provident
                        obcaecati saepe debitis quo non aliquam autem fugit sapiente, voluptatibus, eaque delectus
                        voluptas
                        consectetur libero! Dolorum, accusamus incidunt.
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Este acordeón es accesible, podemos interactuar con el, mediante ratón y teclado, ademas de ser valido su usamos un lector de pantalla.

Espero que os guste, nos vemos en el siguiente!! 📚💻

Post Views: 8

Deja un comentario