Web-Dev-For-Beginners/translations/cs/1-getting-started-lessons/3-accessibility/assignment.md

Komplexní audit přístupnosti webových stránek

Pokyny

V tomto úkolu provedete profesionální audit přístupnosti skutečné webové stránky, přičemž využijete principy a techniky, které jste se naučili. Tato praktická zkušenost prohloubí vaše porozumění bariérám přístupnosti a jejich řešením.

Vyberte si webovou stránku, která má zjevné problémy s přístupností – to vám poskytne více příležitostí k učení než analýza již dokonalé stránky. Dobrou volbou jsou starší webové stránky, složité webové aplikace nebo stránky s bohatým multimediálním obsahem.

Fáze 1: Strategické manuální hodnocení

Než začnete používat automatizované nástroje, proveďte komplexní manuální hodnocení. Tento přístup zaměřený na člověka často odhalí problémy, které nástroje přehlédnou, a pomůže vám pochopit skutečné uživatelské zkušenosti.

🔍 Základní kritéria hodnocení:

Navigace a struktura:

• Lze procházet celou stránku pouze pomocí klávesnice (Tab, Shift+Tab, Enter, Space, šipky)?
• Jsou indikátory zaměření jasně viditelné na všech interaktivních prvcích?
• Vytváří struktura nadpisů (H1-H6) logický obsahový přehled?
• Jsou k dispozici odkazy pro přeskočení na hlavní obsah?

Vizualní přístupnost:

• Je na stránce dostatečný kontrast barev (minimálně 4,5:1 pro běžný text)?
• Spoléhá se stránka pouze na barvu při sdělování důležitých informací?
• Mají všechny obrázky vhodný alternativní text?
• Zůstává rozvržení funkční při přiblížení na 200 %?

Obsah a komunikace:

• Jsou na stránce odkazy typu „klikněte zde“ nebo nejasné texty odkazů?
• Lze obsah a funkčnost pochopit bez vizuálních podnětů?
• Jsou formulářová pole správně označena a seskupena?
• Jsou chybové zprávy jasné a užitečné?

Interaktivní prvky:

• Fungují všechny tlačítka a ovládací prvky formulářů pouze s klávesnicí?
• Jsou dynamické změny obsahu oznamovány čtečkám obrazovky?
• Dodržují modální dialogy a složité widgety správné vzory přístupnosti?

📝 Zdokumentujte své zjištění pomocí konkrétních příkladů, snímků obrazovky a URL adres stránek. Poznamenejte si jak problémy, tak i dobře provedené prvky.

Fáze 2: Komplexní automatizované testování

Nyní ověřte a rozšiřte svá manuální zjištění pomocí standardních nástrojů pro testování přístupnosti. Každý nástroj má své silné stránky, takže použití více nástrojů vám poskytne kompletní pokrytí.

🛠️ Požadované testovací nástroje:

1. Lighthouse Accessibility Audit (součást DevTools v Chrome/Edge)

   • Proveďte audit na několika stránkách
   • Zaměřte se na konkrétní metriky a doporučení
   • Zaznamenejte skóre přístupnosti a konkrétní porušení

2. axe DevTools (rozšíření pro prohlížeč - průmyslový standard)

   • Podrobnější detekce problémů než Lighthouse
   • Poskytuje konkrétní příklady kódu pro opravy
   • Testuje podle kritérií WCAG 2.1

3. WAVE Web Accessibility Evaluator (rozšíření pro prohlížeč)

   • Vizualizace přístupnostních prvků
   • Zvýrazňuje chyby i pozitivní vlastnosti
   • Skvělé pro pochopení struktury stránky

4. Analyzátory kontrastu barev

   • WebAIM Contrast Checker pro konkrétní barevné páry
   • Rozšíření pro prohlížeče pro analýzu celé stránky
   • Testování podle standardů WCAG AA a AAA

🎧 Testování skutečných asistivních technologií:

• Testování čtečky obrazovky: Použijte NVDA (Windows), VoiceOver (Mac) nebo TalkBack (Android)
• Navigace pouze klávesnicí: Odpojte myš a procházejte celou stránku
• Testování přiblížení: Testujte funkčnost při přiblížení na 200 % a 400 %
• Testování hlasového ovládání: Pokud je k dispozici, vyzkoušejte nástroje pro hlasovou navigaci

📊 Organizujte své výsledky vytvořením hlavní tabulky s:

• Popisem problému a jeho umístěním
• Úrovní závažnosti (Kritická/Vysoká/Střední/Nízká)
• Porušenými kritérii úspěchu WCAG
• Nástrojem, který problém detekoval
• Snímky obrazovky a důkazy

Fáze 3: Dokumentace komplexních zjištění

Vytvořte profesionální zprávu o auditu přístupnosti, která demonstruje vaše porozumění technickým problémům i jejich dopadu na uživatele.

📋 Požadované sekce zprávy:

1. Shrnutí (1 stránka)

   • URL webové stránky a stručný popis
   • Celková úroveň přístupnosti
   • 3 nejkritičtější problémy
   • Odhadovaný dopad na uživatele s postižením

2. Metodologie (½ stránky)

   • Přístup k testování a použité nástroje
   • Hodnocené stránky a kombinace zařízení/prohlížečů
   • Standardy, podle kterých bylo hodnoceno (WCAG 2.1 AA)

3. Podrobné zjištění (2-3 stránky)

   • Problémy kategorizované podle principů WCAG (Vnímatelné, Ovládatelné, Srozumitelné, Robustní)
   • Zahrňte snímky obrazovky a konkrétní příklady
   • Poznamenejte pozitivní prvky přístupnosti, které jste našli
   • Propojte s výsledky automatizovaných nástrojů

4. Hodnocení dopadu na uživatele (1 stránka)

   • Jak identifikované problémy ovlivňují uživatele s různými postiženími
   • Scénáře popisující skutečné uživatelské zkušenosti
   • Dopad na podnikání (právní riziko, SEO, rozšíření uživatelské základny)

📸 Sbírání důkazů:

• Snímky obrazovky přístupnostních problémů
• Záznamy obrazovky problematických uživatelských toků
• Zprávy z nástrojů (uložte jako PDF)
• Příklady kódu ukazující problémy

Fáze 4: Profesionální plán nápravy

Vypracujte strategický, prioritní plán pro řešení problémů s přístupností. Tím prokážete schopnost myslet jako profesionální webový vývojář, který se zabývá skutečnými obchodními omezeními.

🎯 Vytvořte podrobné návrhy zlepšení (minimálně 10 problémů):

Pro každý identifikovaný problém uveďte:

• Popis problému: Jasné vysvětlení, co je špatně a proč je to problematické
• Odkaz na WCAG: Konkrétní porušená kritéria úspěchu (např. „2.4.4 Účel odkazu (v kontextu) - Úroveň A“)
• Dopad na uživatele: Jak to ovlivňuje lidi s různými postiženími
• Řešení: Konkrétní změny kódu, úpravy designu nebo zlepšení procesů
• Úroveň priority: Kritická (blokuje základní použití) / Vysoká (významná bariéra) / Střední (problém použitelnosti) / Nízká (vylepšení)
• Náročnost implementace: Odhad času/komplexity (Rychlé řešení / Střední úsilí / Velká úprava)
• Ověření testování: Jak ověřit, že oprava funguje

Příklad návrhu zlepšení:

Issue: Generic "Read more" link text appears 8 times on homepage
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
User Impact: Screen reader users cannot distinguish between links when viewed in link list
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
Priority: High (major navigation barrier)
Effort: Low (30 minutes to update content)
Testing: Generate link list with screen reader - each link should be meaningful standalone

📈 Strategické fáze implementace:

• Fáze 1 (0-2 týdny): Kritické problémy blokující základní funkčnost
• Fáze 2 (1-2 měsíce): Vylepšení s vysokou prioritou pro lepší uživatelskou zkušenost
• Fáze 3 (3-6 měsíců): Vylepšení se střední prioritou a zlepšení procesů
• Fáze 4 (Průběžně): Nepřetržité monitorování a zlepšování

Hodnotící kritéria

Váš audit přístupnosti bude hodnocen na základě technické přesnosti a profesionální prezentace:

Kritéria	Výborné (90-100 %)	Dobré (80-89 %)	Dostatečné (70-79 %)	Potřebuje zlepšení (<70 %)
Hloubka manuálního testování	Komplexní hodnocení pokrývající všechny principy POUR s podrobnými pozorováními a uživatelskými scénáři	Dobré pokrytí většiny oblastí přístupnosti s jasnými zjištěními a analýzou dopadu na uživatele	Základní hodnocení klíčových oblastí s dostatečnými pozorováními	Omezené testování s povrchními pozorováními a minimálním zohledněním dopadu na uživatele
Využití nástrojů a analýza	Efektivní využití všech požadovaných nástrojů, křížové odkazy na zjištění, jasné důkazy a analýza omezení nástrojů	Využití většiny nástrojů s dobrou dokumentací, některé křížové odkazy a dostatečné důkazy	Použití požadovaných nástrojů se základní dokumentací a některými důkazy	Minimální využití nástrojů, špatná dokumentace nebo chybějící důkazy
Identifikace a kategorizace problémů	Identifikace 15+ konkrétních problémů napříč všemi principy WCAG, přesná kategorizace podle závažnosti, hluboké porozumění	Identifikace 10-14 problémů napříč většinou principů WCAG, dobrá kategorizace, solidní porozumění	Identifikace 7-9 problémů s dostatečným pokrytím WCAG a základní kategorizací	Identifikace <7 problémů s omezeným rozsahem nebo špatnou kategorizací
Kvalita a proveditelnost řešení	10+ podrobných, akčních řešení s přesnými odkazy na WCAG, realistické časové plány implementace a metody ověření	8-9 dobře vyvinutých řešení s většinou přesných odkazů a dobrými detaily implementace	6-7 základních řešení s některými detaily a obecně realistickými přístupy	<6 řešení nebo nedostatečné detaily, nerealistické implementace
Profesionální komunikace	Zpráva je výborně organizovaná, jasně napsaná, obsahuje shrnutí, používá vhodný technický jazyk a dodržuje standardy obchodních dokumentů	Dobře organizovaná s dobrou kvalitou psaní, obsahuje většinu požadovaných sekcí, vhodný tón	Přiměřeně organizovaná s přijatelnou kvalitou psaní, obsahuje základní požadované sekce	Špatná organizace, nejasné psaní nebo chybějící klíčové sekce
Aplikace v reálném světě	Prokazuje porozumění dopadu na podnikání, právním aspektům, rozmanitosti uživatelů a praktickým výzvám implementace	Ukazuje dobré porozumění praktickým aplikacím s určitým obchodním kontextem	Základní porozumění aplikacím v reálném světě	Omezené propojení s praktickými aplikacemi

Možnosti pokročilého úkolu

🚀 Pro studenty hledající další výzvu:

• Srovnávací analýza: Proveďte audit 2-3 konkurenčních webových stránek a porovnejte jejich úroveň přístupnosti
• Zaměření na mobilní přístupnost: Podrobně se zaměřte na problémy specifické pro mobilní přístupnost pomocí Android TalkBack nebo iOS VoiceOver
• Mezinárodní perspektiva: Prozkoumejte a aplikujte standardy přístupnosti z různých zemí (EN 301 549, Section 508, ADA)
• Hodnocení prohlášení o přístupnosti: Zhodnoťte existující prohlášení o přístupnosti webové stránky (pokud existuje) na základě vašich zjištění

Výstupy

Odevzdejte komplexní zprávu o auditu přístupnosti, která demonstruje profesionální analýzu a praktické plánování implementace:

📄 Požadavky na závěrečnou zprávu:

1. Shrnutí (1 stránka)

   • Přehled webové stránky a hodnocení úrovně přístupnosti
   • Souhrn klíčových zjištění s dopadem na podnikání
   • Doporučené prioritní kroky

2. Metodologie a rozsah (1 stránka)

   • Přístup k testování, použité nástroje a kritéria hodnocení
   • Hodnocené stránky/sekce a případná omezení
   • Rámec pro dodržování standardů (WCAG 2.1 AA)

3. Podrobná zpráva o zjištěních (3-4 stránky)

   • Pozorování z manuálního testování s uživatelskými scénáři
   • Výsledky automatizovaných nástrojů s křížovými odkazy
   • Problémy organizované podle principů WCAG s důkazy
   • Identifikované pozitivní prvky přístupnosti

4. Strategický plán nápravy (3-4 stránky)

   • Prioritní doporučení pro zlepšení (minimálně 10)
   • Časový plán implementace s odhady úsilí
   • Metriky úspěchu a metody ověření
   • Strategie dlouhodobé údržby přístupnosti

5. Podpůrné důkazy (Přílohy)

   • Snímky obrazovky problémů s přístupností a testovacích nástrojů
   • Příklady kódu ukazující problémy a řešení
   • Zprávy z nástrojů a souhrny auditu
   • Poznámky nebo záznamy z testování čtečky obrazovky

📊 Požadavky na formát:

• Formát dokumentu: PDF (profesionální prezentace)
• Počet slov: 2 500-3 500 slov (bez příloh a snímků obrazovky)
• Vizualní prvky: Zahrňte snímky obrazovky, diagramy a příklady
• Citace: Odkazujte na pokyny WCAG a zdroje přístupnosti vhodně

💡 Tipy pro excelenci:

• Použijte profesionální formátování zprávy s konzistentními nadpisy a stylováním
• Zahrňte obsah pro snadnou navigaci
• Vyvážte technickou přesnost s jasným, obchodně vhodným jazykem
• Prokažte porozumění technické implementaci i dopadu na uživatele

Výukové cíle

Po dokončení tohoto komplexního auditu přístupnosti si osvojíte klíčové profesionální dovednosti:

🎯 Technické kompetence:

• Mistrovství v testování přístupnosti: Znalost manuálních i automatizovaných metod testování přístupnosti
• Aplikace WCAG: Praktická zkušenost s aplikací Web Content Accessibility Guidelines na reálné scénáře
• Porozumění asistivním technologiím: Praktická zkušenost s čtečkami obrazovky a navigací pomocí klávesnice
• Mapování problémů a řešení: Schopnost identifikovat bariéry přístupnosti a vyvinout konkrétní, akční strategie nápravy

💼 Profesionální dovednosti:

• Technická komunikace: Zkušenost s psaním profesionálních zpráv o přístupnosti pro různé zainteresované strany
• Strategické plánování:

---

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. Ačkoli se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.