miroslavbartik.cz
Právní informace

Zásady přístupnosti webu

Přístupnost miroslavbartik.cz pro všechny uživatele včetně osob se zdravotním postižením.

O tomto dokumentu

Tento dokument popisuje, jak jsem při tvorbě miroslavbartik.cz postupoval, aby byl web přístupný co nejširšímu okruhu uživatelů – včetně osob se zdravotním postižením, seniorů a lidí používajících asistivní technologie.

Přístupnost není dodatečný bonus, ale základní princip, kterým se řídím při každém řádku kódu. Tento web je moje vizitka – pokud bych ho nedokázal udělat přístupným, těžko bych přesvědčoval klienty, že přístupnost umím.

Základ, ze kterého vycházím

Při tvorbě webu jsem vycházel ze standardu WCAG 2.2 na úrovni AA (Web Content Accessibility Guidelines), který vydává W3C (World Wide Web Consortium). WCAG je mezinárodně uznávaný standard pro přístupnost webu a úroveň AA je doporučovaná minimální úroveň pro veřejné weby.

WCAG stojí na čtyřech principech – web musí být:

  • Vnímatelný (Perceivable) – obsah musí být prezentován tak, aby ho uživatelé mohli vnímat alespoň jedním ze smyslů
  • Ovladatelný (Operable) – všechny funkce musí být ovladatelné různými způsoby, nejen myší
  • Srozumitelný (Understandable) – obsah a ovládání musí být srozumitelné
  • Robustní (Robust) – web musí fungovat s různými prohlížeči a asistivními technologiemi

Zákon o přístupnosti webů

Od 23. září 2020 je v České republice v platnosti zákon č. 99/2019 Sb., který transponuje evropskou směrnici 2016/2102 o přístupnosti webových stránek a mobilních aplikací. Zákon ukládá povinnost zajistit přístupnost webů subjektům veřejného sektoru – ministerstvům, úřadům, samosprávám, školám a dalším veřejným institucím.

Ačkoliv se zákon přímo nevztahuje na soukromé weby jako je miroslavbartik.cz, řídím se jím dobrovolně. Důvody jsou prosté:

  • Přístupnost je profesionální standard, ne právní povinnost – klienti, kteří potřebují přístupný web, očekávají, že ho vývojář umí
  • Evropský akt o přístupnosti (European Accessibility Act, EAA) vstupuje v platnost 28. června 2025 a rozšiřuje povinnost přístupnosti i na soukromý sektor – weby nabízející produkty a služby budou muset být přístupné
  • Přístupný web je lepší web pro všechny – čistší kód, lepší SEO, širší publikum

Jak jsem web postavil

Sémantické HTML

  • Každá stránka má logickou strukturu sémantických elementů: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
  • Nadpisy v hierarchii bez přeskoků – <h1> → <h2> → <h3>, nikoliv <h1> → <h3>
  • Seznamy jako <ul> / <ol>, nikoliv <div> s odrážkami – screen reader je oznámí jako seznam
  • Odkazy jako <a> pro navigaci, tlačítka jako <button> pro akce – sémantika určuje chování

Klávesová navigace

  • Všechny interaktivní prvky jsou dosažitelné klávesnicí (tabulátorem)
  • <a href="#main"> skip-link na začátku každé stránky – skok na hlavní obsah bez nutnosti tabulkovat přes navigaci
  • Viditelný focus outline (:focus-visible) – nikdy nezakazuji výchozí focus
  • Cíle odkazů mají min. 24×24 CSS pixelů (požadavek WCAG 2.2)
  • Mobilní menu lze otevřít a zavřít klávesnicí – focus se přesune na první odkaz, po zavření se vrátí na toggle

Kontrast a barvy

  • Kontrast text/pozadí min. 4,5:1 pro běžný text a 3:1 pro velký text – ověřeno pro světlý i tmavý režim
  • Žádná informace není sdělována pouze barvou – vždy je doplněna textem nebo ikonou
  • Accent barvy (teal, oranžová) jsou ztmaveny tak, aby splňovaly WCAG AA i na světlém pozadí

Respektování uživatelských preferencí

  • prefers-reduced-motion – animace a přechody se vypnou, pokud uživatel preferuje omezení pohybu
  • prefers-color-scheme – výchozí barevný režim podle systémového nastavení, s možností přepnutí a uložení do localStorage
  • prefers-contrast – připraveno pro uživatele s vyšším kontrastem

Obrázky a média

  • Všechny informativní obrázky mají alt text popisující účel obrázku – dekorativní obrázky mají alt=""
  • Obrázky mají atributy width a height – zabraňuje layout shift při načítání
  • loading="lazy" u obrázků mimo fold, fetchpriority="high" u LCP obrázku
  • decoding="async" u všech obrázků – nezablokuje render
  • SVG ikony mají aria-hidden="true" – screen reader je nečte, popis je v aria-label na rodičovském prvku

Formuláře

  • Každé pole má <label> svázaný přes for atribut – nejen placeholder, který zmizí při psaní
  • autocomplete atributy kde relevantní – prohlížeč nabízí uložené údaje
  • Chybové zprávy jsou srozumitelné a obsahují návrh opravy, nejen „chyba"
  • Stavové zprávy přes role="status" nebo aria-live – screen reader je oznámí bez ztráty focusu

Responsivita a reflow

  • Mobile-first přístup – základní styly pro mobil, rozšíření pro větší obrazovky
  • Fluid typografie přes clamp() – plynulé zvětšování bez skoků
  • Žádné horizontální scrollování – při zoomu 400 % se layout přeskupí do jednoho sloupce (WCAG 2.2 reflow)
  • CSS Grid s auto-fill / auto-fit a minmax() – vše se přizpůsobí automaticky
  • Container queries kde komponenty reagují na šířku rodiče, ne jen viewportu

JavaScript a progressive enhancement

  • JavaScript je pouze progressive enhancement – bez něj web funguje, jen chybí vylepšení jako animace nebo kopírování kódu
  • Přepínač režimu, mobilní menu, scroll-to-top, ToC a copy button – vše má fallback pro uživatele bez JS
  • Žádné závislosti na externích frameworcích – čistý vanilla JS
  • prefers-reduced-motion vypíná všechny animace, které nelze zastavit

Co je potřeba ještě vylepšit

Přístupnost není stav, ale proces. I když se snažím dodržovat WCAG 2.2 AA, jsou oblasti, které se dají zlepšit:

  • Pravidelné testování se screen readery (NVDA, VoiceOver) – aktuálně testuji ručně, cílem je automatizované testování v CI
  • Videa a audio nahrávky – pokud je v budoucnu přidám, budou mít titulky a transkript
  • Skeleton loadery pro asynchronní obsah – plánováno jako future feature
  • Rozšířené testování s reálnými uživateli se zdravotním postižením

Pokud narazíte na něco, co je pro vás těžko dostupné nebo neprůchodné, napište mi. Beru to jako cennou zpětnou vazbu – ne jako výtku.

Kontakt

Pokud máte dotaz ohledně přístupnosti tohoto webu nebo narazíte na překážku, napište mi. Odpovím a řešení nasadím co nejdříve.

Pokud si přejete podat formální stížnost na přístupnost, můžete se obrátit na Ministerstvo vnitra ČR, které je příslušným orgánem pro zákon č. 99/2019 Sb.

Miroslav Bartík