Designer Guide Základy Web Accessibility Design

Web by měl být místem, kde má každý přístup ke stejnému obsahu kdekoli na světě. Responzivní techniky prošly dlouhou cestu zařízení-agnostické návrhy. Ale co přístupnosti - agnostické návrhy?

Přístupnost na webu je již několik let, ale její implementace vyžaduje nové pokroky v technologii a vývoji webu. Mnozí vývojáři chtějí pomoci, ale je to těžké pochopení, jak navrhnout přístupnost, protože existuje tolik pohyblivých částí. To zahrnuje text s vysokým kontrastem, zvukové stránky pro nevidomé, optimalizovaná média a nouzové prostředí pro prohlížeče jiné než JS / CSS.

V tomto příspěvku se budu zabývat základy designu usnadnění, co to je, co chce řešit, a kroky, které můžete podniknout, abyste mohli začít. Všimněte si, že to je neuvěřitelně podrobný předmět, a to bude trvat měsíce nebo roky praxe, abyste plně porozuměli. Výhody ale stojí za námahu a všechny vaše webové projekty zanechají každého návštěvníka trvalým dojmem dostupného obsahu.

Intro To Accessibility

Obecně řečeno, přístupnost je myšlenka budování obsahu tak, že může ho spotřebovat kdokoli. To může zahrnovat nevidomé osoby, které nemohou číst, a může zahrnovat osoby s tělesným postižením, kteří nemohou ovládat myš nebo klávesnici (nebo jednu z nich)..

Může to však být i lidí drobné nedostatky ve vidění. Mohlo by se jednat o lidi dyslexie nebo problémy s porozuměním čtení. Ve skutečnosti, myšlenka “dostupnost webu” zahrnuje každé možné poškození, které by mohlo mít vliv na to, jak někdo komunikuje s webovou stránkou nebo jej spotřebovává.

Snad ještě důležitější je to, co může webová dostupnost nabídnout, jak je popsáno v definici Wikipedie:

Anne Gibson však ve svém příspěvku List Apart tvrdí, že definice Wikipedie je příliš vágní a není to tak prostě o zdravotně postižených osobách. Je to opravdu o každý na webu z celého světa nemusí mít optimální přístup k Internetu.

Mnoho devs si myslí, že přístupnost je jen pro nevidomé, kteří nemohou číst. Existují však čtyři základní kategorie dostupnosti webu:

1. Vizuální - slabozraký nebo špatný / žádný zrak
2. Sluchový - sluchově postižených nebo neslyšících
3. Poznávací - problémy s porozuměním nebo spotřebou informací
4. Motor - problémy s fyzickou dostupností, které mohou vyžadovat speciální vstupní zařízení, jako jsou klávesnice nebo programy hlasových příkazů

Každá z těchto kategorií má rozsáhlé techniky mění stejně rychle jako webové standardy. Existuje však pocit stability, který tyto standardy ratifikují do WCAG (Web Content Accessibility Guidelines).

Některé webové stránky, jako instituce jsou ze zákona povinny dodržovat tyto pokyny. Platí mezinárodně prostřednictvím W3C.

Pojďme se podívat na byrokracii za webovou dostupností a pak se ponoříme do několika vhodných návrhových tipů.

W3C & Accessible Design

Je jich dost zkratky týkající se dostupnosti webu. Ty mohou být komplikované, pokud jste na toto téma zcela nový, ale jakmile zjednodušíte, doufám, že budou mít větší smysl.

• W3C (World Wide Web Consortium) - Mezinárodní skupina definující webové standardy pro protokoly, jazyky a předpisy. Do této organizace spadají všechny oficiální pokyny pro přístupnost.
• WAI (Iniciativa pro usnadnění přístupu na web) - Oficiální program, který pokrývá vše o přístupnosti. Tento zastřešující termín obsahuje všechna pravidla, směrnice a techniky pro moderní přístupnost.
• WCAG (Pokyny pro usnadnění přístupu k webovému obsahu) - Skupina standardů a pravidel, která pomáhá návrhářům hodnotit jejich webové stránky na základě úrovně dostupnosti.
• ÁRIE (Přístupné bohaté internetové aplikace) - Specifický standard definující, jak vytvářet přístupné bohaté aplikace, které se spoléhají na JavaScript / Ajax a podobné technologie. Přečtěte si více o tomto příspěvku od Anny Monus.

Jiné pokyny existují pod deštníkem WAI, včetně UAAG pro uživatele agentů a ATAG pro nástroje pro tvorbu webových stránek. Prozatím byste se měli nejvíce zajímat o návrhy WAI a pokyny uvedené v pravidlech WAI pod názvem WCAG.

Velkým zdrojem pro učení se více je tento post z W3C o zdravotním postižení, sdílení příběhů o tom, jak lidé se zdravotním postižením mají přístup k internetu. To může být těžké pochopit všechny složité problémy, natož pochopit, jak je řešit. Ale nejlepší zdroj je od lidí, kteří čelí těmto problémům denně.

Další důležitou věcí, kterou byste měli pochopit, je shoda WCAG. To se týká přístupnost webových stránek pokrývající širokou škálu faktorů. Úrovně jsou založeny na shodě s systém hodnocení A, AA a AAA. Můžete to zkontrolovat pomocí nástroje pro kontrolu dostupnosti webu. Nejlepší skóre je AAA.

Chcete-li se dozvědět více o těchto pokynech, podívejte se na W3C Úvod do porozumění článku WCAG 2.0. Pro více informací se podívejte také na tyto související odkazy:

• WCAG 2.0 Zjednodušené
• Oddíl 508 WCAG Výkon

Kroky k usnadnění návrhu

Vřele doporučuji navštívit stránky projektu A11Y, kde naleznete praktické tipy pro usnadnění. A11Y (což je také numeronym) je bezplatný open source projekt hostovaný na GitHubu, nabízí techniky pro přístupný web design.

Můžete procházet jejich kontrolní seznam položek přístupnosti, nebo dokonce spoustu vzorů návrhů prvků, jako jsou rozevírací seznamy, karty, akordeony, tlačítka a modální okna (mimo jiné).

Je těžké se naučit všechny tyto věci a zároveň je realizovat. Vezměte si to krok za krokem a buďte ochotni zkoumat více, pokud se dostanete zmatený.

Podívejte se na návody a rychlé tipy pro začátek. Budete narážet na konkrétní návrhy, jako jsou odkazy přeskočit na obsah a barevná schémata s vysokým kontrastem. Každá z těchto technik má svou vlastní úroveň detailu, takže implementace je většinou o testování, které funguje.

Zvažte slepé uživatele, kteří mohou používat automatickou čtečku obsahu. Mohou mít také zvukový překladač, nebo dokonce speciální klávesnici pro navigaci na webu pomocí kláves, nikoli myší. To je důvod, proč správné sémantické HTML (podívejte se na tento článek) je tak důležité s vlastnostmi jako tabindex a přístupový klíč.

Pokud se chcete potápět, zvažte zvážení tématu připravenosti. Můžete studovat architekturu a přizpůsobit design tak, aby vyhovoval vašemu projektu.

Nástroje pro testování přístupnosti

Pokud chcete začít, stačí vybrat oblast dostupnosti a vyzkoušet si to. Pak můžete použít testovací nástroje k měření úrovně úspěchu.

Stojí za zmínku, že tento proces může být frustrující. Je tu tolik, aby zvážila, a WCAG pokyny jsou tak těžké pochopit, že můžete skončit s informační přetížení.

Důležité je jen dál se pohybovat. Vyberte jednu oblast přístupnosti a zaměřte se na ni. Pak použijte tyto nástroje, které vám pomohou vylepšit a zlepšit práci.

Můžete například zkusit pracovat s parametry specifikace WCAG zlepšit čitelnost. Jakmile si vyberete své barvy, stačí použít tento bezplatný kontrast kontroler zjistit, zda pracují společně.

Pokyny WCAG 2.0 jsou bohužel tak matoucí, že můžete mít potíže s pochopením požadavků. Ale čím více se budete snažit, tím více se naučíte a čím více budete rozumět.

Pro testování webu, který je již online check out WAVE. To je vizuální kontrola zobrazující chyby, výstrahy, problémy s kontrastem a další specifika webových stránek. V postranním panelu získáte vizuální zobrazení a seznam problémů.

Existuje další bezplatná aplikace na internetových stránkách Cynthia Says, která může zkontrolujte webové stránky pro hodnocení úspěšnosti WCAG A, AA, AAA, a § 508 pro plnění předpisů vlády.

A pokud jste na open source, podívejte se na tyto zdarma nástroje pro testování dostupnosti na GitHub.

• HTML CodeSniffer
• Automatizovaný nástroj pro testování přístupnosti
• WCAG Validator

Doplňky prohlížeče

Doplňky prohlížeče pravděpodobně poskytují nejrychlejší a nejjednodušší metody testování dostupnosti. Můžete spustit tyto z libovolného počítače na libovolném webu získat skutečně užitečné výsledky.

AInspector pro Firefox je považován za nutnost mít přístupnost. To vše kontroluje a je mnohem důkladnější než tester WAVE.

Uživatelé Mozilly mohou také mít rádi WCAG Contrast Checker, který je také zdarma.

Uživatelé Chrome nemají AInspector, ale mají nástroje pro vývojáře vytvořené oficiálně společností Google. Tím se do okna inspektoru přidají další nástroje pro kontrolu pokynů pro usnadnění přístupu.

Uživatelé Chrome mají také kontrolky jasu pro kontrast barev a některá další bezplatná rozšíření.

Bohužel jsem nemohl najít mnoho pro uživatele Safari, ale našel jsem jedno rozšíření pro Opera, které kontroluje shodu s WCAG 2.0. Pokud jste ochotni vyhledávat ve službě Google dostatečně, můžete najít další nástroje.

Další čtení

Pokud jste vážně naučit přístup k webu, pak se připravte na dlouhou cestu. Není to jednoduché, ale je to velmi naplňující.

Nyní byste měli více porozumět skutečné definici dostupnosti webu, proč existuje a drobných informací o tom, co se od vývojářů očekává, aby vylepšili své webové stránky. Dalším krokem je další výzkum a praxe, jak tyto zásady začlenit do vašeho pracovního postupu.

Podívejte se na následující příspěvky pro více informací, a nezapomeňte se řídit pokyny WCAG, pokud chcete znalosti přímo ze zdroje.

• Jak zlepšit přístupnost tabulky HTML pomocí značek
• Přístupný design pro uživatele se zdravotním postižením
• 6 Tipy pro zlepšení dostupnosti webových stránek
• Zajistěte, aby vaše stránky byly přístupné pro zrakově postižené