Доступний опис

Доступний опис – це опис елемента користувацького інтерфейсу, що надає додаткову інформацію, яка допомагає користувачам допоміжних технологій розуміти елемент UI та його контекст. Він зв'язаний з елементом HTML або SVG і надає користувачам додатковий контекст про призначення цього елемента на додачу до сповіщеного доступною назвою. Це особливо важливо для користувачів, що покладаються на допоміжні технології штибу читачів з екрана. Доступний опис елемента є частиною дерева доступності.

Наприклад, доступна назва елемента <table> надається його першим елементом <caption>. У разі складних таблиць даних описом можуть слугувати одне чи два речення. Це може бути абзац одразу перед або після таблиці, як візуально, так і в порядку коду. Якщо цей текст деінде в коді, або щоб зв'язування було явним, для зв'язування таблиці з її описом можна скористатися атрибутом aria-describedby.

Подібно до цього, коли користувача просять створити пароль, елемент <label> для <input> типу password надає доступну назву. Добрий доступний опис містить вимоги для пароля у такий спосіб, який видимий усім користувачам. Його можна явно зв'язати з полем за допомогою атрибута цього поля aria-describedby, що додає його до дерева доступності як 'description' цього вузла.

Описи зводяться до текстових рядків. У нашому прикладі з паролем, якщо значення атрибута aria-describedby поля – це id елемента HTML <ul> зі списком вимог, то описом стає зчеплений докупи текст і текстові еквіваленти кожного з елементів списку.

Можна перевірити доступний опис кожного елемента на сторінці: погляньте на вкладку доступності в інструментах розробника свого браузера, яка показує інформацію щодо доступності наразі вибраного елемента.

Обчислення доступного опису

У разі елементів HTML, якщо елемент не має доступного опису, то опис необхідно програмно зв'язати з відповідним елементом. Об'єктна модель доступності (AOM) обчислює доступний опис, почергово перевіряючи наступні варіанти, поки щось не буде визначено:

  1. Атрибут aria-describedby.

  2. Атрибут aria-description.

  3. Специфічні для мови можливості, що беруть участь в обчисленні опису, якщо ще не використані для визначення доступної назви. Наприклад:

    • Елемент <summary> описується вмістом вкладеного в нього елемента <details>.
    • Кнопки <input> (з атрибутом типу button, submit або reset) описуються значенням свого атрибута value.
    • У SVG це вміст елемента <desc>, якщо він є, а інакше – текст, вміщений у нащадках, що є текстовими контейнерами (наприклад, <text>), якщо він ще не вжитий для доступної назви.
  4. Якщо ніщо з переліченого вище не задало опису, вживається атрибут title, якщо він не є доступною назвою цього елемента.

  5. Якщо нічого з переліченого вище не визначає доступного опису, то доступний опис – порожній.

Кроки для визначення доступного опису в HTML визначені в Доступному описі HTML-AAM). Доступний опис елементів SVG обчислюється майже так само та визначений у Доступному описі SVG-AAM).

Дивіться також