HTML Доступность

HTML Доступность

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

Семантический HTML

Семантический HTML означает максимально возможное использование правильных элементов HTML для их правильного назначения. Семантические элементы являются элементами со значением; если вам необходима кнопка, используйте элемент <button> (а не <div>).

Семантический HTML дает контекст для скринридеров, которые читают содержимое веб-страницы вслух.

С примером кнопки ввиду:

• По умолчанию кнопки имеют более соответствующий стиль
• Скринридер идентифицирует его как кнопку
• Фокусированы
• Кликабельны

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

Примеры не семантических элементов: <div> и <span> - ничего не рассказывают о своём содержании.

Примеры семантических элементов: <form>, <table> и <article> - чётко определяют своё содержание.

Заголовки важны

Заголовки определяются с помощью тегов от <h1> до <h6>:

Поисковые системы используют заголовки для индексирования структуры и содержания ваших веб-страниц.

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

<h1> заголовки следует использовать для основных заголовков, после чего следует использовать <h2> заголовки, далее менее важные <h3> и так далее.

Альтернативный текст

Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-то причине не может его посмотреть (из-за медленного Интернет-соединения, ошибки в атрибуте src или если пользователь использует скринридер).

Значение атрибута alt должно описывать изображение:

Если браузер не может найти изображение, он отобразит значение атрибута alt:

Объявление языка

Объявление языка является важным для скринридеров и поисковых систем, и объявляется атрибутом lang. Используйте приведённый ниже код для отображения веб-страницы на русском языке:

Используйте "чистый" язык

Используйте "чистый язык", который легко понять, и старайтесь избегать символов, которые невозможно прочитать чётко с помощью программы для чтения с экрана (скринридером). Например:

• Сделайте предложения как-можно более короткими.
• Избегайте тире там, где возможно. Вместо того, чтобы писать 1-3, запишите так: от 1 до 3
• Избегайте сокращений там, где возможно. Вместо того, чтобы писать Feb, пишите February
• Избегайте сленговых слов

Пишите хорошие ссылки

Ссылка должна чётко объяснять, какую информацию читатель получит, нажав на эту ссылку.

Примеры хороших и плохих ссылок:

Названия ссылок

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