Divi / WordPress accessibility checklist: co zkontrolovat před předáním webu klientovi

Přístupnost webu zní jako téma pro velké korporace a právníky. Ve skutečnosti je to jedna z nejpraktičtějších věcí, kterou pro klienta uděláte: přístupný web je web, který dobře čtou lidé se zrakovým omezením, ovládají ho lidé bez myši, a bonusem funguje líp i pro vyhledávače a na mobilu. A většina zásad je v Divi a WordPressu otázka pár kontrol, ne měsíců práce.

Tenhle checklist projděte předtím, než web předáte klientovi. Není vyčerpávající audit podle normy — je to praktický seznam věcí, které nejčastěji chybí a nejsnáz se opraví. Doplňuje tak proces předání webu, o kterém píšeme v článku o Divi 5 Workspaces pro předání webu klientovi.

Barvy a kontrast

Nejčastější prohřešek. Světle šedý text na bílém pozadí vypadá elegantně v návrhu, ale hůř vidoucí návštěvník ho nepřečte.

• Zkontrolujte kontrast textu vůči pozadí. Běžný text potřebuje výraznější kontrast než velké nadpisy. Pomůže kterýkoli kontrastní kontrolér, kam zadáte dvě barvy.
• Nespoléhejte jen na barvu. Odkaz poznatelný pouze barvou nebo chybové pole označené jen červeně nefunguje pro barvoslepé. Přidejte podtržení, ikonu nebo text.
• Pozor na text v obrázcích a přes fotky. Text přeložený přes fotografii ztrácí kontrast podle toho, co je pod ním. Přidejte překryv nebo podklad.

Pokud v Divi používáte Design Variables pro barevnou paletu, zkontrolujte kontrast rovnou u definice barev — opravíte ho pak na jednom místě pro celý web.

Struktura nadpisů

Nadpisy nejsou jen o velikosti písma. Pro čtečky obrazovky tvoří osnovu stránky a návštěvníci podle nich stránku procházejí.

• Jeden H1 na stránku. Obvykle hlavní nadpis, typicky název stránky nebo článku.
• Nepřeskakujte úrovně. Po H2 má jít H3, ne rovnou H5 jen proto, že se vám líbí jeho velikost. Vzhled řešte stylem, ne úrovní nadpisu.
• Nepoužívejte nadpisy jako dekoraci. Velký zvýrazněný text, který není nadpisem obsahu, udělejte stylovaným odstavcem, ne nadpisovým modulem.

Alt texty u obrázků

Alternativní text popisuje obrázek těm, kdo ho nevidí — a zobrazí se, když se obrázek nenačte.

• Obsahové obrázky potřebují popis. Krátce a věcně, co je na obrázku a proč tam je.
• Dekorativní obrázky nechte s prázdným alt textem. Čistě ozdobná grafika nemá čtečku zdržovat — prázdný alt ji nechá přeskočit.
• Nezačínejte „obrázek…". Čtečka už to oznámí sama.

Ve WordPressu se alt text zadává v knihovně médií, takže ho doplníte hromadně i zpětně.

Ovládání klávesnicí

Velká část přístupnosti se schová do jednoho testu: zkuste projít web jen klávesnicí, bez myši. Tabulátorem se posouvejte, Enterem aktivujte.

• Všechny odkazy a tlačítka jsou dosažitelné tabulátorem a v logickém pořadí.
• Je vidět, kde právě jste. Prvek ve fokusu musí být viditelně zvýrazněný. Pokud Divi nebo vlastní styl fokusový rámeček skryl, vraťte ho.
• Rozbalovací menu a modály jdou ovládat i zavřít klávesnicí, ne jen myší.

Tenhle jeden test odhalí překvapivě hodně a klientovi šetří budoucí stížnosti.

Formuláře

Formuláře jsou místo, kde přístupnost přímo ovlivňuje konverze — když je zákazník nezvládne vyplnit, odejde.

• Každé pole má viditelný popisek. Placeholder text jako jediné označení nestačí — zmizí, jakmile začnete psát.
• Chyby jsou jasně popsané. Ne jen červený rámeček, ale text, co je špatně a jak to opravit.
• Povinná pole jsou označená srozumitelně, ne jen barvou.

Odkazy a tlačítka

• Text odkazu dává smysl i vytržený z kontextu. „Klikněte zde" nebo „více" nic neřekne. Lepší je „Přečíst podmínky vrácení".
• Tlačítka jsou dost velká na dotek. Na mobilu potřebuje prst větší plochu než kurzor.
• Rozlišujte odkaz a tlačítko i vzhledem, ať návštěvník ví, co se stane.

Rychlá kontrola před předáním

Než web předáte, projděte tento minimální seznam:

Předejte klientovi i pravidla

Přístupnost není jednorázová věc — klient bude web dál plnit obsahem. Součástí předání by proto měla být krátká pravidla: doplňujte alt texty, držte strukturu nadpisů, nespoléhejte na barvu. Když to zapíšete do předávací dokumentace, web zůstane přístupný i po roce plnění obsahem. Jak takové čisté předání zvládnout procesně, rozebíráme v článku o Divi 5 Workspaces pro netechnické uživatele.

Shrnutí

Přístupný web není o normách, ale o ohleduplnosti k návštěvníkům — a shodou okolností i o lepším SEO a použitelnosti. Kontrast, struktura nadpisů, alt texty, ovládání klávesnicí a srozumitelné formuláře pokryjí většinu toho, na čem záleží. Projděte tento checklist před každým předáním a předejte klientovi i pravidla, jak přístupnost udržet.