The datepicker Dialog example uses aria-modal without making the rest of the page unavailable to all users

[chlane]

Related to #2204

The datepicker Dialog example at https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/datepicker-dialog.html uses aria-modal="true" without making the rest of the page inert.

See the HTML below.

<div id="id-datepicker-1" class="datepickerDialog" role="dialog" aria-modal="true" aria-labelledby="id-dialog-label" style="display: block; z-index: 2;">

It looks like this example needs to be updated to comply with the following note on https://www.w3.org/TR/wai-aria-practices-1.1/

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.

[JAWS-test]

inert does not yet exist in the specification, in my opinion, and is not supported by any browser (except to a limited extent: Safari): whatwg/html#4288, https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

[chlane]

@JAWS-test sorry didn't mean the HTML attribute. In this case the Datepicker Dialog uses aria-modal="true" but does not prevent all users from interacting with content outside of it. It also does not visually obscure content outside of it.

[JAWS-test]

As long as the date picker is open, the keyboard focus cannot be moved out of it. Also, aria-modal=true causes the page to be hidden in the background for screen reader users. I think that makes sense. The rest of the page can't really be interacted with while the datepicker is open. Attempting to interact with the page will cause the datepicker to close. Only then can the page be interacted with. The fact that the page is not grayed out in the background is not probematic in my opinion. The HTML inert probably won't gray anything out either.

[chlane]

@JAWS-test A sighted keyboard user can use a mouse and click the links on the page while the datepicker using aria-modal="true" is open. Our note on aria-modal usage says this should not be possible with the phrase "prevents all users from interacting in any way with content outside of it". It seems that either this example needs to be fully developed as a modal or our note on aria-modal usage needs to be changed, see #2204.

[JAWS-test]

I agree that the datepicker example and the explanation about aria-modal at the dialog contradict each other. However, in my opinion, aria-modal is correct at the datepicker, so I am in favor of either

• adjust the explanation at the dialog
• or add to the explanation that this refers only to modal dialogs, but aria-modal can be used in other contexts as well.