Accompanying Files
Observation Details
All interactive elements MUST be able to be navigated to/from and operated by keyboard. All interactive elements in sidebar do not match this requirement.
Remediation Notes
Use actual semantic HTML to create interactive elements. If you need a button, use <button>, if you need a link, use <a>. Ensure, all <a> elements have a valid href attribute as this is what makes them links. Anchor elements without href attribute are not considered links and as such are not accessible by keyboard.
This is an info "i" button:
<span class="...">
<i class="..." id="svg_wrapper_undefined">
<svg width="1em" height="1em" viewBox="0 0 24 24" color="currentColor">
<path>...</path>
</svg>
</i>
</span>Instead, use:
<button aria-label="Tarifdetails zum Tarif MagentaMobil M">Tarifdetails</button>This is perfectly keyboard accessible, will be listed in a button list for screen readers, can be operated via voice control and much more.
If using an SVG is a must, refer to e.g. Sara Soueidan's "Accessible Icon Buttons" article.