Оценивать доступность веб-сайтов можно по-разному. Хорошие показатели доступности — основа для проведения настоящего тестирования ПО.
Помимо использования специализированного программного обеспечения, пользователи могут заручиться помощью таких простых на первый взгляд вещей, как компьютерная мышь и клавиша «Tab». О второй как раз и поговорим более детально.
Клавиша TAB — действительно «волшебная» вещь и она «способна» на многое.
Клавиша Tab является одним из мощнейших инструментов тестирования
Тестирование стилей фокуса
Нажав на данную клавишу, пользователь может протестировать ситуацию, видит ли он элемент на странице с соответствующей подсветкой или нет. Если нет, то нужно как можно быстрее писать соответствующий тикет на разработчиков! Например, предложить использовать следующие стили :focus{ }, :focus-within{ }, чтобы корректно стилизовать выбранные элементы на текущей веб-странице.
При желании, можно проанализировать вариации стилизации на сторонних ресурсах, чтобы было из чего выбирать.
К примеру:
https://css-tricks.com/focusing-on-focus-styles/
https://github.com/WICG/focus-visible
Верификация интерактивных элементов
Теперь настает черед проверки — может ли пользователь «добраться» до группы интерактивных элементов (различных ссылок, кнопочек, видеофайлов) или нет? Если нет, значит проблему нужно искать внутри HTML-дерева. Может быть, стоит намекнуть разработчикам, что нужно использовать не просто атрибуты <div>, <svg>, <span> но и <a>, <input>, а также <button>.
Никогда не стоит использовать атрибут <div> под кнопочные элементы. Потому как данные фальш-кнопки будут недоступны пользователям с клавиатурой, а также тем, кто использует экранные дикторы.
Вот ссылка, где можно больше узнать об этих тонкостях: https://www.youtube.com/watch?v=8XjwDq9zG4I (особенно полезно будет при многократном выполнении функционального тестирования).
Использование реальных кнопок
Если при нажатии на кнопку клавишей «Space» или «Enter» ничего не происходит, значит перед вами «ненастоящий» атрибут <button>.
Фальшивыми кнопками можно оперировать с помощью кнопки «Tab», но вот реальные события по умолчанию будут доступны исключительно для реальных кнопок.
Пример правильной структуры:
<button class=»btn»>
Send
</button>
Еще больше информации: https://www.youtube.com/watch?v=CZGqnp06DnI
Работа скип-линков
Данный атрибут не является уж таким обязательным на каждом сайте, но стоит облегчить переход к нужному элементу без надобности просмотра всего интерфейса страницы.
Пример хорошей реализации скип-линков: https://tatianamac.com/
Информация, чтобы почитать: https://webaim.org/techniques/skipnav/
Работа с фокусом и бесконечный скролл
Пользователь нажал на выбранную кнопку и ему отобразилось модальное окно? У него есть возможность сразу перейти к содержанию элемента? Если нет, то баг в том, что нужно переключать фокус с кнопки на открытое окно.
Чтобы понимать, как правильно тестировать подобные вещи, можно ознакомиться с весьма полезным ресурсом: https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9#7a0c
Касательно скролла, если пользователь с помощью клавиши «Tab» не может перейти к элементам расположенным в футере, значит стоит писать тикет о наличии на сайте бесконечного скролла. Подобные вещи нужно удалять максимально быстро!
Итоги
В завершении можно отметить, что клавиша «Tab» — это действительно универсальное средство познания ПО, которое позволяет проверить доступность любого веб-портала.
Доступность — вещь крайне важная, а значит, проверке ее функциональности стоит уделять повышенное внимание и тогда качество разработки в команде по тестированию будет максимально эффективным.
Оставить комментарий