Для 90% людей це, мабуть, ніколи не знадобиться ні в роботі ні на співбесідах, тож я зконцентруюсь на тих 10% кому це буде корисним.
Говорячи про семантику всі думають про семантичні теги:
<header />
<main />
<footer />
<section />
<article />
І так далі…
Їх багато. Але коли діло доходить до Доступності то майже ніхто не знає як це робиться, хоч і знають про ‘Семантику’.
Для чого потрібна Семантика ?
Семантика це інструмент дарований із приходом HTML 5, який допомагає налаштувати ‘Доступність’ сайту для скрінрідерів, голосових помічників та клавіатурам Браеля і т.п.
Люди візуально можуть розпізнати елементи, але не завжи ці елементи зверстані так як виглядають, і тому скрінрідери не можуть їх рорпізнати. Тут на допомогу прийшли - семантичні теги, roles, aria-*;
Семантичні теги можна розглянути зайшовши на будь який туторіал, це не цікаво.
Сьогодні поговоримо про [ARIA-*]
Перед початком, ця стаття буде розділена на декілька частин:
ARIA-* (у цій статті)
ROLES
Все разом і як тим користуватись
ARIA
Accessible Rich Internet Applications (ARIA) - Визначає спосіб зробити веб контент або веб застосунки (особливо ті що розроблені за допомогою Ajax, JavaScript) більш доступними для людей із обмеженими можливостями.
ARIA - це просто набір атрибутів які можна додати у будь яку розмітку, але особливо добре це підходить для HTML. Ці атрибути вказують лише на призначення елементу, його стан та взаємодію із іншими елементами.
Майже всі ARIA атрибути мають API, тому їх можна налаштовувати динамічно через JavaScript не змінюючи при цьому HTML (Такий підхід використовують коли є легасі сайт і немає доступу до HTML але потрібно покращити доступність).
ARIA дуже велика тема про яку мало хто знає, і ще менше вміє цим користуватись. Але менше з тим її підтримка браузерами дуже гарна (98.29%, для порівняння підтримка css-flex - 98.16%) . Тож сміливо можна використовувати.
Коли потрібна ARIA ?
Загалом, майже ніколи…
ARIA - абсолютно ніяк не впливає на відображення контенту браузерами, єдине виключення атрибут tabindex - але він впливає на порядок перемикання по елементах натискаючи кнопку TAB, але сьогодні тільки про ARIA.
Використовуючи звичайні HTML 5 теги правильно, ви зможете досягти гарної ‘Доступності', якщо замовник просить покращити доступність тоді уже використовуйте ARIA; Або якщо це легасі HTML 4 код (все на дівах), де ви не можете змінювати HTML.
Також інколи у SPA використовуючи сторонні (легасі) бібіотеки які впривають на контент або які надають готові рішення у вигляді компонентів можна додати ARIA. але краще робити форк таких бібліотек і змінювати код а ніж додавати на всі теги додаткові атрибути через JavaScript.
Детальніше про ARIA
ARIA тісно пов’язані із атрибутом role, тому не всі ARIA атрибути можна використовувати для певних груп тегів.
Про те як поєднувати role та ARIA у наступних матеріалах.
Зараз розберемо які є ARIA атрибути і для чого вони потрібні:
Атрибут | Опис |
|---|---|
Ідентифікує поточний активний елемент, коли фокус знаходиться на цьому елеменнті або на нащадках які можуть мати атрибут - фокус | |
aria-atomic | Вказує на зміни динамічно контенту на сторінці. (по типу - випадаючі нотифікації) |
aria-autocomplete | Вказує на поведінку автокомпліту, всього існує 4 варіанти: |
aria-braillelabel | Цей атрибут виключно для вказання значення тексту для шрифту Браеля. |
aria-brailleroledescription | Для вказання значеннь у томуж Шрифті Браеля тільки як опис елементів які не ідентифіковані семантично. |
aria-busy | Для позначення того що йде процесинг, лоадери, підгрузки, завантаження. т.п; |
aria-checked | Вказує на стан атрибуту "checked" у чекбоксів а радіо кнопок. Або інших елементів у яких може бути такий атрибут. |
aria-colcount | Для того щоб позначити кількість колонок у таких елементах як: |
aria-colindex | Для вказання порядку колонки відносно загальної кількості. Працє у таких елементах: table, grid, treegrid |
aria-colindextext | Для того щоб розширити aria-colindex і передати окрім порядку колонки також текст який може знаходитись у недрах леяуту. |
aria-colspan | Як і атрибут colspan - вказує на кількість зайнятих колонок цим елементом. |
aria-controls | Вказує на те що цей елемент (або елементи) контролюється елементом якому вказали цей атрибут. Посилання на елементи відбувається за допомомогою ідентифікатора - id; |
aria-current | вказує на те що даний елемент є представленим у даний момент, часто вживаються із посиланнями. |
aria-describedby | Вказує на опис елементу на який силається елемент якому задали цей атрибут, ссилання відбувається через id; |
aria-description | Можна надати більш розгорнутий опис елементу, якщо це наприклад, іконка, або кнопка зроблена через div |
aria-details | Цей атрибут використовується для того щоб задати додаткову інформацію про контент або сам елемент. |
aria-disabled | Вказує на те що стан елементу disabled - із таким елементом не можна взаємодіяти (натискати, редагувати). |
aria-dropeffect | Говорить про те що відбудеться із елементом коли закінчиться ефект перетягування: |
aria-errormessage | Цей атрибут вказує на елемент у якому задаєтсья помилка для цього елементу, через id; Використовується у валідаціях форм. |
Вказує стан елементу - згорнутий чи розгорнутий. для елементів - (details, expand-panels) | |
aria-flowto | вказує браузеру або скрінрідеру у якому порядку зчитувати текст на сторінці, можна вказати id елементу або елементів. |
Вказує на стан елементу - чи тягають його у данний момент | |
Вказує на те чи при якихось маніпуляціях із цим елементом відкриється діалог або попап. | |
Вказує на те чи цей елемент схований у данний момент. Старайтесь не вживати інші ARIA атрибути які відповідають за порядок, або фокус стан елементу коли aria-hidden=false. | |
Вказує на помилку значення яке задав користувач. | |
aria-keyshortcuts | Можна задати комбінацію кнопок - які активують елемент |
aria-label | Вказує на елемент у якму заданий опис цього елементу, через ідентифікатор id. |
Це як aria-label але на стероїдах, працює так само, але: | |
aria-level | Вказує порядок всередині ієрархії, наприклад якщо задати роль елменту - heading, і aria-level="3" - то це теж саме що використати елементи h3; |
aria-live | Вказує на те що елемент може оновлятись і який саме тип оновлення очікувати. |
aria-modal | Вказує чи це діалоговий елемент при його відображенні. |
aria-multiline | Вказує на те чи можнна ввести більше 1 рядка тексту в поле. |
aria-multiselectable | Вказує на те чи можна вибирати більше оденого значення. Наприклад для селекту чи автокомпліту. |
aria-orientation | Вказує орієнтацію елментів: |
aria-owns | Вказує на реальний батьківський елемент якщо по ієрархії його складно визначити, або потрібно ссилатись на інший елемент. |
aria-placeholder | Текст підказки |
aria-posinset | Вказує порядковий номер елементу у групі. |
aria-pressed | Говорить про стан кнопки - чи вона натиснути, чи ні у данний момент. |
aria-readonly | Вказує на те що цей елемент не доступний для редагування. |
aria-relevant | використовується у aria-live щоб вказати про те які конккретно нотифікації викличе user agent коли відбудуться зміни в aria-live (складно але то вам навряд колись знадобиться) |
aria-required | Вказує на те що це поле - обов’язкове. |
aria-roledescription | Таблиця roles - доволі абстрактна, тому цей атрибут дозволяє вказати опис у зручному для читання форматі, або більш розгорнуто |
aria-rowcount | Загальна кількість рядків у таблиці чи списку. |
aria-rowindex | Який реальний порядок цього елементу у списку чи таблиці. |
aria-rowindextext | Окрім порядку рядку можна задати реальне текстове значення. |
aria-rowspan | Кількість рядків які об’єднує у собі цей елемент |
aria-selected | Вказує на стан selected - і говорить про те чи вибраний цей елемент. |
aria-setsize | Вказує реальну кількість елементів у таблиці чи списку, або іншій групі елементів, якщо не всі елементи реально відображені. Наприклад таблиця із кнопкою load more; |
aria-sort | Вказує у якому порядку відсортовані елементи: ascending, descending, none (default), other. |
aria-valuemax | Вказує на максимальне допустиме значення у цьому елементі. |
aria-valuemin | Вказує на мінімальне допустиме значення у цьому елементі. |
aria-valuenow | Вказує на значення елементу у данний момент (для елементу range) |
aria-valuetext | Вказує читабельний варіант атрибуту - aria-valuenow |
Замахався то все оформляти, так дійсно - цих атрибутів багато, поки шукав матеріал, зрозумів що знав меншу половину…
Але це лише теорія, яка можливо, наштовхне вас на цікаві ідеї.
Підсумки
Реально в 95% роботи вам то не знадобиться, а комусь і у 100%. Але я не люблю писати про щось ‘ Хайпове', це інформація і вона може бути корисною або ні, але вона залишиться ‘бути‘.
