Observation Details
Images in marquee teaser set text alternative via alt attribute but are hidden by aria-hidden="true". Images must only be hidden if they are purely decorative without adding any information that is not already communicated otherwise in text content.
The images in marquee teaser communicate movie, tv show, and sport channel names as available content for the "WOW / MagentaTV" service. This information (movie, tv show, sport channel names) is not communicated otherwise, making the images informative. They must not be hidden from assistive technology.
Remediation Notes
The images need a purpose equivalent text alternative. This can be done via the images' alt attribute but does not have to be. If doing it, ensure to not only add the media name but also the category as this is part of the visually communicated information.
Purpose of the marquee teaser is to show the categories (movies, tv shows, sports channels) and examples in each category. A purpose equivalent text alternative needs to communicate all those information and could be a nested list like this:
<ul>
<li><strong>WOW Filme</strong>
<ul>
<li>Der wilde Roboter</li>
...
</ul>
</li>
<li><strong>WOW Live-Sport</strong>
<ul>
<li>1. Bundesliga</li>
...
</ul>
</li>
<li><strong>WOW Serien</strong>
<ul>
<li>The White Lotus S3</li>
...
</ul>
</li>
</ul>The list could then be hidden by using a class="visually-hidden" with:
.visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}This will keep the list accessible to assistive technology while not presenting it visually.