Учебник по HTML

HTML ГЛАВНАЯ Введение в HTML HTML-редакторы Базовый HTML HTML-элементы HTML-атрибуты HTML-заголовки HTML-абзацы HTML-стили HTML-форматирование HTML-цитаты HTML-комментарии Цвета HTML HTML CSS HTML-ссылки HTML-изображения HTML Фавикон HTML-таблицы HTML-списки Блок HTML и встроенный HTML-классы HTML-идентификатор HTML-фреймы HTML JavaScript Пути HTML-файлов HTML-голова HTML-макет HTML Отзывчивый HTML компьютерный код HTML-семантика Руководство по стилю HTML HTML-сущности HTML-символы HTML-смайлики HTML-кодировка HTML-кодирование URL-адреса HTML против XHTML

HTML -формы

HTML-формы Атрибуты HTML-формы HTML-элементы формы Типы ввода HTML Атрибуты ввода HTML Атрибуты формы ввода HTML

HTML- графика

HTML-холст HTML SVG

HTML- медиа

HTML-медиа HTML-видео HTML-аудио HTML-плагины HTML YouTube

HTML -API

HTML-геолокация Перетаскивание HTML Веб-хранилище HTML Веб-воркеры HTML HTML SSE

HTML- примеры

HTML-примеры HTML-викторина HTML-упражнения HTML-сертификат Резюме HTML Доступность HTML

HTML -ссылки

Список тегов HTML HTML-атрибуты Глобальные атрибуты HTML Поддержка HTML-браузера HTML-события Цвета HTML HTML-холст HTML-аудио/видео Типы документов HTML Наборы символов HTML HTML-кодирование URL-адреса Языковые HTML-коды HTTP-сообщения HTTP-методы Конвертер PX в EM Горячие клавиши

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


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

Всегда пишите HTML-код с учетом доступности!

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


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

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

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

<button>Report an Error</button>

Несемантический

<div>Report an Error</div>

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

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

  • кнопки имеют более подходящий стиль по умолчанию
  • программа чтения с экрана идентифицирует его как кнопку
  • фокусируемый
  • кликабельный

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

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

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


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

Заголовки определяются с помощью тегов <h1>to :<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="A narrow city street with flowers in Chania">

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

Пример

<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">

Объявить язык

Вы всегда должны включать lang атрибут внутри <html>тега, чтобы объявить язык веб-страницы. Это предназначено для помощи поисковым системам и браузерам.

В следующем примере в качестве языка указан английский:

<!DOCTYPE html>
<html lang="en">
<body>

...

</body>
</html>

Используйте понятный язык

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

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

Создайте хороший текст ссылки

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

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

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