keyboard trap for screenreaders with aria-hidden

[Veyfeyken]

Hi,
It's not modal for screenreaders yet. You can navigate the page behind the dialog. A possible solution is hiding all other content on the page for screenreaders when the modal is active, using aria-hidden="true". This makes everything invisible except the dialog, creating a keyboard trap. Example http://a11y.nicolas-hoffmann.net/modal/.

[danhumaan]

Thanks @Veyfeyken this is really great feedback. We'll investigate this further and work it in as a priority in the next release!

[AndrewArch]

Further to @Veyfeyken's comment, I found I was able to tab out of the modal and lost keyboard focus - ended up in the address bar and then somewhere on the background page before re-entering the modal.

[danhumaan]

Hi @Veyfeyken, thanks again for your contribution. We've spent some time investigation the focus states as well as applied some fixes for when users could tab away from the modal. Strictly speaking we haven't added the aria-hidden attribute, however we believe this issue has been fixed via other means in the latest release.

@AndrewArch, the behaviour of allowing the focus to move out of the page and into the application frame, such as address bar, is something that we want to retain. If we override this we'll likely only be doing more harm to keyboard users, and users with assistive technologies by locking them into the content, subsequently not allowing them to continue on onto other tasks outside the website.