Accompanying Files
Observation Details
Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:
<button class="...">
<span class="...">
<span class="...">
<div class="...">
<div class="...">
<img class="..."
src="....svg"
data-img="...">
<div class="...">
<svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
</div>
</div>
</div>
<span>
<text-replacer data-id="..."
style="..."
tabindex="0">
<span style="...">Anmelden</span>
</text-replacer>
</span>
</span>
</span>
</button>Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.
Remediation Notes
Ensure proper use of semantic HTML elements. If using ARIA attributes or manually setting tabindex attribute, it usually is a good indicator to look for existing, native, semantic HTML elements that fit the needs. In case of the "Anmelden" button, this structure markup will suffice:
<button>
<svg aria-hidden="true">...</svg>
<span>Anmelden</span>
</button>