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

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

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

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

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

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

На примере кнопки ввода:

• По умолчанию кнопки имеют более подходящий стиль
• Скринридер идентифицирует её как кнопку
• Она может получать фокус
• Она кликабельна

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

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

Примеры семантических элементов: <form> (форма), <table> (таблица) и <article> (статья) — они ясно указывают на тип содержимого.

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

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

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

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

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

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

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

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

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

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

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

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

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

• Делайте предложения как можно короче;
• Избегайте тире там, где возможно. Вместо «1–3» пишите: от 1 до 3;
• Избегайте сокращений там, где возможно. Вместо «Feb» пишите «February»;
• Избегайте сленга и ругательств (если это возможно 🤓).

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

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

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

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

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