Accessible components: Modals

Carlos Viteri — Tue, 03 Mar 2020 02:50:52 +0000

Modal popups are frequently used on the web. Especially to confirm actions, display ads, handle forms, etc.

However, are you building accessible modals? Can you open and close them by using the keyboard only? Are they understandable for assistive technologies?

If not, no worries, let's build one from scratch.

HTML

<button class="button">Delete item?</button>

<div aria-hidden="true" class="modal">
  <div class="modal__backdrop" tabindex="-1">
    <div aria-labelledby="modal-title" aria-modal="true" class="modal__container" role="dialog">
      <header class="modal__header">
        <h2 id="modal-title">Confirm?</h2>
        <button aria-label="Close modal">×</button>
      </header>
      <div class="modal__content">
        <p>This is the description of an accessible modal</p>
      </div>
      <footer class="modal__footer">
        <button>Yes</button>
        <button aria-label="Close modal">No</button>
      </footer>
    </div>
  </div>
</div>

In the snippet above, basically we have two nodes: the trigger button and the modal.

aria and role attributes explanation:

aria-hidden="true" this attribute removes its content from the accessibility tree. We must toggle this attribute to "false" once we open the modal.

aria-labelledby="id" will tell assistive technologies that content of the id, in this case the heading level 2, is what describes the dialog.

aria-modal="true" informs assistive technologies that content outside that element is inert.

role="dialog" helps assistive technology identify the dialog's content as being grouped and separated from the rest of the page content. However, this attribute alone is not enough, it must be properly labeled and must manage the keyboard focus correctly.

aria-label is used to define a string that labels the current element. In the buttons above we are using this attribute to explain better their purposes, it is necessary only when the text inside the button is not explanatory enough.

The first button has no aria attribute because the text inside is sufficient to explain the purpose of the button.

CSS

.modal[aria-hidden="true"] {
  display: none;
}

.modal__backdrop {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.modal__container {
  background-color: white;
  max-height: 100vh;
  max-width: 400px;
  overflow-y: auto;
  padding: 20px;
}

.modal__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

First of all, we are hiding the modal if it has the attribute aria-hidden="true". Then we are creating a backdrop to set up enough contrast between the modal and the rest of the page. And finally we are preventing the vertical content to get hide of the viewport by adding a Y axis scroll if the content is higher than 100vh.

JavaScript

const focusableElements = [
    '[contenteditable]',
    '[tabindex]:not([tabindex^="-"])',
    'a[href]',
    'area[href]',
    'button:not([disabled]):not([aria-hidden])',
    'embed',
    'iframe',
    'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
    'object',
    'select:not([disabled]):not([aria-hidden])',
    'textarea:not([disabled]):not([aria-hidden])'
  ];

const modal = document.querySelector('.modal');
const openButton = document.querySelector('.button');
const closeButtons = document.querySelectorAll('.modal__close-button');

document.addEventListener('keydown', handleKeydown);
openButton.addEventListener('click', openModal);
closeButtons.forEach(button =>
    button.addEventListener('click', closeModal)
);

function handleKeydown(e) {
  const esc = 27;

  if (e.keyCode === esc) {
    closeModal();
  }
}

function openModal() {
  const focusableModalElements = modal.querySelectorAll(focusableElements);

  modal.setAttribute('aria-hidden', 'false');

  if (focusableModalElements.length) {
   focusableModalElements[0].focus();
  }
}

function closeModal() {
  modal.setAttribute('aria-hidden', 'true');
}

In the JavaScript part we will toggle the aria-hidden attribute depending on what we want to do. When opening the modal we must focus the first focusable element within the modal. And obviously we should support the esc key to close the modal.

Working example:

https://codesandbox.io/s/accessible-modal-b97jf

Accessible components: Alerts

Carlos Viteri — Mon, 27 Jan 2020 05:29:05 +0000

Alerts are a very common pattern to provide feedback messages for user actions such as error, warning or information. Do you know how to create a truly accessible alert? In this tutorial, we will learn how to create one.

There are two ways of creating WAI-ARIA compliant alerts. We will take a look at both.

The easiest and recommended one is to add an aria-role="alert". This role is used to communicate an important message to the user.

<div role="alert">
  <p>Alert example: Here should be the alert content</p>
</div>

On the other hand, we can create an alert by adding two aria attributes:

aria-live="assertive" whatever text change in the children nodes of this attribute will interrupt the current process in the assistive technologies to notify immediately this change to the user.
aria-atomic="true" this attribute tells the assistive technologies to read the entire content of the alert event if just a portion of it has changed.

<div aria-atomic="true" aria-live="assertive">
  <p>Alert example: Here should be the alert content</p>
</div>

Sometimes you will want the user to close the alert. To do it, you have to add a close labeled button by using an aria-label, only if the text inside the button is not descriptive enough.

<div role="alert">
  <button aria-label="Close alert">×</button>
  <p>Alert example: Here should be the alert content</p>
</div>

DEV Community: Carlos Viteri

Accessible components: Modals

HTML

CSS

JavaScript

Accessible components: Alerts