WordPress -Přístupnost

WordPress Accessibility: Jak vytvořit bezbariérový web

Accessibility (neboli přístupnost či bezbariérovost) ve WordPressu je důležitou součástí při vytváření webových stránek, která ještě není dostatečně prodiskutována. Jak přístupný je populární CMS? Proč je bezbariérovost tak důležitá? A jak učinit své WordPress stránky přístupnými všem?

Accessibility pro všechny: Fakta o přístupnosti

S WordPress běží více než 35 procent všech webových stránek. Webové stránky e-komerce, velké online publikace, zpravodajské kanály, blogy a obchodní webové stránky používají WordPress, protože se s ním snadno pracuje.

A právě proto, že WordPress je tak populární, má velký vliv na přístupnost webu. Téma accessibility však nestojí vždy v popředí při vývoji a redesignu webových stránek. Místo toho se mnoho uživatelů WordPress zabývá výběrem správné šablony, zlepšením svého SEO hodnocení a zajištěním rychlého načtení webu. Na tom není nic špatného – ale stejně důležitý by měl být i fakt, zda jsou vaše WordPress stránky přístupné všem. 

Podle statistik Interactive Accessibility žije 56 milionů Američanů se zdravotním postižením. Pew Research Center navíc uvádí, že 54 procent dospělých Američanů se zdravotním postižením používá internet pravidelně. A to jsou jen Spojené státy. Tato čísla celosvětově rostou.

Ignorujete-li problém s přístupností, vylučujete již 20 procent světové populace z možnosti používat váš web. Stručně řečeno, zanedbávání přístupnosti není dobré pro vaše podnikání. Ještě důležitější je jiný fakt: Je to hrozná zpráva pro vytvoření lepšího a spravedlivějšího světa. 

Takže pokud jste někdy přemýšleli, jak vytvořit přístupné webové stránky s WordPress, pak je tento návod právě pro vás. Zodpovíme tu některé klíčové otázky, včetně:

  • Co je přístupnost webu?
  • Je vůbec WordPress "bez úprav" bezbariérový?
  • Jaké nástroje a pluginy vám pomohou vytvořit přístupný web WordPress?

Co je to vlastně přístupnost webu?

Přístupnost webu odkazuje na nástroje, které umožňují osobám s postižením používat web a zpřístupnit jej. To je zvláště důležité pro postižení, která mohou ovlivnit způsob, jakým lidé přistupují k webu a používají jej, např.:

  • Zrakové postižení
  • Sluchové postižení
  • Potíže s jazykem
  • Kognitivní postižení 
  • Neurologické postižení
  • Dočasné postižení (například zlomená ruka)

Tento seznam také zahrnuje postižení související s věkem – a dokonce i postižení vyplývající z pomalého připojení k internetu. Jedním z hlavních důvodů, proč je přístupnost tak důležitá, je rostoucí role internetu v našem každodenním životě: od přístupu k informacím a nejnovějším zprávám, přes nakupování potravin až po udržování kontaktu s našimi blízkými.

Další důvody, proč je přístupnost na internetu důležitá: 

Vzhledem k významu internetu v moderním světě musí být web přístupný všem bez ohledu na stav nebo možnosti.

Je WordPress "mimo box" Bezbariérové? 

WordPress nebyl vždycky bezbariérový: ještě před několika lety měli uživatelé, kteří se spoléhali na asistenční technologie na webu, značné problémy při práci s Admin-Dashboardem.

WordPress Accessibility: Jak vytvořit bezbariérový web

Od té doby se toho hodně změnilo. Nejprve malá skupina dobrovolníků – tzv. Make WordPress Accessible Team – přístupnost WordPress výrazně zlepšila.  

Výsledkem jejich práce je propojení admin oblasti s knihovnou médií a Theme Customizer se stal mnohem přístupnějším. Kromě toho přidal WordPress Core řadu zkratek pro urychlení úprav a formátování příspěvků a stránek. 

Normy kódování pro bezbariérovost WordPressu byly předloženy v březnu 2016 ve  WordPress Core příručce. Od té doby musí šablony a pluginy projít přísnou zkouškou přístupnosti, aby mohly být vůbec klasifikovány jako bezbariérové.

Co je příručka Core Contributor?

Tato příručka definuje standardy kódování, které musí vývojáři WordPressu splňovat při přidávání svých příspěvků do WordPress Core a odesílání šablon a pluginů do oficiálního úložiště.

Přestože byly provedeny významné změny a zlepšení, je ve WordPressu v oblasti přístupnosti ještě třeba vykonat mnoho práce. I když je pravda, že WordPress usiluje o Authoring Tool Accessibility Guidelines (ATAG) 2.0 existují však i jiné problémy, které brání 100% přístupnosti: 

  • Vývojáři šablon a pluginů třetích stran nedodržují pokaždé pokyny týkající se accessibility. V důsledku toho je většina problémů s přístupností ve WordPressu připisována nepřístupným šablonám a pluginům.
  • Nový Gutenberg -Editor měl v době vydání na 90 potíží ohledně přístupnosti. (V době vydání tohoto článku zůstalo nevyřešeno pouze 22 problémů.)
WordPress Accessibility: Jak vytvořit bezbariérový web

Tipy pro bezbariérové WordPress weby

Při tvorbě přístupného webu existují určité zásady, které jsou stanoveny v pokynechWeb Content Accessibility Guidelines. Určitě byste je měli použít, abyste se ujistili, že každý může používat vaše WordPress stránky. 

Checklist k přístupnosti WordPress webu

  • Vnímatelné: Všichni uživatelé musí být schopni vnímat informační komponenty a komponenty uživatelského rozhraní.
  • Ovladatelné: Bez ohledu na to, které zařízení uživatelé používají pro přístup na váš web, musí být komponenty uživatelského rozhraní a navigace ovladatelné.
  • Pochopitelné: Všichni uživatelé musí být schopni porozumět informacím i uživatelskému rozhraní.
  • Obsažné: Uživatelé i různí user agenti (včetně asistenčních technologií) musí být schopni číst a rozumět obsahu webových stránek. 

Na základě těchto čtyř klíčových principů jsou zde uvedeny některé z pokynů, které musíte dodržovat při vytváření přístupných WordPress webů. 

Pokyny, které zajistí, že vaše WordPress webové stránky jsou vnímatelné

  • Odkazy a tlačítka by se neměly lišit od zbytku obsahu jen barevným schématem.
  • Nabídněte podporu Braillova písma a poskytněte textové alternativy pro vizuální a sluchový obsah, jako jsou obrázky a videa.
  • Nastavte šířku textu a tloušťku čáry na velikosti, které maximalizují čitelnost.
  • Zkontrolujte, zda je mezi textem a pozadím dostatečný kontrast. Jinými slovy, nepoužívejte jasně červený text na černém pozadí.
  • Audio a video obsah by měl obsahovat přepisy, titulky nebo znakovou řeč.
  • Je třeba se vyhnout animovaným GIFům, blikajícím animacím a dalšímu obsahu, který by mohl způsobit záchvaty a fyzické reakce.

Pokyny, které zajistí, že budou vaše WordPress stránky ovladatelné

  • Zdržet se používání CAPTCHA nebo nabídnout jiné způsoby, jak to vyřešit, mohou být totiž problematické pro mnoho lidí.
  • Odkazy by neměly otevírat obsah v novém okně bez upozornění uživatelů nebo bez předchozí interakce uživatelů.
  • Ujistěte se, že uživatelé mají přístup k tlačítkům a položkám nabídky (stejně jako k rozevírací nabídce) pomocí klávesnice a myši. 
  • Mediální prvky, jako je video, zvuk, karusely nebo posuvníky, by neměly být nastaveny na automatické přehrávání nebo změny bez interakce uživatele.

Pokyny, které zajistí, že vaše WordPress stránky budou srozumitelné

  • Při navrhování přemýšlejte o různých náhledech a vhodně změňte polohu a vzhled hlavních prvků.
  • Použijte nadpisy k definování různých podsekcí stránky.
  • Vyhněte se použití žargonu, obtížných termínů a zkratek. Místo toho se ujistěte, že je váš obsah napsán jasně a výstižně.
  • Odkazy musí být popisné a musí dávat smysl i bez kontextu. Například je lepší mít tlačítko nebo odkaz s textem Dozvědět se více o našich službách" než jen „Dozvědět se více".

Pokyny, které zajistit, aby vaše WordPress stránky byly obsažné

  • V horní části každé stránky vložte přeskočit odkazy".
  • Zkontrolujte, zda pole formuláře mají příslušné popisky. Formuláře by také měly obsahovat varovné a potvrzovací zprávy, které snadno rozpoznají i nevidomí.
  • Použijte tabindex, aby bylo možné vložit do navigačního prostředí element, který běžně nezískává fokus, například div nebo span – používá-li se pro interakci.
  • Média ke stažení, jako jsou dokumenty PDF, audio nebo video obsah, by měla mít popis, že stahování již započalo.
  • Nestandardní interaktivní prvky, jako jsou akordeony nebo tabulky, by měly mít význam dle rolí WAI-ARIA.

"*" povinný údaj

Rád bych se přihlásil k odběru newsletteru, abych byl informován o nových článcích na blogu, e-knihách, funkcích a novinkách ve WordPressu. Svůj souhlas mohu kdykoli odvolat. Více informací v našich Zásadách ochrany osobních údajů.
Toto pole slouží k ověření a nemělo by se měnit.

WordPress Accessibility pluginy a nástroje

Pokud budete postupovat podle výše uvedených pokynů, vaše webové stránky budou přístupné. Není ale úplně snadné sledovat všechna pravidla a směrnice.

Naštěstí existuje řada pluginů a nástrojů pro WordPress, které vám pomohou rychleji vytvářet přístupné webové stránky, aniž byste zapomněli na důležité kroky. 

WP Accessibility

Přístupnost WP

WP Accessibility je jedním z nejlepších pluginů pro přístupnost WordPressu z oficiálního úložiště WordPress Plugin Repository. Má hodnocení 5 hvězdiček a více než 30.000 aktivních instalací. Plugin řeší a opravuje běžné problémy s přístupností v šablonách WP. 

Klíčové vlastnosti WP Accessibility:

  • Přidání skiplinků s vlastním nastavením
  • Přidání dělení ke keyboard focus state
  • Odebrání tab indexu u zaostřitelných elementů
  • Přidání dlouhých popisů k obrázkům
  • Vynucení atributů alt pro obrázky v klasickém editoru

WP Accessibility také řeší problémy s bezbariérovostí WordPress Core, například odebrání nadbytečných atributů nadpisu ze seznamů stránek, seznamů kategorií a nabídek archivu.

Nejlepší WordPress Accessibility plugin pro: Společnosti s již existujícími webovými stránkami, které chtějí zlepšit svou přístupnost.

Cena: WP WP Accessibility si můžete zdarma stáhnout z oficiálního úložiště. 

AccessibleWP Toolbar

Panel nástrojů WPAccessible

AccessibleWP Toolbar, dříve známý jako Accessible Poetry, má hodnocení 4,5 hvězdičky a více než 4.000 aktivních instalací. Tento WordPress plugin usnadňuje aktivaci určitých funkcí a činí váš web přístupnější. 

Klíčové vlastnosti AccessibleWP Toolbar:

  • Aktivace navigace klávesnice, aby uživatelé mohli procházet váš web pomocí klávesnice
  • Uživatelé mohou vypnout animace CSS3
  • Uživatelé mohou změnit barvy webu na barvy s lepším kontrastem
  • Uživatelé mohou změnit barvy webu na barvy ve stupních šedi
  • Uživatelé mohou zvětšit nebo zmenšit velikost písma na vašem webu

Nejlepší WordPress Accessibility plugin pro: Společnosti, které chtějí mít přístupnější web, ale chtějí zachovat barevné schéma specifické pro značku a celkovou estetiku. 

Cena: AccessibleWP ToolbarAccessibleWP si můžete zdarma stáhnout z oficiálního úložiště. 

One Click Accessibility

Usnadnění přístupu jedním kliknutím

Populární WordPress plugin pro bezbariérovost, One Click Accessibility byl původně vyvinut pro Pojo Framework a nyní je kompatibilní se všemi WordPress šablonami. Plugin má hodnocení 4,5 hvězdiček a více než 30.000 aktivních instalací. 

Klíčové funkce One Click Accessibility: 

  • Uživatelé mohou aktivovat nebo kontrolovat velikost písma, kontrast, podtržení odkazů, čitelná písma pomocí panelu nástrojů pro přístupnost
  • Aktivace skiplinků
  • Přidání fokusu osnovy pro zaostřitelné prvky
  • Odebrání cílových atributů z odkazů a přidání rolí orientačních bodů

Nejlepší WordPress Accessibility plugin pro: Webové stránky, které byly původně vytvořeny v rámci Pojo frameworku.

Cena:One Click Accessibility si můžete zdarma stáhnout z oficiálního úložiště. 

WordPress Accessibility Helper

WordPress -Pomocník pro usnadnění přístupu

WordPress Accessibility Helper má 5hvězdičkové hodnocení a více než 10.000 aktivních instalací. Plugin nabízí bezplatnou verzi s kompletní sadou funkcí. Prémiová verze nabízí ještě více funkcí, včetně možnosti ovládat modální okna a automaticky otevíraná okna, přidávat akordeony a přizpůsobovat loga.

Hlavní rysy WordPress Accessibility Helper: 

  • Přidání skiplinků
  • Nastavení velikosti písma podle vašich představ
  • Kontrola chyb na stránkách a příspěvcích ohledně accessibility
  • Nastavení vlastních barev pro lepší/tmavší kontrast
  • Podtržení nebo označení všech odkazů

Nejlepší WordPress Accessibility plugin pro: společnosti, které potřebují robustní plugin, aby se přístupnost stala klíčovým prvkem jejich webových stránek a podnikání. 

Cena: WordPress Accessibility Helper si můžete zdarma stáhnout. Verzi Pro si můžete koupit za $80, tak si můžete instalovat plugin na webových stránkách a získat podporu po dobu tří měsíců. 

WP ADA Compliance Check Basic

WP ADA Compliance Check Basic zkontroluje váš web zhlediska přístupnosti webu, a poskytne vám podrobnou zprávu. Toto testování je založeno na standardech přístupnosti webu podle úryvku 508 a WCAG 2.1 LEVEL A/AA. 

Klíčové vlastnosti WP ADA Compliance Check Basic: 

  • Vyhodnocení dotazů týkajících se bezbariérovosti na webu
  • Spuštění zpráv ohledně přístupnosti
  • Získání srozumitelných pokynů k řešení problémů s accessibilitou
  • Automatická oprava problémů s accessibilitou (pouze v prémiové verzi)
  • Identifikace problémů v souborech šablon (pouze v prémiové verzi)

Nejlepší WordPress Accessibility plugin pro: Společnosti, které se chtějí zaměřit především na právní pokyny webové přístupnosti, nebo společnosti, které mají zájem o funkci časové úspory automatické opravy s prémiovou verzí.

Cena:WP ADA Compliance Check Basic lze stáhnout zdarma a omezuje se na 25 příspěvků nebo stránek. Prémiová verze začíná na $165 za web a poskytuje vám jeden rok podpory a aktualizací. 

Access Monitor

Monitor přístupu

Plugin Access Monitor má hodnocení 5 hvězdiček a 400 instalací. Plugin nepřidává funkce přístupnosti na vaše webové stránky, ale umožňuje vám zkontrolovat, jak přístupný je váš WordPress web. Provádí také automatickou kontrolu bezbariérovosti vašeho webu, kterou řídí Web Accessibility Service Tenon.io

Klíčové funkce Access Monitoru: 

  • Plánování týdenních nebo měsíčních zpráv o přístupnosti
  • Testování konkrétní sady stránek
  • Informace o problémech s přístupností, které lze definitivně určit strojově

Nejlepší WordPress Accessibility plugin pro: Společnosti, které chtějí jednoduchý a bezplatný způsob, jak pravidelně identifikovat problémy s přístupností. 

Cena: Access Monitor si můžete zdarma stáhnout z oficiálního úložiště. 

Poznámka k WordPress pluginům a accessibilitě

Je důležité zmínit, že všechny pluginy stejně jako WordPress šablony mohou podléhat kontrole a během tohoto procesu se podrobit volitelné kontrole na accessibilitu. V důsledku toho mnoho WordPress pluginů nedodržuje zásady digitální přístupnosti – a jejich používání může váš web znepřístupnit. 

Běžnými příklady takových pluginů jsou posuvníkové nebo rotující pluginy, které jsou nastaveny na automatické přehrávání nebo pozastavení s interakcí klávesnice. Dalším příkladem je plugin formuláře, který nemá správně označená pole. S ohledem na to byste měli znovu otestovat přístupnost svého WordPress webu, a sice pokaždé, když nainstalujete nový plugin. 

WordPress šablony a bezbariérovost

Pokud jdete do oficiálního úložiště WordPress a filtrujete hledání na bezbariérové šablony, zjistíte bohužel, že existují jen108 šablon, které jsou označeny za bezbariérové. 

Jak již bylo zmíněno, výrobci šablon mohou díky úsilí Make WordPress Accessible Team podrobit svou šablonu během kontrolního procesu nnepovinnému auditu přístupnosti. 

Chcete-li získat značku Accessibility Ready, musí šablona splňovat sadu pokynů pro digitální přístupnost uvedených v Průvodci recenzemi motivů a oficiálním kodexu WordPress

Vývoj přístupných WordPress webů

Přiznejme si to: Většina WordPress uživatelů se rozhodne pro prémiové šablony od poskytovatelů třetích stran, od tržišť třetích stran nebo zcela individuální design. 

Pokud jste vývojář pověřený vytvořením přístupného WordPress webu, existuje několik témat, z nichž můžete vyjít.

Underscores

Underscores byl vyvinut společností Automattic a je výchozím bodem pro většinu šablon dostupných na WordPress.com. Šablona obsahuje několik bezbariérových funkcí. 

Genesis by StudioPress

Genesis by StudioPress je populární prémiový framework, který se používá k vývoji vlastního bezbariérového Genesis child-theme. Případně můžete použít jednu z existujících child šablon s bezabriérovými funkcemi.  

GeneratePress

GeneratePress je další populární šablona, která je bezbariérová a lze ji použít jako výchozí bod pro váš design.

Wcag Theme

Wcag Theme byl speciálně vyvinut s ohledem na přístupnost a odpovídá oddílu 508 & WCAG 2.0 AA. Kromě toho má plnou podporu klávesnice. 

Astra

Astra je populární šablona s bezplatnými a prémiovými verzemi, která se vyznačuje bezbariérovým tagem, kompatibilitou s populárními page builder pluginy a rychlou dobou načítání.

Astra vám poskytuje přístupný základ pro vaše WordPress stránky a urychluje vývoj a proces vývoje. 

Další zdroje k přístupnosti WordPress

Co se týká WordPressu a přístupnosti, existuje na internetu velké množství informací. Pokud se chcete o bezbariérovosti dozvědět více, zde je několik dobrých kontaktních míst, kde můžete začít s rešerší:

  • Making Accessible WordPress šablony: prezentace Josepha Karr O'Connora z WordCampu 2013 v Montrealu. Prezentace se zabývá bezbariérovostí obecně a její aplikací ve WordPressu, včetně vytváření bezbariérových pluginů, šablon a widgetů, stejně jako usnadnění přístupu k vašemu obsahu.
  • WordPress development tools a accessibility plugins: Seznam nástrojů a zdrojů, které vytvořil Make WordPress Accessible Team a pomůže vám otestovat a vylepšit funkci accessibility na vašem webu.
  • Make WordPress Accessible Homepage: Oficiální blog týmu Make WordPress Accessibility Team, kde si můžete přečíst nejnovější zprávy a pomoci nám učinit WordPress přístupnějším.
  • WAVE Web Accessibility Evaluation Tool: Použijte tento nástroj k otestování přístupnosti vašeho webu WordPress. Po skenování vám nástroj zobrazí problémy, které je třeba opravit, abyste splnili pokyny pro usnadnění přístupu. 
  • Stark: Když začnete vytvářet své webové stránky ve Sketchi nebo Adobe XD, pomůže vám tento plugin zajistit, aby vaše webové projekty byly přístupné hned od začátku. 
  • Accessibility Color Wheel: Tento nástroj použijte k výběru barev, které jsou dostatečně kontrastní a splňují pokyny pro usnadnění přístupu. Můžete také vidět, jak lidé, trpící barvoslepostí, uvidí barvy, které si vyberete. 
  • Axe Chrome Extension: Pokud používáte Chrome, toto rozšíření umožňuje jediným kliknutím zkontrolovat problémy s přístupností jakéhokoli webu.
  • The A11y Maschine: The A11y Machine si můžete stáhnout z GitHub. Tento nástroj slouží jako automatizovaný nástroj pro testování bezbariérovosti. To znamená, že zkontrolujete přístupnost jakéhokoli webu. Nástroj paksestaví podrobnou zprávu, kterou pak můžete použít ke zlepšení přístupnosti svého webu.

Závěr: Jak zajistit bezbariérovost svého WordPress webu

WordPress jako platforma vám již nabízí bez potřeby úprav některé funkce accessibility – ale stále ještě nejsou zcela bezbariérové. Pokud chcete s WordPress vyvíjet přístupné webové stránky, existuje několik věcí, které musíte mít na paměti: 

  • Dodržujte oficiální pokyny Web Content Accessibility Guidelines a WordPress Accessibility Guidelines, které jsou shrnuty v příručce Theme Review. 
  • Začněte bezbariérovou WordPress šablonou, abyste zkrátili dobu vývoje a vytvořili solidní základ pro bezbariérový web. 
  • Použijte WordPress Accessibility pluginy a nástroje pro testování dokončených webových stránek a ujistěte se, že jsou přístupné všem.

Pokud zrealizujete výše uvedené tipy, budete na dobré cestě k vytvoření přístupných webových stránek a usnadnění používání internetu a přístupnosti všem. A pokud potřebujete rychlý a bezpečný WordPress hosting pro všechny bezbariérové webové stránky, které se chystáte vytvořit, neváhejte vyzkoušet bezplatnou zkušební verzi od Raidboxes

Vaše dotazy týkající se přístupnosti WordPressu

Jaké máte otázky na Maddy? Použijte funkci komentáře. Chcete další tipy na návrh a vývoj webu? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho zpravodaje.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Jeden komentář k "WordPress Accessibility: Jak vytvořit přístupný web"

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.