HTML Доступность
Доступность HTML
Напишите HTML с учетом специальных возможностей. Предоставьте пользователю хороший способ навигации и взаимодействия с вашим сайтом. Сделайте свой HTML-код как можно более семантическ им, чтобы код был легко понятен посетителям и читателям экрана.
Семантический HTML
Семантический HTML означает использование правильных HTML-элементов для их правильного назначения в максимально возможной степени. Семантические элементы — это элементы с смыслом; Если вам нужна кнопка, используйте элемент <button> (а не <div> ).
Семантические
<button>Click Me</button>
Не семантические
<div>Click Me</div>
Семантический HTML дает контекст для чтения с экрана, которые читают содержимое веб-страницы вслух.
С помощью примера кнопки в виду:
- кнопки имеют более подходящий стиль по умолчанию
- средство чтения с экрана идентифицирует его как кнопку
- Focusable
- Интерактивными
Кнопка также доступна для людей, полагаться на клавиатуре только Навигация; она может быть нажата с помощью мыши и клавиш, и он может быть с вкладками между (используя клавишу TAB на клавиатуре).
Примеры не семантическ их элементов: <div> и <span> — ничего не говорит о его содержимом.
Примеры семантическ их элементов: <form> , <table> и <article> — четко определяет его содержание.
Заголовки важны
Заголовки определяются с <h1> для <h6> тегов:
Пример
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Поисковики используют заголовки для индексации структуры и содержания ваших веб-страниц.
Пользователи снимают страницы по заголовкам. Важно использовать заголовки для отображения структуры документа и связей между различными разделами.
<h1>заголовки должны использоваться для основных рубрик, за которыми следуют <h2> заголовки, затем менее важные <h3> и так далее.
Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки, чтобы сделать текст большим или полужирным.
Альтернативный текст
Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует средство чтения с экрана).
Значение атрибута alt должно описывать изображение:
Пример
<img src="img_chania.jpg" alt="Flowers
in Chania">
Если обозреватель не может найти изображение, будет отображено значение атрибута alt:
Пример
<img src="wrongname.gif" alt="Flowers
in Chania">
Объявить язык
Объявление языка важно для читателей экрана и поисковых систем, и объявляется с атрибутом lang. Чтобы отобразить веб-страницу на английском языке, выполните следующие действия:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Использовать понятный язык
Используйте понятный язык, который легко понять, и старайтесь избегать символов, которые не могут быть четко прочитаны с помощью программы чтения с экрана. Например:
- Держите предложения как можно короче.
- Избегайте тире. Вместо написания 1-3, напишите от 1 до 3
- Избегайте сокращений. Вместо написания февраля, напишите Февраль
- Избегайте жаргонных слов
Написать хорошие ссылки
Ссылка должна четко объяснить, какую информацию читатель получит, нажав на эту ссылку.
Примеры хороших и плохих ссылок:
Хорошо
Плохо
Названия ссылок
Атрибут title указывает дополнительные сведения об элементе.
Информация чаще всего отображается как текст подсказки, когда указатель мыши перемещается над элементом.
Пример
<a href="https://html5css.dev/html/" title="Go to html5css.dev HTML
section">Visit our HTML Tutorial</a>