Оценивать доступность веб-сайтов можно по-разному. [highlight dark=”no”]Хорошие показатели доступности — основа для проведения настоящего тестирования ПО.[/highlight]

Помимо использования специализированного программного обеспечения, пользователи могут заручиться помощью таких простых на первый взгляд вещей, как компьютерная мышь и клавиша «Tab». О второй как раз и поговорим более детально.

Клавиша TAB — действительно «волшебная» вещь и она «способна» на многое.

Тестирование стилей фокуса

Нажав на данную клавишу, пользователь может протестировать ситуацию, видит ли он элемент на странице с соответствующей подсветкой или нет. Если нет, то нужно как можно быстрее писать соответствующий тикет на разработчиков! Например, предложить использовать следующие стили  :focus{ }, :focus-within{ }, чтобы корректно стилизовать выбранные элементы на текущей веб-странице.

При желании, можно проанализировать вариации стилизации на сторонних ресурсах, чтобы было из чего выбирать.

К примеру:

https://cariefisher.com/

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» — это действительно универсальное средство познания ПО, которое позволяет проверить доступность любого веб-портала.

Доступность — вещь крайне важная, а значит, проверке ее функциональности стоит уделять повышенное внимание и тогда качество разработки в команде по тестированию будет максимально эффективным.