Slyšeli jste tedy hodně řečí o něčem, čemu se říká přístupnost. Možná jste dokonce slyšeli o lidech, kteří žalují velké společnosti za poskytování nedostupných služeb. Víte ale přesně, co znamená dostupnost?
Naštěstí není přístupnost příliš složitá na pochopení nebo implementaci, jakmile se k ní zavážete. Jakmile se naučíte, co je přístupnost, můžete tuto teorii uvést do praxe psaním přístupných aplikací Vue.js.
Co je přístupnost?
Přístupnost je na webu oblíbeným módním slovem, ale co přesně znamená? Ukázalo se, že název je dost popisný. Dostupnost je jednoduše měřítkem toho, jak je webová aplikace použitelná pro všechny typy lidí.
Ne každý prožívá web stejně. Někteří lidé mají poruchy, které mohou ovlivnit jejich sluch nebo zrak. Někteří nemají přístup k modernímu hardwaru nebo vysokorychlostnímu internetu a lidé často potřebují používat web v méně než ideálních podmínkách. Přístupnost spočívá v zajištění toho, aby všichni tito lidé mohli stále používat webovou aplikaci tak hladce, jak je to jen možné.
Proč je přístupnost důležitá?
Dostupnost je důležitá, protože když je aplikace vysoce dostupná, může sloužit co největšímu počtu lidí. Když někdo poskytuje službu nebo informace na webu, jeho cílem je, aby ostatní lidé tuto službu používali nebo četli tyto informace.
Optimalizace pro usnadnění zajišťuje, že webovou aplikaci nebude moci používat co nejméně lidí. Kromě toho jsou webové aplikace, které jsou přístupnější, obecně hodnoceny výše ve výsledcích vyhledávání. Díky tomu může ještě více lidí najít a používat dostupnější webové aplikace.
Běžné chyby vývojáře, které zhoršují dostupnost
Mnoho webových aplikací je méně dostupných, než by mohlo být. Obvykle je to důsledek chyb na straně těch, kdo je postavili. Některé běžné chyby přístupnosti, kterých se vývojáři dopouštějí při sestavování aplikací, jsou:
Používání nepřístupných knihoven
Při vývoji aplikací se můžete spolehnout na knihovny třetích stran, které vám ušetří čas a námahu. Bohužel ne všechny knihovny berou dostupnost vážně a může být obtížné identifikovat ty dobré. Je snadné skončit náhodným snížením dostupnosti vašich aplikací tímto způsobem.
Zanedbání sémantického HTML při vytváření komponent
Sémantické HTML je HTML, jehož význam i struktura jsou správné. Každá značka HTML má svůj vlastní účel, který asistenční technologie používá k odvození významu jejího obsahu. Například hlavička označuje hlavičku webové stránky. Čtečka obrazovky by měla být schopna oznámit, že cokoli uvnitř značky záhlaví je záhlaví webu.
Bohužel vám nic nebrání použít štítek k nesprávnému účelu. Dalším běžným příkladem je použití značky tlačítka, která funguje jako odkaz, nebo naopak.
Psaní HTML tímto způsobem poškozuje přístupnost, protože asistenční technologie si již nemůže být jistá účelem žádného prvku HTML. Pro uživatele technologie to může skončit matoucím nebo frustrujícím výstupem. Pro maximální přístupnost byste měli vždy psát sémantické HTML, i když to znamená trochu více práce.
Bez testování přístupnosti
Vytvoření webové aplikace může být často náročný úkol s náročnými termíny. Mezi spěchem dokončit funkce a zátěží testování dalších aspektů softwaru je testování přístupnosti upozaděno. Možná budete v pokušení nasadit aplikaci do produkce, než ji otestujete na problémy s přístupností.
Proč? Testování vyžaduje čas a může vyžadovat rozsáhlé změny v kódu aplikace. Ale testování webové aplikace je nepostradatelnou součástí vývojového procesu. Přístupnost aplikace byste měli otestovat stejně pečlivě jako jakýkoli jiný aspekt.
Naštěstí existují nástroje, které pomohou tyto problémy vyřešit. Následujících pět nástrojů vám může pomoci vytvořit přístupnější aplikace Vue.js:
WAVE je sada nástrojů, která pomáhá vývojářům automaticky testovat jejich aplikace na problémy s přístupností. Přestože WAVE není náhradou za testování koncovými uživateli, může vám stále pomoci zachytit mnoho problémů s přístupností.
WAVE na svých webových stránkách poskytuje online testovací nástroj. Nabízí také rozšíření prohlížeče a několik dalších nástrojů, které vám pomohou s testováním přístupnosti pro mnoho typů webových aplikací.
Mnoho podnětů, které webové aplikace používají ke komunikaci aktivity, jako jsou ukazatele průběhu a indikátory načítání, jsou čistě vizuální. Lidé se zrakovým postižením nebo ti, kteří používají čtečky obrazovky, je nemohou vnímat.
Vue-announcer je knihovna, která vám umožňuje oznamovat změny ve vašich aplikacích Vue.js způsobem, ke kterému má přístup každý.
Vue-skip-to je knihovna vytvořená tak, aby lidem, kteří používají čtečku obrazovky, umožnila přeskočit přímo na hlavní obsah aplikace Vue.js. To je užitečné, protože mnoho webových aplikací má navigační odkazy a další prvky před hlavním obsahem. Někteří uživatelé je mohou snadno přeskočit, ale použití s čtečkou obrazovky může být problematické a frustrující.
ESLint je nástroj, který vám pomáhá psát lepší JavaScript tím, že analyzuje váš kód a kontroluje chyby.
Tento nástroj je plugin ESLint, který vám pomůže zajistit, aby struktura vašich komponent Vue.js odpovídala pravidlům přístupnosti.
Po instalaci tento plugin analyzuje všechny soubory Vue.js a upozorňuje na problematický kód. Poté můžete maximalizovat přístupnost při psaní aplikací, místo abyste museli po testovací fázi měnit kód.
Velkým zdrojem problémů s přístupností v aplikacích je používání nepřístupných knihoven komponent. Vuetensils je knihovna komponent Vue.js.
Tyto komponenty jsou optimalizovány pro minimální velikost, maximální přístupnost, snadné použití a snadný styling. Můžete ušetřit čas a používat tyto předpřipravené komponenty, aniž by byla narušena dostupnost vašich aplikací.
Přístupnost ve Vue.js je snadná
Usnadnění znamená zajistit, aby vaši aplikaci mohl používat každý v jakémkoli kontextu. Maximalizace dostupnosti je důležitá pro zajištění toho, aby aplikaci mohlo používat co nejvíce lidí.
Vývojáři často při vytváření svých aplikací dělají běžné chyby v přístupnosti, kterým lze předejít. Mezi běžné problémy patří netestování a psaní nesémantického HTML. Ale s pomocí několika nástrojů je jednodušší psát vysoce dostupné aplikace Vue.js.
