<select> vs. <select> with facade
<select> element
<select> with facade
Testing - <select> with facade
Keyboard-only
| 0S | Browser | Alt + down arrow | up arrow | down arrow | Enter | space | Tab | Esc | Visual Focus Indication | Logical Tab Order |
|---|---|---|---|---|---|---|---|---|---|---|
| Windows 7 | IE 11 | expands SELECT element | moves upwards through the choices | moves downwards through the choices | does nothing | closes the menu with the current selection displayed | focus moves away from the SELECT element and the current selection is displayed | collapses the SELECT element if it has been expanded via mouse or keyboard | When the SELECT element gains focus, it visually overlays the facade and has a blue outline | TAB and SHIFT+TAB work as expected |
| Windows 7 | Firefox 46 | expands the SELECT element | moves upwards through the choices | moves downwards through the choices | collapses the SELECT element and makes a selection when the SELECT element has been expanded by the keyboard or mouse | does nothing | focus moves away from the SELECT element and the current selection is displayed | collapses the SELECT menu if it has been expanded via the mouse or the keyboard | When the SELECT element gains focus, it visually overlays the facade and has a blue outline | TAB and SHIFT+TAB work as expected |
Desktop Screen Reader Testing
- The SELECT element with the facade works with NVDA 2015.4, Firefox 46 on Windows 7. Reading behaviors match the standard SELECT element example above it.
- The SELECT element with the facade works with JAWS 17, IE 11 on Windows 7. Reading behaviors match the standard SELECT element example above it.
Mobile Screen Reader Testing
The SELECT element with the facade works with VoiceOver on iOS 9.3.2