WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA role dialog and use of aria-hidden

for

From: Birkir R. Gunnarsson
Date: Aug 10, 2016 4:16AM

The ARIA APG is being updated. We have not gotten around to modal dialogs yet.
Visually CSS opacity is used to make the page content appear like its
in the background when the dialog is displayed, and monitoring mouse
clicks is used to ensure that the "regular user" can only operate
within the dialog (clicking with the mouse outside it either does
nothing or closes the dialog), then you lock the keyboard focus within
the dialog by making sure you can't tab out of it thus making it modal
for keyboard only users.
But this still leaves the screen reader users. Screen readers do not
convey opacity, and you don't need the tab key to navigate page
content. The only way to hide background page content while a modal
dialog is visible is to use aria-hidden="true" on that content.



On 8/10/16, Rolf Mager < <EMAIL REMOVED> > wrote:
> Hello all,
>
> I was trying to find hard evidence that developers should make use of
> attribute aria-hidden to hide the page background when displaying a modal
> dialog box with the ARIA role "dialog". So far, I have not found any
> "official" advise. The Authoring Practices Guide (APG) does not mention the
> use of aria-hidden:
>
> http://www.w3.org/TR/wai-aria-practices/#dialog_modal
>
> And also the wiki pages of the WCAG Working Group give advise to use
> aria-hidden for mobile devices only:
>
> https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box#Description
>
> Shouldn't this recommendation apply in general, not only for mobile devices,
> was this just an oversight by the wiki authors?
>
> Thanks in advance, best wishes,
> Rolf
>
>
>
> > > > >


--
Work hard. Have fun. Make history.