1.4.10 Polia s chybou v kroku Osobné údaje presahujú pri šírke 320 CSS pixelov okraj obrazovky

URL: priznanie.digital/osobne-udaje

Popis problému:

Pri šírke zobrazovacej oblasti 320 CSS pixelov (zodpovedá zväčšeniu na 400 %) sa po odoslaní kroku Osobné údaje s chybami rozšíria skupiny polí „Meno“ a „Priezvisko“ (<div class="govuk-form-group osobne-udaje_wideField__… govuk-form-group--error">) o červený okraj a odsadenie chybového stavu. Ich pravý okraj je potom na 325 CSS pixeloch, stránka sa dá vodorovne posúvať o 5 CSS pixelov a pravý okraj vstupných polí je orezaný. Bez chybového stavu sa obsah do šírky 320 CSS pixelov zmestí.

Dopad:

Používateľ so zväčšením obrazovky alebo na úzkom displeji musí pri oprave chýb posúvať stránku aj vodorovne a nevidí pravý okraj polí. Presah je malý, vzniká však práve vo chvíli, keď používateľ potrebuje vidieť polia celé. Postihnutí sú používatelia so slabým zrakom, ktorí používajú zväčšenie, a používatelia mobilných zariadení.

Závažnosť: nízka — presah 5 CSS pixelov bez straty obsahu.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné, aby sa skupina polí v chybovom stave zmestila do šírky obrazovky — napríklad obmedziť šírku poľa na šírku rodiča (max-width: 100%, box-sizing: border-box) alebo odčítať okraj a odsadenie chybového stavu od šírky triedy wideField.

.wideField .govuk-input { max-width: 100%; box-sizing: border-box; }