How to Build Accessible Modals With HTML & CSS

Creating accessible modals is essential for ensuring that all users, including those with disabilities, can interact with your web applications effectively. In this article, we'll explore how to build accessible modals using HTML and CSS, while adhering to best practices that improve user experience.

Understanding Modals

Modals, also known as dialog boxes, are temporary windows that display information or interactive elements without navigating away from the current page. They can serve multiple purposes, such as displaying forms, alerts, or additional content. Accessibility is crucial in modal design to ensure that all users can interact with these elements seamlessly.

Basic Structure of a Modal

To create a modal, you'll need a foundational HTML structure. It is essential to use semantic HTML elements to enhance accessibility. Here is a simple example:

<div class="modal" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
    <div class="modal-content">
        <button class="close-modal" aria-label="Close modal">&x2715;</button>
        <h2 id="modal-title">Modal Title</h2>
        <p id="modal-description">This is a description of the modal content.</p>
        <button>Action Button</button>
    </div>
</div>

In this structure:

The role="dialog" attribute indicates that this is a modal dialog.
The aria-labelledby attribute associates the modal with its title for screen readers.
The aria-describedby attribute provides an accessible description of the modal's content.

Styling the Modal with CSS

Next, you'll want to apply CSS styles to make the modal visually appealing while ensuring that it remains functional and accessible. Here's an example of basic CSS styling:

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}
.modal-content {
    background-color: white;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

With this CSS code:

We hide the modal by default using display: none.
The modal is centered and covers the entire screen with a semi-transparent background when displayed.
The close button is styled for ease of interaction.

JavaScript for Modal Functionality

To make the modal functional, you’ll need JavaScript to handle opening and closing actions. Here’s a simple way to implement this:

const modal = document.querySelector('.modal');
const openModalBtn = document.querySelector('.open-modal'); // Assuming there's a button to open the modal
const closeModalBtn = document.querySelector('.close-modal');
openModalBtn.addEventListener('click', () => {
    modal.style.display = 'block';
    modal.setAttribute('aria-hidden', 'false'); // Any open modal should not be hidden
});
closeModalBtn.addEventListener('click', () => {
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden', 'true'); // Mark the modal as hidden when closed
});
// Close modal when clicking outside of it
window.addEventListener('click', (event) => {
    if (event.target === modal) {
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
    }
});

This JavaScript code snippet does the following:

How to Build Accessible Modals With HTML & CSS