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

4.1.2 Name, Role, Value (A) Interactive element, operable by mouse, not accessible by assistive technology

Priority: Critical Low Page: Xiaomi 15 Observation Permalink
Accompanying Files
Observation Details

Interactive elements not announced interactive, making it inaccessible to users of assistive technology

  • Device thumbnails announced as images

  • "Speichergröße"

  • "Einmalzahlung"

  • "Handyversicherung"

    • Details button

    • "radio buttons"

Interactive elements not using correct semantic HTML

  • "Spezifikationen" collapsible button is announced; assistive technology can navigate into content but is trapped inside until collapsible is closed again

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

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

The "Spezifikationen" collapsed content is not part of DOM while panel is aria-expanded="false". When clicking "Spezifikationen" button, it becomes aria-expanded="true" and <div id="accordion-content-amvib80gg" role="region" aria-hidden="false" aria-labelledby="accordion-header-undefined"> gets added to DOM.

As functionality reflects this of a <details><summary> construct, it is recommended to evaluate use of this semantic HTML method to collapse content. For more information, refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" and HTML specs for the details element.