Article: How to make accessible dialogs and modals

[rmleg]

Description

A guide to creating accessible dialogs and modals as requested in #12.

Would you like to write the article or request that it be written?

I've been working a lot with modal accessibility lately and I would like to write this article!

[sandrina-p]

Hi @rmleg , how is been your article? I had this one on my todo list. If you need a reviewer, I'll gladly help you :)

[rmleg]

Hey @sandrina-p, I've actually been meaning to reach out! I unfortunately haven't started this yet--I think I've overcommitted myself to too many projects. :( I would still like to write this article though! Would this rough schedule be okay?

• Outline on/around March 8
• First draft on/around March 22
• Edits completed by the end of March

If you need it sooner I totally understand and would be happy to open this up to someone else.

[sandrina-p]

@rmleg, your pace is perfectly fine, just ping me whenever you need an extra review :)

[rmleg]

What are your thoughts on separating dialogs and modals into two separate articles?

I wasn't completely sure what distinguished a non-modal dialog from a modal. When I looked into it, I saw that there is a lot of information that could potentially be included in an article and would make a single article quite long. Here's an article I found as an example of the depth an article focused on non-modal dialogs could go into. (Plus, it could be better for SEO to have two articles that link to each other, although I know that is not the main concern here!)

[rmleg]

I wrote an outline for a modal-focused article (see my previous comment) and would appreciate any feedback you have to offer! I can definitely add non-modal dialog content as well if you would still prefer to keep the two as a single article.

Where I reference things that aren't done just with HTML, like adding aria-hidden attributes, would it make sense to link to tutorials for how to do those things in JavaScript? Or do we assume our readers will Google what they need? If this was for my personal blog, I would lean toward linking out to other tutorials (and possibly replacing those links with my own tutorial posts in the future), but I'm not sure what the preference is here.

Accessible modals outline

• Intro:
  • What is a modal?
  • How is a modal different from a non-modal dialog?
    • Link to non-dialog modals article if applicable.
• How to make an accessible modal
  • Role
    • Surround it in role="dialog"
      • This has an inherent application role, in which only keyboard-focusable items and their programmatically associated labels/descriptions are accessible. If your dialog/modal contains regular text, surround that in role="document".
        • code sample
  • Name
    • Provide an accessible name using either:
      • aria-labelledby on the modal container to reference the modal title.
        • code sample
      • aria-label on the modal container if there is no visible title.
        • code sample
  • Handling focus
    • Should contain at least one focusable element.
    • When the modal opens, focus should go to a focusable element within it. This could be the first focusable element, a close button, the first form field, etc.
    • Focus should be "trapped" in the modal when someone uses tab to move forward, or shift+tab key go backward.
      • Suggested implementation:
        • When the focus reaches the last focusable element and someone presses tab again, send focus to the first focusable element. When the focus reaches the first focusable element and someone presses shift+tab, send focus to the last focusable element.
    • When the modal closes, focus should return to the element that triggered the modal opening if possible (i.e. if it still exists on the page), otherwise focus can return to the top of the page (or some other logical place).
  • Handling elements outside the modal
    • No one should be able to interact with elements on your webpage that are not part of the modal when the modal is open.
      • Suggested implementation: completely cover the background webpage in an overlay when the modal opens. It is common to make this overlay semi-transparent so you can still see what is behind the modal.
    • Handling elements outside the modal for assistive technology
      • While the modal is open, assistive technology should not be able to access elements outside the modal.
      • Suggested implementation: add aria-hidden="true" to all non-modal top-level parent elements.
        • code sample of markup with aria-hidden="true" added.
        • When modal is closed, remove aria-hidden attributes instead of setting them to false.
• Further Reading (this session could definitely be expanded! Do you have any articles or resources you would include here?)
  • WAI ARIA practices modal dialog example
  • ARIA: dialog role documentation from MDN

[ericwbailey]

Nice! This is looking good. To answer your questions:

Where I reference things that aren't done just with HTML, like adding aria-hidden attributes, would it make sense to link to tutorials for how to do those things in JavaScript?

I definitely would link. If we can do the hard work to make it easy on the reader to link to a quality source it helps both the reader and both sites' reputations.

What are your thoughts on separating dialogs and modals into two separate articles?

It might make the post longer, but I think one post that clarifies these two treatments would be helpful. I think a lot of people aren't familiar with the nuance.

Also tapping @scottaohara for his opinion, as he's done a lot of work with modals/dialogs.

[rmleg]

@ericwbailey Sounds good re a single post! It will take me a bit longer since I am much less familiar with non-modal dialogs. I'll do some reading and aim to post an updated outline by the middle of next week. :)

[ericwbailey]

Closed for inactivity.