WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA role dialog and use of aria-hidden

for

From: Paul J. Adam
Date: Aug 10, 2016 7:39AM

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 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
>
>
>
> > > >