4.1.2; 4.1.3 Zóna na nahratie dokumentu neoznámi zvolený súbor a obsahuje vnorené tlačidlo

URL: agp.dev.slovensko.digital/contracts/new

Popis problému:

Zóna na nahratie dokumentu (stránky „Nový dokument“ a „O portáli“) je <div role="button" tabindex="0" aria-label="Nahrajte svoj dokument. Presuňte a pusťte alebo kliknite pre výber">. Po výbere súboru sa v zóne zobrazí jeho názov a veľkosť a tlačidlo na odstránenie súboru, prístupný názov zóny však zostáva nezmenený (určuje ho statický aria-label) a na stránke nie je žiadna živá oblasť, ktorá by výber oznámila. Tlačidlo na odstránenie súboru (<button title="Odstrániť súbor"> s ikonou) je vnorené do prvku s rolou button, ktorého potomkovia sú pre asistenčné technológie prezentačné. Skryté pole <input type="file"> nemá menovku.

Dopad:

Používateľ čítača obrazovky po výbere súboru nedostane žiadnu informáciu, či sa súbor vybral a ktorý; zóna mu stále oznamuje „Nahrajte svoj dokument“. Nemá tak istotu, že podpisuje správny dokument. Tlačidlo na odstránenie súboru sa mu pri prechádzaní obsahom nemusí oznámiť vôbec alebo sa oznámi bez súvislosti, pretože je súčasťou iného tlačidla. Postihnutí sú nevidiaci a ťažko slabozrakí používatelia čítačov obrazovky a používatelia hlasového ovládania (zóna nemá názov zhodný s viditeľným textom po výbere).

Závažnosť: vysoká — týka sa prvého kroku hlavnej úlohy portálu.

Efektívne riešenie:

Pre splnenie kritérií úspešnosti je potrebné zónu postaviť z natívnych prvkov: viditeľné <label for="…"> (alebo <button type="button">) na výber súboru a samostatne, mimo neho, informáciu o zvolenom súbore a tlačidlo „Odstrániť súbor zmluva.pdf“. Informáciu o výbere je potrebné oznámiť cez živú oblasť role="status". Drag-and-drop je možné ponechať ako doplnkový spôsob na obalovom <div> bez roly.

<div data-file-upload-target="dropzone" class="…">  <!-- bez role a tabindex -->
  <label for="document_blob" class="…">Nahrajte svoj dokument</label>
  <input type="file" id="document_blob" class="sr-only" aria-describedby="dropzone-hint">
  <p id="dropzone-hint">Podporované sú formáty PDF, XML, ASiC-E a iné</p>
</div>
<p role="status" data-file-upload-target="fileName">Zvolený súbor: zmluva.pdf (1,34 KB)</p>
<button type="button" aria-label="Odstrániť súbor zmluva.pdf">…</button>

Nad rámec kritéria úspešnosti upozorňujeme, že hlásenie o nepodporovanom formáte („Súbor … nie je podporovaný. Povolené formáty jsou PDF, XML a iné súbory.“) obsahuje české slovo a zobrazuje sa cez alert(); vhodnejšie je chybu zobraziť pri zóne s role="alert".