Веб-интерфейс
Доступный интерфейс: от структуры страницы до слайдера
Как построить интерфейс, который можно читать, открывать с телефона и использовать с клавиатуры.
Доступность начинается со структуры страницы. Читатель должен найти нужный раздел, понять назначение ссылки и выполнить действие. Цвет, анимация и размер экрана не должны быть единственными подсказками.
W3C Design System показывает, как собирать такие интерфейсы из повторяемых компонентов. Это набор приёмов для сайтов W3C. Само использование его компонентов не доказывает соответствие WCAG. Результат нужно проверять на конкретных страницах.
Сначала обозначьте структуру
На странице нужен один главный заголовок, который называет её тему. Заголовки второго уровня делят текст на разделы. Третий уровень уточняет раздел. Не выбирайте уровень заголовка только ради размера шрифта: размер задаёт CSS.
Отделите меню, основной материал и подвал семантическими элементами nav, main и footer. В начале страницы разместите ссылку «К содержанию». Она помогает пройти мимо повторяющегося меню при работе с клавиатуры.
Для перехода на другую страницу используйте ссылку. Для действия на текущей странице — кнопку. Название должно описывать результат: «Открыть кейс» понятнее, чем «Подробнее», если рядом несколько карточек.
Сделайте карточку понятной
Карточке достаточно изображения, заголовка и короткого описания. Если изображение только иллюстрирует уже названную тему, оставьте пустой alt. Если без него теряется важная информация, опишите её словами. Не дублируйте весь заголовок в подписи изображения.
Ссылку разместите в заголовке. Кликабельную область можно растянуть на карточку средствами CSS. Тогда программа чтения с экрана получит короткое имя ссылки, а человеку будет удобно нажать на изображение или свободную часть карточки. Не вкладывайте кнопки в ссылку.
Укажите размеры изображения. Браузер заранее выделит место, и текст не будет прыгать после загрузки. Для небольших экранов используйте уменьшенную обложку через srcset.
Дайте человеку управлять слайдером
Слайдер не должен сам уводить материал во время чтения. По умолчанию отключите автоматическое перелистывание. Покажите кнопки «Предыдущий слайд» и «Следующий слайд», номер текущего слайда и общее количество.
Проверьте работу кнопок с клавиатуры. После переключения фокус остаётся на нажатой кнопке. Ссылки скрытых слайдов не должны попадать в порядок обхода по Tab. Сообщение о текущем слайде должно быть коротким.
Если человек отключил анимацию в настройках устройства, переключайте слайды без движения. Без JavaScript материалы должны оставаться доступными обычным списком. Слайдер улучшает способ просмотра, но не хранит единственный путь к материалу.
Проверьте маленький экран и увеличение
Откройте страницу при ширине 320 CSS-пикселей. Убедитесь, что текст не требует горизонтальной прокрутки. Таблица может иметь собственную прокрутку, если без неё нельзя сохранить смысл строк и столбцов.
Увеличьте масштаб браузера до 200%. Заголовки и кнопки не должны перекрывать друг друга. Не задавайте фиксированную высоту карточке, если текст может занять больше строк после перевода или увеличения.
Для обычного текста ориентир WCAG — контраст не ниже 4.5:1. Для крупного текста — 3:1. Проверяйте также границы элементов и видимый фокус. Цвета Bootstrap по умолчанию не освобождают от этой проверки.
Короткая проверка перед выпуском
- Пройдите страницу клавишей Tab. Фокус виден; порядок совпадает с порядком чтения.
- Откройте меню, переключите слайд и перейдите по ссылке с клавиатуры.
- Проверьте 320 пикселей и увеличение 200%.
- Отключите JavaScript. Текст, ссылки и материалы остались доступны.
- Проверьте страницу с программой чтения с экрана. Автоматическая проверка не заменяет этот шаг.