ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

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://www.html5css.ru/html/" title="Go to html5css.ru HTML section">Visit our HTML Tutorial</a>