Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

2.1.1 Keyboard (A) Interactive element, operable by mouse, not accessible by keyboard

Priority: Critical Low Page: VIP Lieferung Observation Permalink
Accompanying Files
Observation Details

Selection inputs not operable by keyboard as it does not use semantic HTML selection element:

  • "Modell"

  • "Farbe"

  • "Speicher"

Selection input element can be navigated to and from and opened and closed; a selection however cannot be made by the required input methods ARROW UP / DOWN.

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

  • Non-semantic HTML elements (e.g. <div>, <span>) are used for interactive purposes (e.g. links, buttons, inputs), instead of semantic HTML elements (e.g. <a href="">, <button>). This often also leads to other issues, concerning 4.1.2 Name, Role, Value.

  • Semantic elements are used but required attributes are missing (e.g. <a>, missing href attribute)

  • Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

Remediation Notes

Please refer to BFIT-Bund Handreichung "Accessible design of user interface elements" and see Dropdown / Selection list for technical requirements.

Ensure, using native, semantic HTML elements for interactive elements and not re-building existing functionality with generic elements like <div> and <span>.

Ensure, choosing the proper elements, depending on purpose (e.g. links, using <a href=""> to link to resources, and <button> to perform actions).

This way, the need for added JavaScript (e.g. on click events / event handlers) and ARIA methodologies is reduced to a minimum, which will ensure clean and simple code and backwards compatibility, will future-proof functionality, and will avoid issues with keyboard navigation or other assistive technology (see also 4.1.2 Name, Role, Value).