Створення доступного допоміжного зринаючі підказки

25

Від автора: сьогодні один з тих днів, коли мені довелося загугліть черговий питання доступності. Я працюю над новим проектом під назвою Provata. Переді мною постало завдання створити прикольний і, здавалося б, простий допоміжний тултип, який пояснював би читачам/користувачам, що таке Framingham calculator.

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

Создание доступного вспомогательного тултипа

Як і у всіх проектах, перше, про що я подумав – які елементи HTML використовувати для розмітки компонента. Але виявилося, що для зринаючі підказки немає відповідного HTML тега. А якщо немає відповідного семантичного елемента, перед нами постає проблема. Нам потрібно переконатися, що допоміжні технології (AT), які зазвичай розуміють і передають сенс через семантику, зрозуміють, що це за елементи, і що вони роблять.

Допоможуть ARIA атрибути?

Коли тільки HTML недостатньо, зробити елементи більш читабельними для AT можна з допомогою ARIA атрибутів. Наприклад, можна створити прогрес бар, не використовуючи погано підтримуваний тег progress. Створити прогрес бар і надати йому вигляд і поведінку можна з легкістю за допомогою CSS, однак якщо ви використовуєте div и і span’и, то щоб з цих елементів щось та вийшло, потрібно дати AT щось більше. Тут нам допоможуть ARIA атрибути типу role=»progressbar» і його компаньйони, aria-valuenow, aria-valuemin і aria-valuemax. Додаємо трохи простого JS і оновлюємо значення в aria-valuenow по мірі просування користувача за етапами. Якщо цікаво, більш докладно можете ознайомитися з темою на MDN. Відмінно.

У нас є значення ARIA атрибут, що вказує на тултип – tooltip. Атрибут role=»tooltip» явно говорить AT, що цей елемент є тултипом.

Але зринаючі підказки. зазвичай розкриваються після дії над іншим елементом.

Повернемося до основ. З Wikipedia: «Тултип, инфотип або підказка – загальний елемент графічного інтерфейсу. Використовується разом з курсором, зазвичай типу pointer. Користувач наводить вказівник миші на елемент, не натискаючи на нього, після чого з’являється тултип – невеликий спливаючий блок з інформацією про те елементі, на який наведено курсор. У мобільних операційних системах зринаючі підказки. не з’являються, так як у них немає курсору (вони можуть відображатися, якщо використовувати мишу).»

У мене виникла проблема з частиною «в мобільних операційних системах зринаючі підказки. не з’являються, так як у них немає курсору». Мобільні користувачі мають стільки ж прав, скільки й решта, і повинні бачити допоміжну інформацію. Чи використовуєте ви миша або палець, у вас повинна бути можливість зрозуміти, що таке Framingham score. Тобто тултип повинен бути доступний у всіх контекстах. І ось тут починається веселощі.

Виклик відкриття/закриття зринаючі підказки

Я розумів, що події hover мені недостатньо (хоча клієнт замовляв тільки hover), так як, якщо у вас немає тач скрін з цифровою ручкою, яка вміє запускати hover, ви не зможете побачити підказку в тултипе, що неприйнятно.

Я поставив мету створити тултип, який буде відображатися при наведенні і натисканні на іконку.

Варто відзначити, що деякі зринаючі підказки. працюють як на тач скронях, так і на звичайних екранах без додаткового втручання. В якості прикладу можна навести зринаючі підказки. у вигляді допоміжних лейблів на полях input, як у прикладі від Heydon Pickering. У подібних сценаріях для індикації AT, що цей шматок тексту є тултипом, що описує контент або функціонал поля, достатньо role=»tooltip» в парі з aria-describedby. Маркувати тултип в такому разі дуже просто, так як вже зрозуміло, що цей елемент означає. Вам залишається показувати/ховати текст, коли полі input отримує фокус. А це можна зробити парою рядків CSS. Спосіб відмінно і однаково працює як з мишею, так і на тач скронях.

Проте якщо у вас приклад, як у моєму проекті, все не так легко. І, судячи з усього, я не один, хто не знав, як вирішити цю проблему.

Мені прийшло в голову кілька ідей щодо реалізації такого зринаючі підказки:

Відкривати і закривати тултип з допомогою button. За замовчуванням тултип схований, тому AT не прочитають його текст вголос. Тултип перериває потік контенту в нашому проекті, тому він повинен відображатися на вимогу.

«на вимогу» означає, що тултип показується при наведенні миші, кліки, натиснення пальцем, одержанні фокуса.

За замовчуванням тултип схований за допомогою display: none і показується на вимогу.

Я завжди пишу HTML код з упором на семантику і те, «як машини будуть читати це», тому я подумав: якщо я використовую button, мені доведеться використовувати aria-controls для вказівки того, що контролює ця кнопка, а також що вона буде показувати/ховати якийсь елемент по кліку. Все добре.

Говорячи про семантику, можна було також використовувати посилання , яка вказувала б на певну секцію сторінки, яка в моєму випадку була елементом з підказкою.

При використанні посилання, користувач буде перестрибувати на певну секцію сторінки. Я ненавиджу стрибки по сторінкам. Намагаюся уникати їх, як чуми. Використовую тільки, коли зрозуміло, що це якір (наприклад, посилання «наверх» на занадто довгих сторінках).

Щоб не використовувати , а кнопка button відкривала і закривала тултип, мені потрібен JS.

За якимось глобальним причин я хочу уникнути JS і використовувати його тільки, коли він необхідний. А що якщо користувач сидить на дуже старій машині з відключеним JS?

Зазвичай якщо я починаю розриватися між двома рішеннями, думаю про те, скористатися чи ні JS, я шукаю друга думка. Мій перший джерело другого думки – Google. Я подумав: «хтось повинен був створити такий тултип, потрібно подивитися, як він вирішив ці проблеми».

На даному етапі я все ще хотів обійтися без JS. Вірите чи ні, але я люблю JS і був готовий використовувати спосіб з ним, якщо він краще за інших.

Google привів мене на форуми, де ставили ті ж самі питання, що і у мене в голові. Я знайшов багато схожих питань, але всі вони були по тултипам на полі input. Я знайшов дуже стару гілку Zoe Gillenwater, вона задавала таке ж питання ще в 2011 році. Я розумів, що частина технічних деталей в наш час могли бути неправильними, але основні принципи були вірні. Перед тим як продовжити, раджу прочитати цю гілку, так як вся подальша інформація заснована на ній. Основні моменти з тієї гілки:

Уникайте button, краще використовувати , так як посилання можна використовувати з чим завгодно, а кнопки потрібно використовувати в формах. Тут я не згоден. Якщо можете назвати реально хорошу причину, чому не варто використовувати button, напишіть мені.

При використанні потрібно врахувати/запам’ятати — якщо ви використовуєте , і підказка знаходиться всередині посилання:

Код наступний: