关闭模式的屏幕阅读器消息

Question

We have a requirement where we are having hard time implementing.

• User closes modal via "X" or "Cancel" button. The screen reader should tell the user that pop-up is closed and focus is on [X]

Any suggestion around how this can be implemented?

Answer 1

There are many ways to solve this problem, but here's where I'd start (using JavaScript).

1. Add an aria-live region to your page HTML, and have it visually hidden.

2. Set an onClick event handler on your button. When the event handler is triggered, close the modal, then post a message to the aria-live region stating that the modal has closed, and finally, set focus on the respective element.

3. When it comes to announcing that the focus has moved, you'll again use the aria-live region to post updates. You can either do this as part of the onClick handler (on the button), or you can do it through an onFocus handler on the element that will receive the focus. If the latter, you'll need to make sure that the previous announcements have finished before sending more text to the aria-live region.