1.3.1 Zaškrtávacie políčka podmienok a polia dátumov nie sú zoskupené so svojou otázkou

URL: priznanie.digital/uroky

Popis problému:

Na dvoch miestach je otázka vizuálne nadradená skupine polí, v kóde sú však otázka a polia oddelené:

• Manžel / manželka: nadpis „Spĺňa vaša manželka / manžel aspoň jednu z podmienok?“ je element <h1> v elemente <legend>, ktorý je v <div class="govuk-form-group">, nie v <fieldset>. Legenda mimo <fieldset> nemá žiadny účinok a päť zaškrtávacích políčok („Staral/a sa o dieťa do 3 rokov“ až „Považuje sa za občana so zdravotným postihnutím alebo s ťažkým zdravotným postihnutím“) nie je zoskupených ani spojených s otázkou.
• Úroky: texty „Dátum uzavretia zmluvy o úvere na bývanie“ a „Dátum začatia úročenia úveru“ sú elementy <label> bez atribútu for (v kóde je pravidlo jsx-a11y/label-has-associated-control vypnuté), mimo skupiny polí. Polia „Deň“, „Mesiac“ a „Rok“ sú v <fieldset role="group"> bez legendy, teda bez názvu skupiny. Na stránke sú preto dvakrát polia „Deň“, „Mesiac“ a „Rok“ a k dátumu ich viaže iba popis skupiny („Zadajte dátum uzavretia zmluvy napríklad 14 5 2022“). Aj nadpis „Ak si chcete uplatniť daňový bonus na zaplatené úroky z úveru na bývanie uveďte:“ je v legende mimo <fieldset>.

Dopad:

Používateľ čítača obrazovky pri prechode na zaškrtávacie políčko počuje iba jeho text, nie otázku, na ktorú odpovedá, a nevie, či ide o jednu skupinu podmienok. Pri dátumoch počuje „Deň“, „Mesiac“, „Rok“ dvakrát za sebou bez informácie, ku ktorému dátumu polia patria. Vzťah otázky a polí, ktorý je vidiacim používateľom zrejmý z rozloženia, nie je možné programovo odvodiť. Postihnutí sú nevidiaci a ťažko slabozrakí používatelia čítačov obrazovky a používatelia hlasového ovládania.

Závažnosť: stredná — polia majú vlastné menovky, chýba však ich súvislosť s otázkou.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné každú skupinu polí obaliť elementom <fieldset> a otázku alebo názov dátumu dať do jeho <legend> ako prvého potomka:

<fieldset class="govuk-fieldset" role="group" aria-describedby="zmluva-uzatvorenie-hint">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">Dátum uzavretia zmluvy o úvere na bývanie</legend>
  <div id="zmluva-uzatvorenie-hint" class="govuk-hint">Zadajte dátum uzavretia zmluvy, napríklad 14 5 2022</div>
  …

Pri podmienkach manžela alebo manželky rovnako: <fieldset> s legendou „Spĺňa vaša manželka / manžel aspoň jednu z podmienok?“ okolo všetkých piatich políčok.