Accompanying Files
Observation Details
The content card link is empty, resulting in a null accessible name. As such it is announced only as "link" to assistive technology.
As the content cards are not semantically structured e.g. by using <article> for the whole card, a clear heading structure, etc., there is no programmatically determinable context that makes the link purpose clear to the user.
Interactive, focusable elements like links must have an accessible name. The name should state the link's purpose. If not directly, it must be determinable by context.
Remediation Notes
Ensure, link purpose is determinable. Ideally, a proper semantic structure on content card is used. As the base structure is already visually presented as such a card, consider the following structure:
<nav aria-labelledby="heading-tariff-list">
<h2 id="heading-tariff-list">Alle Tarifgruppen im Überblick</h2>
<ul>
<!-- Content Card -->
<li>
<article class="card">
<div>
<h3 id="heading-TARIFF">TARIFF GROUP NAME</h3>
<p>TARIFF DESCRIPTION</p>
<a href="..." id="link-TARIFF">Zu den TARIFF GROUP-Tarifen</a>
</div>
<div style="order:-1;">
<img src="..." alt="PROPER TEXT ALTERNATIVE" />
</div>
</article>
</li>
<!-- More Cards -->
</ul>
</nav>Setting up the link with a pseudo element like this:
.card a::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}And the card itself with:
.card {
position: relative;
}
/* Add focus state to card when link WITHIN is focused */
.card:focus-within,
.card:hover {
outline: 2px solid magenta;
box-shadow: 8px 8px black;
}
/* Remove focus outline from link */
.card:focus-within :focus {
outline: none;
}Will make the card be focus visible, while the link in it still is the focused element with the correct accessible name.
Ensure, adding proper text alternative to the images.