Issue with role="document" on the modal

[ram1279]

While testing the modal for accessibility with various screen reader and browser combinations (NVDA + FIREFOX, JAWS + IE, VOICEOVER + IOS) the results are not as expected.

When the modal window displays, NVDA reads the whole content automatically which is ok but with JAWS and VOICEOVER the content is not read at all.

Moving the focus to the content will read the content but not the inputs inside the modal and the aria spec says If a dialog is limited to interactions that either provide additional information or continue processing, it may be advisable to set focus to the element that is likely to be most frequently used, such as an OK or Continue button.

Using aria-describedBy on the modal and point it to the content on the layer at least fixes the issue in JAWS and VOICEOVER but this introduces and issue with NVDA + FIREFOX where the content is read twice.

After doing some research found that role="document" is causing the issues across multiple screen readers. Removing the role and adding an aria-describedBy pointing to the dialog content will give the consistent behavior among all the screen reader and browser combinations.

Here is an example from deque university which suggest not to use role="document" - Alert Dialog (under Dialog source code).

[nico3333fr]

Hi @ram1279 ,

After doing some research found that role="document" is causing the issues across multiple screen readers. Removing the role and adding an aria-describedBy pointing to the dialog content will give the consistent behavior among all the screen reader and browser combinations.

For this point, I understood.

But where should I move the focus when opening the modal if I run these updates?

[nico3333fr]

Other question: we do agree that these updates are especially for alertmodal only, not other cases?

Would you have a pen for testing?

[ram1279]

1. According to ARIA Spec - If a dialog is limited to interactions that either provide additional information or continue processing, it may be advisable to set focus to the element that is likely to be most frequently used, such as an OK or Continue button

2. At least for me the use case is modal opens it has a title, a close button, little piece of content and a Yes/Ok button. I am not sure about the other use cases.

You should be able to test against the demo pages