#9259 closed bug (worksforme)

Opened April 27, 2013 08:59PM UTC

Closed September 30, 2013 11:38AM UTC

Dialog: Use aria-hidden for modal dialog

Reported by: gcgabfest Owned by: gcgabfest
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description

We have an accessibility expert who says when you have a modal dialog areas of the page that are not reachable should have the aria-hidden attribute set on them. He gave me this example as to how it should ideally work

http://3needs.org/en/testing/code/role-dialog-3.html

It looks to me like the dialog widget makes the dialog dom a child of body, so seems like it should be possible to set aria-hidden to true on the other body children when a modal dialog is open.

Attachments (0)
Change History (6)

Changed April 29, 2013 04:14PM UTC by scottgonzalez comment:1

owner: → gcgabfest
status: new → pending

There are lots of thoughts on how dialogs should be handled. Do you have a concrete example of a benefit from using aria-hidden?

Changed April 29, 2013 07:18PM UTC by jnurthen comment:2

Using aria-hidden on the rest of the page prevents screen readers from navigating into that content using the virtual buffer.

We have found that if users can navigate elements outside the dialog then they get confused as to why they do not respond when they activate them.

Changed May 06, 2013 05:32PM UTC by scottgonzalez comment:3

status: pending → open
summary: accessibility: use aria-hidden for modal dialog → Dialog: Use aria-hidden for modal dialog

Changed September 16, 2013 01:59PM UTC by jzaefferer comment:4

status: open → pending

I just tested the modal dialog with VoiceOver+Safari. When the dialog is open, the virtual cursor only allows access to elements inside the dialog. Anything else on the page isn't available.

Still need to test with NVDA, but in general having role=dialog should do the same thing everywhere that it does in VoiceOver/Safari: Prevent access to content outside the dialog.

In addition, adding aria-hidden to everything outside the dialog is a potentially very expensive operation. When the appendTo option is used, the dialog can end up anywhere in the document.

Can you provide specific browser/screenreader examples where this doesn't work?

Changed September 18, 2013 08:13PM UTC by gcgabfest comment:5

status: pending → new

Please do test it with NVDA, but if a dialog is non modal why should the screen reader stop you from seeing content outside the dialog? This would be a bug in he screen reader IMO.

Changed September 30, 2013 11:38AM UTC by jzaefferer comment:6

resolution: → worksforme
status: new → closed

I justed tested this with NVDA 2013.2 and Firefox 24, on a non-virtualized Windows 7 (works so much better than the VM). NVDA forces forms mode inside the dialog and doesn't allow navigation with the virtual cursor at all, so its impossible to access any content outside the dialog.

Whether that is the optimal behaviour or not might be worth discussing, but this ticket is about adding aria-hidden to other elements, which is definitely not needed.