<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

Mobile Screen Reader Testing

The SELECT element with the facade works with VoiceOver on iOS 9.3.2