Alle Geräte (1 issues)

Keyboard focus trapped in "Tarif ändern" dialog window

Roaming Optionen (1 issues)

Comparison table traps keyboard focus

Smartphone Tarife (1 issues)

Keyboard focus trapped in "Tarif ändern" dialog window

Sonim XP100 (1 issues)

Keyboard focus trapped in "Tarif ändern" dialog window

Xiaomi 15 (1 issues)

Keyboard focus trapped in "Tarif ändern" dialog window
Priority: Critical Significant Page: Roaming Optionen Observation Permalink
Accompanying Files
Observation Details

The attached screenshot shows focus order of navigation buttons (8, 9) followed by focusable elements (10-16) inside the comparison table. Focusable element 17 is the first interactive element after the comparison table.

Reaching any of the latter elements (10-16) via keyboard navigation traps the keyboard focus at said element. Navigation away from those elements is not possible via keyboard use.

Remediation Notes

Remediation for this issue cannot be appropriately estimated. It might be solvable, remediating the observed issue on 4.1.2 Name, Role, Value.

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.

Priority: Serious Significant Page: Smartphone Tarife Observation Permalink
Accompanying Files
Observation Details

In tariff carousel, keyboard focus is trapped after selecting tariff. Following these steps:

  1. Press TAB until tariff carousel is focused

  2. Press ARROW LEFT / RIGHT to focus tariff

  3. Press ENTER to select focused tariff

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

Priority: Serious Significant Page: Xiaomi 15 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.

Priority: Serious Significant Page: Sonim XP100 Observation Permalink
Accompanying Files
Observation Details

In tariff carousel, keyboard focus is trapped after selecting tariff. Following these steps:

  1. Press TAB until tariff carousel is focused

  2. Press ARROW LEFT / RIGHT to focus tariff

  3. Press ENTER to select focused tariff

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