16. Screen Readers

Иллюстрация к уроку Screen Readers (программы чтения с экрана) – это вспомогательные технологии, позволяющие людям с нарушениями зрения получать доступ к цифровому контенту. Они читают текст, описывают изображения и сообщают о структуре страницы, превращая визуальную информацию в аудио или тактильную. В этом уроке мы рассмотрим, как сделать ваш HTML-код более доступным для программ чтения с экрана.

Как Screen Readers работают с HTML

Screen Readers анализируют HTML-код страницы, следуя логической структуре документа. Важно использовать семантические HTML-теги и атрибуты, чтобы обеспечить правильную интерпретацию контента. Неправильное использование HTML может запутать Screen Reader и сделать страницу недоступной.

Примеры кода

Использование семантических тегов

Вместо использования <div> для всего, используйте семантические теги, которые описывают структуру контента.

<header>
  <h1>Заголовок сайта</h1>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи...</p>
  </article>
</main>

<footer>
  <p>&copy; 2023 Мой сайт</p>
</footer>

Атрибут `alt` для изображений

Обязательно добавляйте атрибут alt ко всем изображениям. Он описывает изображение для пользователей, которые не могут его видеть.

<img src="logo.png" alt="Логотип моего сайта">

Если изображение является чисто декоративным и не содержит важной информации, используйте пустой атрибут alt:

<img src="decorative-image.png" alt="">

Атрибуты `aria-*`

Атрибуты aria-* (Accessible Rich Internet Applications) предоставляют дополнительную информацию для Screen Readers. Они используются для улучшения доступности динамического контента и сложных UI-компонентов.

Например, для обозначения текущей страницы в навигации:

<a href="#" aria-current="page">Главная</a>

Заголовки

Используйте заголовки (<h1> - <h6>) для организации контента и создания структуры страницы. Screen Readers используют заголовки для навигации по странице.

<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
<h3>Еще один подзаголовок</h3>

Жизненный пример

Многие современные веб-фреймворки и библиотеки, такие как React, Angular и Vue.js, подчеркивают важность доступности (accessibility). Они предлагают инструменты и рекомендации по созданию доступных компонентов и приложений. Например, библиотеки компонентов часто поставляются с уже настроенными атрибутами aria-* и другими функциями для улучшения доступности. Сайты крупных компаний, таких как Google, Microsoft и Apple, уделяют большое внимание доступности своих продуктов для обеспечения равного доступа к информации для всех пользователей.

Ключевые моменты

Используйте семантические HTML-теги для описания структуры контента.
Всегда добавляйте атрибут alt к изображениям.
Используйте атрибуты aria-* для улучшения доступности динамического контента.
Организуйте контент с помощью заголовков.
Тестируйте свой сайт с помощью Screen Reader (например, NVDA, JAWS).
Учитывайте стандарты WCAG (Web Content Accessibility Guidelines).