sweetalert2: It is not accessible to JAWS 16 with Internet Explorer 11

Using any of the sweetalerts in their most simple format on IE11 + JAWS 16 (version I tested with)

I will take the simplest alert as an example:

First problem: if the user presses up arrow, or open a list of elements, they can still move the focus out of the sweet alert. I believe it should be locked.

Usual technique for this problem is to add aria-hidden="true" to the whole document (except the content inside the sweetalert)

Second problem is the way thing is read: It first reads the title (normal) then the button, but it skipped the “You clicked the button!” part

then it reads everything again (not ideal but it works)

Third problemt is that “You clicked the button!” part is actually a checkbox regarding what is announced by JAWS. It should be a simple text instead.

Is there anyone else testing Accessibility or am I the first one ?

By the way, thanks for this awesome project

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 15 (6 by maintainers)

Most upvoted comments

The NVDA issue probably covers the fact you have to use aria-hidden on the whole HTML except the div of the modal. Other issues remain here, but probably are shared with NVDA as well.

antoninadert on Mar 14, 2018

@limonte If you make any progress on this please tell me and I can test. I just need a demo URL or a codepen

antoninadert on Mar 9, 2018

Hello @limonte and thanks for looking into this.

From my experience but I’m not a dev, the second issue can be linked to a problem of focus (focused element being announced first),

Regarding the label itself, JAWS announced it as ‘clickable’ so I would look into this. I suspect it is not because of the div tag itself (because if I move it to the root of the DOM, it just announces the label) , but rather how JAWS handles the aria-modal (on the encompassing tag). In general, be very cautious with all aria-role and aria-modal, as they behave unexpectedly and are often used incorrectly.

Regarding the checkbox stuff , I believe it is linked to this: <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input type="checkbox"></label> As you see the input type checkbox doesn’t have display:none or aria-hidden. I believe JAWS doesn’t care about the parent tag here, so it could be the cause.

JAWS is a mess to work with (sadly, it has tons of inconsistencies in the way it handles DOM), it does things in a different way than you could expect, but as you said people use it (and it’s mainly because companies buy the licence for their employees. Most blind users I know will use an iPhone or a Mac !)

The best way I found to work with JAWS bugs, was a simple codepen and manual testing.

I hope you’ll find a way

antoninadert on Mar 5, 2018