Навігація з клавіатури як оптимізація юзабіліті сайту
Коротке резюме: для відвідувачів, які не користуються мишею, необхідно створити доступні рішення щодо навігації з клавіатури.
Багато людей користуються інтернетом за допомогою клавіатури, а не миші з різних причин. «Технарі» і просунуті користувачі віддають перевагу командам з клавіатури, оскільки це підвищує швидкість і ефективність роботи. Але є люди з обмеженими можливостями, для яких клавіатура є єдиним доступним пристроєм введення інформації.
Наприклад, люди з руховими порушеннями зазнають труднощів з дрібною моторикою, необхідною для використання миші, а слабозорим важко користуватися мишею через дрібні елементи на сторінці та використання допоміжних програм.
Навіть найкрасивіший і найсучасніший дизайн абсолютно марний, якщо з ним неможливо взаємодіяти. Тому оптимізація навігації під клавіатуру дозволить працювати з ресурсом і тим, хто з низки причин не може використовувати мишу.
І цілком можливо, що саме ця таргет-група є платоспроможною цільовою аудиторією вашого бізнесу.
Як перевірити доступність сайту для навігації з клавіатури?
Якщо ви читаєте цю статтю на ПК або ноутбуці у браузері Firefox, IE, Chrome або Safari, виконайте наступний алгоритм:
Ви могли помітити 3 речі:
- при навігації з клавіатури фокусування переміщається до активного об'єкта на сторінці;
- за допомогою клавіатури ви можете вибрати будь-яке посилання на сторінці;
- посилання прогортаються відповідно до макету сторінки: зліва направо та зверху вниз по стовпцях.
Можливо, навігація з клавіатури повільна і трохи дратівлива, але вона хоч би існує.
Індикатор фокусування під час навігації з клавіатури
Уявіть, щоВи використовуєте мишу під час веб-серфінгу, але не бачите курсору на екрані. Чи це зручно? Швидше, жахливо. Ті самі почуття відчувають користувачі клавіатури, коли обраний елемент не виділяється.
Сайти повинні давати рівноцінний зворотний зв'язок як миші, так клавіатури. За замовчуванням фокусування клавіатури вбудоване у всі великі браузери. Деякі з них виділяють вибрані елементи сірим пунктиром, інші синьою лінією, це неважливо - у будь-якому випадку користувач бачить, який елемент сторінки задіяний в даний момент.
Іноді цей вбудований функціонал свідомо видаляється при розробці сайту – подібна ініціатива веде до сумних наслідків. Як правило, підставою для цього є дотримання принципів юзабіліті та невідповідність дизайну сторінки. У такому разі не видаляйте виділення з клавіатури, а просто змініть його, підлаштувавши під загальний дизайн сайту.
MailChimp.com використовує виділення за промовчанням. На скріншоті добре видно, що користувач вибрав посилання Email Designer, перейти по якій можна натиснувши Enter.
StrideHealth.com вибрав інший підхід - посилання з клавіатури виділяються так само, як за допомогою миші. На скріншоті користувач вибрав вкладку Find Your Plan у верхньому правому кутку.
Всі інтерактивні елементи доступні
Форма бронювання квитків на сайті зоопарку Сан-Франциско доступна з клавіатури. На скріншоті вибрано поле «First Name». Натискання Tab перемістить фокус на поле «Last Name», дозволяючи користувачам швидко і без проблем заповнити лід-форму.
Великою проблемою є те, що багато навігаційних елементів недоступні з клавіатури. Тим не менш, їх можна налаштувати, як це показує приклад Bath, and Beyond. За допомогоюклавіатури відвідувач вибирає слайд інтерактивного меню та переходить до нього, натиснувши Enter.
FDA.gov йде ще далі, підключивши управління спливаючими вікнами з клавіатури. Це дуже важливо, тому що спливаюче вікно здатне заблокувати сторінку за відсутності миші.
Використання меню, що випадає, з клавіатури може бути ускладнене, особливо якщо користувачі не можуть прокручувати список і вибирати пункт списку одночасно. Тобто, якщо функціонал клавіатури дозволяє вибрати тільки перший елемент списку, замість прокручувати його, це зменшує можливості користувача на сайті.
Ted.com показує гарний приклад навігації з клавіатури за списками. Клавішами Tab можна виділити список, клавіші зі стрілками допоможуть вибрати підпункт, а Enter - перейти за посиланням.
Розглянемо шляхи навігації на сторінках
На більшості сайтів вкладки та посилання повторюють макет: зверху донизу та зліва направо.
За цим стоїть одна істотна вада навігації з клавіатури: щоб дійти до потрібного посилання, користувач змушений перегорнути не один десяток посилань, вкладок і форм. Користувачі миші не стикаються з подібними труднощами та можуть взаємодіяти з будь-яким елементом сторінки безпосередньо. Але ви можете спростити завдання користувачам клавіатури, запропонувавши посилання "пропустити навігацію".
На офіційному сайті Лондона шлях навігації через кнопку Tab повторює макет.
Однак у лівому верхньому куті ви можете побачити кнопку, яка дозволяє відразу перейти до основного контенту. Вона стає доступною після натискання Tab і не псує враження користувачам миші.
Висновок
Цікавий підхід до оптимізації юзабіліті, чи не так? Якщо ваш ресурс чи бізнеспотенційно цікавий користувачам з обмеженими можливостями, не упускайте свій шанс оптимізувати продаж або генерацію лідів, використовуючи вказану техніку.