Download - Accessible modal windows
![Page 1: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/1.jpg)
Accessible modal
windows
![Page 2: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/2.jpg)
What is a modal window?
![Page 3: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/3.jpg)
A modal window is a window that forces the user to interact with it before they can go back to using the parent page.
![Page 4: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/4.jpg)
Generally, modal windows are designed to sit over the top of the parent page. In some cases, the parent page is greyed out so that users can visually focus on the modal dialog only.
![Page 5: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/5.jpg)
![Page 6: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/6.jpg)
Different types of modal window
![Page 7: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/7.jpg)
Modal windows can be used for all sorts of different roles such as:
![Page 8: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/8.jpg)
Modal alerts
![Page 9: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/9.jpg)
Modal dialogs
![Page 10: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/10.jpg)
Modal lightboxes
![Page 11: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/11.jpg)
Modeless windows
![Page 12: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/12.jpg)
Modal windows should not be mistaken for modeless windows.
![Page 13: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/13.jpg)
Modeless windows are secondary windows that stay active on the user's screen until dismissed. Modeless windows can be minimised or hidden behind other windows.
![Page 14: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/14.jpg)
Unlike a modal window, a modeless window will allow the user to continue working with the application while the modeless window is still open.
![Page 15: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/15.jpg)
What makes an accessible modal
window?
![Page 16: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/16.jpg)
Keyboard only
![Page 17: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/17.jpg)
Users must be able to navigate through the modal window as needed using keyboard-only.
![Page 18: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/18.jpg)
Users should be able to close the modal window using keyboard-only.
![Page 19: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/19.jpg)
Users should not be able to TAB outside of the modal window until the modal window has been closed.
![Page 20: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/20.jpg)
There should be no hidden keystrokes as users move through the modal window.
![Page 21: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/21.jpg)
Screen reader
![Page 22: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/22.jpg)
All relevant components should be identified to screen reader users as they are accessed.
![Page 23: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/23.jpg)
Screen readers should be notified of changes as they occur.
![Page 24: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/24.jpg)
Focus should be placed on relevant areas as changes occur.
![Page 25: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/25.jpg)
General user
![Page 26: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/26.jpg)
The process should be easy to understand for any type of user - keyboard only user, screen reader user, general user.
![Page 27: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/27.jpg)
Informing users before modal
window spawning
![Page 28: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/28.jpg)
If a modal window spawns from a focusable element, screen reader users should be given additional information to let them know what will happen.
![Page 29: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/29.jpg)
This can be done using a range of different methods, depending on the element that is used.
![Page 30: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/30.jpg)
Hyperlinks
![Page 31: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/31.jpg)
For hyperlinks, we could add additional information using the “title”, aria-labelledby, or “aria-label” attributes. Or we could place the addition information inside the link and then hide it.
![Page 32: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/32.jpg)
<!-- title attribute -->!<a href="#id-name" !! title="Added info">!! Add bank account!</a>!
![Page 33: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/33.jpg)
<!-- aria-label attribute -->!<a href="#id-name" !! aria-label="Add bank account - Added info">!! Add bank account!</a>!
![Page 34: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/34.jpg)
<!-- aria-labelledby attribute -->!<a href="#id-name" !! aria-labelledby="info1">!! Add bank account!</a>!<p id="info1" class="hidden">!! Added info!</p>!
![Page 35: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/35.jpg)
<!-- hidden info -->!<a href="#id-name">!! Add bank account!! <span class="hidden">Added info</span>!</a>!
![Page 36: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/36.jpg)
Buttons
![Page 37: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/37.jpg)
For <button> elements, we could use any of these same techniques.
![Page 38: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/38.jpg)
<!-- title attribute -->!<button id="id-name" !! title="Added info">!! Add bank account!</button>!
![Page 39: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/39.jpg)
<!-- aria-label attribute -->!<button id="id-name" !! aria-label="Add bank account - Added info">!! Add bank account!</button>!
![Page 40: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/40.jpg)
<!-- aria-labelledby attribute -->!<button id="id-name" !! aria-labelledby="info1">!! Add bank account!</button>!<p id="info1" class="hidden">!! Added info!</p>!
![Page 41: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/41.jpg)
<!-- hidden info -->!<button id="id-name">!! Add bank account!! <span class="hidden">Added info</span>!</button>!
![Page 42: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/42.jpg)
Inputs
![Page 43: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/43.jpg)
For <input> elements, we could use any of these same techniques - except the hidden method as we cannot place HTML markup inside input elements.
![Page 44: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/44.jpg)
Images
![Page 45: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/45.jpg)
For <img> elements, we could use any of the above techniques or even add info into the “alt” attribute.
![Page 46: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/46.jpg)
<!-- alt attribute -->!<a href="#id-name">!! <img src="a.gif" !! alt="Add bank account - Added info">!</a>!
![Page 47: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/47.jpg)
Hiding and showing modal
windows
![Page 48: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/48.jpg)
1. Hiding the modal window
![Page 49: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/49.jpg)
Initially, we need to hide the modal dialog content so that is not seen by sighted users or heard by screen reader users.
![Page 50: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/50.jpg)
<!-- hiding modal window -->!<div!! style="display:none">!! ...!</div>!
![Page 51: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/51.jpg)
2. Showing the modal window
![Page 52: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/52.jpg)
When a user triggers the modal window, we need to use JavaScript to switch the values within these two attributes.
![Page 53: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/53.jpg)
The “display” value needs to change from “none” to “block”.
![Page 54: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/54.jpg)
<!-- aria-hidden -->!<div!! style="display:block">!! ...!</div>!
![Page 55: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/55.jpg)
When the modal window becomes active, the rest of the page - everything apart from the modal window container, could then be set with aria-hidden=“true”.
![Page 56: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/56.jpg)
<!-- all other content -->!<div!! aria-hidden="true">!! ...!</div>!!<!-- modal window -->!<div!! style="display:block">!! ...!</div>!!
![Page 57: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/57.jpg)
Notifying screen readers when
arriving at modal window
![Page 58: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/58.jpg)
When a modal window is spawned, we need to provide a range of information to screen reader users.
![Page 59: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/59.jpg)
1. Setting focus on the modal window
![Page 60: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/60.jpg)
The first thing we need to do when a modal window spawns is set the initial focus to the modal window element itself.
![Page 61: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/61.jpg)
Initial focus
![Page 62: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/62.jpg)
This is important because we are going to give the window a label as well as potentially adding additional descriptive information.
![Page 63: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/63.jpg)
If we set focus on an element inside the window, such as the first form control, the label and additional information will not be heard by screen reader users.
![Page 64: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/64.jpg)
Initial focus
![Page 65: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/65.jpg)
2. Add “dialog” role
![Page 66: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/66.jpg)
We need to inform screen reader users that this modal window is a “modal dialog”. We can do this by adding role=“dialog”.
![Page 67: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/67.jpg)
<!-- adding aria role -->!<div!! style="display:block"!! aria-hidden="false"!! role="dialog">!! ...!</div>
![Page 68: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/68.jpg)
3. Adding a label
![Page 69: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/69.jpg)
We need to provide a label for the modal dialog, so screen reader users know its purpose.
![Page 70: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/70.jpg)
We can do this by linking the modal dialog container to the primary <hn> element using “aria-labeledby”.
![Page 71: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/71.jpg)
<!-- adding aria labelledby -->!<div!! style="display:block"!! aria-hidden="false"!! role="dialog"!! aria-labelledby="modal-label">!! <h1 id="modal-label">!! ! Choose account!! </h1>!</div>!
![Page 72: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/72.jpg)
Now the heading will be announced to screen reader users when the modal dialog is spawned.
![Page 73: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/73.jpg)
4. Adding optional additional information
![Page 74: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/74.jpg)
In some circumstances, such as complex modal dialogs, we may need to provide a more detailed description of the purpose of the modal dialog.
![Page 75: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/75.jpg)
We can provide additional information by linking the modal dialog container to some descriptive content using “aria-describedby”.
![Page 76: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/76.jpg)
<!-- adding aria labelledby -->!<div!! style="display:block"!! aria-hidden="false"!! role="dialog"!! aria-labelledby="modal-label"!! aria-describedby="modal-description">!! <h1 id="modal-label">!! ! Choose account!! </h1>!! <p id="modal-description">!! ! Description here!! </p>!</div>!
![Page 77: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/77.jpg)
Ideally, this content should be hidden or placed at the end of the modal dialog content, after all other content in the source.
![Page 78: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/78.jpg)
Otherwise it can be read-aloud twice in quick succession by screen readers, which can be confusing for some users.
![Page 79: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/79.jpg)
5. Working with older Assistive Technologies?
![Page 80: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/80.jpg)
What about older assistive technologies that may not support some of the more advanced ARIA attributes?
![Page 81: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/81.jpg)
If this is an issue, other simpler options may need to be considered.
![Page 82: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/82.jpg)
One simple option would be to provide a special focusable element, such as a link, that comes before all others.
![Page 83: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/83.jpg)
This could be presented as a simple “Information” icon that sits in the top left corner of the window.
![Page 84: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/84.jpg)
![Page 85: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/85.jpg)
We could then add a description of the modal window to this link.
![Page 86: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/86.jpg)
<!-- help info -->!<a href="#id-name">!! <img src="a.gif" alt="Help">!! <span class="tooltip">Added info</span>!</a>!!
![Page 87: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/87.jpg)
This method could be useful for both screen reader users and general users, as the information could be made visible as a tooltip on focus.
![Page 88: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/88.jpg)
![Page 89: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/89.jpg)
Actions outside the modal window
![Page 90: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/90.jpg)
Users should not be able to mouse-click on any focusable element outside the modal window while it is open.
![Page 91: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/91.jpg)
CLICK
![Page 92: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/92.jpg)
Users should not be able to use TAB keystrokes to focus on any focusable element outside the modal window while it is open.
![Page 93: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/93.jpg)
TAB
![Page 94: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/94.jpg)
Actions inside modal window
![Page 95: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/95.jpg)
Mouse
![Page 96: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/96.jpg)
Users should be able to mouse-click to enable any focusable element inside the modal window while it is open.
![Page 97: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/97.jpg)
CLICK
![Page 98: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/98.jpg)
CLICK
![Page 99: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/99.jpg)
CLICK
![Page 100: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/100.jpg)
CLICK
![Page 101: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/101.jpg)
CLICK
![Page 102: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/102.jpg)
CLICK
![Page 103: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/103.jpg)
CLICK
![Page 104: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/104.jpg)
TAB keystroke
![Page 105: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/105.jpg)
Users should be able to use TAB keystrokes to navigate to any focusable element inside the modal window while it is open.
![Page 106: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/106.jpg)
TAB
![Page 107: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/107.jpg)
TAB
![Page 108: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/108.jpg)
TAB
![Page 109: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/109.jpg)
TAB
![Page 110: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/110.jpg)
TAB
![Page 111: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/111.jpg)
TAB
![Page 112: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/112.jpg)
TAB
![Page 113: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/113.jpg)
SHIFT + TAB keystroke
![Page 114: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/114.jpg)
Users should be able to use SHIFT + TAB keystrokes to navigate backwards to any focusable element inside the modal window while it is open.
![Page 115: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/115.jpg)
SHIFT + TAB
![Page 116: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/116.jpg)
SHIFT + TAB
![Page 117: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/117.jpg)
SHIFT + TAB
![Page 118: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/118.jpg)
SHIFT + TAB
![Page 119: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/119.jpg)
SHIFT + TAB
![Page 120: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/120.jpg)
SHIFT + TAB
![Page 121: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/121.jpg)
SHIFT + TAB
![Page 122: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/122.jpg)
ENTER and SPACE keystrokes
![Page 123: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/123.jpg)
Users should be able to use ENTER or SPACE keystrokes on relevant elements while inside the modal window - especially if they are button elements.
![Page 124: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/124.jpg)
ENTER
![Page 125: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/125.jpg)
ENTER
![Page 126: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/126.jpg)
SPACE
![Page 127: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/127.jpg)
SPACE
![Page 128: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/128.jpg)
ARROW keystrokes
![Page 129: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/129.jpg)
When inside form controls, ARROW keys are generally used to allow users to navigate user-entered text within the form control.
![Page 130: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/130.jpg)
An example might be a user entering data into a <textarea> element. The user can navigate within their entered text using ARROW keys to move to previous and next characters, next line etc.
![Page 131: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/131.jpg)
However, some form controls use ARROW keys to allow users to choose options within a set of choices.
![Page 132: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/132.jpg)
For example, radio buttons and select menus allow users to navigate through choices using ARROW keys.
![Page 133: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/133.jpg)
So, users should be able to use ARROW keystrokes to change radio button options.
![Page 134: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/134.jpg)
TAB
![Page 135: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/135.jpg)
ARROW
![Page 136: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/136.jpg)
Users should be able to use ARROW keystrokes to change select menu options.
![Page 137: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/137.jpg)
Option 1 - applesARROW
![Page 138: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/138.jpg)
Option 2 - pearsARROW
![Page 139: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/139.jpg)
Option 3 - bananasARROW
![Page 140: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/140.jpg)
ESC keystroke
![Page 141: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/141.jpg)
Users should be able to use the ESC key to close modal.
![Page 142: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/142.jpg)
ESC
![Page 143: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/143.jpg)
Modal windows and screen reader
“read” mode
![Page 144: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/144.jpg)
Screen readers generally operate in one of two modes: ‘read’ mode and ‘form’ mode.
![Page 145: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/145.jpg)
In “read” mode, users can read and navigate the page. Users cannot interact with form controls
![Page 146: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/146.jpg)
In “form” mode, users can interact with form controls. Users cannot read and navigate the page.
![Page 147: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/147.jpg)
In some cases, modal windows may include important content that is not form-related. In these cases, screen reader users need to be able to operate in “read” mode.
![Page 148: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/148.jpg)
This means that screen reader users must be able to navigate though content using all of the standard “read” mode keys.
![Page 149: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/149.jpg)
In these cases, we could wrap a new element around all the content within the window and set it with role=“document”.
![Page 150: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/150.jpg)
The “document” role informs screen readers of the need to augment browser keyboard support so that users can navigate and read any content within the “document” region.
![Page 151: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/151.jpg)
<!-- adding aria role -->!<div!! style="display:block"!! aria-hidden="false"!! role="dialog"!! aria-labelledby="modal-label"!! aria-describedby="modal-description">!! <div role="document">!! ! <h1 id="modal-label">!! ! ! Choose account!! ! </h1>!! ! <p id="modal-description">!! ! ! Description here!! ! </p>!! </div>!</div>!
![Page 152: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/152.jpg)
Adding meaning to important actions
![Page 153: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/153.jpg)
For some important actions inside the modal window, screen reader users should be given additional information to let them know what will happen.
![Page 154: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/154.jpg)
Submit
![Page 155: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/155.jpg)
As screen reader users are submitting form data, they should be informed that:
![Page 156: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/156.jpg)
1. they will be taken back to the parent page.
![Page 157: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/157.jpg)
2. where this data will be submitted when they return to the parent page.
![Page 158: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/158.jpg)
ENTER
“Submit and return to bank balance information. Your data will be added to the Balance table”
![Page 159: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/159.jpg)
Close window
![Page 160: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/160.jpg)
As screen reader users focus on the “Close” function, they should be informed that closing will take them back to the parent page.
![Page 161: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/161.jpg)
ENTER
“Leave form and return to bank balance information”
![Page 162: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/162.jpg)
A question on tab order
![Page 163: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/163.jpg)
Is it better to present to “Close” button before any form controls in tab order, or after any form controls.
![Page 164: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/164.jpg)
A lot will depend on the complexity and amount of content inside the modal window.
![Page 165: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/165.jpg)
Simple modal windows
![Page 166: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/166.jpg)
For simple modal windows, it may be easier to place the “Close” button last in tab order.
![Page 167: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/167.jpg)
1
![Page 168: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/168.jpg)
2
![Page 169: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/169.jpg)
3
![Page 170: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/170.jpg)
Complex modal windows
![Page 171: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/171.jpg)
For complex modal windows, where users may want to go back to the parent page quickly without having to TAB through the whole window, it may be better to place the “Close” button first in tab order.
![Page 172: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/172.jpg)
1
![Page 173: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/173.jpg)
2
![Page 174: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/174.jpg)
3
![Page 175: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/175.jpg)
4
![Page 176: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/176.jpg)
5
![Page 177: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/177.jpg)
6
![Page 178: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/178.jpg)
On sites where there are numerous different modal dialogs, the most important thing is consistency. Decided on a method and use it for all modal windows so that it becomes predictable.
![Page 179: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/179.jpg)
After modal dialog closes
![Page 180: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/180.jpg)
When the modal window is closed, if users are being taken back to the parent page:
![Page 181: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/181.jpg)
1. Focus should be placed on the relevant component of the parent page. The most common practice is to move focus back to the element that invoked the dialog.
![Page 182: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/182.jpg)
The user should not be thrown back to the top of the parent page unless there is a good reason!
![Page 183: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/183.jpg)
2. The user should be informed where they are and what change has occurred.
![Page 184: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/184.jpg)
ENTER
![Page 185: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/185.jpg)
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip vel eum iriure dolor in hendrerit in vulputate.
Accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
Heading here
Another thing here
Add your bank balance
Another heading
$1,200.34
Focus
“Bank balance $1200.34 added to bank information table”
![Page 186: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/186.jpg)
Thanks to…
![Page 187: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/187.jpg)
A huge thanks to Roger Hudson, Steve Faulkner and James Edwards for their advice and feedback on these slides.
![Page 188: Accessible modal windows](https://reader035.vdocuments.us/reader035/viewer/2022062710/55a203241a28ab33268b4802/html5/thumbnails/188.jpg)
Russ Weakley Max Design !Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley