Интерфейсом должно быть удобно пользоваться всем, в том числе людям с особенностями здоровья
Важно не создавать дополнительных барьеров, а задумываться, где у пользователя могут возникнуть трудности и как их решить
web: Интерфейс
Незрячие пользователи изучают сайты с помощью скринридеров — специальных приложений, которые зачитывают все элементы на странице и сообщают, как с ними взаимодействовать. Например, подсказывают, что человек может перейти по ссылке.
Попробуйте в действии NVDA или JAWS для веба, VoiceOver для Mac, VoiceOver для iOS и TalkBack для Android. Так вы сможете понять, как люди воспринимают интерфейс и взаимодействуют с ним.
web: Интерфейс
Некоторый контент лучше скрывать, чтобы не перегружать пользователя лишней информацией. Например, декоративные изображения, иконки в кнопках или неважный текст.
Скрыть контент можно с помощью:
web: Интерфейс
Доступное имя — это название элемента, которое скринридер сообщает пользователю при фокусе на элемент.
Кнопки могут получить доступное имя несколькими способами:
<button aria-label="Подключить подписку МТС Premium"> Купить </button>
<button aria-labelledby="bt-label"> <span class="visually-hidden" id="bt-label">Подключить подписку МТС Premium</span> Подключить </button>
web: Интерфейс
Доступное имя должно быть у всех интерактивных элементов. В том числе у кнопок-иконок.
Задать имя для них можно с помощью aria-label или в сочетании aria-label и data-tooltip.
<button type="button" aria-label="Редактировать текст">
<img src="edit.svg" alt="">
</button>
<button
data-tooltip="Редактировать текст"
aria-label="Редактировать текст">
<img src="edit.svg">
</button>
web: Интерфейс
Укажите основной язык сайта в атрибуте lang, чтобы скринридер точно определил язык страницы и правильно произнес контент. Иначе он может зачитывать контент с «акцентом» или с помощью букв другого алфавита.
Если в тексте есть символы другого алфавита, оберните их в тег span с атрибутом lang и укажите в нем нужный язык.
<p>Мы сотрудничаем с НКО, которые измеряют социальный эффект <span lang=“en”>(social impact)</span> своей деятельности — то есть регулярно отслеживают, какие изменения в обществе произошли благодаря их работе</p>
web: Интерфейс
Смещение интерфейса сразу после действия пользователя допустимо. Например, после нажатия на кнопку или на поле ввода. Если же элементы внезапно появляются на экране, это повышает риск ошибочных действий пользователя.
Чтобы подготовить человека к изменениям на странице, используйте анимацию и плавные переходы. Не допускайте внезапного появления контента, которого пользователь не ожидает увидеть.
web: Навигация
Первое, что слышит пользователь со скринридером — название страницы. Поэтому добавляйте в тег title уникальное название для каждой страницы.
Имя страницы отображается в названии вкладки браузера. Это помогает пользователям быстрее найти нужную вкладку и вспомнить, что на ней.
Если у пользователя открыто много вкладок, то ему будет видно только начало заголовка страницы. Поэтому старайтесь выносить в него наиболее важную информацию.
<head>
<title>Web — Гайд цифровой доступности МТС: Практики
доступности</title>
</head>
web: Навигация
Фокус должен идти по порядку — слева направо, сверху вниз — и нигде не застревать.
Атрибут tabindex поможет убрать фокус с элемента или добавить его. Используйте:
В этих случаях порядок элементов для фокуса будет устанавливаться на усмотрение браузера.
Но рекомендуем ориентироваться на естественный порядок, а tabindex использовать только в исключительных случаях, когда важна особая последовательность.
web: Навигация
Незрячие пользователи не могут ориентироваться по размеру шрифта или его начертанию. Для них уровень заголовка определяется его разметкой.
Правильно размеченные заголовки помогают в навигации. Скринридеры смогут зачитать их в виде упорядоченного списка, что позволит пользователю быстро понять общий смысл страницы.
Соблюдайте логическую последовательность заголовков от самого крупного h1 к самому мелкому h6. Старайтесь не пропускать уровни.
<h1>Доступная Web-разработка</h1>
<h2>Навигация</h2>
<h3>Добавляйте уникальное название...</h3>
<h3>Убедитесь, что элементы...</h3>
<h3>Придерживайтесь иерархии...</h3>
<h3>Оборачивайте навигацию...</h3>
<h3>Добавляйте хлебные...</h3>
<h3>Сделайте ссылку...</h3>
<h3>Используйте семантические...</h3>
web: Навигация
Создавайте навигацию с помощью тега nav. Так скринридер озвучит пользователю, что текущий элемент — это навигация.
Если последовательность пунктов меню не важна, используйте неупорядоченный список ul, если важна — список ol.
Укажите заголовок меню в атрибуте aria-label или aria-labelledby, чтобы пользователь понял, что перед ним меню.
У активного пункта меню указывайте атрибут aria-current="page", чтобы пользователь понял, в каком пункте он сейчас находится.
Для выпадающего меню добавьте атрибут aria-haspopup="true", изменяя его значение с помощью атрибута aria-expanded на true, когда меню открыто, или false, когда меню закрыто.
<nav aria-label="Глобальная">
<ul>
<li><a href="/design">Дизайн</a></li>
<li><a href="/text">Текст</a></li>
<li><a href="#dev-menu" aria-current="page"
aria-haspopup="false">Разработка</a></li>
<li><a href="/qa">Тестирование</a></li>
</ul>
</nav>
web: Навигация
Для хлебных крошек используйте упорядоченный список и класс breadcrumbs.
Благодаря «хлебным крошкам» пользователь сразу понимает, где он находится относительно всего сайта.
К тому же они сокращают количество действий, которые нужно совершить, чтобы попасть в тот или иной раздел.
<nav class="breadcrumbs" aria-label="Цепочка навигации">
<ol class="breadcrumbs">
<li class="breadcrumbs__item"><a href="/">Главная</a>
</li>
<li class="breadcrumbs__item active"
aria-current="page">Web</li>
</ol>
</nav>
web: Навигация
Skip link — это ссылка, которая помогает быстро перейти к основному содержанию страницы, пропустив объёмный и повторяющийся контент. Например, пропустить блок с навигацией, чтобы не нажимать много раз на Tab.
Ссылка размещается в начале кода, до всей навигации или перед объемным блоком с множеством ссылок.
Она должна быть хорошо видна в состоянии фокуса, скрыта до попадания на нее фокуса и появляться с плавной анимацией, чтобы не сбить с толку пользователей.
Посмотреть удачные примеры ссылки пропуска можно у The New York Times, WebAIM, Amazon и Reddit.
.skip-link {
display: block;
position: absolute;
top: 0;
left: 48px;
padding: 16px 12px;
background: #1A6AE3;
transform: translateY(-100%);
}
.skip-link:focus {
transform: translateY(0);
}
web: Навигация
У пользователя должна быть возможность искать содержимое несколькими способами. Например, использовать комбинацию стандартного поиска, оглавления, списка всех страниц и так далее.
web: Навигация
Ориентиры — это атрибуты, которые добавляются к смысловым блокам страницы. Они нужны, чтобы создавать семантические разделы на странице и помочь пользователям со скринридером легче перемещаться по сайту.
Самые распространенные ориентиры в HTML:
Вся информация в вашем продукте должна быть доступной, понятной, удобной, а взаимодействие пользователя с ней — логичным, знакомым и универсальным
web: Контент
С помощью атрибута alt указывайте описания для изображений, которые иллюстрируют текст.
Если у изображения не будет альт-текста, скринридер может не сообщить о его наличии или сказать пользователю, что перед ним изображение без описания. Это не даст человеку никакой информации.
<img src="img.jpg" alt="Ванная комната с двумя раковинами и ванной">
web: Контент
У ценных SVG-изображений тоже должен быть альт-текст.
Добавьте роль role="img" для изображения, а альт-текст укажите с помощью aria-label или сочетания title и aria-labelledby.
<svg aria-label="Логотип" role="img" width="276" height="15" viewBox="0 0 276 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg role="img" width="276" height="15" viewBox="0 0 276 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <title id="name">Логотип</title>
web: Контент
Для сложных изображений, например, диаграмм, графиков или карт, добавляйте короткое описание в атрибут alt.
Подробную информацию выносите в тег figcaption. Чтобы визуально скрыть информацию от пользователя, используйте класс .visually-hidden.
При необходимости с помощью атрибута longdesc укажите адрес документа, где находится описание.
<figure role="group">
<img src="chart.png" alt="График посещений сайта mts.ru за первое полугодие"
class="width-80">
<figcaption>
<a href="mts.ru">График посещений сайта mts.ru за первое полугодие</a>
</figcaption>
</figure>
web: Контент
Создавайте таблицы с помощью тега table. Заголовок таблицы оборачивайте в тег caption или добавляйте в атрибут aria-label или aria-labelledby.
Для ячеек-заголовков используйте тег th, а для связывания ячейки с данными — атрибут scope="col" и scope="row".
Это поможет незрячим пользователям ориентироваться в таблице. Скринридер назовет заголовки таблицы и сообщит, в какой колонке и строке человек находится.
Если таблица не отображается и нужна только в качестве разметки, используйте для нее role="presentation". Так скринридер не будет зачитывать лишнюю семантику.
<table>
<caption>Статус разделов</caption>
<thead>
<tr>
<th scope="col">№</th>
<th scope="col">Название раздела</th>
<th scope="col">Статус</th>
</tr>
</thead>
<tbody>
...
</tbody>
<table>
web: Контент
Видео со звуком должно сопровождаться синхронизированными субтитрами. Они могут быть либо встроены в видео, либо появляться при нажатии на соответствующую кнопку.
Все, что сказано в видео, должно быть в субтитрах. А все, что написано в субтитрах, должно быть в видео.
web: Контент
Неожиданное включение видео или аудио может сбить с толку любого человека. Особенно, если пользователь находится в месте, где нужно соблюдать тишину, например, в кино.
Автовоcпроизведение также может заглушить звук скринридера и пользователю будет труднее найти кнопку паузы или остановки.
web: Контент
Мерцающие и пульсирующие элементы чаще всего можно встретить в видео, гифках, анимации или скролле. Они могут доставить пользователям сильный дискомфорт — от укачивания до судорог.
Чтобы этого избежать, размещайте контент с частотой мигания не больше трех раз в секунду. Но лучше вообще откажитесь от мерцающего контента, сделайте анимацию плавнее или дайте пользователю возможность отключить ее.
Даже если вы учли все нюансы, ошибки все равно могут всплыть. Чтобы сократить количество возможных проблем, проводите отладку кода
web: Отладка
Проверьте, что страницу или отдельно текст можно увеличить минимум до 200%.
Убедитесь, что интерфейс при этом корректно перестраивается. Например, элементы не должны перекрывать друг друга и смешиваться.
Сайт также должен поддерживать планшетную и мобильную версии и не иметь горизонтальный скролл.
web: Отладка
Линтеры и плагины помогут автоматизировать проверку кода, а также легче и быстрее интегрировать цифровую доступность в веб.
Рекомендуем использовать stylelint-a11y, eslint-plugin-jsx-a11y, eslint-plugin-react-native-a11y и aatt.
web: Отладка
Онлайн-валидатор W3C поможет понять, насколько верстка соответствует международным стандартам цифровой доступности.
С ним можно узнать не только о серьезных проблемах доступности сайта, но и получить рекомендации по оптимизации кода и верстки.
Валидатор отображает два типа уведомлений: предупреждение — сообщение о некритичных ошибках и ошибка — сообщение о серьезной проблеме, которую необходимо устранить.