Home

Автор: Мануэль Матюшович (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;
 }

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

• Focusing on Focus Styles
• :focus on MDN
• :focus-within on MDN
• focus visible polyfill

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

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

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

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

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

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

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

• #3 image-buttons on HTMHell
• The Links vs. Buttons Showdown

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

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

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

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

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

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

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

• Just use button -- A11ycasts #05

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

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

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

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

• “Skip Navigation” Links

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

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

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

• Writing JavaScript with accessibility in mind

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

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

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

• Infinite Scrolling and Accessibility (It’s Usually Bad)

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

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

Skip CodePen

8. DOM-порядок

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

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

• Source Order Matters

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

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

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

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

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