Тестирование клавиатурной навигации по вашему сайту поможет гарантировать его доступность для определенной категории пользователей. Обычно клавиатурная навигация осуществляется с помощью клавиши [TAB]. Нажатие [TAB] перемещает фокус между интерактивными элементами, а нажатие [ENTER] приводит к взаимодействию с ними.
Правильная реализация доступной клавиатурной навигации приносит пользу всем пользователям, независимо от их физических или технических ограничений.
Хорошая клавиатурная навигация предполагает, что:
- Выбранные элементы должны выделяться
- Порядок навигации должен быть логичным
- Лишние элементы должны пропускаться
Все эти аспекты регулируются различными разделами Руководства по доступности веб-контента (WCAG), главным из которых является пункт 2.1.1 Клавиатура.
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Выделение выбранного элемента
Интерактивные элементы (кнопки, ссылки и т.п.) должны иметь видимый и очевидный стиль выделения. К сожалению, многие сайты удаляют стиль выделения элемента с помощью правила CSS {outline: none;}. Часто это делается по незнанию.
Клавиатурная навигация должна быть логичной
Для пользователей клавиатуры важна последовательность, в которой можно выбрать и выделить интерактивные элементы. Эта последовательность должна быть логичной и интуитивно понятной. Обычный порядок – слева направо, сверху вниз.
Предсказуемая навигация, как правило, начинается с заголовка, переходит к основному меню, содержимому страницы и, наконец, к нижнему колонтитулу.
Выделение должно перетекать между элементами в зависимости от их расположения на странице, а не скакать туда-сюда. Самый распространенный способ нарушения навигации – это элементы с атрибутом tabindex, равным 1 или больше, потому что tabindex должен быть равен только -1 или 0.
Лишние элементы должны пропускаться
Среди ожидаемых интерактивных элементов лишние, маловажные, нежелательные и/или недоступные виджеты должны быть исключены из клавиатурной навигации. Для этого случая и нужен атрибут tabindex=-1 . Больше по этой теме читайте в статье “How to use the tabindex attribute”.
Правильное расположение структуры документа с четкими ориентирами разметки (landmarks) упрощает навигацию для пользователей программ чтения с экрана, позволяя им сразу переходить по блокам страницы. Подробнее читайте на сайте www.w3.org, в разделе “Using ARIA landmarks to identify regions of a page”.
Сюда же можно отнести избегание “ловушек клавиатуры“. Эта проблема в основном возникает во всплывающих окнах при зацикливании вкладок с фокусом на одном интерактивном компоненте. Пользователь должен иметь возможность отменить выбор элемента. WCAG на этот счет можно почитать тоже на www.w3.org.
Автоматизация тестирования доступности клавиатурной навигации
К сожалению, какого-либо универсального решения для автоматизации тестирования доступности не существует. Это относится и к клавиатурной навигации. Каждый из её аспектов требует отдельного подхода:
- Изменение стиля выбранного элемента можно проверить с помощью методов тестирования скриншотов
- Аудит доступности с помощью вкладки Lighthouse в Chrome DevTools может выявить отсутствие ориентиров в разметке страницы и иерархию заголовков
Но даже если вы просканируете свой сайт или его отдельные элементы на соответствие требованиям WCAG, вы не сможете автоматически установить правильный порядок навигации, потому что только вы (как пользователь) знаете и понимаете правильный порядок.
В первый раз навигация с помощью [TAB] должна осуществляться только вручную. Впоследствии, если все будет в порядке (или когда все дефекты будут исправлены), это дело можно будет автоматизировать.
Далее мы сосредоточимся только на навигации с помощью клавиши [TAB].
Пример тестирования клавиатурной навигации
Давайте разберем на примере простой сценарий тестирования:
- Откройте страницу.
- Нажмите клавишу [TAB] – проверьте, какой элемент был выбран.
- Нажмите клавишу [TAB] – проверьте, какой элемент был выбран.
- И т.д.
Для выполнения этой проверки вам понадобятся:
- Playwright или любой фреймворк для автоматизации фронтенд-тестирования
- Playwright-метод
evaluate()для вызова пользовательской функции - Свойство activeElement для получения выделенного элемента на странице
Чтобы увидеть, как работает свойство activeElement, откройте DevTools Console и напишите команду: document.activeElement. Подробнее об определении выбранных элементов через консоль браузера можно почитать в статье “Browser Console for Functional Testing”.
Для примера взят сайт CERN. Здесь пользователь может столкнуться с совершенно неоптимизированным порядком вкладок: он не сможет попасть в основной навигационный список. Но, так как поиск ошибок не является темой этой статьи, нам придется ограничиться примером с панелью инструментов и логотипом.
Первое нажатие [TAB] на сайте CERN захватывает в фокус специальный элемент “Skip to main content”. Это хак веб-доступности – невидимая ссылка для пропуска навигации.
Единственная проблема с функцией evaluate() с командой document.activeElement заключается в том, что она возвращает Node:
console.log(await page.evaluate(() => document.activeElement)); ref: <Node>
Таким образом, нам нужно обратиться к интерфейсу Node или Element для получения данных, таких как свойство innerHTML (это зависит от того, что вы решили проверять в выбранных элементах).
Вот пример первого нажатия на клавишу [TAB]:
await test.step('Press TAB key', async () => {
await page.keyboard.press('Tab');
const focusedOn = await page.evaluate(() => {
const selector = document.activeElement;
return selector ? selector.innerHTML : null;
});
expect(focusedOn, 'Should have correct active element').toBe('\n Skip to main content\n');
}); Все последующие шаги аналогичны первому, за исключением ожидаемого значения.
Чтобы избежать декларативного перечисления многочисленных повторяющихся шагов, лучше обернуть шаг теста в цикл через массив значений ожидаемых активных элементов.
import { expect, test } from '@playwright/test';
const activeElements = [
'\n Skip to main content\n',
'\n CERN\n <span>Accelerating science</span>\n ',
'Sign in',
'Directory',
'\n <img src="/sites/default/files/logo/cern-logo.png" alt="home">\n ',
] as const;
test('Keyboard Navigation', async ({ page }) => {
await test.step('Open the page', async () => {
await page.goto('/');
});
for (const element of activeElements) {
await test.step('Press TAB key', async () => {
await page.keyboard.press('Tab');
const focusedOn = await page.evaluate(() => {
const selector = document.activeElement;
return selector ? selector.innerHTML : null;
});
expect(focusedOn, 'Should have correct active element').toBe(element);
});
}
}); Посмотрите пример кода в репозитории GitHub, где действия на странице перенесены в объектную модель страницы.
Перевод статьи «Automated Accessibility Testing of Keyboard Navigation on Tab».