Should modals be hidden or just marked as modals for assisted viewers?

BO

Bogey

466 10
Asked
Updated
Viewed
4.2k times

On my current project, I'm using Bootstrap 5.3 modals to give feedback to the user that their action has yielded some results. The question I'm having is, should I use aria-hidden="true" alongside aria-modal="true" or is aria-modal="true" good enough for users that use assistive technologies (though that is unlikely in this project, but I'm asking for future projects). Below is my modal's HTML as I have it right now.

<div class="modal fade" id="profile-update" tabindex="-1" aria-labelledby="profileUpdated" aria-hidden="true" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="profileUpdated">Profile Updated</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-white">
                <p>Your profile has being successfully updated.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">Thank You</button>
            </div>
        </div>
    </div>
</div>
add a comment
1

1 Answer

  • Votes
  • Oldest
  • Latest
BW

Brian Wozeniak

4.9k 49
Answered
Updated

I had to do some research, but from what it looks like only aria-modal="true" would be required:

Including aria-modal="true" on a dialog or alert dialog, removes the requirement of putting aria-hidden on background content, as the aria-modal informs assistive technologies that content outside a dialog is inert.

You can safely not include aria-hidden as that is implied for the ancestor tree from the modal itself. From the sounds of it, you would not actually include aria-hidden on the modal itself anyway, only its parent elements, but again that is implied when you use aria-modal. In your example as part of your question, you had specified both on the same element which would not make sense.

Another takeaway during my research is to make sure that everything in the modal where you specific area-modal="true" is an actual descendant. For example, if you have a button in the modal, make sure that the button is a descendant contained within the modal container in the DOM.

  • 0
    How would those attributes be used properly in a modal? — Bogey
  • 1
    You would just add aria-modal="true" to the container or the outermost element of the modal. When the modal is visible (active), that is when its meaning is applied. When it's hidden (not visible to visitors), then its ignored. I was mostly just trying to answer your original question, but you may want to click on the research link I included as it provides full details of everything you might want to utilize. — Brian Wozeniak
  • 1
    For example it also says: The aria-modal="true" informs the assistive technology user that the content underneath the dialog is not interactive so long as the element with a declaration of role="alertdialog" has focus. — Brian Wozeniak
  • 1
    I see, I skimmed through that article before posting the question but I didn't find anything about aria-hidden so I thought I either don't need it or the article just speaking specifically about aria-model and nothing but. Thanks for helping me out — Bogey
add a comment
1