15

Are native browser modals like window.confirm, window.alert, and window.prompt accessible, or is it better to implement something custom?

3
  • What do you mean with accessible? If you want to give it any style, then no, they are not Commented Apr 9, 2019 at 0:05
  • 5
    @MarceloOrigoni I think the OP is talking about people with disabilities.
    – Luvexina
    Commented Apr 9, 2019 at 0:22
  • Even if screen readers can read these modals'contents, remember they will block your page at least js and in some browsers (e.g Chrome) all UI related content too. These should not be used in modern web.
    – Kaiido
    Commented Apr 9, 2019 at 1:57

3 Answers 3

5

There isn't a whole lot of info out there on this, but I believe the answer is yes (for the most part). It seems that previously screen readers didn't have support for alerts/window dialogs but screen readers have come to support these in today's world.

"Although JavaScript pop-up alert boxes were once discouraged by accessibility experts, modern screen readers and browsers provide excellent support for the basic JavaScript alert box."

http://accessibility.psu.edu/scripts/alertboxes/#basic

https://www.w3.org/TR/2018/WD-wai-aria-practices-1.2-20180719/examples/dialog-modal/alertdialog.html

Reading through the w3 documentation, it seems as though it's more preferred to make your own and specify the appropriate aria attributes

5

Update: Read the bottom of this answer. According to this answer, they are accessible to most screen-readers, but not JAWS which (as of this December 2017 article) has 46% of the market share. So, 46% of the people using screen-readers uses a screen-reader that does not support window.confirm, so it is probably better to make a custom dialog box with the respective aria-* attributes.



Edit: According to a comment from Travis J., the github issue shows that is was a Chrome bug, which has been patched. However, if you want to keep support for older versions of Chrome, then you can make a custom dialog box, or just make a custom one if you want to add CSS, make more buttons, etc.

0
4

My testing gives these results:

  1. Both JAWS and NVDA with Firefox in Windows announce a window.confirm() dialog correctly, but Firefox permits keyboard navigation to leak out of the dialog while JAWS or NVDA is on or off. That is a serious accessibility defect.
  2. Both JAWS and NVDA with Chrome in Windows fail to announce the text content of a window.confirm() dialog at all, so the user listening to JAWS or NVDA cannot know what the "OK" and "Cancel" buttons are confirming or canceling. That is a fatal accessibility defect.
  3. VoiceOver with Safari in OS X announces "From" and the URL, but otherwise announces nothing when a window.confirm() dialog opens. If the user then navigates forward with the keyboard, VoiceOver announces the "Cancel" and "OK" buttons, but never announces the text content that explains those buttons. That is a fatal accessibility defect. Safari also permits keyboard navigation to leak out of the dialog while VoiceOver is on or off, a serious accessibility defect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.