aria-modal usage note needs more information on how misuse will impact assistive technology users

[chlane]

The following note on https://www.w3.org/TR/wai-aria-practices-1.1/ mentions severe negative ramifications of aria-modal misuse.

"Because marking a dialog modal by setting aria-modal to true can prevent users of some assistive technologies from perceiving content outside the dialog, users of those technologies will experience severe negative ramifications if a dialog is marked modal but does not behave as a modal for other users. So, mark a dialog modal only when both:

• Application code prevents all users from interacting in any way with content outside of it.
• Visual styling obscures the content outside of it."

I found this note hard to enforce because I could not articulate the severe negative ramifications of aria-modal misuse with an example.

I work with a team that has created a modal user experience for non-sighted screen reader users and a non modal experience for sighted mouse users by using aria-modal="true" without preventing mouse usage outside of the dialog and without visually obscuring the content outside of the dialog.

I think an example(s) will educate me and help demonstrate why this should not be done.

[JAWS-test]

Why should a dialogue be modal for non-sighted and non-modal for sighted? The user experience should be the same for everyone.

A similar example would be a text that sighted users can read but that is marked with aria-hidden=true so that blind people cannot read it. That would also be a hard problem

[chlane]

@JAWS-test thank you I completely agree. In this case it seems like the team I was advising thought the interaction they created provided great usability for sighted mouse users with no harm to screen reader users. The interaction can be seen at https://angular.clarity.design/documentation/datagrid/detail-pane. They make a pane show up in a grid. I advised them to use a modal, but that idea was rejected so I recommended to use aria-modal="true" as part of the implementation despite the fact that the everything outside the dialog is not inert when this pane appears. I did this to ensure screen reader users could make sense of this interaction. But in this case screen reader users can't multitask like sighted mouse users can and I have been unable to present an argument as to why sighted mouser users need to be restricted to working with the dialog in this case.

[cookiecrook]

An example case where this could be problematic for AT users is if the "close" button for a dialog was outside the element with aria-modal=true

[chlane]

Thanks @cookiecrook I think that helps. What about cases where AT users can access all the controls they need for a given interaction within the dialog?