Přístupnost webu (a11y): Jak vytvořit aplikaci pro všechny

Přístupnost webu (a11y): WCAG průvodce pro vibecodery

Přístupnost (accessibility, zkráceně a11y) zajišťuje, že vaše aplikace je použitelná pro všechny uživatele – včetně lidí se zrakovým, sluchovým, motorickým nebo kognitivním postižením. V ČR a EU je přístupnost čím dál více právně vyžadována a je to i dobrý business – přístupný web oslovuje o 15–20 % více uživatelů.

Proč by vibecodera měla zajímat přístupnost

• Právní požadavky – European Accessibility Act (EAA) od června 2025 vyžaduje přístupnost pro e-commerce a digitální služby
• Větší audience – 15 % populace má nějakou formu disability
• Lepší SEO – přístupné weby mají lepší semantickou strukturu, kterou Google preferuje
• Kvalitnější kód – přístupnost vynucuje správné HTML a dobré UX patterns
• Konkurenční výhoda – většina vibecoding projektů a11y ignoruje

WCAG 2.2: Co musíte vědět

WCAG (Web Content Accessibility Guidelines) definuje 4 principy přístupnosti – POUR:

1. Perceivable (Vnímatelný) – obsah musí být prezentován způsobem, který uživatel vnímá
2. Operable (Ovladatelný) – rozhraní musí být ovladatelné
3. Understandable (Srozumitelný) – obsah a ovládání musí být pochopitelné
4. Robust (Robustní) – obsah musí fungovat s různými technologiemi včetně asistivních

Praktický a11y checklist pro React aplikace

Kategorie	Co udělat	Jak v Reactu
Obrázky	Alt text na všech <img>	<img alt="Popis" />
Formuláře	Label pro každý input	<Label htmlFor="email">
Navigace	Klávesová navigace	tabIndex, onKeyDown handlers
Kontrast	Min. 4.5:1 pro text	Ověřte pomocí WebAIM checker
Nadpisy	Hierarchická struktura	h1 → h2 → h3, žádné přeskakování
Focus	Viditelný focus ring	Tailwind: focus-visible:ring-2
ARIA	Role a labels	aria-label, aria-describedby
Motion	Respektovat prefers-reduced-motion	Tailwind: motion-safe:

shadcn/ui a přístupnost

Dobrou zprávou je, že shadcn/ui (který Lovable používá) je postaven na Radix UI – jedné z nejpřístupnějších komponentových knihoven. Radix automaticky řeší:

• Keyboard navigation – Tab, Enter, Escape, Arrow keys
• ARIA atributy – role, aria-expanded, aria-selected
• Focus management – focus trapping v dialogech a dropdownech
• Screen reader support – správné announcements pro AT

Co musíte řešit sami:

• Barvy a kontrast – Radix neřeší vizuální design
• Alt texty – na obrázcích a ikonách
• Sémantické HTML – správné použití heading hierarchy, landmarks
• Custom komponenty – vše mimo shadcn/ui vyžaduje manuální a11y

Testování přístupnosti

Osvědčený testing workflow:

1. Automatické testy – axe DevTools extension, Lighthouse a11y audit
2. Keyboard test – projděte celou aplikaci pouze klávesnicí (Tab, Enter, Escape)
3. Screen reader – vyzkoušejte VoiceOver (Mac), NVDA (Windows) nebo Orca (Linux)
4. Zoom test – zvětšete stránku na 200 % a ověřte, že je stále použitelná
5. Kontrast check – WebAIM Contrast Checker pro všechny barevné kombinace

Ukázka: axe-core integrace

// Přidejte do development buildu
import React from 'react';
import ReactDOM from 'react-dom/client';

if (process.env.NODE_ENV === 'development') {
  import('@axe-core/react').then(axe => {
    axe.default(React, ReactDOM, 1000);
  });
}

Nejčastější a11y chyby a jak je opravit

• Chybějící alt text – přidejte popisný alt, pro dekorativní obrázky alt=""
• Nízký kontrast – použijte WebAIM checker, minimum 4.5:1 pro normální text
• Click handlers na divu – použijte <button> nebo <a> místo <div onClick>
• Autoplaying video/audio – nikdy bez mute, ideálně s user-initiated play
• Missing landmarks – používejte <nav>, <main>, <aside>, <footer>
• Focus not visible – nikdy neodstraňujte outline bez alternativy

AI a přístupnost

AI nástroje mohou pomoci s a11y:

• Lovable – generuje shadcn/ui komponenty s Radix a11y built-in
• Cursor – přidejte do rules "Always include ARIA labels and keyboard handlers"
• Claude/GPT – požádejte o a11y audit existujícího kódu
• GitHub Copilot – naučte ho generovat přístupný kód přes komentáře

Závěr

Přístupnost není „nice to have" – je to profesionální standard a v EU právní požadavek. Pro vibecodery je dobrá zpráva, že shadcn/ui a Radix řeší velkou část automaticky. Zaměřte se na kontrast, alt texty, keyboard navigaci a správnou HTML strukturu. Každý projekt by měl projít minimálně axe audit a keyboard test před deployem.