Minimalizujte počet chýb na stránke.
Pre používateľov môže byť ťažké zorientovať sa na stránke po zobrazení chyby, najmä ak sa na nej vyskytlo viacero chýb súčasne.
Zjednodušte formuláre tak, že ich prepíšete, prípadne ak je to možné, rozdeľujte dlhé formuláre na niekoľko stránok - pričom na každej z nich sa pýtajte jednu otázku.
Pri štruktúrovaní formulára zvážte aj kontext. Ak spolu žiadané informácie súvisia, je možné ich umiestniť na stránke viac. Napríklad meno, priezvisko a číslo občianskeho preukazu.
Je dôležité:
Okrem toho je potrebné aj v nadpise stránky v prvku <title>
zobraziť, že došlo k chybe, a to umiestnením slova "Chyba: " pred existujúci nadpis (ang. title). To zabezpečí upozornenie používateľov na chybu hneď ako to bude možné.
Priestor pre popis, k akým chybám došlo a ako ich opraviť.
Pozrite sa na svoje meno, podpis a ďalšie podrobnosti.
<div class="grid-row">
<div class="column-two-thirds">
<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
<h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
Miesto pre správu, ktorá upozorňuje, že nastal problém
</h2>
<p>
Priestor pre popis, k akým chybám došlo a ako ich opraviť.
</p>
<ul class="error-summary-list">
<li><a href="#example-personal-details">Popis s odkazom na otázku, v ktorej nastala chyba</a></li>
</ul>
</div>
<h1 class="heading-large">
Skontrolujte si svoje osobné údaje
</h1>
<p>
Pozrite sa na svoje meno, podpis a ďalšie podrobnosti.
</p>
<form>
<div class="form-group form-group-error">
<fieldset>
<legend id="example-personal-details">
<span class="form-label-bold">
Sú vaše osobné údaje správne a aktuálne?
</span>
<span class="error-message">
Priestor na chybovú hlášku
</span>
</legend>
<div class="multiple-choice">
<input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
<label for="personal_details_yes">Áno, moje osobné údaje sú správne</label>
</div>
<div class="multiple-choice">
<input id="personal_details_no" type="radio" name="personalDetails" value="No">
<label for="personal_details_no">Nie, niektoré údaje sú nesprávne alebo sa zmenili</label>
</div>
</fieldset>
</div>
<input class="button" type="submit" value="Pokračovať">
</form>
</div>
</div>
Pre každú chybu:
<label>
alebo <legend>
k danej otázke a umiestnite ju pod textom otázky, pričom použite červenú farbu písma,V prípade červenej farby použite Sass premennú $error-colour
, ktorú nájdete v súbore colours.scss frontend toolkitu.
Priestor pre popis, k akým chybám došlo a ako ich opraviť
<div class="grid-row">
<div class="column-two-thirds">
<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-2" tabindex="-1">
<h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">
Miesto pre správu, ktorá upozorňuje, že nastal problém
</h2>
<p>
Priestor pre popis, k akým chybám došlo a ako ich opraviť
</p>
<ul class="error-summary-list">
<li><a href="#example-full-name">Popis s odkazom na otázku, v ktorej nastala chyba</a></li>
<li><a href="#example-ni-number">Popis s odkazom na otázku, v ktorej nastala chyba</a></li>
</ul>
</div>
<h1 class="heading-large">
Vaše osobné údaje
</h1>
<div class="form-group form-group-error">
<label for="example-full-name" id="error-full-name">
<span class="form-label-bold">Meno a priezvisko</span>
<span class="form-hint">Tak ako ho máte uvedené v rodnom liste alebo pase</span>
<span class="error-message">Priestor pre chybové hlásenie</span>
</label>
<input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="">
</div>
<div class="form-group form-group-error">
<label for="example-ni-number" id="error-ni-number">
<span class="form-label-bold">Číslo preukazu poistenca</span>
<span class="form-hint">
Nájdete ho na prednej strane vášho preukazu poistenca.
<br>
napríklad, ‘QQ 12 34 56 C’.
</span>
<span class="error-message">
Priestor pre chybové hlásenie
</span>
</label>
<input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="">
</div>
<input class="button" type="submit" value="Pokračovať">
</div>
</div>