Коротке резюме: для відвідувачів, які не користуються мишею, необхідно створити доступні рішення по навігації з клавіатури.
Багато людей користуються інтернетом за допомогою клавіатури, а не миші - з різних причин. «Технарі» і просунуті користувачі вважають за краще команди з клавіатури, так як це підвищує швидкість і ефективність роботи. Але є люди з обмеженими можливостями, для яких клавіатура - єдине доступне пристрій введення інформації.
Наприклад, люди з руховими порушеннями відчувають труднощі з дрібною моторикою, необхідної для використання миші, а зі слабким зором важко користуватися мишею через дрібних елементів на сторінці та використання допоміжних програм.
Найбільша різниця між навігацією з клавіатури і з допомогою миші в тому, що доступ до посилань через клавіатуру послідовний - тобто, щоб перейти до потрібного посилання, необхідно перегорнути всі елементи до неї, а користувачі миші можуть перемістити курсор прямо до потрібного посилання. Таким чином, миша забезпечує прямий доступ до інтерактивних елементів цільової сторінки або сайту.
Навіть найкрасивіший і сучасний дизайн абсолютно даремний, якщо з ним неможливо взаємодіяти. Тому оптимізація навігації під клавіатуру дозволить працювати з ресурсом і тим, хто з ряду причин не може використовувати мишу.
І цілком можливо, що саме ця таргет-група є платоспроможною цільовою аудиторією вашого бізнесу.
Як перевірити доступність сайту для навігації за допомогою клавіатури?
Якщо ви читаєте цю статтю на ПК або ноутбуці в браузері Firefox, IE, Chrome або Safari, то виконайте наступний алгоритм:
- натисніть на адресний рядок браузера;
- приберіть руку від миші;
- використовуйте клавішу Tab для переміщення вперед по посиланнях (або Shift + Tab для переміщення назад).
Ви могли помітити 3 речі:
- при навігації з клавіатури фокусування переміщається до активного об'єкту на сторінці;
- за допомогою клавіатури ви можете вибрати будь-яке посилання на сторінці;
- посилання перегортуються відповідно до макетом сторінки: зліва направо і зверху вниз по стовпцях.
Можливо, навігація з клавіатури повільна і трохи дратує, але вона хоча б існує.
Індикатор фокусування при навігації з клавіатури
Уявіть, що ви використовуєте миша при веб-серфінгу, але не бачите курсору на екрані. Чи зручно це? Швидше жахливо. Ті ж почуття переживають користувачі клавіатури, коли обраний елемент ніяк не виділяється.
Сайти повинні давати рівноцінну зворотний зв'язок як для миші, так і для клавіатури. Фокусування клавіатури за замовчуванням вбудована в усі великі браузери. Деякі з них виділяють вибрані елементи сірим пунктиром, інші - синьою лінією, це не має значення - в будь-якому випадку користувач бачить, який елемент сторінки задіяний в даний момент.
Іноді цей вбудований функціонал свідомо віддаляється при розробці сайту - подібна ініціатива веде до сумних наслідків. Як правило, підставою для цього служить дотримання принципів юзабіліті і невідповідність дизайну сторінки. В такому разі не видаляйте виділення з клавіатури, а просто змініть його, подстроив під загальний дизайн сайту.
MailChimp.com використовує виділення за замовчуванням. На скріншоті добре видно, що користувач вибрав посилання «Email Designer», перейти по якій можна натиснувши Enter.
StrideHealth.com вибрав інший підхід - посилання з клавіатури виділяються так само, як і за допомогою миші. На скріншоті користувач вибрав вкладку Find Your Plan у верхньому правому куті.
Всі інтерактивні елементи доступні
Користувачі клавіатури повинні мати можливість доступу до всіх інтерактивним елементам сторінки, а не тільки до основної навігації і внутрішнім посиланням. Це означає, що випадають меню, кнопки, діалогові вікна та інші веб-елементи повинні бути активні після натискання Tab.
Найбільшу проблему викликають віджети JavaScript з тегами <div> або <span> - доступ до них з клавіатури може бути налаштований через tabindex. Крім того, використання тільки HTML-посилань гарантує доступність всіх елементів для клавіатури.
Форма бронювання квитків на сайті зоопарку Сан-Франциско доступна з клавіатури. На скріншоті користувачем вибрано поле «First Name». Натискання на Tab перемістить фокус на поле «Last Name», дозволяючи користувачам швидко і без проблем заповнити лід-форму.
Великою проблемою є те, що багато елементів навігації недоступні з клавіатури. Проте їх можна налаштувати, як це показує приклад Bath, and Beyond. За допомогою клавіатури відвідувач вибирає слайд інтерактивного меню і переходить до нього, натиснувши Enter.
FDA.gov йде ще далі, підключивши управління спливаючими вікнами з клавіатури. Це дуже важливо, бо спливаюче вікно здатне заблокувати сторінку за відсутності миші.
Використання меню, що випадає з клавіатури може бути ускладнене, особливо якщо користувачі не можуть прокручувати список і вибирати пункт списку одночасно. Тобто, якщо функціонал клавіатури дозволяє вибрати тільки перший елемент списку, замість того щоб прокручувати його, це зменшує можливості користувача на сайті.
Ted.com показує хороший приклад навігації з клавіатури по випадає списками. Клавішею Tab можна виділити список, клавіші зі стрілками допоможуть вибрати підпункт, а Enter - перейти за посиланням.
Розглянемо шляхи навігації на сторінках
На більшості сайтів вкладки і посилання повторюють макет: зверху вниз і зліва направо.
За цим стоїть один істотний недолік навігації з клавіатури: щоб дійти до потрібної посилання, користувач змушений перегорнути не один десяток посилань, вкладок і форм. Користувачі миші зіштовхуються з подібними труднощами і можуть взаємодіяти з будь-яким елементом сторінки безпосередньо. Але ви можете спростити завдання користувачам клавіатури, запропонувавши посилання «пропустити навігацію».
На офіційному сайті Лондона шлях навігації через кнопку Tab повторює макет.
Однак в лівому верхньому кутку ви можете побачити кнопку, що дозволяє відразу перейти до основного контенту. Вона стає доступна після натискання Tab і не псує враження користувачам миші.
висновок
Цікавий підхід до оптимізації юзабіліті, чи не так? Якщо ваш ресурс або бізнес потенційно цікавий користувачам з обмеженими можливостями, не втрачайте свій шанс оптимізувати продажу або генерацію лідів, використовуючи зазначену техніку.
Високих вам конверсій!
за матеріалами nngroup.com , image source Kevin Poulton
22-04-2014
Як перевірити доступність сайту для навігації за допомогою клавіатури?Чи зручно це?
