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: Handyversicherung Observation Permalink
Observation Details

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)

Examples:

  • Navigation arrow buttons in section "Unser nachhaltiger Smartphone-Kreislauf" use <div role="button"> instead of semantic button element

  • FAQ uses <dl>; FAQ items use <dt tabindex="0"> instead of semantic button elements

Remediation Notes

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).