SCR37
SCR37: Creating Custom Dialogs in a Device Independent Way
Notes on the WCAG Technique Sections
- Applicability: PLACEHOLDER
- Description: PLACEHOLDER
- Examples: PLACEHOLDER
- Related: PLACEHOLDER
- Tests: PLACEHOLDER
"Check that the dialogs can be opened by tabbing to the area and hitting enter."
Tabbing doesn't work with Bluetooth keyboard. Use arrow keys.
- NAME and DATE
David Todd 2/27/2014.
Note on support of tabbing and enter key on bluetooth keyboards
In the short form above, the addition seems incorrect. Another attempt might read:
"The tab and the enter keys may not work on tablets and smartphones operated via bluetooth keyboards. On some devices and operating systems, arrow keys can be used to move the keyboard focus instead. Focused elements may need to be activated via other key combinations such as control-alt-space (iOS)."
- Detlev Fischer, 20. Aug 2014
This text "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 a div and placing the div above the page content using z-order and absolute positioning in CSS. "
Should be updated to indicate that dialogs can also be inserted in the DOM after the triggering element.
This text "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. "
Is confusing and should be updated to talk about modal dialog where focus should remain in the dialog.
-Jon Avila 8 Oct, 2014
Original test procedure
1. Find all areas of the page that trigger dialogs that are not pop-up windows.
2. Check that the dialogs can be opened by tabbing to the area and hitting enter.
3. Check that, once opened, the dialog is next in the tab order.
4. Check that the dialogs are triggered from the click event of a button or a link.
5. Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM.
Proposed test produce
Change step #2
2. Check that the dialogs can be opened by focusing the activating control and activating the control.
Change step #3
3. Check that, once opened, the dialog is next in the focus order.
Proposed Section User Agent and Assistive Technology Support Notes
Methods for focusing and activating interactive controls differe by device and operating systems. The methods to move focus, activate, and close the dialog should be implemented in ways that are supported across all platforms including mobile devices and are accessibility supported. For example, the arrow keys may be used to move focus on some devices and different methods (e.g. double tapping with a screen reader is active on a touchscreen device) may be used to activate controls.
- Jon Avila 28 Aug 2014
Changed to Proposed Section User Agent and Assistive Technology Support Notes
Methods for moving focus to, and activating, interactive controls differ by device and operating systems. The methods to move focus, activate, and close the dialog should be implemented using the standard method on the native platform when a platform provides such a method. For example, some devices use arrow keys to move focus and others may use a swipe gesture.
- Mike Shebanek 11 Sep 2014