Kontrola přístupnosti HTML (WCAG 2.2)
Kontrola přístupnosti HTML
Úryvek nebo celá stránka. Skripty se nespouštějí. Ctrl+Enter spustí kontrolu.
Kontrola potřebuje JavaScript, protože běží ve vašem prohlížeči. Bez něj si přečtěte pravidla níže nebo použijte bezplatnou kontrolu jedné stránky podle adresy.
<h1>Garden chairs</h1> <img src="chair.jpg"> <a href="/cart"><svg width="24" height="24"><path d="M2 3h3l3 12h11l3-9H6"/></svg></a> <label>Email</label> <input type="text" name="email"> <button></button> <p style="color:#999;background:#fff">Free delivery over 50 EUR.</p>
Co bylo zkontrolováno
Vložte úryvek HTML nebo celou stránku. Nástroj ji zobrazí v izolovaném rámu, spustí ve vašem prohlížeči open-source jádro axe-core a vypíše problémy podle závažnosti, každý s chybným kódem, kritériem úspěšnosti WCAG a radou, jak ho opravit. Na náš server se nic neodesílá.
Co uvidíte ve výsledku
- Problémy podle závažnosti: kritické, vážné, střední a drobné; nejčastější pravidlo jako první.
- Kritérium úspěšnosti každého problému jako odkaz, například 1.1.1 Netextový obsah, s úrovní (A nebo AA).
- Chybné prvky: selektor CSS a HTML každého z nich, abyste je v kódu našli.
- Jak to opravit z naší knihovny pravidel, v jazyce této stránky, s odkazem na úplné vysvětlení.
- „Potřebuje pohled člověka“: případy, které pravidlo nedokázalo rozhodnout, například barva na obrázku v pozadí. Zkontrolujte je ručně.
Co zůstává ve vašem počítači
Prohlížeč zpracuje vaše HTML a zobrazí je v iframe s sandbox="allow-same-origin" a přísnou politikou zabezpečení obsahu: žádný skript z úryvku se nespustí, formuláře nelze odeslat a odkazy se otevírají v nové kartě. Náhled ve výchozím stavu nenačítá obrázky ani styly z jiných webů; zapněte volbu, pokud úryvek potřebuje externí stylopis. Knihovna axe-core se při prvním kliknutí stáhne z našeho serveru a kontrola probíhá ve vašem prohlížeči. Váš kód nedostáváme.
Úryvek, nebo celá stránka
Úryvek není stránka, proto jsou pravidla o celé stránce (titulek stránky, atribut lang, orientační body, nadpis první úrovně, odkaz pro přeskočení) pro úryvky vypnutá. Vložte celý dokument začínající <!doctype html> nebo <html> a zkontrolují se také. Volba „zahrnout pravidla osvědčených postupů“ přidává rady, které WCAG nevyžaduje; odškrtněte ji, chcete-li vidět jen problémy WCAG.
Co kontrola vloženého HTML nenajde
- Co stránka přidá později. Zdrojový kód neobsahuje to, co skripty vytvoří až poté. Zkopírujte vykreslené HTML z vývojářských nástrojů („Copy outerHTML“) nebo otestujte živou adresu v kontrole WCAG.
- Styly, které jste nevložili. Barevný kontrast, rámečky fokusu a mezery v textu závisí na CSS. Barvy otestujete v kontrole kontrastu.
- Vše, co vyžaduje člověka. Zda alternativní text popisuje obrázek, zda dává smysl pořadí čtení, zda uživatel klávesnice dokončí objednávku, jak stránka zní ve čtečce obrazovky. Viz jak testovat WCAG.
Je to automatická kontrola, ne úplný audit a není to právní poradenství. Výsledek bez nálezů neznamená, že je HTML přístupné.
Není to validátor ve smyslu W3C
Validátor syntaxe HTML ověřuje, zda značky odpovídají specifikaci HTML. Tento nástroj kontroluje pravidla přístupnosti: tlačítka bez názvu, obrázky bez alternativního textu, pole formuláře bez popisku, chybné atributy ARIA. Jsou to dvě různé otázky; stránka může být platné HTML a přesto nesplnit WCAG, a naopak. WCAG 2.2 už kritérium 4.1.1 Zpracování nemá; chybné značky se počítají, pokud kazí názvy, role nebo vztahy (4.1.2, 1.3.1).
Kam se hodí
Použijte při psaní komponenty nebo při kontrole šablony od klienta. Pro živou stránku slouží kontrola WCAG, pro stránky za přihlášením rozšíření prohlížeče. Další nástroje srovnáváme v přehledu nástrojů pro testování přístupnosti. Pandus takové kontroly spouští na každé stránce vašeho webu každý týden a každý problém vysvětlí jazykem majitele.
Časté otázky
Odesílá se můj kód na server?
Ne. HTML se zobrazuje a kontroluje ve vašem prohlížeči. Z našeho serveru se načítá jen samotná stránka a skript kontroly; vložený kód se nikam neposílá.
Spouští nástroj skripty z mého HTML?
Ne. Náhled běží v izolovaném rámu bez oprávnění ke skriptům, takže vložené skripty, obslužné funkce událostí a značky script nic neudělají. Obsah, který by skripty přidaly, se proto nekontroluje.
Jaká pravidla používá?
Pravidla axe-core pro WCAG 2.0, 2.1 a 2.2 na úrovních A a AA a pravidla osvědčených postupů, pokud volbu ponecháte zapnutou. Nálezy vysvětlujeme vlastními kartami pravidel.
Je to validátor W3C?
Ne. Neověřuje syntaxi HTML, ale pravidla přístupnosti. To je jiná otázka.
Může potvrdit, že moje HTML splňuje WCAG nebo EAA?
Ne. Automatická pravidla najdou jen část problémů. Pořád je potřeba ruční kontrola s klávesnicí a čtečkou obrazovky a nástroj není právní poradenství.