Opened 6 years ago

Closed 5 years ago

#9259 closed bug (worksforme)

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:


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

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.

Change History (6)

comment:1 Changed 6 years ago by Scott González

Owner: set to gcgabfest
Status: newpending

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

comment:2 Changed 6 years ago by jnurthen

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.

comment:3 Changed 6 years ago by Scott González

Status: pendingopen
Summary: accessibility: use aria-hidden for modal dialogDialog: Use aria-hidden for modal dialog

comment:4 Changed 6 years ago by Jörn Zaefferer

Status: openpending

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?

comment:5 Changed 6 years ago by gcgabfest

Status: pendingnew

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.

comment:6 Changed 5 years ago by Jörn Zaefferer

Resolution: worksforme
Status: newclosed

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.

Note: See TracTickets for help on using tickets.