Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
chlane opened this issue Feb 8, 2022 · 5 comments
Labels
agenda Include in upcoming Authoring Practices Task Force meeting Feedback Issue raised by or for collecting input from people outside APG task force question Issue asking a question

Comments

@chlane
Copy link

chlane commented Feb 8, 2022

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
Copy link

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
Copy link
Author

chlane commented Feb 8, 2022

@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
Copy link

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
Copy link
Author

chlane commented Feb 8, 2022

@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.

@chlane chlane changed the title The datepicker Dialog example uses aria-modal without making the rest of the page inert. The datepicker Dialog example uses aria-modal without making the rest of the page unavailable to all users Feb 8, 2022
@JAWS-test
Copy link

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.

@mcking65 mcking65 added agenda Include in upcoming Authoring Practices Task Force meeting Feedback Issue raised by or for collecting input from people outside APG task force question Issue asking a question labels Feb 8, 2022
@mcking65 mcking65 added this to Next Steps in Dialog Patterns and Examples Development Project via automation Feb 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
agenda Include in upcoming Authoring Practices Task Force meeting Feedback Issue raised by or for collecting input from people outside APG task force question Issue asking a question
Development

No branches or pull requests

3 participants