HTML and XHTML used with script.
This technique relates to Success Criterion 2.4.3: Focus Order (Sufficient as a way to meet an unwritten technique).
Site designers often want to create dialogs that do not use the pop-up windows supplied
by the browser. This is typically accomplished by enclosing the dialog contents in
div and placing the
div above the page content using z-order and absolute positioning in CSS.
To be accessible, these dialogs must follow a few simple rules.
- Trigger the script that launches the dialog from the onclick event of a link or button.
- Place the dialog
divinto the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script.
- Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.
It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it.
Resources are for information purposes only, no endorsement implied.
- Microsoft Developer Network Whitepaper: Writing Accessible Web Applications by Cynthia C. Shelly and George Young. (Microsoft Word Format)
- Microsoft Active Accessibility 2.0 SDK. Includes Inspect32.exe and other MSAA tools.
- Instructions for the Inspect tool
- Microsoft Internet Explorer Developer Toolbar.. Allows examination of script-generated DOM in Microsoft Internet Explorer
- Firebug. Allows examination of script-generated DOM in Firefox.
- Find all areas of the page that trigger dialogs that are not pop-up windows.
- Check that the dialogs can be opened by tabbing to the area and hitting enter.
- Check that, once opened, the dialog is next in the tab order.
- Check that the dialogs are triggered from the click event of a button or a link.
- Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.
- Checks #2, #3, #4 and #5 are true.