WebAIM - Web Accessibility In Mind

E-mail List Archives

Semi-inert modals

for

From: Kian Badie
Date: Mar 31, 2022 10:07AM

I have a modal element that does not make all outside elements inert. The
modal covers the content window, but does not cover the header/footer
elements. Therefore, mouse users are able to have the modal open while
accessing the nav menu, search, and other controls.

The modal still makes the inner content window inert (inner content as in
everything in between the header/footer). I figured I should still treat it
as a modal (as described by
https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), however the
aria practices state:

"So, mark a dialog modal only when both:
- Application code prevents all users from interacting in any way with
content outside of it.
- Visual styling obscures the content outside of it."

So treating my modal as an actual modal would break that rule. Since it
only made the inner content window inert, I leaned towards marking it up as
a modal. Mouse users would still have access to the header/footer
components and keyboard users could still access header/footer stuff by
exiting the modal. However, it doesn't sit completely well to go against
what I quoted from the aria practices.

The alternative seems to not mark it up as a modal and manage tab order to
tab through the header, modal, and footer elements to ignore the content
underneath the "modal". But how would that be communicated in the markup/to
screen readers? That doesn't feel right either. If I had to pick between
the two options, it seems that marking it up as a modal is the better
option, but I wanted to see if I could get any second opinions.

Thank you,
Kian Badie