Reconsider using aria-hidden instead of aria-modal

[fymmot]

First of all, thank you for your great work with this project!

But I noticed that v7.0 dropped the use of aria-hidden in favor of aria-modal. Would you be open to reconsider that decision?

Aria-modal still has very limited support in Talkback and iOS VoiceOver, meaning that it is possible to access the background content when swiping through the modal. This can lead to pretty confusing experience for mobile screen reader users. See the following screenshot:

Here is the a11ysupport page for the aria-modal technique: https://a11ysupport.io/tech/aria/aria-modal_attribute

[KittyGiraudel]

Hello Tommy, thank you for opening an issue.

That’s certainly a little inconvenient… The thing with the aria-hidden attribute on the main containers method is that it makes the library significantly more difficult to use, to the point where many users ended up implementing it incorrectly (myself included 🙀), despite the documentation. It’s easy not to build the DOM the right way and to have the library toggle the attribute on the wrong elements.

That being said, you can still use version 6. It’s fine, it works and it will rely on aria-hidden forever. The documentation is still up and running and the feature set remains essentially the same.

In the meantime, I can add this limitation to the known issues documentation page so it’s made clear. What do you think?

[chalkygames123]

@fymmot FYI, you can easily address this issue by hooking a library like aria-hidden to the show and hide events.

[fymmot]

@KittyGiraudel
I see, that is a real challenge..! I know there has been similar problems with the accessible react-modal library, where users of the library failed to set the root element correctly and instead ended up completely hiding the app for screen readers with without noticing. That's no good either.

But with that said, aria-modal really does cause serious usability problems for mobile screen reader users - I have seen it first hand in usability tests. So if you keep aria-modal I believe the documentation needs to be quite clear in describing these limitations. Perhaps you might even provide an example implementation using the aria-hidden library that @chalkygames123 mentioned, if it works out well?

[KittyGiraudel]

@fymmot Thank you for coming back to me and for sharing you experience with usability testing. At this stage, I would recommend authoring significant documentation about this limitation, as you suggested. I will also recommend the workaround from @chalkygames123, since I feel like it’s a great and rather un-intrusive solution to this problem.

[fymmot]

@KittyGiraudel
I think that is a good compromise! Thank you for being so proactive :)

[KittyGiraudel]

Addressed in #409. I would love your eyes on this though. :)