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

5 issues found for 3.2.1 On Focus

Android Betriebssystem (1 issues)

View All Issues for Page Visit Page
Focusing info icons shifts layout

Handy Verkaufen (1 issues)

View All Issues for Page Visit Page
Auto completing input field auto selects focused element

Roaming Optionen (1 issues)

View All Issues for Page Visit Page
Tab focus via screen reader selects tab

iPhone Erleben (2 issues)

View All Issues for Page Visit Page
Tab, focused by assistive technology, initiates context cchange
Auto completing input field auto selects focused element
Priority: Serious Medium Page: Roaming Optionen Observation Permalink
Accompanying Files
Observation Details

Focusing one of the tabs of "So aktivieren Sie Datenroaming im Ausland" with the screen reader (macOS VoiceOver) will automatically switch to focused tab.

If a screen reader user wants to access the content of the first tab, but pauses moving the focus on the second tab, they won't be able to reach the content of the first tab. As the change is solely visual and not announced to the user, the user might not even know the change, assuming the default functionality of a tab component, ending up on the wrong tab.

Remediation Notes

Tabs can be created in a variety of ways in HTML, thus a general "fix" cannot be defined.

Ensure, the tabs activate on SPACE / ENTER (and screen reader equivalent) rather than activate on focus alone.

Resources to check for Tabs / Tab Groups:

Priority: Critical Medium Page: iPhone Erleben Observation Permalink
Observation Details

Focusing the tabs "Bereit für ein neues iPhone?" & "Bereit für den Wechsel zum iPhone?" by assistive technology will automatically select the tab. This results in behavior, that the first tab can be selected by assistive technology but moving to the main content is not possible, as navigating through the page will automatically select the second tab.

Remediation Notes

Ensure, selecting tab by assistive technology like screen reader is done by clicking the button instead of focusing it.

Priority: Serious Unknown Page: iPhone Erleben Observation Permalink
Observation Details

Observations on input field "Modell, z. B. Apple iPhone 11":

  • Moving screen reader focus to input field announces editable text field.

  • Entering character shows list.

  • The first item in list is automatically selected.

    • This traps focus of screen reader in the list box.

    • Entering next character will auto select first item.

    • Selection is possible via ARROW UP / DOWN

Remediation Notes

Ensure full accessibility of interactive elements for assistive technology. The use of native semantic HTML elements is important to ensure proper functionality and operability.

Priority: Minor Low Page: Android Betriebssystem Observation Permalink
Accompanying Files
Observation Details

Focusing the info icons in section "Android-Handys völlig neu erleben - mit Google AI" does shift the content layout, due to use of :focus-visible CSS stylings, effecting position and padding.

Remediation Notes

Ensure, focusing an element does not change its dimensions, position, margins, and paddings.

Priority: Serious Unknown Page: Handy Verkaufen Observation Permalink
Observation Details

Observations on input field "Modell, z. B. Apple iPhone 11":

  • Moving screen reader focus to input field announces editable text field.

  • Entering character shows list.

  • The first item in list is automatically selected.

    • This traps focus of screen reader in the list box.

    • Entering next character will auto select first item.

    • Selection is possible via ARROW UP / DOWN

Remediation Notes

Ensure full accessibility of interactive elements for assistive technology. The use of native semantic HTML elements is important to ensure proper functionality and operability.