E-mail List Archives
Thread: ARIA role dialog and use of aria-hidden
Number of posts in this thread: 3 (In chronological order)
From: Rolf Mager
Date: Wed, Aug 10 2016 3:42AM
Subject: ARIA role dialog and use of aria-hidden
No previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Wed, Aug 10 2016 4:16AM
Subject: Re: ARIA role dialog and use of aria-hidden
← Previous message | Next message →
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 ADDRESS 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.
From: Paul J. Adam
Date: Wed, Aug 10 2016 7:39AM
Subject: Re: ARIA role dialog and use of aria-hidden
← Previous message | No next message
The ARIA Authoring Practices also has this on alertdialog, http://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
Keyboard Interaction:
See Dialog (Modal) <http://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal>;.
Content authors make alert dialogs modal by ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.
I'm writing a blog post on this for deque.com right now should be up soon but I have the working demo here, http://pauljadam.com/demos/detail-message-dialog.html
You will need to set aria-hidden on whatever content is not inside the dialog.
But also you need to set tabindex=-1 on all links/custom controls, and disabled=true on buttons or some other methods to prevent keyboard focus tabbing to each element inside the visually grayed out (disabled) main content.
Basically anything that is hidden to visual users must also be hidden to AT users. That would be regardless of whether it's a modal dialog or not.
Paul J. Adam
Accessibility Evangelist
www.deque.com
> On Aug 10, 2016, at 4:42 AM, Rolf Mager < = EMAIL ADDRESS 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
>
>
>
> > > >