Что пишут в блогах

Подписаться

Онлайн-тренинги

Конференции

Что пишут в блогах (EN)

Разделы портала

Про инструменты

.
Один из моих любимых инструментов тестирования доступности: клавиша TAB
02.04.2021 00:00

Автор: Мануэль Матюшович (Manuel Matuzovic)
Оригинал статьи
Перевод: Ольга Алифанова

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

Я уже писал о 6 вещах, которые я проверяю на каждом сделанном мною сайте, но сейчас я хочу поговорить об одном из самых мощных тест-инструментов – клавише Tab.

Допустим, вам удалось набрать 100 в аудите доступности Lighthouse. Это необязательно значит, что у вашего сайта хорошая доступность – вы просто заложили основу для настоящего тестирования. Следующий шаг – убрать мышь и пройтись по вашему сайту при помощи клавиатуры.

Вот что клавиша Tab может рассказать вам о вашем сайте:

1. Стили фокуса

Нажав клавишу Tab, видите ли вы, какой элемент на странице подсвечен? Нет? Используйте :focus{ }, :focus-within{ }, или :focus-visible{ }, чтобы стилизовать элементы в фокусе.


Отличная стилизация фокуса на сайте Carie Fishers.

a:focus {
background-color: #b426ff;
outline: 5px solid #ea3bcb;
}

Узнать больше о стилях фокуса

2. Интерактивные элементы

Можете ли вы добраться до интерактивных элементов – ссылок, кнопок, элементов форм, кнопок видео? Нет? Поработайте над вашим HTML. Возможно, вы используете только <div>, <span>, <svg> там, где надо использвоать <input>, <button> или <a>.

Не используйте div для кнопок. Эти фальш-кнопки недоступны пользователям клавиатуры и экранных дикторов.

<div class="btn">
Send
</div>

Вместо этого делайте так:

<button class="btn">
Send
</button>

Узнать больше о ссылках и кнопках

3. Реальные кнопки

Вы можете нажать на кнопку, но по нажатию на Enter или Space ничего не происходит? Возможно, это все же ненастоящая <button> или <input type="button">.

Фальшивые кнопки могут быть достижимы по Tab, и вы можете поменять их семантику, но ключевые события по умолчанию доступны только для реальных кнопок:

<div tabindex="0" role="button">
Send
</div>

Вместо этого делайте так:

<button class="btn">
Send
</button>

Узнать больше про кнопки

4. Скип-линки

Нужно ли переходить по tab через кучу элементов, чтобы достичь определенной части интерфейса? Возможно, стоит внедрить скип-линки.


Скип-линк на сайте Tatiana Mac.

Узнать больше о скип-линках

5. Управление фокусом

Вы нажали на кнопку, и выскочило модальное или диалоговое окно. Можно ли сразу перейти к его содержанию? Нет? Возможно, нужно переключать фокус с кнопки на окно.


function showModal() {
...  
// Сохранить последний фокусируемый элемент 
lastFocusedElement = document.activeElement; 
var modal = document.getElementById(modalID);
modal.focus(); 
...
}
function closeModal() {
...  
// Вернуть фокус на фокусируемый элемент
lastFocusedElement.focus();  
...
}


6. Бесконечный скролл

У вас есть футер, но в него нельзя перейти при помощи Tab, потому что у вас внедрен бесконечный скролл? Сожгите его немедленно!

Узнать больше о бесконечном скролле

7. Элементы вне экрана

Не исчезает ли индикатор фокуса в ходе ваших переходов? Возможно, вы фокусируетесь на элементах вне экрана. Их надо правильно прятать. height: 0, transform: translateX(-100%) не спрячет элемент от Tab, а вот display: none; спрячет.

Skip CodePen

8. DOM-порядок

Не пропускает ли индикатор фокуса множество всего? В большинстве случаев это вызвано тем, что визуальный порядок не соответствует DOM-порядку. Постарайтесь не перемешивать логический контент, и не используйте значения выше 0 в атрибуте thetabindex.

Узнать больше о порядке источника

9. Кастомные JS-компоненты

С клавиатуры доступны только какие-то участки ваших JS-компонентов? Прочитайте практики WAI-ARIA, чтобы узнать, как правильно создавать общие шаблоны и сделать их доступными для всех.

Кнопка TAB прекрасна

Вам не нужно знать ПО, чтобы тестировать доступность – кнопка Tab многое расскажет вам о качестве вашего сайта. Тут есть еще что проверить, но тестирование с клавиатуры делает вас на шаг ближе к доступному сайту.

Обсудить в форуме