Observation Details

"Aktionen Auswahl" tabs ("Mobilfunk" / "Internet & Festnetz") are not using semantically correct HTML elements.

Navigating the tabs by assistive technology, focussing a tab panel automatically reveals the tab's content, making it difficult for users of assistive technology to reach the first tab's content.


All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

  • Interactivity of element is not announced → user will not know, that element is interactive

  • Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

  • Target resource is not announced → e.g. user will not know, where a link leads to

  • Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Remediation Notes

Ensure, all content is easily accessible for users of assistive technology. For the given tab component, it means, all tabs' content must be easily accessible. Focussing the tab panel (button) should not automatically reveal the tab content. Not for keyboard navigation and not for users of assistive technology.

For technical requirements of tabs, refer to BFIT-Bund Handreichung "Accessible design of user interface elements", the W3C patterns or a best practice example on GOV.UK Design System.