Closed afercia closed 6 years ago
I've tested a bit aria-modal="true"
and seems it's broken in Safari 11.1 😞
The screenshot below is from the W3C example on https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
As you can see, any text in the modal is exposed by the browser as "ignored" and VoiceOver... just ignores it. The text is not read out. Worth noting also the input field labels are not announced. Removing aria-modal="true"
fixes it.
So, while aria-modal
is the future, I'm afraid it can't be used for now. Seems on react-modal
it doesn't affect anything just because it's used on the overlay.
Leaving this issue open to let everyone know, but please do feel free to close.
For reference: https://github.com/WordPress/gutenberg/pull/6261#issuecomment-385928807
Just to update an old thread...
I've tested a bit aria-modal="true" and seems it's broken in Safari 11.1 😞
I just tested Safari 13 with VoiceOver and it worked great on the same page. If aria-modal
is the future, is it time to go... Back To The Future?
Also in the current version, the modal are not accessible, because we have a aria-hidden on the root element and nothing else in the modal, right ?
Based on the specification, the ARIA property aria-modal must be used on the element that has the
role="dialog"
(oralertdialog
). Instead,react-modal
uses it on the element that contains the modal, see #359 / #570.https://www.w3.org/TR/wai-aria-1.1/#aria-modal
See also the example in the ARIA Authoring Practices 1.1: https://www.w3.org/TR/wai-aria-practices/#dialog_modal https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
So, to my understanding, while we wait for browsers and assistive technologies to adapt to this new property, keep using
aria-hidden
on the content outside the modal is still recommended. However,aria-modal
should be set on the element that is the modal (i.e. the one that can receive therole="dialog"
).