The background of modal dialogs shouldn't be available in the accessibility object model

[rpkoller]

The problem
If you are a screenreader user and you are accessing a site that is using klaro then within a dialog modal you are having the problem that the background of the dialog modal is not excluded from the accessibility object model. As illustrated in the short video if you are using for example the rotor in voiceover in macos you have all elements available for that page. form controls, buttons, heading, and links. for links you are able to see the voiceover cursor in the background of the modal highlighting the different links on the page.

klaro.mp4

Proposed solution
instead of a div the dialog element might be used or as an alternative the aria-modal="true" attribute could be added. technically the dialog element provides an implied aria-modal="true". but recently at least in voiceover apps that were using the dialog element alone still announced elements in the background of the modal. while solutions that are using the aria-modal attribute alone or in combination on the dialog element exclude the elements in the background properly.

ps: disclaimer, i am not a developer, but will try to come up with an initial draft for a pull request. will see if i am able to piece it together.

Alternative solutions

Additional context