Usnadnění neprospívá pouze handicapovaným uživatelům
Od roku 2015 jsem několikrát mluvil o přístupnosti, jak interně ve společnosti Netcentric, tak externě.
A uvědomuji si, že pro mnoho vývojářů je implementace velmi obtížná a bolestivá, takže pokud neexistuje obchodní požadavek, prostě to nedělají.
Možná, že kdybychom si konečně uvědomili, že přístupnost je především o skvělém uživatelském zážitku a možnosti zahrnout více uživatelů, věnujeme tomu trochu více péče.
Kteří uživatelé s postižením těží z přístupnosti webu?
Světová zdravotnická organizace uvádí, že 15 % světové populace má nějaký druh postižení, od těžkého po lehké.
Existují tělesná postižení související se zrakem, sluchem, motorikou, kognitivními schopnostmi (jako dyslexie nebo autismus). Je zřejmé, že lidé s těmito podmínkami mají největší prospěch, pokud jde o přístupné aplikace, ale těch, kteří mají prospěch z přístupnosti, je mnohem více...
Ty a já! Všichni můžeme těžit z inkluzivního designu.
Na světě je ohromující 1 miliarda lidí, kteří mají zdravotní postižení, které může vyžadovat použití asistenčních technologií k navigaci v aplikaci nebo na webu. Existují však také lidé, kteří nejsou součástí tohoto segmentu, a přesto mohou využít dostupné rozhraní.
Můžete mít unavené oči po dlouhém dni v práci, vaše myš může mít vybitou baterii, můžete mít akutní zánět karpického tunelu... Dostanete se do kanceláře a zjistíte, že jste si zapomněli brýle doma!
Tolik důvodů!
Úrovně shody
Dobře, tak jsem tě přesvědčil. Chcete své aplikace zpřístupnit. kde začít? Začnete tím, že budete znát úrovně souladu.
Tři z nich:A, AA, AAA, které udávají, jak vnímatelné, ovladatelné, srozumitelné a robustní je uživatelské rozhraní a jeho obsah.
Přidat strukturu
Aby byl obsah srozumitelný, je základním pravidlem poskytnout zobrazení nebo stránky organizovanou strukturu pomocí <main> , <section> , <header> , <footer> nebo <aside> , namísto obecného <div> prvků a použijte významné role když není implicitní.
Tyto prvky uvedené výše mají implicitní role orientačních bodů, ale pokud použijete <div> místo toho jej musíte explicitně přiřadit.
Definujte hierarchii
Je také velmi důležité definovat hierarchii obsahu pomocí nadpisů, od <h1> na <h6> `
Jedna velmi důležitá věc, kterou by vývojáři Angular měli udělat při sestavování svých Angular pohledů, je zkontrolovat, jak spolu hrají bootstrapped komponenty!
Jak struktura vypadá, když jsou komponenty na místě vnořené do sebe nebo jako sourozenci s jinými komponentami.
Strom přístupnosti
A proč je struktura a hierarchie, jak jsme již zmínili, tak důležitá?
Protože v závislosti na jejich pořadí a hierarchii obsahu bude prohlížeč generovat jak vaše grafické uživatelské rozhraní, tak strom přístupnosti. Tento strom využijí asistenční technologie, jako jsou čtečky obrazovky, k navigaci na stránce nebo zobrazení.
Osvědčeným postupem je umístit prvky HTML přesně v pořadí, v jakém by se měly objevit na stránce, a neměnit jejich pořadí pomocí CSS nebo JavaScriptu.
K tomu prohlížeč také potřebuje, abyste vždy poskytovali textové alternativy k ovládacím prvkům a grafice.
Místo přepracování používejte nativní prvky HTML
WCAG také doporučuje vždy používat vyhrazený nativní prvek HTML, pokud je k dispozici, tzn. <button> pro tlačítka
Syntetické ovládací prvky
Když zaměříte prvek, VŠECHNY ovládací prvky klávesnice se přenesou na tuto položku, včetně syntetických vstupních událostí. Pokud například použijete správný prvek tlačítka namísto pouhého <div> nebo kotva, pokud po kliknutí přidáte posluchač události, bude automaticky fungovat, když na něj zaostříte a stisknete Enter na klávesnici .
Při použití nativních prvků získáte hodně zdarma.
Tabindex
Předpokládejme, že máme konkrétní požadavek, pro který je užitečné odvodit zaměření na prvek, který nelze nativně zaměřit, jako je <div> , toho můžeme dosáhnout pomocí atributu tabindex.
Je osvědčeným postupem používat jako indexy pouze 0 a -1, protože jakákoli jiná kladná hodnota může vést k velmi špatné uživatelské zkušenosti.
Udělal jsem chybu, že jsem jednou přidal přírůstkové kladné hodnoty do neuspořádaného seznamu, abych řídil pořadí navigace, a skončilo to velmi, velmi špatně. Protože kladné hodnoty budou mít větší přednost a výsledky budou velmi neočekávané, pokud budou v mixu nativně zaměřitelné prvky...
Sledujte kontrastní poměry
Jedním z velmi důležitých faktorů, aby byl obsah srozumitelný a vnímatelný, je použité barevné schéma. Velmi častým problémem je nedostatečný kontrast mezi barvami pozadí a popředí.
V tomto příkladu vidíme 2 tlačítka s různými poměry. Pro některé uživatele se sníženými zrakovými schopnostmi je zjevně velký rozdíl, abychom pochopili první.
Návrhy uživatelského rozhraní a uživatelského rozhraní nemusí být pod vaší kontrolou, ale přesto je můžete zkontrolovat a identifikovat problémy, než začnete s technickou implementací.
Mějte na paměti, že i když je dobrá uživatelská zkušenost pro přístupnost prvořadá, návrháři nemusí znát specifikace a11y.
Přečtěte si část 2, která bude k dispozici již brzy, abyste se dozvěděli, jak implementovat WAI-ARIA, a získejte svůj kontrolní seznam A11y, když vyvíjíte svou aplikaci!