Search code examples
htmlaccessibilitywai-aria

Do I need to use aria-hidden on an element whose visibility is hidden?

I have the following markup on my page:

<body>
  <div class="modal" role="dialog">
    ...
  </div>
  <div class="page">
    <div class="content">
      ...
    </div>
  </div>
</body>

So this is basically the markup of a modal dialog along with my page and content. By default, the modal has the visibility: hidden property. Now, I have the following questions about this specific page regarding accessibility:

  • Does the modal still need aria-hidden="true"?
  • When the modal is opened (using JS), its visibility is set to visible. I also use JS to add the aria-modal attribute to it. At this point, should I add the aria-hidden="true" to my page (.page)? Because if a modal is open, the content of the page should not be accessible to screen readers.

Any advice is greatly appreciated.

Solution

  • I've linked to a few posts that will answer your questions in more detail, but to quickly answer them:

    1. The modal won't need aria-hidden=true if it is already hidden with visibility: hidden as this will also remove it from the accessibility tree. See this blog post: https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html

    2. Yes, you should add aria-hidden=true to your .page if you're not hiding it with css, but just obscuring it with like z-index. The WAI documentation from https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box says the following:

    In order to ensure proper focus handling on mobile devices it is also advisable to mask the page background (i.e. all page elements except the content of the modal custom dialog) by setting its aria-hidden attribute to true once the dialog is displayed (and back to false when the dialog is closed). Note that this masking should happen after the script has moved the focus to the dialog.