Изображения

Изображения

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

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

Информативные изображения передают краткую информацию к тексту, дополняют или обозначают его. Добавьте информацию в атрибут 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 год

График посещений сайта 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 только к первому изображению:

Пример
Рейтинг фильма 4 из 5
<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 можно узнать в статье Hiding DOM elements.

Еще один способ связывания поля и подписи — атрибут 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 можно обновлять динамически — в обычном состоянии он указывает на подсказку или описание поля, а в случае ошибки ввода — на текст ошибки (вместо или вместе с подсказкой — 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>
    <th>Иванов Александр Александрович</th>
    <th>23 года</th>
    <th>Врач</th>
  </tr>
</tbody>
Текст

Текст

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

CSS-оформление

Предоставьте всё возможное содержимое в виде текста. Избегайте текста, представленного в виде изображения. Для оформления текста используйте CSS-свойство font:

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

Если вы все же используете изображение текста, добавьте такой же текст в атрибут alt.

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

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

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

Пример
М. н. с. Александр Григорьевич Петров защитил диссертацию 15 января 2017 года.
<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 — немецкий язык. Все значения можно посмотреть на сайте htmlbook.ru.

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

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

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

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

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

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

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

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

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

Верстка

Верстка

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

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

Семантика

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

Для заголовков используйте <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Соблюдайте четкую иерархию заголовков.

Для маркерованных списков используйте <ul>, для нумерованных <ol>.

Используйте теги HTML5:
  • <header> для шапки сайта. Поместите вводные элементы сайта, которые есть на каждой странице — логотип, навигация, заголовок страницы, поиск;
  • <nav> для навигации по сайту;
  • <section> для разделения страницы на смысловые части;
  • <aside> для боковой колонки со списком статей, рекламы, архивных записей;
  • <footer> для нижнего блока страницы с информацией об авторе статьи, данные о копирайте и т. д.
  • <figure> для группировки элементов, например, картинку и текст;
  • <main> для основного содержимого страницы.

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

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

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

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

Валидность

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

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

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

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

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

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

Навигация
Управление с клавиатуры

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

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

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

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

WGAC 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 раз в секунду. Например, видеоклип или анимированное изображение серии вспышек стробоскопа или крупного плана быстрой стрельбы. Это убережет людей со светочувствительностью от приступов болезни.