Naše práce často není vidět, přesto stojíme u zrodu i dokončení každé funkcionality. Úkolem analytika, zejména technického, je propojit vizi, potřeby uživatelů a technické možnosti tak, aby vývoj probíhal hladce a výsledný produkt dával smysl.<h2>Technický analytik v praxi</h2>Jako analytici při vývoji aplikací jsme u každé funkcionality od úplného začátku, od sběru požadavků a jejich dokumentace až po nasazení do produkce. Naším úkolem je porozumět tomu, co se má vytvořit, proč to má smysl a jak to zapadne do existujícího řešení.<h3>Naše práce zahrnuje:</h3><ul><li>sběr a analýzu požadavků,</li><li>kladení správných otázek a ověřování nesrovnalostí,</li><li>tvorbu a údržbu technických specifikací,</li><li>návrh edge-case scénářů (např. výpadek serveru, prázdné seznamy, chybné vstupy),</li><li>spolupráci na designu,</li><li>vizualizaci složitých procesů pomocí diagramů,</li><li>průběžnou podporu během vývoje a testování,</li><li>komunikaci a koordinaci mezi týmy i se stakeholdery,</li><li>usměrnění klienta v otázkách technické realizovatelnosti,</li><li>asistenci projektovému manažerovi při odhadech a kalkulacích.</li></ul>

<h2>Jak vypadá den analytika na projektu?</h2>Ráno obvykle začíná kontrolou e-mailů a odpovídáním na dotazy od týmu či klienta. Následuje standup, kde pomáháme ujasnit si priority a ujistit se, že vše směřuje správným směrem.Zbytek dne je kombinací detailní práce a koordinace:<ul><li>ladíme bug reporty,</li><li>píšeme a upravujeme specifikace,</li><li>připravujeme refinements,</li><li>tvoříme tasky pro vývojáře nebo diskutujeme s klientem o nových funkcích.</li></ul>Analytik neustále balancuje mezi detailem a celkovým obrazem – hledá logické souvislosti i ty nečekané edge-case situace, které by jinak mohly způsobit problémy.

Stejně jako analytik spojuje tým, technické specifikace spojují vizi s úspěšným vývojem. Číst dále 👇

<h2>Základní dovednosti analytika</h2><h3>Hard skills</h3><ul><li>Základy technického myšlení – porozumění API dokumentaci a integracím, základům architektury mobilních a webových aplikací.</li><li>Strukturovanost a přesnost – umíme psát srozumitelné specifikace, které myslí i na výjimky a různé stavy systému.</li><li>Znalost nástrojů – používáme různé nástroje (např. Notion, Jira, Confluence, Figma, Postman, …), které nám pomáhají v každodenní práci.</li><li>Testování a spolupráce s QA – porozumění bug reportům.</li><li>Modelování procesů – tvorba diagramů.</li></ul><h3>Soft skills</h3><ul><li>Schopnost klást otázky – hodně otázek. Ne proto, že nerozumíme, ale protože chceme pochopit všechny detaily.</li><li>Srozumitelná komunikace – s byznysem i vývojem. Často fungujeme jako „tlumočníci“ mezi světy, které používají odlišný jazyk.</li><li>Smysl pro detail – i malé nesrovnalosti mohou později způsobit velké problémy. Naším cílem je odhalit je dřív, než se promění v bugy.</li><li>Zvědavost s pokorou – nebojíme se na něco doptat, ověřit, přiznat chybu a udělat věci lépe.</li><li>Organizace a systémové myšlení – schopnost propojovat souvislosti napříč systémem, udržovat pořádek a aktuálnost v dokumentaci.</li><li>Kontextové myšlení – přemýšlení v různých scénářích („co když…“).</li><li>Trpělivost a vytrvalost – hledání odpovědí i tehdy, když požadavky nejsou hned jasné.</li><li>Empatie a spolupráce – pochopení potřeb klienta a zároveň požadavků a doporučení vývojářů.</li><li>Time management – umíme si rozdělit čas mezi psaní specifikací, konzultace, operativu i meetingy tak, aby nám nic neuniklo.</li></ul><h2>Jsme důležitou součástí vývojového procesu</h2>Designéři vytvářejí, jak má produkt vypadat a fungovat pro uživatele. Vývojáři vědí, jak ho postavit, aby byl spolehlivý. Klient přináší svou vizi a cíle. My jako techničtí analytici tyto pohledy spojujeme – přinášíme jasnost, pojmenováváme detaily a pomáháme proměnit nápad ve funkční řešení bez zbytečných nedorozumění. Hledáme rovnováhu mezi tím, co chce klient, co dává smysl uživateli a co je technicky proveditelné.<ul><li>Klient ví, čeho chce dosáhnout, ale ne vždy ví, jak to má fungovat.</li><li>Vývojáři vědí, jak to postavit, ale potřebují vědět přesně co.</li><li>Designéři vědí, jak to má vypadat, ale potřebují rámec.</li><li>Analytici zajišťují, že všichni táhneme za jeden provaz.</li></ul>

Role analytika může být nenápadná, ale je naprosto klíčová. Jsme mostem mezi byznysem a vývojem – rozumíme kontextu, přemýšlíme v souvislostech a klademe otázky, které posouvají projekt vpřed. Naše práce přináší týmu jasnost, pomáhá předcházet chybám a šetří čas i zdroje. Nejsme jen „písaři dokumentace“, ale ti, kteří mění nápad v realizovatelné řešení. I proto by měl mít analytik v každém týmu své pevné místo.

V softvérových tímoch sú roly, ktoré si vie predstaviť takmer každý. Každý zhruba vie, aká je náplň práce developerov, testerov či dizajnérov. Ale čo analytik? Čo sa za týmto pojmom vlastne skrýva? Odpoveď nebýva vždy jasná.

Význam analytikov v úspešných softvérových projektoch

In software teams, there are roles that almost anyone can picture. Most people have a rough idea of what developers, testers, or designers do. But what about an analyst? What does this role actually entail? The answer isn’t always so clear.

Importance of analysts in successful software projects

Ilustrácia postavy s logom GoodRequest namiesto hlavy, ktorá stojí pred panelom so schémami, grafmi a ikonami. Panel je prepojený čiarami ako myšlienková mapa a nad postavou svieti žiarovka symbolizujúca nápad.

Odhalenie úlohy analytika Hero.png

Odhalenie úlohy analytika Thumb.png

Mária Brandoburová

V softwarových týmech existují role, které si umí představit téměř každý. Většina lidí má zhruba představu, co dělají vývojáři, testeři nebo designéři. Ale co analytik? Co tato role vlastně obnáší? Odpověď nebývá vždy tak jasná.

Význam analytiků v úspěšných softwarových projektech

Vizuální přístupnost znamená schopnost webu zprostředkovat informace každému uživateli bez ohledu na jeho schopnosti či technická omezení. Pro vývojáře to znamená dívat se na barvy, kontrast, typografii a interaktivní prvky nejen z estetického hlediska, ale také z pohledu použitelnosti a čitelnosti.

<h2>1. Velikost textu a stránky</h2>Design musí být flexibilní a umožnit uživatelům zvětšit text až o 200% bez ztráty obsahu nebo funkčnosti. Obsah by se měl plynule přizpůsobit šířce obrazovky, aby se předešlo horizontálnímu scrollu (výjimka jsou velké tabulky, mapy nebo jiné dvou-dimenzionální layouty). Podporujeme minimální šířku zobrazení <code>320px</code>.

Dosáhnete toho tak, že budete specifikovat velikosti písma, velikosti kontejnerů a pozice prvků použitím relativních jednotek, jako jsou <code>rem</code>, <code>em</code>, <code>%</code>, <code>vw</code> nebo <code>vh</code>. Vyhněte se používání absolutních jednotek, jako jsou pixely (px), při specifikování stylování prvků a rozložení. Uživatelé také mohou zvětšit mezery mezi písmeny <code>letter-spacing</code>, slovy <code>word-spacing</code>, řádky <code>line-height</code> a odstavci, aniž by došlo k oříznutí obsahu nebo narušení funkčnosti.<pre><code class="language-css">// Špatné příklady ❌
font-size: 16px;
line-height: 8px;
@media (min-width: 800px) {}

// Dobré příklady ✅

// Pokud nastavíme zoom na 200%, web se vyrenderuje jako na mobilu (např. schvová se menu)
@media (min-width: 50rem) {}
font-size: 1rem;
line-height: 1.5;</code></pre><h4>Kdy použít px hodnoty?</h4><blockquote>Více o správném používání relativních jednotek a <code>px</code> naleznete v článku: <a href="https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/">The Surprising Truth About Pixels and Accessibility</a>.</blockquote><h4>Kdy použít rem hodnoty?</h4>Používání <code>rem</code> hodnot je super pokud jde o typografii. Když však používáme hodnoty <code>rem</code> pro horizontální odsazení, snižujeme množství využitelného prostoru, čímž dále omezujeme počet slov, která se vejdou na řádek (viz porovnání):

Proto ani pro <code>border-width</code> nemá smysl používat <code>rem</code> hodnoty. Při výběru mezi pixely a rem byste si měli položit tuto otázku:🤔 Měla by se tato hodnota zvětšovat, když uživatel zvětší výchozí velikost písma v prohlížeči?

<h2>2. Stylování textu (AAA pravidlo, ale doporučuji implementovat)</h2>Při blocích textu je třeba vyhnout se zarovnání na střed nebo justified, výška řádku se odpoučí alespoň 1,5 a šířka nesmí přesáhnout 80 znaků. Uživatelé musí mít možnost nastavit barvu textu a pozadí. Lidé s dyslexií nebo jinými poruchami učení často profitují z kratších řádků, většího line-heigtu a jednoduchého textu zarovnaného vlevo.

<h2>3. Dostatečný barevný kontrast</h2>Text na webu musí mít dostatečný kontrast vůči pozadí, aby ho mohli číst všichni uživatelé, včetně lidí se zrakovým postižením nebo barvoslepostí, pro které může nízký kontrast způsobit, že text zcela zmizí v pozadí. Používejte nástroje pro kontrolu kontrastu ve Figmě nebo v nástrojích DevTools prohlížeče, abyste ověřili, zda splňujete požadované poměry.<h3>Hlavní pravidla kontrastu textu:</h3><ul><li>Běžný text: Musí mít kontrastní poměr alespoň 4,5:1. Například černé písmo na bílém pozadí má vysoký kontrast, zatímco světle šedé písmo na bílém pozadí má nízký kontrast a je obtížně čitelné.</li><li>Velký text: Měl by mít kontrastní poměr alespoň 3:1, je-li:<ul><li>větší než 24px</li><li>nebo tlustý a větší než 19px.</li></ul></li><li>Všechny důležité vizuální prvky, které mají informační hodnotu (jako jsou ikony, grafy, tlačítka, formulářová pole a jiné interaktivní komponenty), musí mít kontrastní poměr alespoň 3:1 vůči svému okolí nebo sousedním prvkům.</li></ul>

<h2>4. Barevné odlišení</h2>Nepoužívejte barvu jako jediný vizuální prostředek. Informace, akce, výzvy k odpovědi nebo rozlišování vizuálních prvků nesmí být zprostředkovány pouze barvou. Design by měl zahrnovat i další vizuální indikátory jako jsou ikony, podtržení, tučné písmo nebo různé tvary. Pro barvoslepé, slabozraké nebo nevidomé, kteří používají čtečku obrazovky, musí existovat i jiný způsob, jak vyjádřit informaci.<ul><li>Alternativy textu: Pokud například označíte chybná pole ve formuláři červeným okrajem, přidejte také textové upozornění o chybě.</li><li>Odkazy v textu: Odkazy v textu by neměly být odlišeny pouze barvou. Vždy je i podtrhněte nebo změňte jejich styl písma, tučnost nebo přidejte okraj.</li></ul>

<ul><li>Grafika: Na mapách, grafech nebo v jiných vizuálech, kde barva odlišuje prvky, přidejte také symboly nebo ikony pro každou kategorii.</li></ul>

Přístupnost není jen o designu. Prohlédni si praktický checklist, který ti ukáže, jak psát HTML a CSS tak, aby byl web čitelný, použitelný a férový pro všechny 👇

<h2>5. Velikost interaktivních prvků</h2>Tlačítka, odkazy a jiné interaktivní prvky na webu by měly mít minimální velikost 24 x 24 pixelů (pro důležitý obsah je doporučeno minimální velikost 48x48 pixelů). Pokud to není možné, musí mít kolem sebe dostatečný prázdný prostor, aby se předešlo náhodným kliknutím. Malé a natištěné prvky jsou frustrující na klikání, zejména na dotykových obrazovkách pro lidi s:<ul><li>omezenou kontrolou rukou (např. třes, artritida),</li><li>používajících menší obrazovky nebo s většími prsty.</li></ul>

<h2>6. Konzistentní navigace na webu</h2>Uživatelé očekávají, že funkce, jako je menu, search, tlačítka pro přeskočení obsahu nebo kontakt menu, zůstanou na stejném místě, když navštěvují různé podstránky webu.Předvídatelné rozložení webové stránky usnadňuje život všem. Když uživatelé vždy vědí, kde najdou klíčové navigační prvky, neztrácejí čas hledáním. Udržování konzistentnosti není jen užitečné, je nezbytné.

<h3>Konzistentnost interaktivních elementů</h3>Interaktivní prvky, jako jsou tlačítka, odkazy a ovládací prvky formulářů, jsou na webové stránce označeny konzistentně. Pokud něco provádí stejnou akci na více stránkách, měla by být vždy identifikována stejným způsobem.Nevidomí se při interakci s webovými stránkami spoléhají na čtečky obrazovky. Pokud tlačítko na jedné stránce zobrazuje „Přidat do košíku“ a na jiné „Koupit nyní“, musí zjistit, zda dělá stejnou funkci, což vyžaduje zbytečnou námahu.Interaktivní komponenty, které se běžně duplikují na webových stránkách jsou např.:<ul><li>Tlačítka: Submit, Add to Cart, Share on Socials, Play/Pause Media…</li><li>Ikony: Print, Save, Download, Trash…</li><li>Pagination: Go to Page 3, Previous Page…</li><li>Call-to-Action odkazy: Learn More, Sign Up, Get Started…</li></ul>

<h2>7. Netextový obsah</h2>Netextový obsah je cokoli na webu kromě textu, např. obrázky, grafy, video, zvuk a jiný vizuální a zvukový obsah. Textové alternativy pomáhají zpřístupnit netextový obsah pro nevidomé nebo neslyšící.<blockquote>ℹ️ Vyhledávače jako Google nebo AI (Gemini), díky alternativním textům lépe chápou obsah stránky, a proto správným vyplněním alternativních textů zlepšujete SEO.</blockquote>Pravidla pro psaní alternativních textů pro obrázky:<ul><li>Stručnost a výstižnost: Text by měl přesně popsat, co je na obrázku, ale bez zbytečných detailů.</li><li>Kontext je klíčový: Vždy se zamyslete, proč je obrázek na stránce. Jaký účel plní? Alternativní text by měl tento účel zprostředkovat.</li><li>Nezačínejte frázemi "Obrázek..." nebo "Fotka...": Čtečka obrazovky již ví, že jde o obrázek (z HTML značky <code>&lt;img&gt;</code>). Přidávat to do <code>alt</code> textu je je zbytečné a působí rušivě.</li><li>Pokud je obrázek odkazem, popište cíl odkazu: Pokud kliknutelný obrázek vede na jinou stránku, <code>alt</code> by měl popsat, kam se uživatel dostane (např. "Domovská stránka společnosti XY").</li><li>Dekorativní obrázky musí mít prázdný <code>alt</code> atribut: Pokud obrázek neslouží k přenosu informace, ale pouze k vizuálnímu zpestření (např. různé vlnovky, pozadí), musí mít <code>alt=""</code>. Tím dáte čtečce signál, aby jej ignorovala. Nevynechávejte <code>alt</code> atribut úplně!</li></ul><pre><code class="language-html">// Dobré příklady ✅
&lt;!-- Je to stručné, výstižné a přesně popisuje hlavní myšlenku obrázku. --&gt;
&lt;img alt="Zlatý retrívr si v parku hraje s červeným míčem."&gt;

&lt;!-- Pokud jsou data jednoduchá a stručná, můžete je vložit přímo do alt textu. --&gt;
&lt;img alt="Sloupcový graf návštěvnosti: Duben - 5000, Květen - 8000, Červen - 12000 návštěv."&gt;

&lt;!-- Jasně komunikuje, že kliknutím na logo se uživatel vrátí na hlavní stránku. Popisuje funkci, ne jen to, co na obrázku je. --&gt;
&lt;img src="logo_GR.png" alt="GoodRequest - domovská stránka"&gt;

// Špatné příklady ❌
&lt;!-- Příliš obecné. Neposkytuje žádnou užitečnou informaci. --&gt;
&lt;img alt="pes"&gt;

&lt;!-- Zbytečně dlouhé a začíná slovem "Fotka". Detail o počasí nebo barvě trávy zřejmě není podstatný pro kontext článku. --&gt;
&lt;img alt="Fotka zlatého retrívra, jak si hraje s červeným míčem na zelené trávě v parku během slunečného dne."&gt;

&lt;!-- Nepopisuje funkci odkazu. Uživatel neví, kam jej kliknutí zavede. --&gt;
&lt;img alt="Logo"&gt;

&lt;!-- Lepší, ale stále chybí informace o cíli odkazu. --&gt;
&lt;img alt="Logo firmy WebTech"&gt;

&lt;!-- Zbytečně přeruší uživatele informací, která pro něj nemá žádnou hodnotu --&gt;
&lt;img alt="Modrá vlnovka"&gt; 

&lt;!-- Uživatel se vůbec nedozví data, která graf zobrazuje. Je to totéž, jako kdyby tam obrázek nebyl. --&gt;
&lt;img alt="Graf návštěvnosti"&gt;</code></pre>Pravidla pro psaní alternativních textů pro jiný obsah:<ul><li>Audio obsah (např. podcast): Musí být k dispozici úplný textový přepis (transcript). Tento přepis by měl obsahovat nejen mluvené slovo, ale také popis důležitých zvuků (např. "[smích]", "[potlesk publika]").</li><li>Video obsah: Nutno zabezpečit synchronizované titulky (captions). Je-li možno zabezpečit i tlumočení do znakové řeči pro neslyšící. Pokud se ve videu zobrazují důležité vizuální informace, měli byste poskytnout zvukový nebo textový popis, který popisuje vše důležité, co se ve videu děje.</li><li>CAPTCHA (např. popsání zdeformovaného textu z obrázku): Musíte poskytnout alternativu, která nevyžaduje zrak, např. audio captcha.</li></ul>

<h2>8. Nepoužívat text v obrázcích</h2>Statické obrázky s textovým obsahem znemožňují lidem změnit vzhled textu, aby se zlepšila jeho čitelnost. barevný kontrast, velikost textu, atp. Text na obrázcích při přiblížení je rozmazaný. Na rozdíl od skutečného textu na stránce se text na obrázku nepřizpůsobí různým velikostem obrazovky ani nastavením uživatele.Čtečky obrazovky nedokážou interpretovat text uvnitř obrázků, takže lidé, kteří spoléhají na tyto nástroje, nebudou mít přístup k obsahu, pokud obrázek není správně označen nebo neobsahuje alternativní text.

<h2>9. Pozastavení automaticky měnícího obsahu</h2>Automaticky pohybující se nebo animovaný obsah, který trvá déle než 5 sekund, musí být možné pozastavit nebo skrýt. Prvky, které se automaticky aktualizují, způsobují problémy uživatelům čteček obrazovek nebo lidem, kteří nestíhají rychle zpracovat informace (kognitivní postižení).

<h3>Nastavitelné načasování</h3>Časovým limitům je třeba se vyhnout, pokud nejsou nezbytné pro daný úkol (např. zkoušky, aukce). Pokud se používají časové limity, musí být možné je vypnout, upravit je alespoň na desetinásobek výchozí hodnoty nebo je prodloužit alespoň o desetinásobek.<h3>Blikající obsah více než třikrát za sekundu</h3>Nic na stránce by nemělo bliknout více než třikrát za vteřinu. Nezáleží na tom, jak velký nebo jasný je obsah. Některý webový obsah, jako jsou videa, hry nebo animovaná grafika, může rychle blikat, aby upoutal pozornost. Takový druh blikání však může způsobit záchvaty nebo jiné vážné zdravotní problémy u uživatelů, kteří jsou na blikající obsah citliví.

<h2>10. Další pravidla</h2><ul><li>Orentace zařízení: Po otočení zařízení z režimu na výšku do režimu na šířku bude obsah dokonale čitelný a použitelný.</li><li>Automatické přehrávání zvuku (obvykle se zapne spolu s videem), které trvá déle než 3 sekundy, lze ztlumit nebo zastavit.</li><li>Nastavení časového limitu: Pokud má webová stránka jakýkoli časový limit (například automatické odhlášení po 10 minutách nečinnosti), uživatel musí mít možnost tento limit vypnout, upravit nebo jednoduše prodloužit ještě předtím, než vyprší.<ul><li>Příklad: Pokud e-shop rezervuje zboží v košíku na 10 minut, nesmí jej po uplynutí času bez varování odstranit. Namísto toho musí systém uživatele předem upozornit, že čas se krátí. Zároveň mu musí nabídnout jednoduchou možnost, například tlačítko, kterým si může časový limit snadno a opakovaně prodloužit <code>Potřebuji více času (prodloužit o 10 minut)</code>.</li></ul></li></ul>

Visual accessibility is the foundation of a website that can serve everyone. From readable text to sufficient contrast to clear navigation, every detail matters. Clearly defined principles help maintain consistency and ensure a fair user experience.

Practical guide to visual accessibility

Vizuálna prístupnosť je základom webu, ktorý dokáže slúžiť všetkým. Od čitateľného textu cez dostatočný kontrast až po prehľadnú navigáciu, každý detail má význam. Jasne stanovené princípy pomáhajú udržať konzistentnosť a zaručiť férovú používateľskú skúsenosť.

Praktický sprievodca vizuálnou prístupnosťou

Vizuálna prístupnosť hero.png

Vizuálna prístupnosť thumb.png

Andrej Nemeček

Vizuální přístupnost je základem webu, který dokáže sloužit všem. Od čitelného textu přes dostatečný kontrast až po přehlednou navigaci má každý detail význam. Jasně stanovené principy pomáhají udržet konzistentnost a zaručit férovou uživatelskou zkušenost.

 Praktický průvodce vizuální přístupností

Minimální standard přístupnosti slouží jako oficiální podklad pro validaci návrhů designu, checklist při code review a základ pro testovací scénáře. Díky němu dokážeme vytvářet weby, které jsou přístupné a pohodlné pro všechny uživatele.<blockquote>📚 Velmi dobře zpracované materiály o všech pravidlech specifikace WCAG najdete na webové stránce: <a href="https://aaardvarkaccessibility.com/wcag-plain-english/">WCAG in Plain English</a>.​</blockquote><h2>1. Sémantické HTML a proč nepoužívat všude &lt;div&gt;</h2>HTML obsahuje řadu tagů, které sémanticky popisují obsah na webu. Pokud jej používáme správně, např. pro navigaci použijeme <code>&lt;nav&gt;</code>, pro každý vstup vyplníme <code>&lt;label&gt;</code> nebo interaktivní prvky zapíšeme jako <code>&lt;button&gt;</code>, budou čtečky obrazovky lépe rozumět obsahu a struktuře webu.&nbsp;Tip: Vygenerujte si sémantické HTML pomocí AI (doporučuji např. Gemini PRO)„Vygeneruj mi z tohoto screenshotu přístupný HTML bez stylů“<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Screenshot_pre_generovanie_kodu_864d974943.png" alt="Screenshot pre generovanie kódu.png">Gemini vygenerovalo:<pre><code class="language-html">&lt;section aria-labelledby="benu-nadpis"&gt;

 &lt;div&gt;
 &lt;img src="cesta-k-vasemu-obrazku.png" alt="Aplikace Benu lekárny zobrazená na displeji mobilního telefonu."&gt;
 &lt;/div&gt;

 &lt;div&gt;
 &lt;h2 id="benu-nadpis"&gt;
 Creating a state-of-the-art experience for Benu pharmacies
 &lt;/h2&gt;

 &lt;dl&gt;
 &lt;div&gt;
 &lt;dt&gt;10K+&lt;/dt&gt;
 &lt;dd&gt;Average daily users&lt;/dd&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;dt&gt;99.9%&lt;/dt&gt;
 &lt;dd&gt;Cash free rate&lt;/dd&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;dt&gt;4.8*&lt;/dt&gt;
 &lt;dd&gt;App rating on Google Play Store &amp;amp; App Store&lt;/dd&gt;
 &lt;/div&gt;
 &lt;/dl&gt;

 &lt;a href="/case-study/benu-pharmacies" aria-label="Read more about the Benu pharmacies case study"&gt;
 Read more
 &lt;/a&gt;
 &lt;/div&gt;

&lt;/section&gt;</code></pre><h3>Shrnutí prvků přístupnosti (WCAG) v kódu:</h3><ul><li>Sémantická struktura: Použití značek <code>&lt;section&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;dl&gt;</code> dává obsahu logickou strukturu.</li><li>Textová alternativa: Atribut <code>alt</code> u značky <code>&lt;img&gt;</code> zajišťuje, že informace z obrázku jsou dostupné i pro nevidomé.</li><li>Označení sekce: Použití <code>aria-labelledby</code> pomáhá uživatelům asistenčních technologií rychle se zorientovat v obsahu stránky.</li><li>Jasné odkazy: <code>aria-label</code> u odkazu <code>&lt;a&gt;</code> poskytuje jednoznačný popis cíle odkazu, což je klíčové pro odkazy s obecným textem jako „Read more“.</li><li>Sémantická presnost: Zatímco <code>&lt;ul&gt;</code> (neuspořádaný seznam) je dobrý, <code>&lt;dl&gt;</code> (seznam definic) &nbsp;je ještě přesnější. Přímo komunikuje vztah mezi hodnotou metriky (<code>&lt;dt&gt;</code>) a jejím popisem (<code>&lt;dd&gt;</code>), což asistenční technologie dokážou interpretovat a lépe prezentovat uživateli.</li></ul><blockquote>ℹ️ Kromě toho sémantické HTML pomáhá vyhledávačům lépe porozumět obsahu stránky, což má výrazný vliv i na pozici ve vyhledávačích.</blockquote>Proč je důležité používat správné HTML tagy, si můžeme ukázat na tlačítku:▶️&nbsp;<a href="https://codesandbox.io/p/sandbox/distracted-goldwasser-o7d9j5?from-embed">CodeSandbox příklad</a> ◀️<pre><code class="language-html">&lt;!-- Špatný příklad ❌--&gt;
&lt;div className="button" onClick={handleClick}&gt;
 Open something
&lt;/div&gt;

&lt;!-- Dobrý příklad ✅ (onClick může být použit pouze na focusable elementech) --&gt;
&lt;button className="button" onClick={handleClick}&gt;
 Open something
&lt;/button&gt;</code></pre>Na první pohled tlačítko funguje. Když kliknu myší, vyvolá se funkce <code>handleClick</code> stejně jako pro <code>div</code>, tak i pro <code>button</code>. Pokud se však na webu pohybuji pomocí klávesnice (kombinace <code>Tab</code> a <code>Enter</code>), <code>div</code> se stává téměř nepoužitelným. Pro nativní tag &nbsp;<code>&lt;button&gt;</code> prohlížeč automaticky doplnil potřebnou funkcionalitu, např. tabindex nebo focus stav.<blockquote>📚 Velmi kvalitně zpracovaný materiál o všech HTML tágách je k dispozici na <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements">MDN Web Docs</a>.</blockquote>

<h2>2. ARIA (pokud neexistuje alternativa HTML)</h2>ARIA (Accessible Rich Internet Applications) je sada speciálních atributů, které můžete přidat do HTML kódu. Tyto atributy používají výhradně asistenční technologie a nijak neovlivňují vykreslený obsah na webu, ale pouze poskytují doplňující informace pro asistenční technologie.<blockquote>⚠️ Používejte atributy ARIA s rozvahou a pouze jako poslední možnost, pokud neexistuje žádná alternativa v HTML! Pokud použijete atributy ARIA nesprávně, můžete tím přístupnost webu zhoršit ještě více, než kdybyste je nepoužili vůbec.</blockquote><h3>Tři hlavní typy atributů ARIA:</h3><h4>1. Role (Roles) – Definuje, co daný prvek je.</h4><ul><li>Říká čtečce: „Toto není jen obyčejný<code>&lt;div&gt;</code>, toto je <code>navigace</code> nebo <code>tlačítko</code>.“</li><li>Příklady: <code>role="navigation"</code>, <code>role="dialog"</code>, <code>role="button"</code>, <code>role="search"</code>.<ul><li>HTML tagy, např. <code>&lt;nav&gt;</code> nebo <code>&lt;button&gt;</code>, utomaticky přidávají roli, a proto je třeba používat správné HTML tagy! Nejlepší ARIA je žádná ARIA.</li><li>Pokud použijete roli ARIA pro interaktivní prvek, např.<code>role="tab"</code>, <code>role="slider"</code>, ssamotná role nepřidá žádnou funkčnost. Pouze informuje čtečku obrazovky. Vaším úkolem zůstává doprogramovat ovládání klávesnicí (např. šipkami, Esc, Enter) pomocí JavaScriptu.</li></ul></li></ul><pre><code class="language-typescript">❌ Špatně: &lt;div role="button" tabindex="0" onclick="maFunkce()"&gt;Uložit&lt;/div&gt;
✅ Správne: &lt;button onclick="maFunkce()"&gt;Uložit&lt;/button&gt;</code></pre><h4>2. Vlastnosti (Properties) - Definuje vlastnosti a vztahy prvku.</h4><ul><li>Popisují vlastnosti, které se obvykle nemění.</li><li>Příklady: <code>aria-labelledby="id-popisu"</code> (říká, kde najít textový popis), <code>aria-required="true"</code> (označuje povinné políčko), <code>aria-invalid="true"</code> (označuje, že hodnota je nesprávná).</li></ul><h4>3. Stavy (States) - Definuje aktuální stav prvku.</h4><ul><li>Popisují podmínky, které se mění na základě interakce uživatele (obvykle pomocí JavaScriptu).</li><li>Příklady: <code>aria-expanded="false"</code> (označuje, že rozbaľovací prvek je zabalený), <code>aria-hidden="true"</code> (skryje prvek před čtečkou), <code>aria-disabled="true"</code> (označuje, že prvek je neaktivní).</li></ul><blockquote>📚 Více informací o správném používání ARIA najdete v <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">dokumentaci MDN</a>.</blockquote>&nbsp;<blockquote>⚠️ Standardní HTML tagy obvykle nevyžadují implementaci atributů ARIA, ale vlastní řešení vyžadují zvýšenou pozornost. Obvykle pro nestandardní funkce, např. dialog, swiper, datepicker nebo další, používáme knihovny třetích stran. Ujistěte se, že tyto knihovny implementují správné atributy ARIA.</blockquote>

<h2 style="margin-left:0px;">3. Důležité vlastnosti stránky</h2><h4>1. Vyplněný název stránky &lt;title&gt;</h4>Každá HTML stránka musí mít v sekci <code>&lt;head&gt;</code> unikátní a popisný element <code>&lt;title&gt;</code>. Dobrý název je jedinečný, stručný a výstižný. Držte se následujících doporučení:<ul><li>Dejte stránku do kontextu: Vždy uveďte název konkrétní podstránky i název celého webu. Osvědčený formát je: <code>Specifický název stránky | Název webu</code>.</li><li>Buďte konkrétni: Namísto "Služby" použijte "Grafický design | Kreativní Studio". Namísto "Profil" použijte "Profil Jana Nováka | Naše Firma".</li><li>Nejdůležitější na začátek: Jelikož názvy bývají v záložkách a ve výsledcích vyhledávání zkráceny, nejdůležitější informace (název konkrétní stránky) umístěte na začátek.</li><li>Stručnost: Ideální délka je přibližně 50-60 znaků, aby se název zobrazil celý ve výsledcích vyhledávání.</li></ul><h4>2. Vyplněný lang atribut v html tagu</h4><ul><li>Aplikace musí mít programově určený hlavní jazyk obsahu (např. čeština, <code>lang="cs"</code>). To umožňuje asistenčním technologiím, jako jsou čtečky obrazovky, správně interpretovat a vyslovovat text.</li><li>Když měníme jazyk stránky (např. přes dropdown v menu), tak je třeba dynamicky upravit i <code>lang</code> pomocí JavaScriptu</li></ul><h4>3. Část stránky v jiném jazyce</h4><ul><li>Pokud se v textu nachází slovo, fráze nebo odstavec v jiném jazyce, než je hlavní jazyk stránky, tento úsek musí být také označen pomocí <code>lang</code> atributu.</li></ul><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="cs"&gt; ✅ Vyplněný lang atribut v html tagu
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Webdesign na míru | Název Firmy&lt;/title&gt; ✅ Vyplněný title
 &lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Naše služby v oblasti webdesignu&lt;/h1&gt;
 &lt;p&gt;Nabízíme moderní a přístupné webové stránky...&lt;/p&gt;
 
 &lt;blockquote lang="en"&gt; ✅ Pokud je text v jiném jazyce než celá stránka
	 &lt;p&gt;The only way to do great work is to love what you do.&lt;/p&gt;
	 &lt;footer&gt;- Steve Jobs&lt;/footer&gt;
		&lt;/blockquote&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<h2>4. Navigace pomocí klávesnice a focus</h2>Ne všichni používají myš k navigaci na webu. Někteří nemohou myš používat kvůli nemoci, zkušení uživatelé ovládají web pomocí klávesnice nebo na televizi ovládáme web pomocí dálkového ovladače... Tito uživatelé se spoléhají na to, že všechny interaktivní prvky na webu, např. tlačítka, odkazy nebo formuláře, mají svůj focus stav.Asi by se vám nelíbilo, kdyby se na webu nezobrazoval kurzor. Často to však děláme pro uživatele, kteří se na webu orientují pomocí klávesnice.<pre><code class="language-typescript">body {
 cursor: none; /* tohle byste na webu určitě neudělali */
}

:focus {
 outline: none; /* takže, prosím, nedělejte ani toto */
}</code></pre><code>:focus</code> má však jednu vlastnost, která nutí vývojáře <code>outline</code> mazat. Při kliknutí myší, např. na tlačítko, se kolem něj zobrazuje rámeček, což nevypadá dobře. V moderních prohlížečích můžeme tento problém snadno vyřešit, pokud místo <code>:focus</code> použijeme <code>:focus-visible</code>. Tento selektor již podporují všechny moderní prohlížeče a díky němu se rámeček zobrazuje pouze při navigaci pomocí klávesnice (zaměřujeme se na tlačítko pomocí klávesy <code>Tab</code>).Je třeba dbát na to, aby byl focus stav dostatečně vizuálně odlišen:<ul><li>Focus je alespoň <code>2px</code> tlustý a musí mít kontrast 3:1 (úroveň AAA).</li></ul>

<ul><li>Focus stav pro formulářová pole by měl změnit také tloušťku rámečku. Změna barvy by neměla být jediným způsobem, jak odlišit stav aktivního pole.</li></ul>

<ul><li>Focus klávesnice není zcela překrytý jiným obsahem (úroveň AA). Focus není vůbec překrytý obsahem (úroveň AAA)</li></ul>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/nespravny_priklad_13047fc31e.png" alt="nesprávny príklad.png">&nbsp;<ul><li>Obvykle chceme vlastní styl pro focus stav, který lépe ladí s naším designem. V takovém případě můžeme přepsat výchozí styl prohlížeče:</li></ul><pre><code class="language-css">// Príklad ako si vieme pridať vlastný štýl pre focus stav

button:focus-visible {
 outline: 3px solid deepskyblue;
 outline-offset: 3px;
}</code></pre>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/focuv_stav_priklad_5896cbf56f.gif" alt="focuv stav príklad.gif"><h3>Tabindex</h3>Interaktivní prvky, např. tlačítka, pole formulářů nebo odkazy, jsou tabulovatelné a není třeba nic dodatečně implementovat. Pokud toho chceme dosáhnout např. pro <code>&lt;div&gt;</code> můžeme mu přiřadit <code>&lt;div tabindex="0"&gt;</code>. Tuto možnost můžeme využít např. v interaktivních grafech, které v HTML nemají reprezentativní tag. Pokud chceme dosáhnout opačného efektu, tedy vypnout interaktivitu (nemůžeme označit prvek pomocí klávesy <code>Tab</code>) použijeme <code>tabindex="-1"</code>. Pro <code>tabindex</code> bychom neměli používat žádné jiné hodnoty, protože mění pořadí prvků, což obvykle nechceme.<h3>DOM určuje pořadí</h3>Pořadí tabulátoru se řídí pořadím prvků v HTML (DOM), nikoli vizuálním rozložením, které vytváříte pomocí CSS (např. <code>flex-direction: column-reverse</code> nebo <code>order</code>). Focus order při navigaci klávesnicí musí být logický a odpovídat vizuálnímu uspořádání stránky.<blockquote>K tomuto tématu doporučuji přečíst článek <a href="https://hidde.blog/indicating-focus-to-improve-accessibility/">Indicating focus to improve accessibility</a>.</blockquote>

<h2>5. Odkazy na přeskočení</h2>Cílem odkazů pro přeskočení je umožnit lidem přeskočit opakující se sekce nebo bloky obsahu na webových stránkách a usnadnit jim přístup k hlavnímu obsahu stránky. Nejčastějším příkladem je přeskočení hlavní navigace. Pro lidi, kteří používají navigaci pomocí klávesnice, je frustrující, když se na každé stránce musí proklikávat všemi odkazy.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/skip_to_content_c4e4104d50.png" alt="skip to content.png">&nbsp;Jak správně implementovat odkaz skip to content:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="cs"&gt;
&lt;head&gt;...&lt;/head&gt;
&lt;body&gt;
 &lt;a href="#main-content" class="skip-link"&gt;Přejít na hlavní obsah&lt;/a&gt;

 &lt;header&gt;
 &lt;nav&gt;
 &lt;a href="/"&gt;Domů&lt;/a&gt;
 &lt;a href="/o-nas"&gt;O nás&lt;/a&gt;
 &lt;a href="/kontakt"&gt;Kontakt&lt;/a&gt;
 &lt;/nav&gt;
 &lt;/header&gt;

 &lt;main id="main-content"&gt;
 &lt;h1&gt;Vítejte na naší stránce&lt;/h1&gt;
 &lt;p&gt;Toto je hlavní obsah, ku kterému se uživatel dostane po kliknutí na odkaz.&lt;/p&gt;
 &lt;a href="/example"&gt;Další odkaz v obsahu&lt;/a&gt;
 &lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code class="language-css">.skip-link {
 /* Vizuální skrytí odkazu mimo obrazovku */
 position: absolute;
 left: -999px;
 top: -999px;
 
 /* Stylujte podle designu stránky, např... */
 padding: 20px;
 backround-color: #FFF
 color: primary;
 font-size: 1.2em;
}

.skip-link:focus {
 /* Zviditelnění odkazu, když dostane fokus (např. klávesou Tab) */
 position: absolute; /* Nebo 'fixed', podle potřeby */
 top: 0px;
 left: 0px;
}</code></pre><blockquote>ℹ️ Inspirujte se například webem: <a href="https://www.smashingmagazine.com/">smashingmagazine</a>. Po načtení stránky stiskněte klávesu <code>Tab</code>. V levém horním rohu se zobrazí: <code>Skip to main content</code>.</blockquote>&nbsp;<blockquote>⚠️ Nepoužívejte v Next.js <code>&lt;Link&gt;</code> komponent, ale použijte klasický natívny HTML <code>&lt;a&gt;</code> tag. <code>Link</code> nesprávně implementuje změnu focus stavu. Více informací v <a href="https://github.com/vercel/next.js/issues/49386">GitHub issue</a>.</blockquote>

<h2>6. Prázdné odkazy a tlačítka</h2>Každý interaktivní prvek na stránce, např. tlačítka nebo odkazy, musí mít srozumitelný název. Často se stává, že např. odkazy obsahují pouze ikonu, ale žádný text. Čtečka obrazovky tak nevidomým uživatelům nedokáže přečíst, o jaký odkaz se jedná.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Prazdne_tlacidla_d9f0f4ec36.png" alt="Prázdne tlačidlá.png">&nbsp;Pomocí tagu <code>&lt;span&gt;</code>, který skryjeme CSS-kom, avšak pro čtečky obrazovky zůstane tento text stále viditelný, můžeme zobrazit popis pro tlačítka čistě se svg ikonami.<pre><code class="language-css">// CSS
.sr-only {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}</code></pre><pre><code class="language-html">&lt;!-- HTML --&gt;
&lt;a href="https://twitter.com"&gt;
 &lt;svg aria-hidden="true" ...&gt;&lt;/svg&gt;
 &lt;span class="sr-only"&gt;Twitter&lt;/span&gt;
&lt;/a&gt;</code></pre>Na <code>svg</code> element jsme použili atributy <code>aria-hidden="true"</code>. Ikony na webu slouží primárně jako vizuální pomůcka, pro nevidomé však nemají žádný význam a zbytečně zahlcují důležitější obsah, např. text v tlačítku.<blockquote>📚 Více informací o metodě skrytí vizuálního obsahu najdete na webu <a href="https://webaim.org/techniques/css/invisiblecontent/">WebAIM</a>.</blockquote><h3>Nevhodné popisy odkazů/tlačítek</h3><ul><li>U tlačítka nebo odkazu je důležité popsat, co se stane po kliknutí. Častý příklad:</li></ul><img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/nespravny_popis_buttonu_cs_5c95b2eedb.png" alt="nesprávny popis buttonu-cs.png"><pre><code class="language-html">// Špatné příklady ❌
&lt;button&gt;Facebook&lt;/button&gt;
&lt;button&gt;LinkedIn&lt;/button&gt;

// Dobré příklady ✅
&lt;button&gt;Zdílet článek na Facebooku&lt;/button&gt;
&lt;button&gt;Zdílet článek na LinkedIn&lt;/button&gt;</code></pre><ul><li>Dalším častým problémem jsou odkazy, které nemají žádnou informační hodnotu. Např. klikni sem, čítaj více atd. Čtečky obrazovky umí uživateli přečíst seznam všech odkazů na stránce, aby se mohl rychleji orientovat. Pokud mu však čtečka pětkrát za sebou přečte odkaz „čti více“, uživatel netuší, kam odkaz směřuje.</li></ul><pre><code class="language-html">// Špatné příklady ❌
&lt;a href="https://www.goodrequest.com/blog"&gt;Click here&lt;/a&gt;
&lt;a href="https://www.goodrequest.com/blog"&gt;Learn more&lt;/a&gt;
&lt;button&gt;Edit&lt;/button&gt;</code></pre>Ideálním řešením je poskytnout smysluplný text pro tento odkaz/tlačítko. Pokud se tomu nemůžeme vyhnout, můžeme použít skrytý <code>&lt;span&gt;</code> element:<pre><code class="language-html">&lt;a href="/blog"&gt;
	Show more
	&lt;span class="sr-only"&gt;blog articles&lt;/span&gt;
&lt;/a&gt;

&lt;a href="/blog/{article.url}"&gt;
	Read more
	&lt;span class="sr-only"&gt;about {article.name}&lt;/span&gt;
&lt;/a&gt;

&lt;!-- Často tlačítka v tabulkách --&gt;
&lt;button onClick={handleChangeAddress(user.id)}&gt;
	Edit
	&lt;span class="sr-only"&gt;address for user {user.name}&lt;/span&gt;
&lt;/a&gt;</code></pre>Pokud potřebujete kompletně přepsat obsah tlačítka pro čtečku obrazovky, můžete použít atribut <code>aria-label</code>, ale dávejte pozor, aby se text v <code>aria-label</code> shodoval s viditelným textem.<pre><code class="language-html">✅ SPRÁVNE: 
&lt;a href="url" aria-label="Read more about accessibility"&gt;Read more&lt;/a&gt;
&lt;button aria-label="Odeslat přihlášku"&gt;Odeslat&lt;/button&gt;

❌ ŠPATNĚ (text se neshoduje): &lt;button aria-label="Potvrdit formulář"&gt;Odeslat&lt;/button&gt;</code></pre><blockquote>📚 Více o správném popisu odkazů naleznete ve <a href="https://aaardvarkaccessibility.com/wcag-plain-english/2-4-4-link-purpose-in-context/">WCAG specifikaci</a>.&nbsp;</blockquote>

<h2>7. Přístupnost formulářů</h2><h3>Ovládání pomocí klávesnice</h3>Formuláře na webu by měly být, stejně jako jiné interaktivní prvky, přístupné pomocí klávesnice. Například mezi vstupy se můžeme pohybovat pomocí klávesy <code>Tab</code>, select by měl být možný pomocí šipek nahoru/dolů nebo checkbox označit mezerou.<h3>Označení inputů</h3>Každý input musí mít přiřazen viditelný <code>&lt;label&gt;</code> element. Můžeme použít dva zápisy pomocí <code>for</code> atributu v kombinaci s <code>id</code> nebo zabalením inputu do <code>&lt;label&gt;</code> elementu.<pre><code class="language-html">&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input id="name" type="text" autocomplete="name"&gt;

&lt;!-- or --&gt;

&lt;label&gt;Name: &lt;input type="text" autocomplete="name"&gt;&lt;/label&gt;</code></pre><h3>Seskupování</h3>Checkboxy nebo radio inputy můžeme seskupit pomocí <code>&lt;fieldset&gt;</code> elementu a přiřadit jim popis pomocí <code>&lt;legend&gt;</code> elementu. Pouhé vizuální seskupení inputů však není dostačující pro osoby, které používají čtečku obrazovky.<pre><code class="language-html">&lt;fieldset&gt;
 &lt;legend&gt;Select your pizza toppings:&lt;/legend&gt;
 &lt;input id="ham" type="checkbox" name="toppings" value="ham"&gt;
 &lt;label for="ham"&gt;Ham&lt;/label&gt;&lt;br&gt;
 &lt;input id="mushrooms" type="checkbox" name="toppings" value="mushrooms"&gt;
 &lt;label for="mushrooms"&gt;Mushrooms&lt;/label&gt;&lt;br&gt;
 &lt;input id="olives" type="checkbox" name="toppings" value="olives"&gt;
 &lt;label for="olives"&gt;Olives&lt;/label&gt;
&lt;/fieldset&gt;</code></pre><h3>Zpracování chyb a validace</h3><ul><li>Pokud chceme označit input jako povinný, můžeme přidat atribut <code>required</code> nebo <code>aria-required="true"</code>. Označit ho hvězdičkou nestačí, protože ne všechny čtečky obrazovky rozpoznají, že se jedná o povinný input.</li></ul><pre><code class="language-html">&lt;input id="name" type="text" required&gt;

&lt;!-- or --&gt;

&lt;input id="name" type="text" aria-required="true"&gt;</code></pre><ul><li>Pro zrakově postižené nestačí vizuálně zvýraznit neplatný vstup, např. červenou barvou. K tomu slouží atribut <code>aria-invalid="true"</code>, díky kterému čtečka obrazovky oznámí uživateli chybný stav.</li></ul><pre><code class="language-html">&lt;input id="name" type="text" aria-invalid="true"&gt;</code></pre><ul><li>Propojte chybovou zprávu s polem pomocí <code>aria-describedby</code>. Hodnota <code>aria-describedby</code> je <code>id</code> elementu, který obsahuje chybovou zprávu. Čtečky obrazovky poté přečtou label pole, jeho typ, hodnotu a následně i chybovou zprávu.</li></ul><pre><code class="language-html">&lt;label for="emailUzivatele"&gt;E-mail:&lt;/label&gt;
&lt;input aria-describedby="emailChyba" aria-invalid="true" id="emailUzivatele" type="email" name="email"&gt;
&lt;div id="emailChyba" class="error-message"&gt;
 Zadejte platnou e-mailovou adresu.
&lt;/div&gt;</code></pre><ul><li>Po odeslání formuláře s chybami přesuňte fokus na první chybné pole nebo na souhrn chyb. To pomáhá uživatelům klávesnice a čteček obrazovky rychle najít problémy.</li></ul><blockquote>📚 Podrobně zpracované informace o přístupnosti formulářů najdete na <a href="https://webaim.org/techniques/forms/">WebAIM</a>.</blockquote>

<h2>8. Stavová hlášení a notifikace</h2>Na webu některé akce nezpůsobují úplné znovunačtení stránky. Uživatel může:<ul><li>Přidat produkt do nákupního košíku.</li><li>Vidět, jak se na stránce objeví výsledky vyhledávání.</li><li>Odeslat formulář, který se uloží bez přesměrování.</li><li>Narazit na chybu po provedení akce.</li></ul>Vidící uživatel tyto změny vnímá vizuálně. Uživatel čtečky obrazovky se však nedozví, že se něco stalo.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Oznamenie_87728ea127.png" alt="Oznámenie.png">&nbsp;<h3>Jak technicky implementovat hlášení pro screen reader?</h3><h4>1. varianta je nastavit atribut role:</h4><pre><code class="language-html">&lt;!-- automaticky přidává aria-live="polite" a aria-atomic="true" --&gt;
&lt;div role="status"&gt; {{announcementString}} &lt;/div&gt;

&lt;!-- automaticky přidává aria-live="assertive" a aria-atomic="true" --&gt;
&lt;div role="alert"&gt; {{announcementString}} &lt;/div&gt;</code></pre>Pro běžná (neurgentní) hlášení: <code>role="status"</code>Čtečka zprávu přečte, když právě nesděluje jiný obsah (je iddle). Toto je volba pro 95% případů.<ul><li>„Položka byla přidána do vašeho košíku.“</li><li>„Váš profil byl aktualizován.“</li><li>„Zobrazuje se 25 výsledků vyhledávání pro ‚notebooky’.“</li><li>„Zpráva byla úspěšně odeslána.“</li></ul>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/priklad_oznamenia_73d63260f6.png" alt="príklad oznámenia.png">&nbsp;Pro urgentní hlášení: <code>role="alert"</code>Pro kritické chyby nebo časově omezená varování, kde je nutná okamžitá pozornost uživatele, je varování oznámeno ihned a nečeká, až bude čtečka obrazovky idle.<h4>2. varianta je explicitně použít aria-live a aria-atomic (doporučená):</h4><ul><li><code>aria-live</code>:<ul><li><code>"polite"</code>: Oznámí změnu když se nic jiného neděje.</li><li><code>"assertive"</code>: Okamžitě přeruší uživatele a oznámí změnu.</li></ul></li><li><code>aria-atomic</code>:<ul><li><code>"true"</code>: Přečte celý obsah elementu.</li><li><code>"false"</code>: Přečte pouze změněnou část.</li></ul></li></ul><pre><code class="language-html">&lt;div aria-live="polite" a aria-atomic="true"&gt;&lt;/div&gt; &lt;!-- totéž jako role="status" --&gt;
&lt;div aria-live="assertive" a aria-atomic="true"&gt;&lt;/div&gt; &lt;!-- totéž jako role="alert" --&gt;</code></pre>Další příklady jak použít <code>aria-live</code> a <code>aria-atomic</code>:<pre><code class="language-html">&lt;!-- aria-atomic="false", protože chceme oznamovat jen nové zprávy --&gt;
&lt;div id="chat-log" aria-live="polite" aria-atomic="false"&gt;
 &lt;p&gt;Jane Doe: Hi everyone!&lt;/p&gt;
 &lt;p&gt;John Smith: Hello there!&lt;/p&gt; 
&lt;/div&gt;

&lt;ul id="live-scores" aria-live="polite" aria-atomic="false"&gt;
 &lt;li&gt;Team A vs. Team B: 1-0&lt;/li&gt;
 &lt;li&gt;Goal! Team A scores. The score is now 2-0.&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- aria-atomic="true",protože chceme oznamovat celý text a ne jen změny --&gt;
&lt;div id="search-summary" aria-live="polite" aria-atomic="true"&gt;
 Showing 15 of 240 products.
&lt;/div&gt;

&lt;div id="stepper-status" aria-live="polite" aria-atomic="true"&gt;
 Step 2 of 5: Shipping Details
&lt;/div&gt;

&lt;div id="toast-notification" aria-live="polite" aria-atomic="true"&gt;
 File saved successfully.
&lt;/div&gt;


&lt;!-- aria-live="assertive", protože chceme oznámit kritickou chybu --&gt;
&lt;div aria-live="assertive" aria-atomic="true"&gt;
 An unknown error occurred while saving your changes. Try again.
&lt;/div&gt;

&lt;div aria-live="assertive" aria-atomic="true"&gt;
 Connection to server lost. Your changes may not be saved.
&lt;/div&gt;</code></pre>Příklad jak udělat přístupný search:<pre><code class="language-typescript">function AccessibleSearch() {
 const [searchStatusMessage, setSearchStatusMessage] = useState('');

 const handleSearch = (searchTerm: string) =&gt; {
 // Search logic here
 setSearchStatusMessage(`${resultsCount} results found for ${searchTerm}`)
 };

 return (
 &lt;&gt;
 {/* 1. Use a form with role="search" for a landmark */}
 &lt;form role="search" onSubmit={handleSearch}&gt;
 {/* 2. Connect the label to the input */}
 &lt;label htmlFor="search-input"&gt;Search our site&lt;/label&gt;
 &lt;input
 type="search"
 value={searchTerm}
 onChange={(e) =&gt; setSearchTerm(e.target.value)}
 /&gt;
 &lt;button type="submit"&gt;Search&lt;/button&gt;
 &lt;/form&gt;

 {/* 3. ARIA live region to announce status updates */}
 &lt;ScreenReaderOnlySC role="status"&gt;{searchStatusMessage}&lt;/ScreenReaderOnlySC&gt;
 &lt;/&gt;
 );
}</code></pre><blockquote>ℹ️ <a href="https://mantine.dev/x/notifications/">Mantine notifikace</a> implementují ARIA Live Regions a korektně oznamují čtečkám obrazovky obsah notifikace.</blockquote>

<h2>9. Jasné chybové hlášení</h2>Chyby musí být jasně označeny a popsány uživateli. Pokud uživatel udělá chybu při vyplňování webového formuláře, všechny chyby, které udělal, musí být jasně identifikovatelné. Chybová zpráva by měla přesně uvádět, co se pokazilo a jak to opravit.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/error_hlasky_8583a0d93a.png" alt="error hlášky.png">&nbsp;Několik příkladů užitečných chybových hlášení:<ul><li>Pokud musí vstup odpovídat sadě povolených hodnot, mělo by chybové hlášení obsahovat povolené možnosti.</li><li>Popište, jak by měly správné údaje a formátování vypadat.</li><li>Zobrazte podobné správné hodnoty a vysvětlete, jak je zadat.</li></ul><img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/error_hlasenie_8b22b9fc68.png" alt="error hlásenie.png"><h3>Jasná zpětná vazba po úspěšném odeslání</h3>Poskytnutí jasné zpětné vazby po úspěšném odeslání formuláře dává uživatelům potvrzení, že nemusí procházet formulář nebo stránku a hledat chyby. Zobrazením jasné a konzistentní zpětné vazby mohou uživatelé rychle pochopit, že jejich akce byla dokončena.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Priklad_spravneho_hlasenia_cs_d699021dfd.png" alt="Príklad správneho hlásenia-cs.png">

<h2>10. Gesta</h2>Každá akce, která vyžaduje složité gesto (potažení, přiblížení špetkou, tahání, třes, naklánění), musí být vykonatelná i jednoduchou akcí, například klepnutím na tlačítko nebo stisknutím klávesy. Žádná funkce se nesmí spoléhat pouze na pohybová gesta. Pohybové ovládání může být doplněk, ale nikdy ne jediný způsob, jak něco udělat.Příklady:<ul><li>Carousel: Kromě potažení (swipe) přidejte i viditelné šipky <code>Další</code> a <code>Zpět</code>.</li><li>Slider: Kromě tažení posuvníku přidejte také tlačítka pro postupné zvýšení/snížení hodnoty nebo ověřte, že funguje ovládání šipkami na klávesnici.</li><li>Mapa: Kromě přiblížení špetkou (pinch-to-zoom) přidejte také tlačítka <code>+</code> a <code>-</code>.</li></ul>

<ul><li>Kanban boards: V detailu karty můžeme změnit status např. pomocí dropdownu a změnit stav z "To Do" na "In Progress" nebo použitím <a href="https://docs.dndkit.com/guides/accessibility">knihovny</a>, která implementuje drag&amp;drop pomocí klávesnice.</li><li>Gesta „potřesením vrátit zpět“: Použijte tlačítka nebo odkazy k dosažení stejné funkčnosti.</li></ul>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/gesta_potrasenim_spaet_9bb11ced16.png" alt="gestá-potrasením späť.png">

<h2>11. Další pravidla</h2><ul><li>Focus trap: Nesmí nastat situace, kdy otevřete např. modální okno, cookie banner, video… pomocí klávesnice a nemůžete se vrátit zpět na stránku odkud jste přišli. Vždy musí být dostupný close button nebo funkční klávesa ESC na modálním okně. Nemůžeme spoléhat jen na kliknutí mimo modální okno.</li><li>Klávesové zkratky tvořené jedním znakem (například stisk písmene "M" pro ztlumení zvuku): Web musí poskytnout mechanismus na vypnutí zkratky, její přemapování na kombinaci s modifikační klávesou (například Ctrl nebo Alt), nebo zajistit, že je aktivní pouze tehdy, když má fokus konkrétní prvek na stránce. Cílem je zabránit uživatelům v nechtěném spouštění asistenčních technologií, když se navigují na webu pomocí klávesnice.</li><li>Důležité formuláře, jako například právní smlouva nebo předkládání finančních informací, nabízejí možnost zkontrolovat zadané informace před odesláním: Zobrazte stránku s přehledem, která shrne všechny údaje zadané uživatelem a nabídne možnost upravit údaje nebo vrátit se zpět k editování.</li><li>Před odstraněním nebo úpravou důležitých údajů/souborů zobraz potvrzení: Ideální pokud má uživatel možnost obnovit soubor po smazání nebo má možnost vrátit akci zpět.</li></ul>

Every website should be designed to be accessible to everyone, from experienced users to people using assistive technologies. To ensure this consistently and without compromise, we need clearly defined rules.

Web accessibility made simple: A practical checklist for developers

Každý web by mal byť navrhnutý tak, aby bol dostupný všetkým, od skúsených používateľov až po ľudí využívajúcich asistívne technológie. Aby sme to dokázali zabezpečiť konzistentne a bez kompromisov, potrebujeme jasne definované pravidlá.

Prístupný web jednoducho: Praktický checklist pre developerov

Ilustrácia webového rozhrania s textovým obsahom, obrázkom hory a ikonami znázorňujúcimi prístupnosť – zvukové vlny, ucho a text v Braillovom písme.

Prístupný web jednoducho hero.png

Prístupný web jednoducho thumb.png

Každá webová stránka by měla být navržena tak, aby byla přístupná všem, od zkušených uživatelů až po osoby využívající asistenční technologie. Abychom toho mohli dosáhnout konzistentně a bez kompromisů, potřebujeme jasně definovaná pravidla.

 Přístupný web jednoduše: Praktický checklist pro developery

Jsme důvěryhodným partnerem, který vám pomůže objevit a využít nové obchodní příležitosti, vytvořit špičkové digitální produkty a podpořit dlouhodobý růst vaší značky.

Odborníci na

Jsme digitální studio s více než desetiletými zkušenostmi s vytvářením udržitelných digitálních produktů pro firmy od startupů až po lídry v oboru. Naše práce přináší trvalou hodnotu, skutečnou konkurenční výhodu a je zaměřena na dlouhodobý růst.

Naše projekty

Přeměna nápadů v dlouhodobý úspěch

Testimonials

Co děláme

Definujeme a ověříme váš nápad na produkt

Produkt

Úspěšné a udržitelné produkty žijí na průsečíku lidských a obchodních potřeb. Abychom vytvořili úspěšný produkt, věnujeme čas důkladnému pochopení vaší cílové skupiny a obchodních cílů, než podnikneme další kroky.

Vynikající výsledky díky výzkumu a designu

Design

Naši certifikovaní designéři UX/UI úzce spolupracují s vašimi uživateli, aby pochopili jejich potřeby, chování a preference. Provádějí průzkum uživatelů, aby poznali jejich skutečné názory, a mohli tak vytvářet kvalitní a adresné produkty.

Kvalitní vývoj mobilních a webových aplikací

Vývoj

Od roku 2013 jsme dodali více než 200 úspěšných mobilních a webových aplikací. Naši testeři a vývojáři získali prestižní certifikace Citadelo, ISTQB a SOACP. Hodně investujeme do profesního rozvoje našich lidí, aby mohli vytvářet kvalitní a spolehlivé digitální produkty.

Škálovaní

Uvedení digitálního produktu na trh je teprve začátek. Produkty stavíme na spolehlivých a škálovatelných platformách, takže můžeme zaručit, že budou i nadále růst spolu s vaším podnikáním.

Odborníci na
softvérdigitálne produktyvývoj aplikacíproduktový dizajne-commercefintech

Naše projekty

Přeměna nápadů v dlouhodobý úspěch

Vytvoření špičkového mobilního rozhraní pro lídra bankovních inovací Tatra banku

Návrh atraktivního rozhraní pro nejprestižnější slovenský ekonomický časopis Forbes

Konzistentní online zážitek pro Fitshaker, největší fitness komunitu v zemi.

Zavedení nástroje pro zpětnou vazbu pro tisíce zaměstnanců společnosti Kia Slovakia

Modernizace a zefektivnění kosmetických salonů pro společnost Notino

Testimonials

Co děláme

Produkt

Definujeme a ověříme váš nápad na produkt

Blog

Buďte o krok napřed před ostatními

Význam analytiků v úspěšných softwarových projektech

Praktický průvodce vizuální přístupností

Přístupný web jednoduše: Praktický checklist pro developery

Odborníci na softvérdigitálne produktyvývoj aplikacíproduktový dizajne-commercefintech

Naše projekty

Přeměna nápadů v dlouhodobý úspěch

Vytvoření špičkového mobilního rozhraní pro lídra bankovních inovací Tatra banku

Návrh atraktivního rozhraní pro nejprestižnější slovenský ekonomický časopis Forbes

Konzistentní online zážitek pro Fitshaker, největší fitness komunitu v zemi.

Zavedení nástroje pro zpětnou vazbu pro tisíce zaměstnanců společnosti Kia Slovakia

Modernizace a zefektivnění kosmetických salonů pro společnost Notino

Testimonials

Co děláme

Produkt

Definujeme a ověříme váš nápad na produkt

Blog

Buďte o krok napřed před ostatními

Význam analytiků v úspěšných softwarových projektech

Praktický průvodce vizuální přístupností

Přístupný web jednoduše: Praktický checklist pro developery

Odborníci na
softvérdigitálne produktyvývoj aplikacíproduktový dizajne-commercefintech