Prehľad s chybovými hláseniami (Error summary)
Prehľad s chybovými hláseniami sumarizuje validačné chyby vo formulári na jednom mieste a umožňuje používateľovi rýchlo prejsť na konkrétne chybné pole. Zobrazuje sa po pokuse o odoslanie formulára a má byť umiestnený pred formulárom alebo na začiatku hlavného obsahu stránky.
Použitie prehľadu s chybovými hláseniami
Vo formulári sú chyby
Opravte nasledujúce údaje pred pokračovaním.
Povinné polia sú označené hviezdičkou
Prehľad s chybovými hláseniami použite po validačnej chybe vo formulári. Má používateľovi jasne povedať, že formulár obsahuje chyby, zobraziť ich v jednom zozname a umožniť prechod na konkrétne chybné polia.
Ak sa na prehľad chýb presúva zameranie klávesnice, nepoužívajte na rovnakom prvku role="alert". Kombinácia automatického oznámenia a presunu fokusu môže spôsobiť duplicitné čítanie obsahu.
Ako sa používa
- keď formulár obsahuje validačnú chybu, aj keď ide len o jednu chybu,
- po pokuse o odoslanie formulára, nie pri každom písaní,
- spolu s chybovým hlásením pri konkrétnom poli,
- pred formulárom alebo na začiatku hlavného obsahu stránky,
- vždy len jeden prehľad chýb na jeden formulár,
- chyby majú byť v rovnakom poradí ako polia vo formulári.
Ako sa nepoužíva
- na konci formulára, kde ho používateľ nemusí nájsť,
- s inými textami ako pri samotných poliach,
- so všeobecnými hláškami bez návrhu opravy,
- spolu s
role="alert", ak sa na summary presúva focus, - na systémové alebo aplikačné chyby, ktoré nesúvisia s validáciou formulára.
Varianty a stavy
1. Prehľad chýb bez popisu
Tento variant použite vtedy, keď nadpis a samotný zoznam chýb poskytujú dostatočný kontext.
Vo formulári sú chyby
2. Prehľad chýb s popisom
Popis použite vtedy, keď potrebujete používateľovi krátko vysvetliť, čo má urobiť pred pokračovaním.
Vo formulári sú chyby
Opravte označené polia a formulár odošlite znova.
Prístupnosť (Accessibility)
Prehľad s chybovými hláseniami musí byť dostupný pre používateľov klávesnice aj asistenčných technológií. Po neúspešnom odoslaní formulára sa má používateľ dostať priamo k informácii, že formulár obsahuje chyby, a následne vedieť prejsť na konkrétne chybné polia.
Klávesové ovládanie
Tab– presúva focus medzi odkazmi v prehľade chýb a ďalšími fokusovateľnými prvkami stránky.Shift + Tab– presúva focus na predchádzajúci fokusovateľný prvok.Enter– aktivuje odkaz v prehľade chýb a presunie focus na príslušné chybné pole.
Základné pravidlá prístupnosti
- Po validačnej chybe presuňte focus na prehľad chýb. Obalový prvok musí mať
tabIndex="-1", aby naň bolo možné presunúť focus programovo, ale aby sa doň používateľ nedostal pri bežnom tabovaní. - Ak sa na prehľad chýb presúva focus, nepoužívajte na rovnakom prvku
role="alert". Použite buď focus, alebo alert, nie oboje naraz. - Ak je na stránke prítomný prehľad chýb a po validácii naň presúvate focus, nepoužívajte
role="alert"ani na jednotlivých chybových hláseniach pri poliach. Inak môžu čítačky obrazovky oznámiť chyby duplicitne. - Prehľad chýb má byť prepojený s vlastným nadpisom cez
aria-labelledby. ID nadpisu musí byť jedinečné v rámci celej stránky. - Každá položka v prehľade chýb má byť odkazom smerujúcim na konkrétne chybné pole pomocou
href="#id-pola". Cieľom odkazu má byť fokusovateľné pole, nie chybová hláška. - Text odkazu v prehľade má byť rovnaký ako chybová hláška pri poli. Používateľ tak dostane konzistentnú informáciu na oboch miestach.
- Chybové hlásenie musí používateľovi povedať nielen to, že nastala chyba, ale aj ako ju opraviť. Napríklad namiesto „Zadajte e-mail v správnom tvare“ použite „Zadajte e-mailovú adresu v tvare meno@example.com.“
- Chybné pole označte pomocou
aria-invalid="true". Chybové hlásenie pri poli prepojte s inputom cezaria-describedby. - Nikdy nepoužívajte rovnaké ID pre input aj chybové hlásenie. Input môže mať napríklad
id="email"a chybová hláškaid="email-error".
Implementácia prehľadu s chybovými hláseniami z ID-SK Frontend
Komponent z knižnice ID-SK Frontend môžete do projektu integrovať dvoma spôsobmi v závislosti od použitej technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JavaScript) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pri implementácii prehľadu s chybovými hláseniami dodržte tieto pravidlá:
- prehľad chýb musí obsahovať jasný a zrozumiteľný nadpis,
- každý odkaz v prehľade musí smerovať na konkrétne chybné pole,
- každé ID na stránke musí byť jedinečné,
- text chyby v prehľade má byť rovnaký ako text chyby pri danom poli,
- chybové hlásenie musí používateľovi vysvetliť, ako chybu opraviť,
- cieľové formulárové pole musí byť možné programovo zamerať.
Možnosti implementácie
1. Statická HTML implementácia
Zo stránky dokumentácie môžete prevziať HTML kód komponentu prehľad s chybovými hláseniami (otvorí sa v novom okne). Odkazy v zozname musia smerovať na ID konkrétnych chybných polí vo formulári.
<div
class="govuk-error-summary"
data-module="govuk-error-summary"
>
<div role="alert">
<h2 class="govuk-error-summary__title">
Zadajte správne tieto vstupné údaje a skúste odoslať znova.
</h2>
<p class="govuk-error-summary__description">
Priestor pre popis, k akým chybám došlo a ako ich opraviť.
</p>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#example-error-1">
Prosím, zadajte správny tvar vášho rodného čísla.
</a>
</li>
<li>
<a href="#example-error-2">
Prosím, zadajte správny tvar vášho OP preukazu.
</a>
</li>
<li>
<a href="#example-error-3">
Prosím, zadajte správny tvar vášho telefónneho čísla.
</a>
</li>
</ul>
</div>
</div>
</div>Hodnota atribútu href musí zodpovedať atribútu id chybného poľa:
<label for="example-error-1">
Rodné číslo
</label>
<p id="example-error-1-message" class="govuk-error-message">
<span class="govuk-visually-hidden">Chyba:</span>
Prosím, zadajte správny tvar vášho rodného čísla.
</p>
<input
id="example-error-1"
name="birth-number"
type="text"
aria-invalid="true"
aria-describedby="example-error-1-message"
>2. Pokročilá integrácia (NPM + SCSS + JavaScript)
- Nainštalujte balíkPre inštaláciu cez NPM spustite:
npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte Nunjucks alebo HTMLDo pripraveného súboru vložte markup komponentu. Skontrolujte, že odkazy v zozname smerujú na existujúce formulárové polia.
- Importujte štýlyPre import individuálneho komponentu pridajte do Sass súboru:
@import "node_modules/@id-sk/frontend/idsk/components/error-summary/error-summary"; - Importujte JavaScriptKomponent používa atribút
data-module="govuk-error-summary". JavaScript modul inicializujte takto:import { ErrorSummary, createAll } from 'govuk-frontend'; createAll(ErrorSummary);
Správanie JavaScript modulu
JavaScript modul pri inicializácii štandardne presunie fokus na prehľad s chybovými hláseniami. Toto správanie je možné vypnúť nastavením disableAutoFocus: true.
- po inicializácii sa prehľad chýb programovo zameria,
- po kliknutí na odkaz v prehľade modul vyhľadá cieľové pole podľa fragmentu URL,
- pred zameraním poľa posunie do viditeľnej oblasti jeho label alebo legend,
- pri radio buttonoch a checkboxoch sa snaží posunúť na legend nadradeného
fieldset, - následne presunie fokus na konkrétny formulárový prvok.
import {
ErrorSummary,
createAll
} from 'govuk-frontend';
createAll(ErrorSummary);Automatický fokus môžete vypnúť konfiguráciou komponentu:
new ErrorSummary(
document.querySelector('[data-module="govuk-error-summary"]'),
{
disableAutoFocus: true
}
);