Така че сте чували много разговори за нещо, наречено достъпност. Може би дори сте чували за хора, които съдят големи компании за предоставяне на недостъпни услуги. Но знаете ли какво точно означава достъпност?

За щастие, достъпността не е твърде трудна за разбиране или прилагане, след като се ангажирате с нея. След като научите какво е достъпност, можете да приложите тази теория на практика, като напишете достъпни Vue.js приложения.

Какво е достъпност?

Достъпността е популярна модна дума в мрежата, но какво точно означава? Оказва се, че името е доста описателно. Достъпността е просто мярка за това колко използваемо е уеб приложение за всички видове хора.

Не всеки преживява мрежата по един и същи начин. Някои хора имат увреждания, които могат да засегнат слуха или зрението им. Някои нямат достъп до модерен хардуер или високоскоростен интернет и хората често трябва да използват мрежата при не идеални условия. Достъпността е да се уверите, че всички тези хора все още могат да използват уеб приложение възможно най-безпроблемно.

instagram viewer

Защо достъпността е важна?

Достъпността е важна, защото когато едно приложение е много достъпно, то може да обслужва възможно най-много хора. Когато някой предоставя услуга или информация на уебсайт, целта му е други хора да използват тази услуга или да четат тази информация.

Оптимизирането за достъпност гарантира, че възможно най-малко хора не могат да използват уеб приложението. Освен това уеб приложенията, които са по-достъпни, обикновено се класират по-високо в резултатите от търсенето. Това позволява на още повече хора да намират и използват по-достъпни уеб приложения.

Често срещани грешки на разработчиците, които увреждат достъпността

Много уеб приложения са по-малко достъпни, отколкото биха могли да бъдат. Обикновено това е резултат от грешки от страна на тези, които са ги построили. Някои често срещани грешки в достъпността, които разработчиците допускат, когато създават приложения, са:

Използване на недостъпни библиотеки

Може да разчитате на библиотеки на трети страни, за да спестите време и усилия, когато разработвате приложенията си. За съжаление, не всички библиотеки приемат сериозно достъпността и може да е трудно да се идентифицират добрите. Лесно е случайно да намалите достъпността на вашите приложения по този начин.

Пренебрегване на семантичния HTML при изграждане на компоненти

Семантичният HTML е HTML, чието значение, както и неговата структура са правилни. Всеки HTML маркер има присъща цел, която спомагателната технология използва, за да изведе значението на съдържанието му. Например маркерът на заглавката маркира заглавката на уебсайт. Екранният четец трябва да може да обяви, че всичко в маркера на заглавката е заглавка на уебсайт.

За съжаление, нищо не ви спира да използвате етикет за грешна цел. Друг често срещан пример е използването на маркер на бутон, който да действа като връзка или обратно.

Писането на HTML по този начин вреди на достъпността, тъй като помощната технология вече не може да бъде сигурна за целта на който и да е HTML елемент. Това може да доведе до объркващ или разочароващ резултат за потребителите на технологията. За максимална достъпност трябва винаги напишете семантичен HTML, дори ако това означава малко повече работа.

Не се тества за достъпност

Създаването на уеб приложение често може да бъде трудна задача с взискателни срокове. Между бързането за завършване на функциите и тежестта за тестване на други аспекти на софтуера, тестването за достъпност отстъпва на заден план. Може да се изкушите да разположите приложение в производството, преди да сте го тествали за проблеми с достъпността.

Защо? Тестването изисква време и може да изисква обширни промени в кода на приложението. Но тестване на уеб приложение е незаменима част от процеса на развитие. Трябва да тествате достъпността на приложението си също толкова строго, колкото всеки друг аспект.

За щастие съществуват инструменти, които да помогнат за решаването на тези проблеми. Следните пет инструмента могат да ви помогнат да пишете по-достъпни Vue.js приложения:

WAVE е колекция от инструменти, които помагат на разработчиците автоматично да тестват своите приложения за проблеми с достъпността. Въпреки че WAVE не е заместител на тестването на крайния потребител, той все пак може да ви помогне да хванете много проблеми с достъпността.

WAVE предоставя онлайн инструмент за тестване на своя уебсайт. Той също така предлага разширения на браузъра и няколко други инструмента, които да помогнат при тестване на достъпността за много видове уеб приложения.

Много от сигналите, които уеб приложенията използват за комуникация на дейност, като ленти за напредък и индикатори за зареждане, са чисто визуални. Хората със зрителни увреждания или тези, които използват екранни четци, не могат да ги възприемат.

Vue-announcer е библиотека, която ви позволява да обявявате промени във вашите Vue.js приложения по начин, до който всеки има достъп.

Vue-skip-to е библиотека, създадена, за да позволи на хората, използващи екранен четец, да прескачат директно към основното съдържание на приложение Vue.js. Това е полезно, защото много уеб приложения имат връзки за навигация и други елементи преди основното съдържание. Те са лесни за пропускане за някои потребители, но могат да бъдат обезпокоителни и разочароващи за използване с екранен четец.

ESLint е инструмент, който ви помага да пишете по-добър JavaScript, като анализирате кода си и го проверявате за грешки.

Този инструмент е плъгин ESLint, който ви помага да гарантирате, че структурата на вашите Vue.js компоненти съответства на правилата за достъпност.

Когато е инсталиран, този плъгин анализира всички Vue.js файлове и посочва проблематичен код. След това можете да увеличите максимално достъпността, докато пишете вашите приложения, вместо да се налага да променяте кода след фазата на тестване.

Голям източник на проблеми с достъпността в приложенията е използването на недостъпни библиотеки на компоненти. Vuetensils е библиотека от компоненти на Vue.js.

Тези компоненти са оптимизирани за минимален размер, максимална достъпност, лекота на използване и лекота на оформяне. Можете да спестите време и да използвате тези предварително изградени компоненти, без да навредите на достъпността на вашите приложения.

Достъпността във Vue.js е лесна

Достъпността означава да се уверите, че всеки може да използва вашето приложение във всеки контекст. Увеличаването на достъпността е важно, за да се гарантира, че дадено приложение може да се използва от възможно най-много хора.

Разработчиците често правят често срещани, но предотвратими грешки в достъпността, когато създават своите приложения. Често срещаните проблеми включват не тестване и писане на несемантичен HTML. Но с помощта на няколко инструмента е по-лесно да пишете високо достъпни Vue.js приложения.