search

reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.36k stars 809 forks source link

Consider to make the new role dialog optional #237

Closed afercia closed 8 years ago

afercia commented 8 years ago

The new role dialog merged in #223 is a nice addiction but worth noting it's not just about semantics. A role="dialog" directly impacts the way screen readers behave, making them enter in a sort-of application mode.

It's a TL;DR and bit difficult to explain :) but basically, with the exception of VoiceOver that uses a different interaction model, screen readers will enter in a mode where they read out just the focusable content. Will post some references below to try to better explain.

The specification states: https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal

A dialog is a small application window that sits above the application and is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response

That's to say it assumes to have some interactive content, like a form or some buttons, exactly like in the desktop system dialogs. In this case the role dialog is perfectly appropriate. But that's not the reality and, often, modal dialogs on the web are used for long blocks of text and no interactive content. In this case, the role dialog can be a problem since screen readers in application mode don't allow to navigate content using the arrow keys.

So it's all about the type (or prevalent type) of content. This should probably be an authors decision or maybe they should be able to indicate if the content is mostly interactive or not.

Some of the main experts in a11y suggest to don't use role dialog at all. Considering react-modal already hides the background content using aria-hidden that could be an option.

This thread on webaim.org on this topic is very interesting, I'd recommend to focus on what Mr. Bryan Garaventa and Mr. Steve Faulkner posted there:

http://webaim.org/discussion/mail_thread?thread=5664

ARIA modal dialogs only read out focusable items

There are other options, like setting back the modal dialog content to role="document" but this seems to cause other issues. All in all I guess the simpler solution would be making role dialog optional, for use by well educated authors (hopefully).

Other references:

http://www.deque.com/blog/aria-modal-alert-dialogs-a11y-support-series-part-2/ In a normal role=”dialog” or “alertdialog” NVDA will go into Forms Mode when focus is sent into the dialog.

Forms Mode means NVDA users an only tab around the dialog. They can’t press the up/down arrow keys to read through the dialog with linear navigation...

https://labs.ssbbartgroup.com/index.php/ARIA_Dialog

Regarding web app behavior on Windows, specific to the use of role=dialog, it causes screen readers like JAWS and NVDA to activate Applications Mode...

claydiffrient commented 8 years ago

@afercia Thanks so much for the very insightful issue. I'm going to send a commit in now that will just allow you to pass in the dialog prop and let that be used. So it won't do it by default, but will instead allow you to specify it if you want.

It's been a while since this library was created, but I do recall the issues with dialog back then. We purposefully didn't use it. Curse my human memory. So this new commit should make it so that people can use it if they want, but won't be forced to do so.