Návrhárske usmernenie k základom dizajnu prístupnosti webu

Web by mal byť miestom, kde každý môže pristupovať k rovnakému obsahu kdekoľvek na svete. Rešpektívne techniky prešli ďaleko zariadenia-agnostické návrhy. Ale čo prístupnosť-agnostické návrhy?

Webová dostupnosť je už niekoľko rokov, ale jej implementácia si vyžaduje nové pokroky v oblasti technológií a vývoja webu. Mnoho vývojárov chce pomôcť, ale je ťažké pochopiť, ako navrhnúť prístupnosť, pretože existuje toľko pohybujúcich sa častí. Zahŕňa text s vysokým kontrastom, zvukové stránky pre nevidiacich, optimalizované médiá a záložné súbory pre prehliadače bez JS / CSS.

V tomto príspevku budem pokrývať základy dizajnu prístupnosti, čo to je, čo sa snaží riešiť a kroky, ktoré môžete urobiť, aby ste mohli začať. Všimnite si, že ide o neuveriteľne podrobnú tému a trvá niekoľko mesiacov alebo rokov praxe, aby ste ju úplne pochopili. Ale prínosy stojí za to úsilie a všetky vaše webové projekty zanechajú každému návštevníkovi trvalý dojem z dostupného obsahu.

Úvod do prístupnosti

Všeobecne povedané, prístupnosť je myšlienka budovania obsahu tak, že môže ho spotrebovať každý. Môžu to byť aj slepí ľudia, ktorí nedokážu čítať, a môžu zahŕňať ľudí s telesným postihnutím, ktorí nemôžu ovládať myš alebo klávesnicu (alebo jednu z nich).

Môže to však zahŕňať aj ľudia mierne nedostatky vo videní. Mohlo by to zahŕňať aj ľudí dyslexia alebo problémy s porozumením čítania. V skutočnosti ide o myšlienku “dostupnosť webu” zahŕňa každé možné poškodenie, ktoré by mohlo ovplyvniť, ako niekto komunikuje alebo spotrebováva webové stránky.

Možno je najdôležitejšie, čo ponúka webová dostupnosť, ako je tu popísané v definícii Wikipedie:

Napriek tomu Anne Gibson tvrdí vo svojom List Apart post, že definícia Wikipédie je príliš vágna a nie je to proste o ľuďoch so zdravotným postihnutím. Je to naozaj o každý na webe z celého sveta nemusí mať optimálny prístup na internet.

Mnoho devs si myslí, že dostupnosť je len pre slepých ľudí, ktorí nemôžu čítať. Existujú však štyri základné kategórie prístupnosti webu:

1. vizuálne - slabé videnie alebo chudobný / žiadny zrak
2. sluchový - sluchovo postihnutých alebo nepočujúcich
3. Poznávacie - problémy s porozumením alebo konzumáciou informácií
4. motor - problémy s fyzickou dostupnosťou, ktoré môžu vyžadovať špeciálne vstupné zariadenia, ako sú klávesnice alebo programy hlasových povelov

Tieto kategórie majú vždy rozsiahle techniky, ktoré sú zmena rovnako rýchlo ako webové štandardy. Existuje však zmysel pre stabilitu s tým, že tieto normy boli ratifikované v smerniciach WCAG (Accessibility Accessibility Guidelines).

Niektoré webové stránky, ako napr štátne inštitúcie sa podľa zákona musia riadiť týmito usmerneniami. Aplikujú sa medzinárodne prostredníctvom W3C.

Poďme sa pozrieť na byrokraciu za prístupnosť webu, a potom sa ponoriť do niektorých aplikovateľných návrhových tipov.

W3C & Accessible Design

Existuje pomerne málo skratky súvisiace s prístupnosťou webu. Tie môžu byť zložité, ak ste na túto tému úplne novú, ale akonáhle to zjednodušíte, dúfam, že budú mať väčší zmysel.

• W3C (World Wide Web Consortium) - Medzinárodná skupina, ktorá definuje webové štandardy pre protokoly, jazyky a predpisy. V rámci tejto organizácie spadajú všetky oficiálne usmernenia týkajúce sa prístupnosti.
• WAI (Iniciatíva prístupnosti webu) - Oficiálny program, ktorý zahŕňa všetko o dostupnosti. Tento zastrešujúci pojem obsahuje všetky pravidlá, pokyny a techniky modernej prístupnosti.
• WCAG (Pokyny pre prístupnosť obsahu webu) - Skupina štandardov a pravidiel, ktoré pomáhajú projektantom klasifikovať svoje webové stránky na základe úrovne dostupnosti.
• ARIA (Prístupné Rich Internetové aplikácie) - Špecifický štandard určujúci, ako vytvoriť prístupné bohaté aplikácie, ktoré sa spoliehajú na JavaScript / Ajax a podobné technológie. Prečítajte si viac o tomto v tomto príspevku Anna Monus.

Ďalšie usmernenia existujú pod záštitou WAI vrátane UAAG pre používateľských agentov a ATAG pre nástroje na tvorbu webových stránok. V súčasnosti by ste sa mali zaujímať najmä o návrhy WAI a usmernenia uvedené v súbore pravidiel WAI pod názvom WCAG.

Skvelým zdrojom pre ďalšie vzdelávanie je tento príspevok z W3C o zdravotných postihnutiach, ktorý umožňuje zdieľať príbehy o tom, ako ľudia so zdravotným postihnutím prichádzajú na internet. To môže byť ťažké pochopiť všetky zložité problémy, nieto pochopiť, ako ich vyriešiť. ale najlepší zdroj pochádza od ľudí, ktorí denne čelia týmto problémom.

Ďalšou dôležitou témou, ktorú by ste mali porozumieť, je zhoda s WCAG. To sa týka úroveň dostupnosti webových stránok ktoré pokrývajú širokú škálu faktorov. Úrovne sú založené na zhode s systém hodnotenia A, AA a AAA. Môžete to skontrolovať pomocou nástroja Kontrola dostupnosti webu. Najlepšie skóre je AAA.

Ak sa chcete dozvedieť viac o týchto pokynoch, pozrite si W3C Úvod do porozumenia článku WCAG 2.0. Pozrite sa na tieto súvisiace odkazy pre viac informácií:

• WCAG 2.0 zjednodušená
• Časť 508 WCAG Performance

Kroky k prístupnému dizajnu

Veľmi odporúčam navštíviť webovú stránku projektu A11Y o praktických tipoch dostupnosti. A11Y (čo je tiež numeronym) je bezplatný open source projekt hosťujúci na GitHub, ponúka technológie pre prístupný web dizajn.

Môžete prehliadať ich zoznam dostupných položiek, alebo dokonca veľa návrhových vzorov pre prvky, ako sú dropdowny, karty, akordeóny, tlačidlá a modálne okná (okrem iných položiek).

Je ťažké naučiť sa všetky tieto veci a implementovať ich súčasne. Vezmite si to krok za krokom a buďte ochotní preskúmať viac, ak sa dostanete zmätení.

Pozrite si tipy a návody A11Y a rýchle tipy na začatie. Budete naraziť na konkrétne návrhy, ako sú odkazy na skok do obsahu a farebné schémy s vysokým kontrastom. Tieto techniky majú vždy svoju vlastnú úroveň detailov, takže implementácia je väčšinou o testovaní, aby sme zistili, čo funguje.

Zvážte slepých používateľov, ktorí môžu používať automatickú čítačku obsahu. Môžu mať aj prekladač zvuku alebo dokonca špeciálnu klávesnicu na navigáciu na webe pomocou kľúčov a nie myši. To je dôvod, prečo správny sémantický HTML (pozrite sa na tento článok) je tak dôležitá s vlastnosťami ako je tabindex a Prístupový kľúč.

Ak sa chcete ponoriť, potom zvážte vyzdvihnutie témy pripravenej na prístupnosť. Môžete študovať architektúru a prispôsobiť dizajn tak, aby vyhovoval vášmu projektu.

Nástroje na testovanie prístupnosti

Ak chcete začať, stačí vybrať oblasť dostupnosti a vyskúšať to. Potom môžete použiť testovacie nástroje na posúdenie vašej úrovne úspechu.

Stojí za zmienku, že tento proces môže byť frustrujúce. Existuje toľko, koľko je potrebné zvážiť a usmernenia WCAG sú také ťažké pochopiť, že môžete skončiť s preťažením informácií.

Dôležitou vecou je len pokračovať. Zvoľte si jednu oblasť dostupnosti a nastavte ju na svoje zameranie. Potom použite tieto nástroje, ktoré vám pomôžu vylepšiť a zlepšiť svoju prácu.

Napríklad môžete skúsiť pracovať s kontrastnými špecifikáciami WCAG zlepšiť čitateľnosť. Akonáhle si vyberiete svoje farby, stačí použiť tento kontrolór voľného kontrastného pomeru, aby ste zistili, či pracujú spoločne.

Bohužiaľ, usmernenia WCAG 2.0 sú tak mätúce, že môžete mať ťažkosti s pochopením požiadaviek. Ale čím viac sa pokúsite, tým viac sa naučíte a čím viac budete rozumieť.

Na testovanie stránky, ktorá je už online, skontrolujte WAVE. Je to free visual checker ktoré zobrazujú chyby, upozornenia, problémy s kontrastmi a ďalšie špecifiká webových stránok. Získate vizuálny pohľad a zoznam problémov na bočnom paneli.

Na Cynthia Says webovej stránke je k dispozícii ďalšia bezplatná aplikácia, ktorá môže skontrolovať webové stránky pre úspešné hodnotenie hodnôt WCAG AA, AA, AAA, a oddiel 508 pre súlad s predpismi.

A ak ste na open source, pozrite sa na tieto bezplatné nástroje na testovanie prístupnosti na GitHub.

• HTML CodeSniffer
• Nástroj na testovanie automatizovanej prístupnosti
• Validátor WCAG

Doplnky prehliadača

Doplnky prehliadača pravdepodobne poskytujú najrýchlejší a najjednoduchší spôsob testovania dostupnosti. Môžete ich spustiť z ľubovoľného počítača na ľubovoľnej webovej stránke, aby ste získali skutočne užitočné výsledky.

AInspector pre Firefox je považovaný za nutnosť prístupu. To kontroluje všetko a je oveľa dôkladnejšie ako tester WAVE.

Používatelia Mozilly by sa mohli tiež páčiť Kontrola kontrastu WCAG, ktorá je tiež bezplatným doplnkom.

Používatelia prehliadača Chrome nemajú nástroj AInspector, ale nástroje Google pre vývojárov nástrojov Accessibility Developer boli oficiálne vytvorené spoločnosťou Google. Toto pridáva do okna inšpektora ďalšie nástroje na kontrolu pokynov týkajúcich sa prístupu.

Používatelia prehliadača Chrome majú tiež kontrolky jasu pre farebný kontrast a niektoré ďalšie bezplatné rozšírenia.

Nanešťastie som nemohol nájsť veľa používateľov programu Safari, ale našiel som jedno rozšírenie pre službu Opera, ktorá kontroluje dodržiavanie pravidiel WCAG 2.0. Ak ste ochotní vyhľadávať Google dostatočne tvrdo, môžete nájsť ďalšie nástroje.

Ďalšie čítanie

Ak máte vážne záujem učiť sa o dostupnosti webu, potom buďte pripravení na dlhú cestu. Nie je to ľahké, ale je to veľmi naplnené.

Teraz by ste mali viac pochopiť skutočnú definíciu dostupnosti webu, prečo existuje, a drobné podrobnosti o tom, čo vývojári očakávajú, aby zlepšili svoje webové stránky. Ďalším krokom je ďalší výskum a prax, aby sa tieto princípy začlenili do vášho pracovného postupu.

Ak chcete získať viac informácií, pozrite si nasledujúce príspevky a prečítajte si pokyny WCAG, ak chcete vedieť priamo zo zdroja.

• Ako zlepšiť dostupnosť tabuľky HTML pomocou značky
• Prístupný dizajn pre používateľov s postihnutím
• 6 tipov na zlepšenie dostupnosti webových stránok
• Zabezpečte, aby vaše stránky boli prístupné pre zrakovo postihnutých