ARIA

Категория: Дизайн

Какво е ARIA?

ARIA (Accessible Rich Internet Applications) е набор от атрибути, които помагат да се направи уеб съдържанието и уеб приложенията по-достъпни за хора с увреждания. Тя допълва HTML, като предоставя допълнителна семантика, която помощните технологии (като екранни четци) могат да използват за по-добро общуване с потребителите.

ARIA е разработена от W3C (World Wide Web Consortium) и е част от техните инициативи за уеб достъпност.

Основни компоненти на ARIA

Роли (Roles)

Дефинират типа на елемент и неговата цел в потребителския интерфейс. Ролите казват на помощните технологии "какво е това".

landmark roles: banner, navigation, main
widget roles: button, slider, dialog
document structure roles: heading, list, table

Свойства (Properties)

Предоставят допълнителна информация за елементите, която не може да бъде определена само от ролята.

aria-label: предоставя етикет за елемент
aria-describedby: свързва елемент с описание
aria-required: показва, че полето е задължително

Състояния (States)

Описват текущото състояние на интерактивни елементи. Състоянията могат да се променят по време на работа на приложението.

aria-checked: за радио бутони и чекбокси
aria-disabled: показва, че елементът е деактивиран
aria-expanded: показва дали меню или секция е отворена

Защо е важно да използваме ARIA?

Подобрена достъпност: Помага на хората с увреждания да използват уеб приложенията
Поддръжка на динамично съдържание: Прави Ajax и динамично зареждано съдържание достъпно
Подобрена семантика: Добавя значение към елементи, които HTML сам не може да опише напълно
Съвместимост: Работи с помощни технологии като екранни четци
Правно изискване: Много страни изискват уебсайтове да са достъпни

Често използвани ARIA роли

role="banner"

За област, съдържаща маркиране на сайта и лого

role="navigation"

За навигационни менюта и връзки

role="main"

За основното съдържание на страницата

role="complementary"

За странични ленти и допълнително съдържание

role="contentinfo"

За информация за съдържанието като футър

role="search"

За области за търсене

role="button"

За елементи, които се държат като бутони

role="dialog"

За диалогови прозорци и модални прозорци

Добри практики при използване на ARIA

Използвайте семантичен HTML, когато е възможно: ARIA трябва да се използва само когато HTML не предоставя необходимата семантика
Не злоупотребявайте с ARIA: Повече ARIA не винаги означава по-добра достъпност
Тествайте с помощни технологии: Уверете се, че ARIA атрибутите работят с екранни четци
Не променяйте семантиката на елементите: Не използвайте ARIA по начин, който противоречи на естествената семантика на елемента
Поддържайте състоянията синхронизирани: Уверете се, че ARIA състоянията отразяват действителното състояние на елементите

Важно предупреждение

Първо правило на ARIA: Не използвайте ARIA, ако можете да използвате семантичен HTML елемент, който вече има необходимата семантика и поведение.

Например, използвайте <button> вместо <div role="button">, защото <button> вече има вградена семантика, фокус и клавиатурна поддръжка.

ARIA и HTML5

HTML5 елемент	Еквивалентна ARIA роля	Забележка
<header>	role="banner"	Използвайте HTML5 елемента, когато е възможно
<nav>	role="navigation"	HTML5 елементът е за предпочитане
<main>	role="main"	HTML5 елементът е за предпочитане
<aside>	role="complementary"	HTML5 елементът е за предпочитане
<footer>	role="contentinfo"	HTML5 елементът е за предпочитане
<section>	role="region"	Давайте aria-label на section елементи