ARIA

WAI-ARIA — Accessible Rich Internet Applications — е спецификация на W3C, която запълва конкретна празнина: когато нативните HTML елементи не са достатъчни за описване на потребителски интерфейсен контрол, ARIA предоставя речник от роли, състояния и свойства, разбираеми за помощните технологии (и по-специално за екранните четци).

Какво е и какво не е ARIA

ARIA е слой върху HTML. Тя не добавя поведение. Поставянето на role="button" върху <div> кара екранния четец да го обявява като бутон, но не го прави фокусируем, не добавя клавишна обработка и не добавя визуален стил. Всичко това трябва да се добави ръчно.

Именно това е причината за повечето ARIA грешки в продукция: разработчиците добавят ролята и спират — след което пускат „бутон”, който не реагира на Enter или интервал, не е достижим с Tab и няма индикатор за фокус.

Първото правило на ARIA

Ако може да се използва нативен HTML елемент с необходимата семантика и поведение, трябва да се направи именно това.

Всеки ред ARIA код представлява HTML семантика, решена да бъде реализирана ръчно. <button> вече се обявява като бутон, е фокусируем, реагира на Enter и интервал и има пръстен за фокус — безплатно. <div role="button" tabindex="0"> с персонализирани клавишни обработчици постига същото, но крехко и с повече код.

Основните категории

ARIA дефинира три вида атрибути:

• Роли — какво е елементът (role="button", role="dialog", role="navigation", role="alert"). Пълният списък с роли наброява над 80 записа; ръководството на WAI — ARIA Authoring Practices Guide — ги групира в ориентирни роли (landmark roles), роли за контроли (widget roles) и роли за структурата на документа (document-structure roles).
• Състояния — какво е текущото условие на елемента (aria-expanded="true", aria-checked="false", aria-disabled="true"). Състоянията се променят по време на изпълнение.
• Свойства — какви са връзките на елемента (aria-labelledby="title-id", aria-describedby="help-id", aria-controls="menu-id"). Свойствата обикновено са статични.

Останалите три правила на ARIA

Петте правила на W3C след „използвай нативен HTML, когато е възможно”:

2. Не се променя нативната семантика без наистина основателна причина. (<h1 role="button"> объърква екранните четци — не е ясно дали елементът е заглавие или бутон.)
3. Всички интерактивни ARIA контроли трябва да са използваеми с клавиатура.
4. Не се използва role="presentation" или aria-hidden="true" върху фокусируем елемент.
5. Всички интерактивни елементи трябва да имат достъпно наименование.

Спазването на тези пет правила елиминира над 80% от ARIA грешките.

Откъде да се започне

Най-полезният операционен справочник е ARIA Authoring Practices Guide (APG), който предоставя пълни реализационни шаблони за разпространени контроли — combobox, диалогови прозорци, дървовидни изгледи, раздели — включително таблици с клавишни взаимодействия и DOM примери.