1.3.1; 3.3.2; 4.1.2 Polia textu pečiatky nemajú menovky a voľby nie sú zoskupené

URL: agp.dev.slovensko.digital/contracts/88f8ba3c-29c7-49bb-859e-bec1762ab044/visual_signing

Popis problému:

V paneli „Umiestnenie pečiatky“ (element <aside> bez prístupného názvu) sa volí obsah pečiatky prepínačmi „Použiť napísané meno“, „Použiť namiesto toho obrázok“ a „Nakresliť podpis“. Prepínače name="stamp[content_mode]" nie sú zoskupené (<fieldset>), nadpis skupiny „Text pečiatky“ je obyčajný text. Textové pole #stamp_custom_text nemá menovku — jeho jediným označením je zástupný text placeholder="Meno zobrazené na pečiatke". Pole na výber obrázka <input type="file" id="stamp_image"> nemá menovku ani prístupný názov. Plocha na kreslenie podpisu je <canvas> bez názvu.

Dopad:

Používateľ čítača obrazovky počuje pri obrázku iba „Choose File, tlačidlo“ a nevie, čo má vybrať. Zástupný text poľa pre meno po začatí písania zmizne a používatelia s kognitívnym znevýhodnením si nepamätajú, čo majú zadať. Pri prepínačoch chýba spoločná otázka, takže pri zameraní na „Nakresliť podpis“ nie je zrejmé, čoho sa voľba týka. Postihnutí sú nevidiaci a ťažko slabozrakí používatelia, používatelia hlasového ovládania (pole nemá názov, ktorým by ho aktivovali) a používatelia s kognitívnym znevýhodnením.

Závažnosť: vysoká — pole na výber obrázka nemá žiadny názov.

Efektívne riešenie:

Pre splnenie kritérií úspešnosti je potrebné prepínače obaliť elementom <fieldset> s <legend> „Text pečiatky“, poľu pre meno a poľu pre obrázok doplniť viditeľné <label for="…">, plátnu na kreslenie dať role="img" a aria-label a panelu <aside> prístupný názov podľa jeho nadpisu (aria-labelledby):

<fieldset>
  <legend>Text pečiatky</legend>
  <label><input type="radio" name="stamp[content_mode]" value="text"> Použiť napísané meno</label>
  <label for="stamp_custom_text">Meno zobrazené na pečiatke</label>
  <input type="text" id="stamp_custom_text" name="stamp[custom_text]" autocomplete="name">
  <label><input type="radio" name="stamp[content_mode]" value="image"> Použiť namiesto toho obrázok</label>
  <label for="stamp_image">Obrázok podpisu (PNG alebo JPEG)</label>
  <input type="file" id="stamp_image" name="stamp[image]" accept="image/png,image/jpeg">
</fieldset>