Изображения

Добавьте альтернативное описание, чтобы помочь слепым и слабовидящим пользователям понять, что изображено на картинке. Описание зависит от типа изображения — информативное, график или диаграмма, декоративное и группа изображений.

Информативные

Информативные изображения передают краткую информацию к тексту, дополняют или обозначают его. Добавьте информацию в атрибут alt.

Изображение передает краткую информацию

Например, как открыть бутылку с помощью штопора с рычагами:

Пример

Ввинчивайте спираль в пробку, два рычага поднимаются вверх. После этого остается только опустить рычаги — и пробка выйдет из бутылки.

Плохо

<img src="clock.png">Ввинчивайте спираль в пробку, два рычага поднимаются вверх. После этого остается только опустить рычаги — и пробка выйдет из бутылки.

Хорошо

<img src="clock.png" alt="Как отпустить рычаги, чтобы пробка вышла из бутылки"> Ввинчивайте спираль в пробку, два рычага поднимаются вверх. После этого остается только опустить рычаги — и пробка выйдет из бутылки.

Изображение дополняет текст

Например, изображение собаки в статье про собак-проводников:

Пример

Собаки-проводники часто носят на шее колокольчик, чтобы владелец точно знал, где находится собака.

Плохо

<img src="dog.png">Собаки-проводники часто носят на шее колокольчик, чтобы владелец точно знал, где находится собака.

Хорошо

<img src="dog.png" alt="Собака-проводник с колокольчиком на шее">Собаки-проводники часто носят на шее колокольчик, чтобы владелец точно знал, где находится собака.

Изображение обозначает объект, который описывает текст

Например, иконка телефона рядом с телефонным номером:

Пример

+7 (988) 775 57 56

Плохо

<img src="icon-phone.png">
+7 (988) 775 57 56

Хорошо

<img src="icon-phone.png" alt="Телефон:">+7 (988) 775 57 56

Декоративные

Добавляйте декоративные изображения с помощью свойства CSS background-image, чтобы скринридеры их игнорировали. Если декоративный элемент представлен в виде изображения, например, внутри ссылки, добавьте к нему пустой alt="" или атрибуты role="presentation" и aria-hidden="true":

Пример

Плохо

<img src="gradient.png" alt="Градиент на фоне текста">

Хорошо

<img src="gradient.png" aria-hidden="true" alt="">

Графики, диаграммы

Для сложных изображений — карт, диаграмм, графиков — добавьте краткое описание в атрибут alt и полное описание на отдельную страницу, в тег <figcaption>, в атрибуты longdesc или aria-describedby.

Добавьте ссылку на другую страницу или на фрагмент текущей страницы с полным описанием. Минус этого подхода — ссылка не связана с изображением по смыслу:

Пример

Описание изображения

<img src="bar-chart.png" alt="График посещений сайта weblind.ru за 2016 год">
<a href="chart-info.html">Описание изображения</a>

Добавьте в <figure> с атрибутом role="group" изображение и его описание. Оберните описание в <figcaption>:

Пример

<figure role="group">
  <img src="chart-bar.png" alt="График посещений сайта weblind.ru за 2016 год" class="width-80">
  <figcaption>
    <a href="chart-bar.html">График посещений сайта weblind.ru за 2016 год</a>
  </figcaption>
</figure>

Добавьте к изображению атрибут longdesc или aria-describedby. Пропишите в него id элемента, внутри которого подробное описание изображения. Отличие примеров — в элементе с id из aria-describedby должен быть только текст, с id из longdesc можно добавлять дополнительные теги:

Пример

График посещений сайта weblind.ru за 2016 год — в октябре сайт посетили 26 тысяч человек, это самое большое количество посещений в 2016 году.

<img src="chart-bar.png" alt="График посещений сайта weblind.ru за 2016 год" longdesc="#chart-longdesc">
<p id="chart-longdesc">
  График посещений сайта weblind.ru за 2016 год —
  в октябре сайт посетили 26 тысяч человек, это самое большое количество
  посещений в 2016 году.
</p>

Группы изображений

Для групп изображений, которые представляют одну и ту же информацию, например, звездочки рейтинга, добавьте описание в alt только к первому изображению:

Пример

<img src="images/i-star.png" alt="Рейтинг фильма 4 из 5">
<img src="images/i-star.png" alt="">
<img src="images/i-star.png" alt="">
<img src="images/i-star.png" alt="">
<img src="images/i-star-empty.png" alt="">

Аудио и видео

Добавьте альтернативное описание видео и аудио. Это поможет пользователям с нарушениями зрения узнать, о чем говорится в ролике или в аудио. Если у видео есть визуальная информация, которая не озвучена, добавьте аудиоописание.

Для медиаконтента с длинным описанием можно использовать атрибуты aria-describedby, longdesc или невидимый для обычного пользователя блок с информацией.

Для аудиозаписей или видео со звуком добавьте альтернативное текстовое описание в атрибуты aria-describedby, longdesc или ссылку на страницу с альтернативным описанием. Если в аудиозаписи есть диалог, укажите, кто именно говорит.

Для видео без звука к самому файлу добавьте краткое описание, отдельно добавьте длинное описание с помощью атрибутов aria-describedby, longdesc. Например, если видео — пошаговый рассказ как приготовить борщ, самому файлу добавьте атрибут title с описанием «Приготовление борща, рецепт от лучшего шеф-повара России Стаса Песоцкого», в атрибут longdesc и aria-describedby добавьте id блока с подробным описанием каждого шага:

Пример

Как видят мир люди с протанопией — нарушением в красной части спектра

<p>Как видят мир люди с протанопией — нарушением в красной части спектра</p>

<iframe aria-describedby="video-description" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<p id="video-description">Видео показывает, как видят мир люди с протанопией — формой дальтонизма, при которой нарушается восприятие красной части спектра. Видео состоит из  картинок — разноцветный пляжный зонт, осенний лес, зевающая львица, белые цветы, огонь, пешеходный переход с людьми, кактус, белый тигр, жираф, которые плавно сменяют друг друга. В кадре две одинаковых картинки — одна как видят люди с нормальным зрением, вторая — как видят люди с протанопией.</p>

Добавьте для видео аудиодескрипцию с описанием происходящего, как «Мосфильм» адаптировал фильм «Иван Васильевич меняет профессию».

Если на сайте есть автоматически проигрываемая аудиозапись дольше трех секунд, дайте пользователю возможность управлять воспроизведением.

В начале страницы добавьте кнопки для остановки, воспроизведения и регулировки громкости звуков независимо от громкости системы. Другой вариант — вместо автоматического воспроизведения добавьте ссылку на включение аудиозаписи.

Формы ввода

Опишите поля ввода с помощью label, атрибутов title или aria-label. Добавьте инструкции и ошибки в текстовом виде. Не используйте в подсказках визуальные свойства элементов. Это поможет слепым и слабовидящим заполнить форму — узнать названия полей и формат данных, получить результат отправки формы.

<label>Электронная почта</label>
<input type="text">

<label for="input-mail">Электронная почта</label>
<input type="text" id="input-mail">

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

<label for="input-mail" id="label-mail">Электронная почта</label>
<input type="text" id="input-mail" aria-labelledby="label-mail">

<input type="text" id="input-search" aria-label="Поиск по странам">
<a class="button primary" >Найти</a>

<label for="input-mail" id="label-mail">Электронная почта</label>
<input type="email" id="input-mail" aria-labelledby="label-mail" aria-required="true" required>

Группы полей

Группировка связанных полей помогает разделить форму на части и лучше ее воспринять.

Группируйте поля с помощью элементов <fieldset> и <legend>. Элемент <fieldset> — контейнер для связанных элементов формы, элемент <legend> — заголовок группы, где можно прописать не только назначение группы, но и общие характеристики полей. Например, указать, что все поля группы обязательны:

<fieldset>
  <legend>Контакты</legend>
  <label for="input-mail" id="label-mail">Электронная почта</label>
  <input type="email" id="input-mail" aria-labelledby="label-mail">

  <label for="input-phone" id="label-phone">Телефон</label>
  <input type="email" id="input-phone" aria-labelledby="label-phone">
</fieldset>

Еще один способ группировки полей формы — использование атрибутов role="group" и aria-labelledby, куда нужно прописать id элемента, котором содержится описание группы полей:

<div role="group" aria-labelledby="user-data">
  <div id="user-data">Контакты</div>
  <label for="input-mail" id="label-mail">Электронная почта</label>
  <input type="email" id="input-mail" aria-labelledby="label-mail">

  <label for="input-phone" id="label-phone">Телефон</label>
  <input type="email" id="input-phone" aria-labelledby="label-phone">
</div>

Инструкции

Дайте пользователю понятные инструкции по вводу данных. Укажите обязательные поля, допустимые форматы данных и ограничения времени. Разместите инструкцию перед элементом <form>, чтобы скринридер прочитал инструкцию, прежде чем войдет в режим чтения форм.

Для простых инструкций используйте подсказки прямо в описании поля. Например, для поля даты можно написать название «Дата выдачи документа (день, месяц, год):»:

<label for="input-mail" id="label-mail">Электронная почта (обязательно)</label>
<input type="email" id="input-mail" aria-labelledby="label-mail" aria-required="true">

Иногда формат данных указывает атрибут placeholder. Скринридеры не воспринимают его как описание поля ввода, поэтому нужно использовать альтернативный способ. Например, использовать атрибут aria-describedby с id элемента, в котором прописана инструкция.

Уведомления

Выводите уведомления об ошибках и успехе. Уведомления должны быть краткими и понятными. Сообщения об ошибках должны содержать простые инструкции по исправлению. Сообщения успеха важны для подтверждения завершения задачи.

Способ вывода уведомлений зависит от типа — общие уведомления формы и уведомления к отдельным полям.

Общие уведомления. Дайте пользователю обратную связь о результатах отправки формы. Если страница обновляется после отправки формы, измените title страницы на ошибку или добавьте заголовок h1 с сообщением об ошибке.

Если страница не обновляется, добавьте список ошибок с атрибутом role="alert" над элементом формы. Свяжите каждую ошибку с полем с помощью атрибута aria-describedby. Атрибут aria-describedby можно обновлять динамически — в обычном состоянии он указывает на подсказку или описание поля, а в случае ошибки ввода — на текст ошибки (вместо или вместе с подсказкой — aria-describedby может содержать несколько идентификаторов):

<p class="txt-danger" id="danger-mail">Неправильный формат электронной почты</p>
<p>
  <label for="input-mail">Электронная почта</label>
  <input type="email" id="input-mail" aria-describedby="danger-mail" class="textbox" aria-required="true">
</p>
<p>
  <label for="input-phone">Телефон</label>
  <input type="email" id="input-phone" class="textbox" aria-required="true">
</p>

Если данные формы имеют финансовую или юридическую значимость, добавьте подтверждение отправки формы, где пользователь еще раз можно проверить введенные данные, и возможность отменить отправку формы в течение определенного промежутка времени.

Уведомления к полям можно выводить после отправки формы или во время ввода.

После отправки формы установите фокус в первое поле, чтобы пользователь узнал о результатах проверки каждого поля. Если произошла ошибка ввода данных, выводите ее в текстовом виде после поля. Свяжите ошибку с полем с помощью атрибута aria-describedby.

Для вывода ошибок, когда поле проверяется во время ввода, добавьте после поля область с атрибутом aria-live="polite". Если поле проверяется после потери фокуса, добавьте после поля атрибут aria-live="assertive". Программно добавляйте ошибку в этот элемент. Отличие подходов в том, что aria-live="assertive" прерывает все текущие задачи скриридера. Если применить его для проверки поля во время ввода, после каждого изменения скринридер будет перескакивать на этот элемент и читать его несколько раз:

[...]
<label for="input-mail" id="label-mail">Электронная почта</label>
<input type="email" id="input-mail" aria-describedby="label-mail error-message-mail" class="textbox" aria-required="true">
<small aria-live="polite" id="label-mail,error-message-mail">Неправильный формат электронной почты</small>
[...]

Многостраничные формы

Покажите пользователю прогресс заполнения, обеспечьте общие инструкции и проверку ошибок каждого шага, дайте возможность перейти к любому шагу.

Для обозначения текущего шага формы используйте title или заголовок h1 страницы. Для перехода на каждый шаг используйте пошаговый индикатор с перечислением всех шагов и статуса каждого шага.

Каждый шаг — отдельная форма, к нему применимы все принципы, описанные выше в разделе «Формы ввода».

Таблицы

Укажите взаимосвязи между ячейками, используйте семантически правильные теги для обозначения ячеек. Для ячеек-заголовков используйте <th>. Для связывания ячейки с данными используйте атрибут scope. Это поможет слепым и слабовидящим пользователям ориентироваться в таблице — узнать заголовки таблицы, правильно перемещаться по строкам и столбцам.

Для простых таблиц с одним заголовком используйте значения row или col:

<thead>
  <tr>
    <th scope="col">ФИО</th>
    <th scope="col">Возраст</th>
    <th scope="col">Профессия</th>
  </tr>
</thead>

<caption>Участники проекта «Курьер»</caption>
<thead>
  <tr>
    <th scope="col">№ строки</th>
    <th scope="col">ФИО</th>
    <th scope="col">Возраст</th>
    <th scope="col">Профессия</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>Иванов Александр Александрович</td>
    <td>23 года</td>
    <td>Врач</td>
  </tr>
</tbody>

Текст

Оформляйте текст с помощью CSS, не показывайте текст картинкой. Объясняйте аббревиатуры и сложные термины. Это поможет пользователям воспринять весь текст.

<span class="decor">Настала ночь первой упавшей звезды.</span>
.decor {
  font-family: 'Bad Script', cursive;
  font-size: 2rem;
}

Аббревиатуры и определения

Расшифруйте аббревиатуры и дайте определения сложным терминам.

Добавьте аббревиатуры в <abbr>, расшифровку в атрибут title:

<abbr title="Младший научный сотрудник">М. н. с.</abbr> Александр Григорьевич Петров
защитил диссертацию 15 января 2017 года.

Для определения сложных слов используйте <dfn> для выделения, атрибут rel для ссылок, конструкцию <dl> для списка определений:

<dl>
  <dt>Аэроб</dt>
  <dd>организм, способный жить лишь в среде, содержащей свободный молекулярный кислород</dd>
   <dt>Бактериоцид</dt>
   <dd>
     антибактериальное вещество (белки), вырабатываемое бактериями определенного вида
     и подавляющее жизнедеятельность бактерий других видов
   </dd>
   <dt>Бацилла</dt>
   <dd>любая бактерия, имеющая форму палочки</dd>
</dl>

Страница

Укажите <title> и язык страницы. Добавьте ссылку для перехода к основному контенту. Предоставьте несколько способов поиска содержимого: карта сайта, поиск по сайту. Не допускайте изменений страницы при фокуcе на элементе или вводе данных. Это поможет слепым и слабовидящим пользователям ориентироваться на сайте.

<title>Магазин продуктов «Роща»</title>

Язык содержимого

Укажите язык в атрибуте lang для <html>, чтобы синтезаторы речи точно определили язык страницы. Примеры значений атрибута: ru — русский язык, en — английский язык, de — немецкий язык. Все значения можно посмотреть на сайте htmlbook.ru.

Если у отдельной фразы или абзаца другой язык, его нужно указать отдельно. Это не относится к именам собственным, техническим терминам, устойчивым выражениям, которые заимствованы из другого языка:

Пословица «Аппетит приходит во время еды» по-немецки звучит как <span lang="de">«Der Appetit kommt beim Essen»</span>

Повторяющиеся блоки

Добавьте в начало сайта ссылку перехода к основному содержимому, чтобы пользователь при желании пропустил повторяющиеся блоки (шапку, навигацию).

Другие варианты — добавить в начало страницы ссылки на все блоки сайта или в начало каждого блока добавить ссылку на его конец.

Поиск содержимого

Дайте пользователю возможность искать содержимое несколькими способами: список связанных страниц, оглавление, карта сайта, поиск, список всех страниц сайта и т. д.

Изменение страницы

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

Распространенный случай — переход на другую страницу или открытие нового окна по событию onchange на элементах <select>, радиокнопках или чекбоксах. Избегайте такого поведения, переходите на другую страницу только по нажатию на кнопку или на Enter.

Изменения страницы должны происходить только по запросу пользователя или пользователь может отменить изменение.

Верстка

Проверьте валидность, семантику верстки и правильную последовательность кода страницы, чтобы пользователи со скринридерами не потеряли информацию при чтении.

Сделайте адаптивную верстку. Это поможет пользователям настроить сайт — увеличить масштаб или шрифт.

Адаптивность

Используйте адаптивную верстку и относительные единицы размера шрифта, чтобы дать пользователю возможность увеличивать масштаб страницы не менее чем в два раза.

Горизонтальная прокрутка при масштабировании сайта менее чем в два раза приводит к потере информации. Адаптивная верстка решит эту проблему.

• rem — размер шрифта рассчитывается относительно значения, прописанного для <html>;
• em и % — размер шрифта рассчитывается относительно значения, прописанного для ближайшего родителя текущего элемента.

Валидность

Соблюдайте валидность верстки — соответствие спецификации W3C. Проверяйте вложенность тегов, закрывайте все теги, проверяйте написание атрибутов и кавычек, не повторяйте один и тот же id несколько раз на странице. Скринридеры могут неправильно воспринимать невалидную верстку.

Проверьте валидность верстки с помощью онлайн-валидатора W3C.

Последовательность кода

Расположите элементы в разметке в правильном порядке независимо от визуального представления, чтобы скринридеры читали содержимое последовательно. Проверить последовательность можно отключив CSS-стили.

Самые распространенные ошибки — неправильное использование CSS-свойств position:absolute, float:right, order для flexbox и grid. Например, на сайте левая колонка — основной контент, правая колонка — ссылки на новости. Если допустить ошибку, пользователь сначала прослушает ссылки на новости, только потом перейдет к основному контенту.

Показать направление чтения, например для арабского языка, можно с помощью специальных символов ‎ (слева направо),  ‏ (справа налево) и атрибута dir со значениями ltr (слева направо) и rtl (справа налево).

Навигация

Сделайте одинаковую навигацию на всех страницах. Правильно верстайте вложенные меню. Дайте пользователю информацию о текущем положении на странице. Это поможет слепым и слабовидящим пользователям свободно перемещаться по сайту, узнать текущее положение.

<nav>
  <ul>
    <li aria-current="page">
      <span><a href="#">Шапки, шарфы, варежки</a></span>
    </li>
    <li><a href="#">Цены</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Единообразие

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

Текущая страница

Добавьте на странице хлебные крошки или карту сайта, чтобы показать, где находится пользователь относительно других страниц сайта.

Управление с клавиатуры

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

Рекомендация не относится к случаям, когда управления с клавиатуры невозможно. Например, при рисовании. Управление с клавиатуры не должно мешать управлению мышью.

Обеспечьте правильную последовательность перехода фокуса — проверьте семантику верстки, правильную последовательность содержимого на странице и добавьте визуальное отображение фокуса на активных элементах. Переход на следующий элемент — одно нажатие на клавишу Tab, на предыдущий — Shift+Tab. Если программно заданы другие клавиши, укажите это в начале сайта.

WCAG 2.0 рекомендует использовать атрибут tabindex — заполнить его положительными числами в порядке возрастания. Мы не рекомендуем использовать tabindex для всех элементов. Если на странице появятся новые элементы, легко запутаться в установленных значениях.

Полагайтесь на естественный порядок элементов на странице. Используйте tabindex для элементов только в специальных случаях, когда важна нестандартная последовательность. Используйте tabindex="-1", чтобы пропустить элемент, и tabindex="0", чтобы элемент получил фокус. Сделайте визуальное выделение активного элемента с помощью псевдокласса :focus для ссылок, кнопок, полей ввода:

<label id="label-mail">Электронная почта</label>
<input type="email" aria-labelledby="label-mail" aria-required="true" tabindex="0">

<label id="label-phone">Телефон</label>
<input type="email" aria-labelledby="label-phone" aria-required="true" >

Избегайте обработчиков mousedown или mouseup, потому что они недоступны для клавиатуры. Если это невозможно, добавьте обработку событий клавиатуры.

Безопасность для здоровья

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