Орієнтир

ділянка сторінки, куди стрибає екранний читач

Що це таке

Орієнтир, який також називають орієнтирною ділянкою або англійським терміном ARIA landmark, — це частина вебсторінки, яку розмітка називає за призначенням, наприклад шапка сайту, основний вміст, навігація чи підвал, щоб допоміжні технології могли показати перелік цих частин і перейти просто до будь-якої з них. Зазвичай на сторінці є кілька орієнтирів, і разом вони описують її макет людині, яка цього макета ніколи не бачить.

WAI-ARIA 1.2 визначає вісім ролей-орієнтирів: banner, navigation, main, complementary, contentinfo, search, form і region. Дев’ята, сама landmark, — абстрактна батьківська роль у моделі ролей специфікації, і авторам прямо сказано її не використовувати. Більшості сторінок атрибут role для решти ролей не потрібен, бо HTML-елементи вже їх мають:

  • main — це орієнтир main, а nav — орієнтир navigation.
  • header і footer стають banner і contentinfo лише тоді, коли належать до сторінки загалом. Усередині article, section чи main вони є звичайною структурою сторінки й орієнтирами не вважаються.
  • aside є complementary на верхньому рівні сторінки або всередині main. В іншому секційному вмісті він рахується лише тоді, коли має ім’я.
  • section стає орієнтиром region лише тоді, коли має доступне ім’я з aria-label або із заголовка, на який посилається aria-labelledby. section без імені — просто група.
  • form відповідає ролі form, і специфікація вимагає, щоб автори дали їй мітку. Новіший елемент search відповідає ролі search.

Специфікація просить допоміжні технології давати змогу швидко дістатися цих ділянок, і екранні читачі це роблять. У NVDA клавіша D переходить до наступного орієнтира, а список елементів показує всі одразу; ротор VoiceOver має власний список орієнтирів. Людина, яка відкриває сторінку, може викликати цей список, почути, що на ній є шапка, навігація, основна ділянка й підвал, і зрозуміти форму сторінки ще до першого слова вмісту.

Чому це важливо

Рішення, що стоїть за орієнтирами, звучить так: чи кожна частина сторінки розташована там, де слухач може її назвати й до неї дістатися. На типовій сторінці більша частина вмісту повторюється: шапка, меню, підвал і часто бічна панель однакові на всіх сторінках сайту, а нове лежить десь посередині. Зряча відвідувачка одразу дивиться туди. Без орієнтирів людині з екранним читачем доводиться на кожній сторінці прослуховувати ту саму шапку й те саме меню або вгадувати, скільки заголовків пропустити.

Власна техніка WCAG для орієнтирів, ARIA11, указана як достатній спосіб виконати три критерії успішності. Один із них вимагає способу пропускати блоки вмісту, що повторюються на різних сторінках; інший — щоб структура, яку зряча людина зчитує з макета, була доступна й програмам. Виконати їх так недорого, якщо сторінку від початку побудовано з header, nav, main і footer: семантика приходить разом з елементом, і підтримувати додатково нічого не треба. Додати орієнтири згодом у макет із вкладених елементів div дорожче, але ця робота здебільшого механічна.

Варто знати дві межі. Перша: специфікація залишає навігацію за орієнтирами необов’язковою для звичайних браузерів, тож користувачка клавіатури без екранного читача зазвичай нічого від самих орієнтирів не отримує, і видиме посилання для переходу до вмісту досі потрібне. Друга: більше орієнтирів не робить сторінку зручнішою. Кожен із них — рядок у списку, який хтось має прослухати, і сторінка, де кожен блок є названою ділянкою, звучить як зміст на п’ятдесят рядків. Специфікація лишає region для вмісту, достатньо важливого, щоб з’явитися в огляді сторінки, і просить авторів використовувати його лише тоді, коли мету не описує інша роль.

Як це виглядає на практиці

Орієнтири належать до тих небагатьох частин доступності, які бачать інструменти, але не око. Знак бренду на кожній внутрішній сторінці стояв поза всіма орієнтирами, і на екрані цього не було видно. Виявила це робота, яка довела весь сайт до WCAG 2.2 рівня AA. Автоматизація запускає рушій правил доступності з увімкненими правилами найкращих практик, а не лише з правилами відповідності, і це різниця в тридцять правил. Одне з додаткових правил провалилося, щойно його ввімкнули.

Чому дефект так довго лишався непоміченим, пояснює інша робота. Серед одинадцяти дефектів доступності, які браузер звітував здоровими, два сиділи в самих перевірках, а не на сторінках, і один із них полягав у тому, що рушій правил виконував сімдесят зі своїх ста п’яти правил. Правила, яке спіймало б відсутній орієнтир, у наборі просто не було. Висновок сторінки короткий: набір правил, у якому немає правила, не може його застосувати.

Схожий дефект знайшовся й поза основним сайтом. Посадкова сторінка перед власною git-форджею компанії була копією дизайну основного сайту, яку підтримували вручну, і кожна знайдена між ними відмінність виявлялася випадковістю, а не рішенням. Одна з п’яти полягала в тому, що жодна сторінка не мала головного орієнтира чи заголовка верхнього рівня, і жодної з п’яти не було видно на знімку екрана. Копію видалили, і тепер посадкову сторінку будують власні шаблони основного сайту, тож вона успадковує ту саму структуру, а не наслідує її.

Де виникають проблеми

Помилки з орієнтирами мовчать на екрані й добре чутні в екранному читачі. Ось найпоширеніші.

Вміст опиняється поза всіма орієнтирами. Логотип, повідомлення про кукі чи перемикач мов стоїть перед header або після footer, і слухачка, яка рухається за орієнтирами, його проминає. Правило axe region повідомляє про будь-який вміст поза орієнтиром, але позначене як найкраща практика, а не як порушення WCAG, тож запуск, обмежений тегами WCAG, його ніколи не виконує. Увімкніть правила найкращих практик і перенесіть зайвий елемент в орієнтир, до якого він належить.

Та сама роль з’являється двічі з тим самим ім’ям. Два елементи nav, один у шапці, другий у підвалі, обидва оголошуються як «навігація», і слухачеві доводиться вгадувати, де який. Дайте кожному коротку окрему мітку через aria-label або aria-labelledby і не повторюйте в мітці назву ролі: навігацію з міткою «Навігація сайту» прочитають як «Навігація сайту, навігація».

З’являється другий main чи banner. Елемент div отримує role="main" або role="banner", щоб компонент здавався важливим, або шаблон обгортає внутрішню сторінку у власний main, і тепер сторінка оголошує дві ролі там, де має бути одна. Специфікація просить не більше одного banner, одного main та одного contentinfo на сторінці, і для кожного з них в axe є правило. Перевіряйте список орієнтирів після кожної зміни макета й покладайтеся на вбудовані елементи скрізь, де це можливо.

Кожен блок стає ділянкою. Бібліотека компонентів за замовчуванням дає кожному section атрибут aria-label, і список орієнтирів заповнюється заголовками карток. Давайте ім’я section лише тоді, коли читачка захотіла б перейти до нього з будь-якого місця сторінки.

Сторінка, побудована за ескізом нижче, дає слухачеві п’ять зупинок, кожна зі своїм ім’ям:

<header><!-- логотип, пошук --></header>
<nav aria-label="Сайт"><!-- меню --></nav>
<main>
    <h1>Ціни</h1>
    <section aria-labelledby="hosting">
        <h2 id="hosting">Хостинг</h2>
    </section>
</main>
<footer><!-- контакти, правове --></footer>

Що почитати далі

  • WAI-ARIA 1.2: Landmark Roles — вісім ролей, призначення кожної з них і те, яким потрібна мітка.
  • Landmark Regions — посібник W3C для авторів про вибір ролей, мітки для повторюваних орієнтирів і про те, щоб увесь вміст лежав усередині одного з них.
  • HTML Accessibility API Mappings 1.0 — які HTML-елементи стають якими ролями, зокрема коли header, footer, aside і section вважаються орієнтирами.
  • ARIA11: Using ARIA landmarks to identify regions of a page — техніка WCAG із процедурою перевірки та критеріями успішності, які вона виконує.

Словник