1.3.1 Zoznamy definícií na stránke O portáli majú nesprávnu štruktúru

URL: agp.dev.slovensko.digital/about

Popis problému:

Časť „Ekosystém Autogram“ (karty „Autogram na počítači“, „Autogram v mobile“, „Autogram Extension“, „Autogram Portal“) je vytvorená ako <dl class="grid …">, ktorého priamymi potomkami sú <div> s ikonou <svg> a vnoreným <div>, v ktorom sa až nachádzajú <dt> a <dd>. Časť „Časté otázky“ je <dl class="mt-16 space-y-4">, ktorého potomkami sú elementy <details>. Obe štruktúry sú podľa HTML neplatné a asistenčné technológie dvojice pojem – opis nerozpoznajú.

Dopad:

Používatelia čítačov obrazovky namiesto zoznamu so štyrmi produktmi a ich opismi počujú buď nesúvislý text, alebo zoznam s nesprávnym počtom položiek; vzťah medzi názvom produktu a jeho opisom, ktorý vidiaci používateľ vníma z rozloženia karty, nie je programovo určený.

Závažnosť: stredná — obsah je čitateľný, chýba však jeho štruktúra.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné, aby <dl> obsahoval iba skupiny <dt> + <dd>, prípadne obalené jedným <div>. Pre karty produktov je vhodnejšie použiť zoznam <ul> s nadpisom v každej položke; pre časté otázky stačí <div> so samostatnými <details> (zoznam definícií nie je potrebný).

<ul role="list" class="grid …">
  <li><svg aria-hidden="true" …></svg><h3>Autogram na počítači</h3><p>…</p></li>
</ul>