Skip to content

With the modal option set to true, elements in the background are still available in the AOM #2246

Closed
@rpkoller

Description

@rpkoller

If you take a look for example at https://jqueryui.com/dialog/#modal-message and you test the page with voiceover on macos and you are using the rotor functionality you will notice that elements in the background of the dialog modal are still available in the accessibility object model (aom). the number of available elements is sort of limited due to the fact that the example is wrapped in an iframe:

rutrum_convallis.mov

but for example in the context of a drupal sites which are also using jquery ui for building dialog modals they are not wrapped into an iframe, and you have all the elements in the background available in the aom as well. and there is no way for a screenreader user to distinguish what is an element within a dialog modal and what is an element outside of the dialog modal in its background.

modal_false.mp4

An easy fix would be if the modal option is set to true adding the aria-modal="true" attribute to the div of the dialog modal. i've manually added the aria-modal attribute via devtools and rerecorded the same example from before to illustrate the difference

modal_true.mp4

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions