Шта су Ариа атрибути у ХТМЛ-у и зашто су важни?

Веб дизајнери који су нови у ХТМЛ-у могу наићи на скуп непознатих атрибута. Уз префикс АРИА, ови атрибути се појављују широм веба, али њихова сврха може бити мистерија за нове кориснике.

АРИА атрибути служе важној сврси у приступачности ваших веб локација. Они описују и садржај датог елемента и начин на који се елемент односи на страницу или друге елементе око ње.

Додавање ових веома важних атрибута вашој веб локацији помоћи ће да сви посетиоци добију исто искуство, без обзира на технологију коју користе.

Шта су АРИА атрибути?

АРИА је акроним за Аццессибле Рицх Интернет Апплицатионс. У модерном ХТМЛ-у, посебно апликацијама богатим ЈаваСцрипт-ом, није увек одмах очигледно на основу синтаксе какву улогу имају појединачни елементи.

Потешкоће у разликовању улога могу бити проблем када корисници прегледају сајт користећи алатке за приступачност као што су читачи екрана. У недостатку одговарајућег семантичког ХТМЛ-а, ваш крајњи корисник можда неће моћи да се креће по сајту када користи алатке за приступачност.

Док је преферирани начин да решите овај проблем користите одговарајуће семантичке елементе у ХТМЛ5, ово није увек практично нити могуће. Овде ступају АРИА атрибути на ХТМЛ елементе. Ови атрибути помажу у дефинисању улоге и атрибута вашег елемента на начин који алати за приступачност могу да обрађују.

Зашто су АРИА атрибути важни?

Укратко, АРИА атрибути омогућавају корисницима са инвалидитетом да користе вашу веб локацију. Ове улоге и атрибути дефинишу додатне информације о различитим елементима на вашем сајту који иначе не би били лако доступни.

Постоји велики избор АРИА атрибута које можете доделити. Требало би да их користите свуда где је потребан додатни контекст како би документ имао смисла на невизуелни начин.

На пример, размотрите сајт који има главну навигацију која се састоји од а елемент умотан у а елемент, а не а елемент:

<дивкласа="нав">
<ул>
<ли>Кућали>
<ли>Схопли>
<ли>О томели>
ул>
див>

Можете да користите АРИА атрибуте да помогнете корисницима да се крећу. Додавање атрибута роле и ариа-лабел у елемент омогућава читачу екрана и помоћним технологијама да знају где се налази ваш мени.

<дивкласа="нав">
<улулога="навигација"арија-ознака="Главни">
<ли>Кућали>
<ли>Схопли>
<ли>О томели>
ул>
див>

Иако би у већини случајева требало да користите одговарајуће елементе, то можда није увек могуће у оквиру ограничења онога што радите. Ако, на пример, ваша веб локација захтева употребу траке напретка, али желите дизајн који стандардна трака не дозвољава.

У овом сценарију, можете креирати прилагођени скуп елемената за приказ траке напретка. За читач екрана, међутим, ови елементи ће изгледати као збркани неред; неће моћи да пружи корисне информације посетиоцима вашег сајта.

Постављањем улоге омотача на прогрес бар, и додавањем ариа-валуенов, арија-валуемин, и ариа-валуемак атрибуте омотачу, још увек можете да укажете на напредак.

У модерној ери, изградња доступних веб локација важнија је него икад. Постоје неколико библиотека Реацт компоненти направљених имајући на уму приступачност.

Не само да вам приступачна веб локација може помоћи у вашем рангирању у претрази за неколико главних претраживача, већ и осигурава да не одсецате потенцијалну групу корисника из ваше корисничке базе.

Додавање одговарајућих АРИА атрибута вашој веб локацији ће вам помоћи да обезбедите да информације презентујете свим корисницима. Крајњи резултат ће бити сајт који поздравља сву публику и представља што је могуће ближе исто искуство свима.

Које АРИА атрибуте треба да користим?

Постоји много различитих атрибута које би требало да користите на својој веб локацији. Генерално, ови атрибути спадају у две различите категорије. Први су атрибути виџета који обично описују прилагођени интерактивни елемент.

Друга категорија које треба да будете свесни су атрибути односа. То су атрибути који преносе информације помоћним технологијама о томе како се одређени елемент односи на остатак сајта или друге елементе.

Када је у питању разматрање које АРИА атрибуте треба да укључите, једноставан одговор је што је више могуће. Било где где елемент који користите не описује улогу коју елемент испуњава, требало би да користите атрибут роле.

Ако имате поље са ознаком, то поље треба да има ариа-лабеледби атрибут. Све док атрибути које користите имају смисла, своју веб локацију чините приступачнијом само њиховим додавањем.

Атрибути виџета су много већа категорија. Садржи већину АРИА атрибута које ћете морати да додате стандардном сајту. У ранијем примеру прилагођене траке напретка, ариа-валуенов, ариа-валуемин и ариа-валуемак су сви атрибути виџета. Они описују стање или могућа стања елемента на којем се налазе.

Постоји много различитих атрибута које можете користити да опишете стање елемента. Један од најчешћих је арија-ознака. Овај атрибут примењује ознаку на елемент на који га поставите, а која је видљива само помоћним технологијама.

Још један уобичајени пар АРИА атрибута који спадају у ову категорију су арија-скривена и арија-инвалид. Они могу да саопште тренутно стање елемента и да ли читач екрана треба да га прочита кориснику. Ово је корисно за различите уређаје са сопственим читачима екрана.

Атрибути односа

За разлику од атрибута виџета, атрибути односа дају помоћним технологијама индикације о односу и употреби елемента са другим елементима око њега. Најчешћи од њих је атрибут улоге. Улога одређује којој сврси елемент служи у оквиру сајта.

Ако поставите улога приписати навигација, биће одмах идентификован као омот за навигацију.

Неки атрибути односа дефинишу како се елемент односи на друге елементе око њега. Тхе ариа-лабеледби атрибут, на пример, показује који елемент делује као ознака за овај елемент. Ово може бити корисно када користите изгледе који визуелно имају смисла, али имају ознаке за одређене контроле обрасца иза њих у току документа.

Иако има мање атрибута односа него атрибута виџета, ови атрибути често имају већи значај. Они често могу да опишу ток и контролу документа и дају додатне детаље о начину на који корисник може да се креће по вашој веб локацији.

Ови атрибути су од посебног значаја када дизајнирате обрасце и ставке за навигацију на вашој веб локацији.

Зашто је тако важно укључити АРИА атрибуте у свој ХТМЛ

АРИА атрибути служе једноставној и неопходној сврси на вашој веб локацији. Они служе да обезбеде да сајт буде доступан свим корисницима, без обзира на коришћење софтвера за приступачност. За кориснике са инвалидитетом, поседовање ових атрибута на вашој веб локацији може учинити сајт употребљивим.

Преферирани метод за рад са помоћном технологијом је коришћење одговарајућих семантичких елемената. Међутим, када то није могуће, АРИА атрибути омогућавају слободан рад без да ваши корисници изгубе на садржају.