4.1.2 Name, Role, Value (A) Improper use of semantic HTML

Assistive technology relies on use of proper semantic HTML. The screenshots show lists of elements, a user of assistive technology gets, using e.g. macOS VoiceOver screen reader rotor:

• Landmarks list

• Links list

• Buttons list

All of these give an idea of improper use of semantic HTML. Observations:

Landmarks

• Main and navigation landmarks are used

• Each product price uses three(!) semantic article elements, two of which are empty

Each product price (e.g. "889,95 €") is marked up as follows:

<div class="...">
  <div class="...">
    <div class="...">
      <section class="...">
        Einmalig
      </section>
      <article class="...">
        <div class="...">
          889,95 €
        </div>
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
  <section class="...">
    <div class="...">
      <article class="...">
        <div class="...">
          <svg class="...">
            <line y1="80%" x2="100%" y2="20%"></line>
            <line y1="80%" x2="100%" y2="20%"></line>
          </svg>
          <div class="...">
            <div class="..." data-qa="...">
            </div>
          </div>
        </div>
      </article>
      <div class="...">
        <article class="...">
        </article>
      </div>
    </div>
  </section>
</div>

Links

• Product card link elements are empty

• assistive technology will always try to find a fallback for missing information; in this case, the last part of the link's URL path (stripping query parameters) is used; href="/shop/geraet/apple/apple-ipad-air-13-2025-m3/space-grau-256-gb?tariffId=MF17498&tariffSubTenId=MF17496&categoryId=alle-geraete" → space-grau-256-gb

• As the product color and storage is part of the URL path, multiple products with same color and storage will have the same fallback name (see e.g. "space-schwarz-256-gb")

• "Weitere Geräte anzeigen" has button functionality but is using a semantic link element

• "Tarif ändern" has button functionality but is using a semantic link element

• "Tarif entfernen" has button functionality but is using a semantic link element

• "Preisübersicht anzeigen"

  • has button functionality but is using a semantic link element

  • uses a <div role="link"> inside the aforementioned link element

  • as two nested links are used, the link is duplicated in the link list

Buttons

• Color variant circles use buttons as <div value="#262529" class="..." aria-describedby="tooltip-content-id" role="button" tabindex="0">...</div>;

• Color variants use buttons without any functionality

• Color variant buttons are labeled by sidebar content tooltip-content-id

• All color variant buttons are labeled the same, thus cannot be differentiated

• "* Schaltfläche" announces footnotes. All footnote buttons are announced the same: "*" / "STAR"