Какво представляват атрибутите на Aria в HTML и защо са важни?

Уеб дизайнерите, които са нови в HTML, могат да се натъкнат на набор от непознати атрибути. С префикс думата ARIA, тези атрибути се появяват навсякъде в мрежата, но тяхната цел може да бъде загадка за новите потребители.

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

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

Какво представляват атрибутите на ARIA?

ARIA е съкращение от Accessible Rich Internet Applications. В съвременния HTML, особено в приложенията, богати на JavaScript, не винаги е очевидно въз основа на синтаксиса каква роля изпълняват отделните елементи.

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

Докато предпочитаният начин за разрешаване на този проблем е да използвайте правилните семантични елементи в HTML5, това не винаги е практично или възможно. Тук се намесват ARIA атрибутите на HTML елементи. Тези атрибути помагат да се дефинират ролята и атрибутите на вашия елемент по начин, който инструментите за достъпност могат да обработват.

Защо атрибутите на ARIA са важни?

Накратко, атрибутите на ARIA позволяват на потребители с увреждания да използват вашия уебсайт. Тези роли и атрибути определят допълнителна информация за различни елементи на вашия сайт, които иначе може да не са лесно достъпни.

Има голямо разнообразие от ARIA атрибути, които можете да присвоите. Трябва да ги използвате навсякъде, където се нуждае от допълнителен контекст, за да може документът да има смисъл по невизуален начин.

Например, помислете за сайт, който има основна навигация, съставена от a елемент, обвит в a елемент, а не a елемент:

<дивклас="навигация">
<ул>
<ли>У домали>
<ли>Магазинли>
<ли>относноли>
ул>
див>

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

<дивклас="навигация">
<улроля="навигация"ария-етикет="Главен">
<ли>У домали>
<ли>Магазинли>
<ли>относноли>
ул>
див>

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

В този сценарий можете да създадете персонализиран набор от елементи за показване на лентата за напредък. За екранен четец обаче тези елементи ще изглеждат като объркана бъркотия; няма да може да достави полезна информация на посетителите на вашия сайт.

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

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

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

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

Кои ARIA атрибути трябва да използвам?

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

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

Когато става въпрос за обмисляне кои атрибути на ARIA трябва да включите, простият отговор е колкото е възможно повече. Навсякъде, където елементът, който използвате, не описва ролята, която елементът изпълнява, трябва да използвате атрибута role.

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

Атрибутите на джаджи са много по-голямата категория. Той съдържа повечето от ARIA атрибутите, които ще трябва да добавите към стандартен сайт. В по-ранния пример на персонализираната лента за напредък, aria-valuenow, aria-valuemin и aria-valuemax са всички атрибути на модула. Те описват състоянието или възможните състояния на елемента, върху който се намират.

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

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

Атрибути на връзката

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

Ако зададете роля атрибут към навигация, той веднага ще бъде идентифициран като обвивка на навигация.

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

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

Тези атрибути са от особено значение, когато проектирате формуляри и елементи за навигация на вашия сайт.

Защо е толкова важно да включите ARIA атрибути във вашия HTML

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

Предпочитаният метод за работа с помощни технологии е използването на правилните семантични елементи. Когато обаче това не е възможно, атрибутите на ARIA позволяват да работите свободно, без вашите потребители да губят съдържание.