Доступна назва
Доступна назва – це назва елемента користувацького інтерфейсу; це текст, пов'язаний з елементом HTML, який слугує користувачам допоміжних технологій підписом елемента.
Доступні назви доносять призначення чи намір елемента. Це допомагає користувачам зрозуміти, для чого цей елемент і як з ним взаємодіяти. Загалом, доступні назви елементів повинні бути неповторними на всій сторінці. Це допомагає користувачам відрізняти елемент від інших елементів і визначити елемент, з яким хочуть взаємодіяти.
Залежно від елемента та розмітки HTML, значення доступної назви може виводитися від видимого (наприклад, тексту всередині <figcaption>) або невидимого (наприклад, атрибута aria-label, заданого на елементі) вмісту, або ж від поєднання першого та другого. Те, як визначається доступна назва елемента, ґрунтується на обчисленні доступної назви, яке відрізняється для різних елементів.
Найкраще для доступної назви користуватися видимим текстом. Чимало елементів, серед яких <a>, <td> і <button>, отримують свою доступну назву від свого вмісту. Наприклад, у разі <a href="foo.html">Bar</a> доступна назва цього гіперпосилання – "Bar."
Інші елементи отримують свою доступну назву від вмісту пов'язаних із ними елементів. Наприклад, коли елемент <fieldset> або <table> має серед нащадків елемент, відповідно, <legend> або <caption>, то зв'язування вкладеного елемента з предком, якому він надає доступну назву, є автоматичним. Для формових елементів, як-от <textarea> або <input>, доступна назва походить від пов'язаного з ними елемента <label>. Зв'язування необхідно явно визначити, задавши на елементі <label> атрибут for, що відповідає id формового елемента. Інший варіант – утворюється неявне зв'язування, коли формовий контрольний елемент безпосередньо вкладений в елемент <label>.
Для частини елементів доступна назва походить від атрибутів; наприклад, атрибута alt у разі <img>. Для зображення <img src="grape.jpg" alt="банан"/> доступна назва – це "банан".
Щоб утворити зв'язування між видимим вмістом і елементом або кількома текстовими вузлами та елементом, можна скористатися атрибутом aria-labelledby. Якщо немає видимого тексту, який можна було б зв'язати з елементом UI, якому потрібна доступна назва, може бути використаний атрибут aria-label. Назви не повинні додаватися до елементів, що розмічають текст, наприклад, <code>, <del> і <mark>.
Багатьом елементам, наприклад, розділам текстового вмісту, доступна назва не потрібна. Усі контрольні елементи повинні мати доступні назви. Усі зображення, що доносять інформацію та не є суто декоративними, також повинні їх мати.
Допоміжні технології сповіщають користувачам властивість доступної назви, яка вміщає доступну назву, а також роль елемента. Попри те, що багатьом елементам не потрібна доступна назва, необхідно надавати таку назву, щоб замістити або доповнити вміст елементів із заданими ролями. Наприклад, tabpanel – це розділ вмісту, що з'являється, коли користувач активує зв'язаний елемент з роллю tab. Ця роль може бути задана на елементі без необхідної назви, наприклад, елементі <div>. tab - це контрольний елемент, що мусить мати доступну назву. tabpanel – це дочірній (щодо tab) елемент (розділ зі вмістом). Додати до tabpanel атрибут aria-labelledby – найкраща практика.