<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"
и
:
<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
, в атрибут for
пропишите id
поля:
<label>Электронная почта</label>
<input type="text">
<label for="input-mail">Электронная почта</label>
<input type="text" id="input-mail">
Если лейбл нужно скрыть, расположите его перед полем, используйте привязку атрибута for
и специальный класс для вспомогательных технологий:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
Этот класс скрывает лейбл визуально, но его прочтут скринридеры. Обратите внимание, что скринридеры и другие вспомогательные технологии, как и браузеры, скрывают элементы с использованием display: none
и visibility: hidden
. Подробнее о скрытом label можно узнать в статье
Еще один способ связывания поля и подписи — атрибут aria-labelledby
. Он используется как атрибут for
для label
, значение этого атрибута совпадает со значением id поля:
<label for="input-mail" id="label-mail">Электронная почта</label>
<input type="text" id="input-mail" aria-labelledby="label-mail">
Название поля можно указать в атрибутах aria-label
или title
. Второй метод менее надежный, название будет видно всем пользователям в виде белой всплывашки при наведении на поле:
<input type="text" id="input-search" aria-label="Поиск по странам">
<a class="button primary" >Найти</a>
Используйте поля ввода с указанным типом данных, например email, url, number, range, date, или time. Браузеры, которые их не поддерживают, покажут текстовое поле с type="text"
.
Добавьте на форму инструкции по заполнению полей, отметьте обязательные поля, чтобы избежать ошибок. Обязательные поля можно указать в названии поля label
, добавить к полю атрибуты required
или aria-required="true"
.
<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
можно обновлять динамически — в обычном состоянии он указывает на подсказку или описание поля, а в случае ошибки ввода — на текст ошибки (вместо или вместе с подсказкой —
может содержать несколько идентификаторов):
Неправильный формат электронной почты
<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
:
ФИО | Возраст | Профессия |
---|---|---|
Иванов Александр Александрович | 23 года | Врач |
Китаева Анна Сергеевна | 34 года | Учитель |
Колосова Александра Ивановна | 32 года | Программист |
<thead>
<tr>
<th scope="col">ФИО</th>
<th scope="col">Возраст</th>
<th scope="col">Профессия</th>
</tr>
</thead>
Для таблиц с двумя заголовками используйте одновременно row
для верхних заголовков, col
для горизонтальных строк.
Используйте элемент <caption>
или атрибут aria-describedby
для заголовка таблицы:
№ строки | ФИО | Возраст | Профессия |
---|---|---|---|
1 | Иванов Александр Александрович | 23 года | Врач |
2 | Китаева Анна Сергеевна | 34 года | Учитель |
3 | Колосова Александра Ивановна | 32 года | Программист |
<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, не показывайте текст картинкой. Объясняйте аббревиатуры и сложные термины. Это поможет пользователям воспринять весь текст.
Предоставьте всё возможное содержимое в виде текста. Избегайте текста, представленного в виде изображения. Для оформления текста используйте font
:
<span class="decor">Настала ночь первой упавшей звезды.</span>
.decor {
font-family: 'Bad Script', cursive;
font-size: 2rem;
}
Если вы все же используете изображение текста, добавьте такой же текст в атрибут alt
.
Расшифруйте аббревиатуры и дайте определения сложным терминам.
Добавьте аббревиатуры в <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>
для каждой страницы. Текст должен описывать название и назначение страницы. При навигации по сайту без перезагрузки страницы также следует изменять содержимое <title>
:
<title>Магазин продуктов «Роща»</title>
Укажите язык в атрибуте lang
для <html>
, чтобы синтезаторы речи точно определили язык страницы. Примеры значений атрибута: ru
— русский язык, en
— английский язык, de
— немецкий язык. Все значения можно посмотреть
Если у отдельной фразы или абзаца другой язык, его нужно указать отдельно. Это не относится к именам собственным, техническим терминам, устойчивым выражениям, которые заимствованы из другого языка:
Пословица «Аппетит приходит во время еды» по-немецки звучит как <span lang="de">«Der Appetit kommt beim Essen»</span>
Добавьте в начало сайта ссылку перехода к основному содержимому, чтобы пользователь при желании пропустил повторяющиеся блоки (шапку, навигацию).
Другие варианты — добавить в начало страницы ссылки на все блоки сайта или в начало каждого блока добавить ссылку на его конец.
Дайте пользователю возможность искать содержимое несколькими способами: список связанных страниц, оглавление, карта сайта, поиск, список всех страниц сайта и т. д.
Перенос фокуса, изменение настроек компонента не должны вызывать изменений страницы, кроме случаев, когда пользователя уведомили об этом до того, как он использовал этот компонент.
Распространенный случай — переход на другую страницу или открытие нового окна по событию onchange
на элементах <select>
, радиокнопках или чекбоксах. Избегайте такого поведения, переходите на другую страницу только по нажатию на кнопку или на Enter.
Изменения страницы должны происходить только по запросу пользователя или пользователь может отменить изменение.
Проверьте валидность, семантику верстки и правильную последовательность кода страницы, чтобы пользователи со скринридерами не потеряли информацию при чтении.
Сделайте адаптивную верстку. Это поможет пользователям настроить сайт — увеличить масштаб или шрифт.
Верстка должна быть семантически правильной — используйте элементы HTML по смысловому назначению. Помните, что не все браузеры отображают содержимое специальных тегов одинаково.
Для заголовков используйте <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
. Соблюдайте четкую иерархию заголовков.
Для маркированных списков используйте <ul>
, для нумерованных <ol>
.
<header>
для шапки сайта. Поместите вводные элементы сайта, которые есть на каждой странице — логотип, навигация, заголовок страницы, поиск;<nav>
для навигации по сайту;<section>
для разделения страницы на смысловые части;<aside>
для боковой колонки со списком статей, рекламы, архивных записей;<footer>
для нижнего блока страницы с информацией об авторе статьи, данные о копирайте и т. д.<figure>
для группировки элементов, например, картинку и текст;<main>
для основного содержимого страницы.Используйте адаптивную верстку и относительные единицы размера шрифта, чтобы дать пользователю возможность увеличивать масштаб страницы не менее чем в два раза.
Горизонтальная прокрутка при масштабировании сайта менее чем в два раза приводит к потере информации. Адаптивная верстка решит эту проблему.
<html>
;Соблюдайте валидность верстки — соответствие спецификации W3C. Проверяйте вложенность тегов, закрывайте все теги, проверяйте написание атрибутов и кавычек, не повторяйте один и тот же id несколько раз на странице. Скринридеры могут неправильно воспринимать невалидную верстку.
Проверьте валидность верстки с помощью онлайн-валидатора W3C.
Расположите элементы в разметке в правильном порядке независимо от визуального представления, чтобы скринридеры читали содержимое последовательно. Проверить последовательность можно отключив CSS-стили.
Самые распространенные ошибки — неправильное использование CSS-свойств position:absolute
, float:right
, order
для flexbox
и grid
. Например, на сайте левая колонка — основной контент, правая колонка — ссылки на новости. Если допустить ошибку, пользователь сначала прослушает ссылки на новости, только потом перейдет к основному контенту.
Показать направление чтения, например для арабского языка, можно с помощью специальных символов ‎
(слева направо), ‏
(справа налево) и атрибута dir
со значениями ltr
(слева направо) и rtl
(справа налево).
Дайте пользователю возможность управлять сайтом с клавиатуры без ограничений по времени на нажатие клавиши. Это поможет пользователям, которые не могут пользоваться мышкой, работать со страницей без препятствий — листать страницу, переходить по ссылкам, заполнять формы.
Рекомендация не относится к случаям, когда управления с клавиатуры невозможно. Например, при рисовании. Управление с клавиатуры не должно мешать управлению мышью.
Обеспечьте правильную последовательность перехода фокуса — проверьте семантику верстки, правильную последовательность содержимого на странице и добавьте визуальное отображение фокуса на активных элементах. Переход на следующий элемент — одно нажатие на клавишу 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 раз в секунду. Например, видеоклип или анимированное изображение серии вспышек стробоскопа или крупного плана быстрой стрельбы. Это убережет людей со светочувствительностью от приступов болезни.