Co kdybych vám řekl, že existují lidé, kteří mohou navštívit vaše webové stránky, které se nestará o to, jak to vypadá?
Osoby se zrakovým postižením navigují po webu ze stejných důvodů jako my, hledáme informace, nakupujeme a plníme nesčetné množství důležitých úkolů pomocí webových aplikací. Ale lidé se zrakovým postižením prožívají web jiným způsobem a potřebujeme být citliví na jejich potřeby při navrhování a vytváření webových stránek.
Podle amerického sčítání lidu a OSN a Světové banky více než 47 milionů Američanů a až 650 milionů lidí po celém světě má nějaké postižení. Každý návštěvník webů, které navrhujete, musí být schopen najít informace, které hledají, a provádět úkoly, které chtějí provádět bez ohledu na to, jak vypadá webová stránka nebo aplikace. Mnoho různých faktorů, které do tvorby webové stránky nebo aplikace přicházejí, může mít vliv na dostupnost.
Vezmeš modrou pilulku - příběh skončí, probudíš se ve své posteli a věřit tomu, co chceš věřit. Vezmete si červenou pilulku - zůstanete v Západní zemi a já vám ukážu, jak hluboká je králíková díra. - Matrix
Jste připraveni jít se se mnou? Budeme se muset ponořit do technických aspektů webových stránek. HTML je kostra webové stránky, zatímco CSS, JavaScript a obrázky zlepšují HTML. Často krát lidé se zrakovým postižením nevyužívají všechna tato vylepšení. Přestože přístupnost je hlavně úkol vývojáře, někdy technické požadavky potřebné pro zachování nebo zlepšení dostupnosti ovlivní vzhled webových stránek. To znamená, že design, kopie, uživatelské zkušenosti a vývoj musí spolupracovat, aby se zajistilo, že navigační ovládací prvky, formuláře, tlačítka, záhlaví, tlačítka, odkazy a další jsou přístupné.
design, kopie, uživatelské zkušenosti a vývoj musí spolupracovat, aby se zajistilo, že navigační ovládací prvky, formuláře, tlačítka, záhlaví, tlačítka, odkazy a další jsou přístupné
Lidé, kteří jsou slepí, zrakově postižení, negramotní nebo handicapovaní, používají podpůrné technologie pro navigaci na internetu. Čtecí zařízení obrazovky jsou nejběžnější pomocnou technologií pro web, tyto programy se pokoušejí interpretovat to, co se zobrazuje na webové stránce, a předávat je uživateli, obvykle konverzí textu na řeč, ale někdy také prostřednictvím výstupu Braillského výstupu. Zvětšovače obrazovky se také často používají ve spojení s čtečkou obrazovky. Obvykle se čtečka obrazovky pokusí analyzovat HTML z horní části souboru HTML dole a mluvit o příslušných prvcích uživateli. V ideálním případě bude čtečka obrazovky umožňovat uživateli úspěšně přesunout virtuální kurzor dolů, aby vyplnil pole formuláře, tlačítka klepnutí a provedla volby z rozbalovacích nabídek a dalších ovládacích prvků.
Chcete-li důkladně vyzkoušet dostupnost, musíte zajistit, aby webové stránky nebo aplikace fungovaly dobře na každém z mnoha dostupných čteček obrazovky. Existuje několik populárních bezplatných a / nebo otevřených čteček obrazovky na každé platformě včetně ČELISTI , a NVDA . Uživatelé společnosti Microsoft mohou používat NVDA, zatímco počítače Apple a zařízení iOS obsahují Hlas nad které mohou zvětšit ovládací prvky klávesnice a číst obsah obrazovky, a pro zařízení Unix existuje Orca . Prohlížeč Chrome má dva pluginy podporující technologii, ChromeVox pro čtení obrazovky a ChromeVis pro zvětšení.
Většina problémů s dostupností webu se vyskytuje, když se virtuální kurzor čtečky obrazovky zachycuje ve špatně navržené podobě nebo přeskočí přes důležitou kontrolu nebo důležitou část textových informací. Ověření, zda jsou webové stránky skutečně použitelné, je podobné testování prohlížeče, protože každá čtečka obrazovky má různé požadavky a omezení. Proto je důležité chápat chování každého čtečky obrazovky. Potřeby různých čteček obrazovky lze umístit přidáním různých zvláštních značek HTML k důležitým prvkům stránky.
Moderní dynamické uživatelské rozhraní může být obzvláště problematické z hlediska dostupnosti, protože stránky jsou dynamicky přidávány do stránky pomocí JavaScript. Vlastní rozbalovací nabídky, modály, popisy nástrojů, obsah harmoniky a dynamické chyby a upozornění mohou být pro uživatele obrazovky čtenářů náročné, protože to znamená poruchu komunikace mezi jazyky HTML, JavaScript a čtečkou obrazovky. Nativní jazyk HTML a jazyk JavaScript nemají možnost komunikovat stránky (objektový model dokumentu) s aktualizacemi čteček obrazovky. Vývojáři potřebují přesunout "focus" (virtuální kurzor čtečky obrazovky) na část uživatelského rozhraní, která se změnila. Když se vývojáři modálně otevírají, je třeba, aby se uživatelé zaměřili na daný modální nástroj tak, aby čtecí zařízení na obrazovce mohlo tento obsah číst a uživatel s ním může rozumět a komunikovat s ním.
WAI-ARIA může překlenout mezery mezi tím, co říká surový kód HTML stránky a co viděli vidoucí uživatelé
To se provádí pomocí zvláštních značek HTML nazvaných WAI-ARIA značky. WAI-ARIA (Accessible Rich Internet Applications) může překlenout mezery mezi tím, co říká raw HTML stránky a co viděli viděné uživatelé tím, že poskytuje vývojářům standardizovaný způsob, jak přidat další význam státům, vlastnostem, vztahům, rolím a živým oblastem čtečka obrazovky by jinak nerozuměla. Vývojáři mohou na úrovni obrazovky vysvětlit čtenářům obrazovky hierarchii jednotlivých záhlaví na stránce. S vývojáři s označením arie mohou přidat nadpis popisující účel diskrétního prvku na stránce. To pomáhá vývojářům vytvářet jasné vztahy mezi různými prvky. Vývojáři mohou také upozornit na důležitá ovládací prvky tím, že je označí značkami aria-rolí, např. Rozbalovací tlačítko bude označeno následující značkou: Aria - má vyskakovací okno: true.
Viz pero Jednoduché přístupné karty Scott Vinkle ( @svinkle ) na CodePen .
V kódu HTML ve výše uvedeném příkladu jsou karty vytvořeny pomocí neřízeného seznamu s třídami v každé položce seznamu. JQuery zachycuje události kliknutí, když klikne na kartu a přidá k vybrané záložce vybrané záložky "aria-selected": 'true' a 'tab-widget__tab-content-active' a skryje další záložky přidáním 'aria-selected' false "na zbývající karty. Na řádku 127 jsou nastaveny počáteční atributy pro karty, společně tyto fragmenty pomáhají čtečkům obrazovky rozpoznat, která karta je viditelná. JavaScript na řádku 35 také přidává podporu klávesnice na karty. Zbývající část souboru zpracovává zachycování událostí kliknutí a klávesnice, takže jQuery může přidávat atributy 'role' a 'prezentace' na aktuálně vybranou kartu.
Značky Aria mohou čtečkám obrazovky pomoci interpretovat vlastní ovládací prvky jako přepínače, když je vlastní ovládací prvek označen: Aria-role = přepínač. Pokud aplikace má oblast karantény, která komunikuje zpětnou vazbu nebo aktualizace uživatele, může být označena značkou živé oblasti: Aria-live. Tím je zajištěno, že když se text na tomto elementu změní, automaticky se s uživatelem promluví pomocí čtečky obrazovky.
Obnovení stránek je klíčovou součástí webu pro čtečky obrazovky, protože při obnovení stránky dochází k upozornění na čtečku obrazovky, že by měla uživateli oznámit novou stránku a znovu přečíst obsah stránky uživateli. To znamená, že jednotlivé webové stránky představují zvláštní výzvy pro přístupnost. V aplikaci s jednou stránkou se neobnoví úplná stránka, takže čtečka obrazovky, a proto nebude uživatel upozorněn na aktualizovaný obsah. Výsledkem bude, že uživatel neobdrží žádnou zpětnou vazbu ohledně svých akcí. Nejlepším řešením je napodobit chování obnovení nativní stránky. Při nahraném zobrazení aktualizujte název stránky a oznamte jej uživateli.
Úplné specifikace WAI-ARIA jsou W3 spravovány jako specifikace pro samotný HTML v rámci Iniciativy pro přístupnost webu (WAI), ale někdy mohou být užitečnější než specifikace, takže zde uvádíme několik obecných pokynů pro návrháře:
Existuje několik jednoduchých rozhodnutí, která můžete udělat při vytváření webových stránek, které zpřístupní internetovou stránku, aniž by se dostaly příliš hluboko do speciálního značkování dostupnosti nebo testování čtečky obrazovky. Ujistěte se, že váš HTML vyjadřuje smysl jeho strukturou, pomůže čtečkám obrazovky zpracovávat informace stejným způsobem, jak se na stránce objevují pro zrakově postižené uživatele. To je důležité pro uživatele, kteří používají lupou ve spojení s čtečkou obrazovky.
Použití vhodné značky HTML pro nadpisy, seznamy, tabulky a další prvky umožňuje čtečce obrazovky klasifikovat strukturu stránky pro uživatele známým způsobem. Pro další zahrnuté rozvržení HTML5 poskytuje další prvky, jako například
Jsme velmi daleko dole za tímto králičím otvorem, protože všichni potenciální příjemci této práce jsou širší skupinou, než si myslíte. Pokud jste někdy zkusili používat mobilní aplikaci jednou rukou, protože druhá ruka nese něco, kdybyste se někdy pokoušeli použít myš s rukama nepřekonatelnou kvůli zranění, které jste situačně znevýhodnili. A není to úžasné, když jsou vaše prsty lepkavé a stále můžete navigovat na webových stránkách pomocí klávesnice s klouby? Všichni jsou bohužel obeznámeni s postiženími, které přicházejí ze stárnutí, jako je ztráta paměti, neslyšící, zhoršující se vize a omezený pohyb.
Síla webu je v jeho univerzálnosti. Přístup všem bez ohledu na zdravotní postižení je zásadním aspektem. - Tim Berners-Lee, ředitel W3C a vynálezce World Wide Web
Doporučený snímek, obrázek dostupnosti přes Shutterstock.