Počuli ste teda veľa rečí o niečom, čo sa nazýva dostupnosť. Možno ste dokonca počuli o ľuďoch, ktorí žalujú veľké spoločnosti za poskytovanie nedostupných služieb. Viete však presne, čo znamená dostupnosť?

Našťastie prístupnosť nie je príliš ťažké pochopiť alebo implementovať, keď sa k tomu zaviažete. Keď sa naučíte, čo je dostupnosť, môžete túto teóriu uviesť do praxe napísaním prístupných aplikácií Vue.js.

Čo je dostupnosť?

Dostupnosť je na webe populárnym módnym slovom, ale čo presne znamená? Ukazuje sa, že názov je dosť popisný. Dostupnosť je jednoducho meradlom toho, ako je webová aplikácia použiteľná pre všetky typy ľudí.

Nie každý vníma web rovnako. Niektorí ľudia majú poruchy, ktoré môžu ovplyvniť ich sluch alebo zrak. Niektorí nemajú prístup k modernému hardvéru alebo vysokorýchlostnému internetu a ľudia často potrebujú používať web v nie ideálnych podmienkach. Dostupnosť je o zaistení toho, aby všetci títo ľudia mohli stále používať webovú aplikáciu čo najhladšie.

Prečo je dostupnosť dôležitá?

instagram viewer

Dostupnosť je dôležitá, pretože keď je aplikácia vysoko dostupná, môže slúžiť čo najväčšiemu počtu ľudí. Keď niekto poskytuje službu alebo informácie na webovej lokalite, jeho cieľom je, aby iní ľudia túto službu používali alebo si tieto informácie prečítali.

Optimalizácia prístupnosti zaisťuje, že webovú aplikáciu nemôže používať čo najmenej ľudí. Okrem toho webové aplikácie, ktoré sú dostupnejšie, sú vo výsledkoch vyhľadávania vo všeobecnosti vyššie. To umožňuje ešte väčšiemu počtu ľudí nájsť a používať dostupnejšie webové aplikácie.

Bežné chyby vývojárov, ktoré zhoršujú dostupnosť

Mnohé webové aplikácie sú menej dostupné, ako by mohli byť. Zvyčajne je to dôsledok chýb na strane tých, ktorí ich postavili. Niektoré bežné chyby dostupnosti, ktoré vývojári robia pri vytváraní aplikácií, sú:

Používanie neprístupných knižníc

Pri vývoji aplikácií sa môžete spoľahnúť na knižnice tretích strán, ktoré vám ušetrí čas a námahu. Bohužiaľ, nie všetky knižnice berú dostupnosť vážne a môže byť ťažké identifikovať tie dobré. Je ľahké skončiť náhodným znížením dostupnosti vašich aplikácií týmto spôsobom.

Zanedbanie sémantického HTML pri vytváraní komponentov

Sémantické HTML je HTML, ktorého význam ako aj štruktúra sú správne. Každá značka HTML má svoj vlastný účel, ktorý asistenčná technológia používa na odvodenie významu jej obsahu. Napríklad hlavička označuje hlavičku webovej stránky. Čítačka obrazovky by mala byť schopná oznámiť, že čokoľvek v značke hlavičky je hlavička webovej stránky.

Bohužiaľ, nič vám nebráni použiť štítok na nesprávny účel. Ďalším bežným príkladom je použitie značky tlačidla, ktorá funguje ako odkaz, alebo naopak.

Písanie HTML týmto spôsobom poškodzuje prístupnosť, pretože pomocná technológia si už nemôže byť istá účelom žiadneho prvku HTML. Môže to skončiť mätúcim alebo frustrujúcim výstupom pre používateľov technológie. Pre maximálnu dostupnosť by ste mali vždy písať sémantické HTML, aj keď to znamená trochu viac práce.

Netestuje sa dostupnosť

Vytvorenie webovej aplikácie môže byť často náročná úloha s náročnými termínmi. Medzi zhonom s dokončením funkcií a bremenom testovania iných aspektov softvéru sa testovanie prístupnosti dostáva do úzadia. Môžete byť v pokušení nasadiť aplikáciu do produkcie skôr, ako ju otestujete na problémy s prístupnosťou.

prečo? Testovanie si vyžaduje čas a môže vyžadovať rozsiahle zmeny v kóde aplikácie. ale testovanie webovej aplikácie je nevyhnutnou súčasťou vývojového procesu. Prístupnosť vašej aplikácie by ste mali otestovať rovnako prísne ako ktorýkoľvek iný aspekt.

Našťastie existujú nástroje, ktoré pomôžu vyriešiť tieto problémy. Nasledujúcich päť nástrojov vám môže pomôcť písať dostupnejšie aplikácie Vue.js:

WAVE je zbierka nástrojov, ktoré pomáhajú vývojárom automaticky testovať ich aplikácie na problémy s prístupnosťou. Aj keď WAVE nie je náhradou za testovanie koncovými používateľmi, stále vám môže pomôcť zachytiť mnohé problémy s prístupnosťou.

WAVE poskytuje online testovací nástroj na svojej webovej stránke. Ponúka tiež rozšírenia prehliadača a niekoľko ďalších nástrojov, ktoré vám pomôžu s testovaním dostupnosti pre mnoho typov webových aplikácií.

Mnohé z podnetov, ktoré webové aplikácie používajú na komunikáciu aktivity, ako sú indikátory priebehu a indikátory načítania, sú čisto vizuálne. Ľudia so zrakovým postihnutím alebo tí, ktorí používajú čítačky obrazovky, ich nedokážu vnímať.

Vue-announcer je knižnica, ktorá vám umožňuje oznamovať zmeny vo vašich aplikáciách Vue.js spôsobom, ku ktorému má prístup každý.

Vue-skip-to je knižnica vytvorená s cieľom umožniť ľuďom používajúcim čítačku obrazovky preskočiť priamo na hlavný obsah aplikácie Vue.js. Je to užitočné, pretože mnohé webové aplikácie majú navigačné odkazy a ďalšie prvky pred hlavným obsahom. Niektorí používatelia ich môžu ľahko preskočiť, ale ich používanie s čítačkou obrazovky môže byť problematické a frustrujúce.

ESLint je nástroj, ktorý vám pomáha písať lepšie JavaScript tým, že analyzuje váš kód a kontroluje chyby.

Tento nástroj je ESLint plugin, ktorý vám pomáha zabezpečiť, aby štruktúra vašich komponentov Vue.js bola v súlade s pravidlami prístupnosti.

Po nainštalovaní tento plugin analyzuje všetky súbory Vue.js a upozorní na problematický kód. Potom môžete maximalizovať dostupnosť počas písania aplikácií namiesto toho, aby ste museli meniť kód po fáze testovania.

Veľkým zdrojom problémov s prístupnosťou v aplikáciách je používanie nedostupných knižníc komponentov. Vuetensils je knižnica komponentov Vue.js.

Tieto komponenty sú optimalizované pre minimálnu veľkosť, maximálnu dostupnosť, jednoduchosť použitia a jednoduchosť štýlu. Môžete ušetriť čas a používať tieto vopred pripravené komponenty bez toho, aby ste znížili dostupnosť vašich aplikácií.

Dostupnosť vo Vue.js je jednoduchá

Dostupnosť znamená zabezpečiť, aby každý mohol používať vašu aplikáciu v akomkoľvek kontexte. Maximalizácia dostupnosti je dôležitá, aby ste sa uistili, že aplikáciu môže používať čo najviac ľudí.

Vývojári často robia pri vytváraní svojich aplikácií bežné chyby v prístupnosti, ktorým sa dá predchádzať. Medzi bežné problémy patrí netestovanie a písanie nesémantického HTML. Ale s pomocou niekoľkých nástrojov je jednoduchšie písať vysoko dostupné aplikácie Vue.js.