Observation Details
What is arguably list content, is not using semantic list elements. See
Deal / offer sections
When navigating list content, the use of semantic list elements will greatly increase user experience for users of assistive technology. The current structure does not allow, getting an overview of deals, number of offers, etc. By using semantic list elements, it is possible for users of assistive technology to navigate to a section, directly know the count of deals / offers (that sighted users can work out by visible cards and pagination buttons), and to navigate each of those deals individually.
Remediation Notes
Do use semantic list elements for all list content. An example structure for a deal section could be:
<div> <!-- no need for section element, as heading will label section already -->
<h2>Unsere Smartphone-Highlights von Apple</h2>
<ul>
<li>
<!-- IDs must be unique -->
<article aria-labelledby="heading price statt" class="card">
<h3 id="heading">Apple iPhone 16 128 GB</h3>
<dl>
<!-- terms could be visually hidden -->
<div>
<dt>Angebotspreis</dt>
<dd id="price">1 €</dd>
</div>
<div>
<dt>Alter Preis</dt>
<dd id="statt">statt <s>449,95</s> €</dd>
<dt>Ersparnis</dt>
<dd id="ersparnis">448,95 €</dd>
</div>
<div>
<dt>Tarif</dt>
<dd id="tarif">im Tarif MagentaMobil L mit Smartphone</dd>
</div>
<div>
<dt>Ankaufsbonus</dt>
<dd id="ankauf">100 €</dd>
</div>
<div>
<dt>Wechselbonus</dt>
<dd id="wechsel">240 €</dd>
</div>
</dl>
<p>
<a aria-labelledby="cta heading price" id="cta" href="...">Zum Angebot</p>
</article>
</li>
...
</ul>
</div>A robust card structure allows for every styling option as well.