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

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

Як і у всіх проектах, перше, про що я подумав - які 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 і показується на вимогу.

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

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

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

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

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

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

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

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

На чистому CSS ховати і показувати текст можна за допомогою display: none і display: block при наведенні курсору на елемент. Зручно для тих, хто бачить користувачів, що використовують миша. Однак ...

Якщо ховати текст за допомогою display: none в тезі і показувати його по отриманню фокуса, AT не зможе вважати відображається текст, так як контент посилання оголошується при першому focus і не оголошується повторно, коли текст відображається всередині посилання за допомогою display: block.

Висновок?

Хочете детально вивчити вимоги атрибутів, настійно рекомендую ARIA Role Matrices від WhatSock. Дуже простий в читанні огляд.

Paul J Adam також створив демо. в якому показав різні способи відображення зринаючі підказки по наведенню миші. Його приклад використовує JS, щоб зробити компоненти більш доступними за допомогою перемикання ARIA атрибутів при відкритті / закритті зринаючі підказки. Рекомендую подивитися.

Редакція: Команда webformyself.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі