DEV Community

loading...
Cover image for ✨ Inclusive components: making modals accessible πŸ§‘β€πŸ¦―

✨ Inclusive components: making modals accessible πŸ§‘β€πŸ¦―

alenanik profile image Alena Nik ・Updated on ・5 min read

In order for us to help create a more accessible, equal society for everyone, change needs to happen. But for those changes to happen, we need to have conversations.
Holly - Award-winning disability blogger and writer

Introduction

As Holly is saying, 2021 seems like a good year to start having a conversation about accessibility, if you haven't started yet.

Working from home, shopping online, ordering food, doing anything online is often a challenge for someone who is blind or visually impaired and relies on a screen reader.

What we can do as front-end developers?
Make a small change, educate ourselves, have conversations, not to be afraid of sharing information.

I've started my accessibility journey this year and I invite you to join me. Today I'm sharing my notes on modals.

Definition

A modal dialog is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction.
This dialog disables the main content until the user explicitly interacts with the modal dialog.

Should I avoid modals all together? 🀨

Modals are evil and should be avoided it's a common misconception that existed for some time. The reasons might be:

  • Modals eat up a lot of space
  • If the content doesn't fit inside, the scrollbars might cause a problem on mobile screens
  • Any other reason
  • Often unaccessible

You can definitely discuss all of them with your designer, but let's break down the last one together.

Often, modals are a piece of UI that contains text or an image, or a form and buttons. Like alerts, modals disrupt the flow of what the user is doing, so we must help them to be able to open it, close and read through the content with the screen reader.

The problem

If the user navigates with the keyboard through our website, and the modal pops up, the user can't interact with the content (sign-in, say yes or even close it) because the keyboard focus is behind the modal. Pressing TAB or ESC won't work either. Very frustrating. 😣 If the user can't navigate, they will need sighted assistance.

What do the specs say? πŸ€“

First of all, "the rules" or "read the specs" sounds intimidating, I get that. No, really. But bear with me:

WCAG stands for Web Content Accessibility Guidelines. It's useful to developers as a guideline to make websites more accessible for disabled people. Those standards exist for us to use them, as any other resource.
Personally, I find myself reaching out to "Quick Reference":
A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements

This is what it says about Modal Dialog:

  • Initial focus placement.
  • Authors SHOULD provide a dialog label, which can be done with the aria-label or aria-labelledby attribute.

  • Keyboard interaction

➑️ Tab 
Moves focus to next focusable element inside the dialog.
When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
➑️ Shift + Tab 
Moves focus to previous focusable element inside the dialog.
When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
↩️ Escape   
Closes the dialog.
Enter fullscreen mode Exit fullscreen mode
  • Focus and accessible descriptions are set based on the content of each dialog, usage of aria-describedby

  • When closed ❎, the focus is set on another element that provides logical work flow.

What Can I do? πŸ™‚

There are many edge cases and it all depends on your particular modal dialog, but here are some quick-wins:

  • HTML
<main>
  ...content of my page...
  <button onClick="openDialog">Sign in</button>
</main>
<div role="dialog" 
     id="dialog"
     aria-modal="true"
     aria-labelledby="modalTitle"
     aria-describedby="modalDescription"
     tabindex="-1"
>    
  <h1 id='modalTitle'>Registration Form</h1>
  <button onClick="closeDialog">Close me</button>
</div>
Enter fullscreen mode Exit fullscreen mode
  • Labeling

Give the modal an ARIA aria-describedby attribute which will be linked to the id of some visually hidden text which describes the modal’s function, and how to exit it.

The dialog has either:
A value set for the aria-labelledby property that refers to a visible dialog title.
A label specified by aria-label.
Optionally, the aria-describedby property is set on the element with the dialog role to indicate which element or elements in the dialog contain content that describes the primary purpose or message of the dialog.
WAI-ARIA Roles, States, and Properties

  • Shift focus when the modal is open

If the content is large enough that focusing on the first interactive element could cause the beginning of content to scroll out of view, it is advisable to add tabindex=-1.

Upon clicking the modal-activating button, all the main content should get an aria-hidden='true' attribute so that a screen reader will no longer read any of the content. Additionally, the modal should get an aria-hidden='false' and go from having {display: none;} to {display: block;}.

When a user clicks the β€˜Open modal’ button then, we need to actively set their focus to the modal with JavaScript, and if they ever tab outside the modal, we need to set the focus back on the modal.

  • When the dialog is open, pressing the ESC key should close it

  • What if the button is X? ❎

It is strongly recommended that the tab sequence of all dialogs include a visible element with role button that closes the dialog, such as a close icon or cancel button.

If the 'close' element is implemented as a button containing merely the letter 'x', you can do:

<div id="box">
   This is a pop-up box.
   <button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>                
</div>
Enter fullscreen mode Exit fullscreen mode

If you need to, make sure to use the high contrast close icon in the top corner for people people who have low vision:

<button id='modalCloseButton' class="modalCloseButton" title='Close registration form'>
  <img id='cancel' src='x.png' alt='close the registration form'>
</button>
Enter fullscreen mode Exit fullscreen mode

Resources πŸ“‚

Github πŸ‘©πŸΌβ€πŸ’»

GitHub logo andrewvasilchuk / vue-accessible-modal

Vue.js component for accessible modals



Chakra UI is one of my favorite references for accessibility in Vue components. They are doing an amazing job!

GitHub logo chakra-ui / chakra-ui-vue

⚑️ Build scalable and accessible Vue.js applications with ease.

Articles πŸ“‹

Creating An Accessible Modal Dialog
Modals (Dialog Windows)
Notifications

Specs 🧷

3.9 Dialog (Modal)

Conclusion πŸ’‘

Building accessible websites shows that you care about disabled people. It's a small change that makes difference.

How often could you hear someone say "I'm not sacrificing visuals for accessibility"? The good news is you don't have to. 😊 What we can do is make sure that all of our users can have similar experiences: to be able to find a button, have a dialog with the interface, close a modal or add items to the card.

I'm quoting Holly again and wish you good luck in making a small change for a better experience for all. Just give it a try tomorrow.

"The lack of accessibility leaves disabled people feeling frustrated, isolated, and forgotten. But when accessibility is considered, disabled people feel included and most importantly, we feel equal.

Accessibility should be at the heart ❀️ of everything you do. Whether it personally makes a difference to your life or not, accessibility should always be considered and made a priority."

If you like this article and the information that I have put together, please, share it with your colleague and reach out to me on Twitter, whether you liked it or have suggestions πŸ’š

Discussion (8)

pic
Editor guide
Collapse
plweil profile image
Peter Weil

This is much needed!

"When a user clicks the β€˜Open modal’ button then, we need to actively set their focus to the modal with JavaScript, and if they ever tab outside the modal, we need to set the focus back on the modal."

To ensure that no one, including screen reader users, can get outside the modal, I suggest using the inert polyfill, which makes everything in the DOM unclickable and unfocusable.

github.com/GoogleChrome/inert-poly...

As for the initial focus, you should use the specs as an initial guide but do testing for your particular scenario. And the same goes for where you put the focus after closing the modal dialog.

Collapse
thamaragerigr profile image
Thamara Gerig

Loved it!! <3 <3

Collapse
thamaragerigr profile image
Thamara Gerig

I'd love a series of 'Inclusive Components'!!

Collapse
alenanik profile image
Alena Nik Author

That's a lovely idea, what componentes you feel like tend to overwhelm you when you think of making them accessible? 🧐

Collapse
z2lai profile image
z2lai

Here's a series on accessible components: dev.to/savvasstephnds/your-hamburg...

Collapse
baumannzone profile image
Jorge Baumann

brutal πŸ‘

Collapse
rginez profile image
Raymundo B. Ginez

Any public websites that you're recommend?

Collapse
abdulhadiawad profile image
abdulhadi-awad

Amazing ..