How do screen readers handle modal windows?
Does anyone know how the various screen readers interact with a modal window, ie: T开发者_JS百科hickbox? Do the contents of the modal gain the reader's focus after they click on it?
This depends on the modal solution you're using. Many do not do a decent job of focus management:
- putting keyboard focus onto the first element in the modal.
- looping focus back to the first element when the end of the modal is reached (rather than letting focus cycle to the browser chrome or the page behind the modal).
- returning keyboard focus to the original position (e.g. the opening button or link) when the modal is closed.
If the solution you're using doesn't do some of this, you can do this kind of thing in your own JavaScript. For example, if you know the first focusable element:
var focusMe = document.getElementById("#modal-focus-start");
if (focusMe) {
focusMe.focus();
}
Or if you want to focus the first link in the modal.
var modal = document.getElementById("#modal"),
focusMe;
if (modal) {
focusMe = modal.getElementsByTagName("a")[0];
if (focusMe) {
focusMe.focus();
}
}
If you don't have a convenient focusable element to move focus to, some modern browsers (Firefox seemed buggy last time I checked) allow you to set tabindex
to -1
on any HTML element, making that element focusable by JavaScript.
If you wanted to go further, you can use JavaScript to find the first focusable element (uses jQuery) within the modal.
精彩评论