Доступні підказки (tooltip)

Магазини використовують підказки для іконки «i» біля примітки про ПДВ, для пояснення термінів доставки, для кнопок-іконок у шапці та порад щодо розміру. Вони виглядають просто, але підказка, що з'являється лише при наведенні миші, невидима для користувачів клавіатури й сенсорних екранів, а та, що закриває вміст і не закривається, є порушенням WCAG. Ця сторінка входить до серії доступні UI-патерни.

Коли використовувати підказку

APG описує підказку як «спливну панель, що відображає інформацію, пов'язану з елементом, коли елемент отримує фокус клавіатури» або над ним наводять мишу. Використовуйте її лише для короткого, несуттєвого опису елемента керування — мітки для кнопки-іконки, підказки. Важлива інформація (ціни, умови доставки, правила повернення) має бути у видимому тексті. Інтерактивний вміст належить розкриттю або діалогу.

Примітка: APG каже, що патерн tooltip — «у розробці; він ще не має консенсусу робочої групи». Ставтеся до нього як до орієнтира й тестуйте зі справжніми допоміжними технологіями.

Відповідні критерії WCAG

• 1.4.13 Вміст під час наведення курсора чи встановлення фокуса (AA). Вміст, що з'являється при наведенні чи фокусі, має бути:

  • закривним — «є механізм закрити додатковий вміст без переміщення вказівника чи фокуса клавіатури» (зазвичай Escape), якщо тільки він не повідомляє про помилку введення;
  • придатним для наведення — вказівник може перейти на підказку, і вона не зникає;
  • стійким — він лишається, доки тригер не буде прибрано, користувач не закриє його або інформація не втратить чинності.

  Критерій не охоплює вміст, подання якого контролює браузер; W3C називає головним прикладом підказку браузера від атрибута title.

• 2.1.1 Клавіатура (A): те, що з'являється при наведенні, має бути досяжним і з клавіатури.

• 4.1.2 Назва, роль, значення (A): кнопка-іконка потребує назви; сама підказка — ненадійна назва.

• 1.4.3 Контраст (мінімальні вимоги) (AA): текст підказки потребує 4,5:1.

• 2.4.11 Фокус не перекрито (мінімальні вимоги) (AA): підказка не повинна повністю закривати елемент у фокусі.

Приклад коду

<!-- Tooltip as description of a focusable control (APG pattern) -->
<button type="button" class="icon-btn" aria-describedby="tip-compare">
  <svg aria-hidden="true" focusable="false"><use href="#icon-compare"></use></svg>
  <span class="visually-hidden">Порівняти</span>
</button>
<div id="tip-compare" role="tooltip" hidden>Додати до списку порівняння</div>

<!-- Toggletip: information opened by click, not on hover -->
<button type="button" aria-expanded="false" aria-controls="vat-info">
  <span class="visually-hidden">Про ПДВ</span>
  <svg aria-hidden="true" focusable="false"><use href="#icon-info"></use></svg>
</button>
<p id="vat-info" hidden>Ціни включають ПДВ для країни вашої доставки.</p>

Скрипт для підказки: показуйте її при focus і mouseenter, ховайте при blur і mouseleave і тригера, і підказки (щоб вказівник міг на неї перейти), а також ховайте при Escape, поки фокус лишається на тригері. APG каже: «віджети підказок не отримують фокус» і «фокус лишається на елементі-тригері, поки підказку показано». Тригер посилається на підказку через aria-describedby.

Другий приклад — кнопка розкриття, той самий патерн APG, з якого побудовано акордеони: вона перемикає aria-expanded, а вміст лишається видимим, доки користувач його не закриє, — це краще для сенсорних екранів і довших текстів.

Взаємодія з клавіатури

Типові помилки в інтернет-магазинах

• Підказки лише при наведенні на іконках «i», що є елементами span, тож користувачі клавіатури й сенсорних екранів ніколи не бачать приміток про доставку чи ПДВ.
• Важливі умови лише в підказці: терміни повернення, вартість доставки, «ціна за кілограм».
• Підказка зникає, коли вказівник рухається до неї, тож люди, які користуються екранним збільшенням, не можуть її прочитати.
• Немає Escape, а підказка закриває наступне поле форми.
• Посилання всередині підказки («Докладніше»), які ніколи не можуть отримати фокус.
• Кнопки-іконки, названі лише через title, який не показується при фокусі чи на сенсорних екранах.
• Текст підказки з низьким контрастом, наприклад світло-сірий на білому.

Що знаходить автоматична перевірка, а що — ручне тестування

Усі вони є картками в нашій бібліотеці правил. 1.4.13 не можна перевірити автоматично: сканування бачить сторінку такою, якою вона завантажується, а не те, що з'являється при наведенні чи фокусі. Тестуйте вручну: перейдіть Tab до кожного тригера, перевірте, що підказка з'являється, натисніть Escape, наведіть на неї мишу, збільште до 200 % і перевірте, що її все ще можна прочитати. Розширення для браузера допоможе з рештою сторінки.

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

Часті запитання

Який критерій WCAG застосовується до підказок?

1.4.13 «Вміст під час наведення курсора чи встановлення фокуса» (рівень AA). Вміст, що з'являється при наведенні чи фокусі, має бути закривним без переміщення вказівника чи фокуса, придатним для наведення, щоб вказівник міг на нього перейти, і стійким, доки користувач не прибере тригер чи не закриє його.

Чи є атрибут title доступною підказкою?

Підказка браузера від атрибута title лежить поза межами 1.4.13, бо нею керує браузер. Це все одно поганий спосіб подавати важливу інформацію: її не показує фокус клавіатури чи сенсорні екрани.

Що таке патерн tooltip в APG?

Спливна панель із role="tooltip", що з'являється, коли елемент отримує фокус клавіатури або над ним наводять вказівник; тригер посилається на неї через aria-describedby, підказка ніколи не отримує фокус, а Escape її закриває. APG каже, що патерн досі в розробці без консенсусу робочої групи.

Чи може підказка містити посилання або кнопки?

Ні. Підказка ніколи не отримує фокус, тож до інтерактивного вмісту в ній неможливо дістатися. Натомість використовуйте розкриття або немодальний діалог, що відкривається кліком.

Чи може автоматична перевірка протестувати підказки?

Вона знаходить елементи role="tooltip" без назви й кнопки-іконки без назви. Чи з'являється підказка при фокусі, чи лишається при наведенні та чи закривається через Escape, потрібно перевіряти вручну.

Джерела

• W3C WAI, APG Tooltip pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
• W3C, Understanding 1.4.13 Content on Hover or Focus: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/