4.1.2 Name, Role, Value (A) Interactive element does not use correct semantic HTML

Buttons use <a> without href attribute and <div> with tabindex="0", instead of semantic button element.

• Tarif ändern

• Tarif entfernen

• Preisübersicht anzeigen

Button uses span tabindex="0" role="button" aria-label="..." aria-describedby="..." instead of semantic button element.

• Info Icon in sidebar

Buttons uses <section> instead of semantic button element.

• Filter button

Links use <div class="clickable"> instead of semantic link element.

• Shop category links (Handys, Smartwatches, Tablets, ...)

• side note: category links are arguably a navigation element and as such should use <nav><ul><li><a href=""> structure

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.