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.2 No Keyboard Trap (A) Keyboard focus trapped in "Tarif ändern" dialog window

Priority: Serious Significant Page: Alle Geräte Observation Permalink
Accompanying Files
Observation Details

In "Tarif ändern" dialog window, keyboard focus is trapped after selecting tariff. Following these steps:

  1. Open "Tarif ändern" dialog window

  2. Press TAB until tariff slider is focused

  3. Press ARROW LEFT / RIGHT to focus tariff

  4. Press ENTER to select focused tariff

  5. Pressing TAB now will rotate within tariff card

Remediation Notes

Ensure proper functionality of keyboard navigation for all interactive elements. Especially non-native, complex components must adhere to all technical requirements for presentation, operation, keyboard navigation, assistive technology navigation. For technical requirements, refer to BFIT-Bund Handreichung "Accessible design of user interface elements" for the chosen interactive elements. Please note, all interactive elements must meet these requirements. If native, semantic HTML elements are used unchanged, these requirements are met by default. Changing default presentation or functionality, or using non-native elements, will always add drastically more difficulty and maintenance requirements.

That said, use of proper semantic HTML elements without the need of ARIA enrichments is always the preferred method. For the given component, functionality can be defined as "radio button group", as the user can choose one item from a list of items. The group is presented as a carousel, which has no (fully accessible) way of being built without use of JavaScript and/or ARIA enrichments. If presentation as carousel is not mandatory, simple, responsive reflow of the radio button content would suffice.