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.
Stiahnite a zahrňte zdroje
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.mapPrepojte štýly a skripty
Do časti
headvložte minifikovaný CSS súbor. Na koniecbodypripojte 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>Prístupný HTML základ
Pri vlastnej implementácii dodržte zoskupenie otázky a odpovedí pomocou
fieldsetalegend. 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-hotfixPridajte komponent
V projekte použite vlastný komponentFeedbackBarCustom, 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";