♿ Přístupnost a SEO

Čtyři návštěvníci

O čem to je

Na web školy přijdou čtyři lidé. Nevidomá Jana s čtečkou obrazovky. Petr se zlomenou rukou, který ovládá počítač jen klávesnicí. Babička, která špatně vidí drobné šedé písmo. A robot vyhledávače, který stránku čte, aby ji mohl ukázat ve výsledcích hledání.

Všem čtyřem pomáhají stejné věci: dobrá struktura HTML, popisky a srozumitelný obsah. Proto se přístupnost a SEO učí spolu.

Nové pojmy

Přístupnost (accessibility, a11y)Web je přístupný, když ho mohou používat všichni lidé, i lidé se zrakovým, sluchovým, pohybovým nebo kognitivním postižením.Formulář jde vyplnit jen klávesnicí a čtečka ke každému poli přečte popisek.
Čtečka obrazovkyProgram, který nevidomému uživateli předčítá obsah obrazovky nebo ho posílá na hmatový (Braillův) řádek. Orientuje se podle struktury HTML.NVDA ve Windows, VoiceOver v macOS a iOS, TalkBack v Androidu.
SEOSearch Engine Optimization, optimalizace pro vyhledávače. Úpravy webu, které pomáhají vyhledávačům stránku pochopit a ukázat ji lidem, kteří hledají její téma.Výstižný <title> „Kroužek robotiky – SPŠ Brno“ místo „Stránka 1“.

Co potřebuje Jana (čtečka obrazovky)

  • Obrázky s výstižným alt.
  • Hierarchii nadpisů h1–h6: čtečka mezi nimi umí skákat.
  • Sémantické značky nav, main, footer: čtečka podle nich nabídne přeskok na hlavní obsah.
  • Pole formuláře s label.
  • Odkazy, které dávají smysl i vytržené: „Rozvrh 1. A“, ne „klikněte zde“.
  • Atribut lang u html, aby čtečka četla správným jazykem.

Co potřebuje Petr (jen klávesnice)

Klávesou Tab se přechází mezi odkazy, tlačítky a poli. Musí být vidět, kde právě je – tzv. fokus. Nikdy nemaž obrys fokusu (outline: none) bez náhrady. Klikací věci dělej z <button> a <a>, ne z <div>, které klávesnicí ovládat nejdou.

Co potřebuje babička (zrak)

KontrastPoměr jasu textu a pozadí. Standard WCAG pro úroveň AA chce u běžného textu aspoň 4,5 : 1, u velkého textu aspoň 3 : 1.Černá na bílé má 21 : 1. Světle šedá na bílé často neprojde.

Písmo v rem, aby šlo zvětšit. Informaci nesděluj jen barvou (červené pole = chyba); přidej i text nebo ikonu.

Co potřebuje robot vyhledávače

  • Jedinečný a výstižný <title> pro každou stránku.
  • <meta name="description"> – krátký popis, vyhledávač ho často ukáže pod odkazem.
  • Jeden h1 s hlavním tématem a logické nadpisy.
  • Čitelné URL: /krouzky/robotika, ne /page?id=8731.
  • Rychlé načítání a dobré zobrazení na mobilu.
  • Kvalitní text, který odpovídá na to, co lidé hledají.

Roztřiď opatření. Uvidíš, že hodně z nich pomáhá oběma stranám.

Odkaz zní „Více informací najdete <a>zde</a>“. Co je na něm špatně a jak ho opravit?
Čtečka umí vypsat jen seznam odkazů. Pak slyší „zde, zde, zde“ a neví kam vedou. Vyhledávač z textu odkazu taky nic nepozná. Oprava: „Přečtěte si <a>pravidla přijímacích zkoušek</a>.“
Šedý text #999 na bílém pozadí má kontrast asi 2,8 : 1. Projde úrovní AA pro běžný text?
Neprojde. AA vyžaduje u běžného textu aspoň 4,5 : 1. Text je třeba ztmavit, třeba na #595959, který má na bílé asi 7 : 1.
✗Přístupnost se týká jen pár nevidomých, nám se to nevyplatí.
✓Přístupnost pomáhá všem: lidem se zraněním, starším lidem, uživatelům na slunci s mobilem i vyhledávačům.

Postižení může být trvalé, dočasné (zlomená ruka) i situační (jedna ruka drží dítě). A u webů veřejné správy je přístupnost v ČR zákonnou povinností (zákon č. 99/2019 Sb.).

Přístupný web používá sémantické HTML, alt, label, logické nadpisy, dost kontrastu a jde ovládat klávesnicí. SEO stojí na výstižném title a description, nadpisech, čitelných URL, rychlosti a kvalitním obsahu. Obojí začíná dobrým HTML.

Audit stránky

O čem to je

Firma ti dá hotový web a chce vědět, co je potřeba opravit. Uděláš audit: projdeš stránku podle seznamu bodů a zapíšeš nálezy. Tady je ten seznam i postup.

Nové pojmy

PřístupnostVlastnost webu, že ho mohou používat i lidé s postižením zraku, sluchu, pohybu nebo s potížemi s porozuměním.Video má titulky pro neslyšící.
WCAGWeb Content Accessibility Guidelines, mezinárodní doporučení pro přístupnost od organizace W3C. Pravidla mají tři úrovně: A (minimum), AA (běžně požadovaná), AAA (nejpřísnější).Novější verze jsou WCAG 2.1 (2018) a WCAG 2.2 (2023).
Čtyři principy WCAGObsah má být vnímatelný (jde ho vidět nebo slyšet jiným způsobem), ovladatelný (i klávesnicí), srozumitelný a robustní (funguje s různými prohlížeči a čtečkami).Titulky k videu = vnímatelnost. Ovládání tabulátorem = ovladatelnost.
SEOOptimalizace pro vyhledávače: aby vyhledávač stránce porozuměl a ukázal ji lidem, kteří hledají její téma.Stránka pekárny má title „Pekárna U Lípy – chleba a koláče, Olomouc“.

Postup auditu

Projdi stránku jen klávesnicí (Tab, Shift+Tab, Enter, mezerník). Je fokus vidět? Dostaneš se všude?
Zkontroluj obrázky: mají smysluplný alt, ozdobné prázdný alt=""?
Vypiš osnovu nadpisů. Je jeden h1 a nepřeskakují se úrovně?
Zkontroluj formuláře: má každé pole label? Jsou chybové hlášky textem, ne jen barvou?
Změř kontrast textu nástrojem (např. v nástrojích pro vývojáře prohlížeče).
Spusť automatický test, např. Lighthouse v Chrome. Najde jen část problémů, ruční kontrola je nutná.
SEO: má každá stránka jedinečný title a meta description? Jsou URL čitelné? Je stránka rychlá a funguje na mobilu?
Zapiš nálezy s prioritou a návrhem opravy.
Najdi problémy: <div onclick="odeslat()">Odeslat</div> a <input placeholder="E-mail">.
1) div nejde ovládat klávesnicí a čtečka ho neoznámí jako tlačítko → použij <button type="submit">Odeslat</button>. 2) placeholder není popisek: po začátku psaní zmizí a čtečky ho nemusí přečíst → přidej <label for="mail">E-mail</label> a poli id="mail".
Všechny stránky e-shopu mají <title>E-shop</title>. Proč je to problém?
Ve výsledcích hledání i v záložkách vypadají všechny stránky stejně a vyhledávač z title nepozná, o čem stránka je. Každá má mít vlastní title, např. „Pánská bunda Alpine, modrá – E-shop Hory“. Čtečka title přečte jako první, takže pomůže i nevidomým.
  • Vnímatelný – alt u obrázků, titulky u videa, dostatečný kontrast
  • Ovladatelný – vše jde klávesnicí, viditelný fokus, dost času na úkon
  • Srozumitelný – jasný jazyk, předvídatelné chování, srozumitelné chybové hlášky
  • Robustní – validní a sémantické HTML, funguje se čtečkami

Ke každému principu si zkus vymyslet jeden příklad, pak kartu otoč.

✗Lighthouse ukázal 100 bodů za přístupnost, web je tedy přístupný.
✓Automatický test najde jen část problémů. Je potřeba i ruční kontrola: klávesnice, čtečka, smysl alt textů.

Program pozná, že alt chybí, ale ne, že alt="obrázek" nic neříká. Nepozná ani nelogické pořadí ovládání.

Audit přístupnosti vychází z WCAG (úrovně A, AA, AAA; principy vnímatelnost, ovladatelnost, srozumitelnost, robustnost): klávesnice, alt, nadpisy, label, kontrast. SEO audit kontroluje title, description, nadpisy, URL, rychlost a mobil. Automatické nástroje nestačí.
🌳DOM: práce se stránkou z JavaScriptu