Accompanying Files
Observation Details
HTML markup for links in "Tarife" carousel (showing one as an example):
<a
href="/unterwegs/handyvertrag"
id=""
title=""
class="..."
target="_self"
data-tealium-rel="..."
onclick=""
>
<div class="...">
<div class="...">
<div class="...">
<img
src="/resources/images/594932/telekom-smartphone-tarife.jpg"
alt="Icon Smartphone"
title=""
class="..."
height="255"
width="451"
loading="lazy"
style="height: 100.517%;"
id="e_594932"
usemap=""
/>
</div>
</div>
<h3 class="...">Handyverträge</h3>
<p class="...">Telefonieren und surfen mit Ihrem Smartphone.</p>
</div>
</a>The HTML link element <a> takes its accessible name from its contents. In this case, the contents are:
Image (
alt="Icon Smartphone")Heading "Handyverträge"
Paragraph "Telefonieren und surfen mit Ihrem Smartphone."
Making the accessible name of the link "Icon Smartphone Handyverträge Telefonieren und surfen mit Ihrem Smartphone."
Remediation Notes
See observation Content card link purpose not determinable (2.4.4 Link Purpose (In Context)) for remediation in the ideal way of creating accessible content cards.
Side notes: The link element also has a null id, a null title, and a null onclick attribute set. A link should not use the title attribute at all, a null id attribute sets id="" which leads to "duplicate ID" errors easily, and an onclick should never be useful on a link anyways. Ensure, removing non-used markup.