Lišta spätnej väzby (Feedback bar)
Lišta spätnej väzby sa umiestňuje bezprostredne nad komponent päta. Základným cieľom lišty spätnej väzby je zistiť od používateľov užitočnosť a relevantnosť publikovaného obsahu na webovom sídle.
Použitie lišty spätnej väzby
Komponent lišta spätnej väzby slúži primárne na získanie jednoduchej spätnej väzby k užitočnosti informácií na stránke. Používateľ môže odpovedať pomocou rovnocenných možností „Áno“ alebo „Nie“.
V kontexte štátnej správy musí byť komponent použitý transparentne, prístupne a bez manipulatívneho dizajnu. Ak používateľ zvolí možnosť „Nie“, môže nasledovať krátky dotazník alebo možnosť nahlásiť problém, pričom formulár má byť stručný a nemá vyžadovať zbytočné osobné údaje.
Ako sa používa
- Umiestňuje sa na spodok stránky bezprostredne pred pätičku, keď už používateľ prečítal obsah.
- Odpovede „Áno“ a „Nie“ musia mať rovnocennú vizuálnu váhu, aby nevznikal manipulatívny vzor.
- Po odoslaní odpovede musí používateľ dostať potvrdenie, že spätná väzba bola prijatá.
- Formulár na nahlásenie chyby má byť stručný a zameraný na konkrétny problém na stránke.
Ako sa nepoužíva
- Nepoužívajte ju na zhromažďovanie komplexných analytických dát alebo dlhých prieskumov spokojnosti.
- Nevkladajte ju do každej podstránky viacstupňového formulára alebo transakčného procesu.
- Tlačidlo „Nahlásiť chybu“ nemá viesť na všeobecnú kontaktnú stránku bez kontextu.
- Nepoužívajte vizuálne zvýhodnenie jednej odpovede pred druhou.
Varianty a stavy
1. Základná lišta spätnej väzby
Základný variant obsahuje otázku a dve rovnocenné odpovede „Áno“ a „Nie“. Po výbere odpovede sa používateľovi zobrazí potvrdzujúca správa.
2. Variant s tlačidlom na nahlásenie problému
Tento variant pridáva samostatný odkaz na nahlásenie problému na stránke. Používateľ tak môže poskytnúť spätnú väzbu aj mimo odpovedí „Áno“ a „Nie“.
3. Variant s inou otázkou
Otázka sa môže prispôsobiť obsahu stránky, ale musí byť stručná, zrozumiteľná a nesmie používateľa navádzať na konkrétnu odpoveď.
Prístupnosť (Accessibility)
Lišta spätnej väzby musí byť použiteľná klávesnicou a musí poskytovať jasný kontext používateľom asistenčných technológií. Otázka, odpovede a potvrdzujúca správa musia byť programovo zrozumiteľne prepojené.
Klávesové ovládanie
Tab– presun zamerania klávesnice na nasledujúce tlačidlo alebo odkaz.Shift + Tab– presun zamerania klávesnice na predchádzajúce tlačidlo alebo odkaz.EnteraleboMedzerník– aktivovanie vybraného tlačidla.
Základné pravidlá prístupnosti
- Všetky akcie v lište musia používať natívny element
<button>, prípadne natívny odkaz<a>, ak ide o prechod na inú stránku. - Otázka a odpovede „Áno“ a „Nie“ musia byť zoskupené pomocou
<fieldset>a otázka má byť uvedená v<legend>. - Celý komponent má byť označený ako samostatná oblasť pomocou
role="region"aaria-label="Lišta spätnej väzby". - Tlačidlá „Áno“ a „Nie“ musia mať popisný prístupný názov, ktorý zahŕňa aj kontext otázky. Nestačí, aby asistenčná technológia oznámila iba „Áno, tlačidlo“ alebo „Nie, tlačidlo“.
- Dynamická potvrdzujúca správa, napríklad „Ďakujeme za vašu spätnú väzbu.“, sa oznamuje cez samostatný
aria-live="polite"región. Tento live región musí byť prítomný v DOM už pri načítaní stránky a na začiatku má byť prázdny. - Nepoužívajte
aria-livena celom komponente, ktorý obsahuje aj statický text otázky a tlačidlá. - Medzi tlačidlami má byť dostatočná medzera, odporúčane aspoň 25 px, aby sa znížilo riziko nechceného kliknutia.
- Dekoratívne ikony, napríklad ikona fajky pri potvrdzujúcej správe, musia byť skryté pred asistenčnými technológiami pomocou
aria-hidden="true".
Implementácia lišty spätnej väzby z ID-SK Frontend
Komponent lišta spätnej väzby môžete do projektu integrovať dvoma spôsobmi podľa technologickej infraštruktúry:
- Statická HTML implementácia – vhodná pre projekty bez Node.js alebo bundlera.
- Pokročilá integrácia (NPM + SCSS + JS) – vhodná pre projekty so správou zdrojov a build procesom.
Základné požiadavky
Pred začiatkom integrácie sa uistite, že máte:
- Node.js: verzia 4.2.0 alebo vyššia.
- Dart Sass: verzia 1.0.0 alebo vyššia.
- Nunjucks: verzia 3.0.0 alebo vyššia, ak chcete používať makrá.
Možnosti implementácie
1. Statická HTML implementácia
Ak projekt nevyužíva Node.js alebo bundler, môžete použiť hotové HTML, CSS a JavaScript súbory. Pri vlastnej implementácii zachovajte sémantiku fieldset, legend, natívne tlačidlá a samostatný live región.
Skopírujte potrebné súbory a assety do projektu. Štruktúra môže vyzerať napríklad takto:
project/
│
├── assets/
│ ├── images/
│ └── fonts/
├── index.html
├── frontend.min.css
├── frontend.min.js
├── frontend.min.css.map
└── frontend.min.js.mapDo časti head vložte minifikovaný CSS súbor. Na koniec body pripojte JavaScript a inicializujte komponenty.
<!DOCTYPE html>
<html lang="sk">
<head>
<title>Ukážka</title>
<link rel="stylesheet" href="frontend.min.css">
</head>
<body>
<script type="module" src="./frontend.min.js"></script>
<script type="module">
import { initAll } from './frontend.min.js'
initAll()
</script>
</body>
</html>Pri vlastnej implementácii dodržte zoskupenie otázky a odpovedí pomocou fieldset a legend. Live región musí byť v DOM už od načítania stránky.
<section role="region" aria-label="Lišta spätnej väzby">
<p id="feedback-status" aria-live="polite" aria-atomic="true"></p>
<fieldset>
<legend id="feedback-question">
Boli tieto informácie pre vás užitočné?
</legend>
<button type="button">
<span aria-hidden="true">Áno</span>
<span class="sr-only">
Áno, tieto informácie boli pre mňa užitočné
</span>
</button>
<button type="button">
<span aria-hidden="true">Nie</span>
<span class="sr-only">
Nie, tieto informácie neboli pre mňa užitočné
</span>
</button>
</fieldset>
<a href="/kontakt/nahlasit-problem">
Nahlásiť chybu na stránke
</a>
</section>2. Pokročilá integrácia (NPM + SCSS + JS)
- Nainštalujte balík
Pre inštaláciu cez NPM spustite:
npm install nunjucks --save npm i @id-sk/frontend@3.0.0-beta.0-hotfix - Pridajte komponentV projekte použite vlastný komponent
FeedbackBarCustom, ktorý zabezpečuje prístupné zoskupenie otázky, tlačidiel a live regiónu. - Importujte štýly
Ak používate pôvodné ID-SK štýly, import individuálneho komponentu vyzerá takto:
@import "node_modules/@id-sk/frontend/idsk/components/feedback-bar/feedback-bar";