# Основы

Веб-доступность (сокращённо на английском — a11y) — это практика создания сайтов, которые могут быть использованы каждым человеком независимо от его инвалидности, скорости интернета, использовании старого или повреждённого оборудования или просто нахождении в некомфортных местах. К примеру, добавление субтитров к видеороликам может помочь как глухим, слабослышащим людям, так и тем, кто в данный момент находится в шумной обстановке и не могут услышать звук со своего телефона. Аналогично, не слишком низкой контрастности текст будет легче читать людям с ослабленным зрением, а также тем, кто использует телефон при ярком солнечном свете.

Хотите сделать своими сайты доступными, но не знаете с чего начать?

Ознакомьтесь с руководством по планированию и управлению веб-доступностью (opens new window) от консорциума Всемирной паутины (World Wide Web Consortium, W3C) (opens new window).

# Ссылка для перехода к основному контенту

Хорошая практика — добавить ссылку в начале каждой страницы, которая позволит пользователям быстро переходить к области основного содержимого на ней, что позволит пропустить повторяющееся элементы на веб-страницах.

Как правило, такая ссылка размещается в самом верху разметки главного компонента App.vue, поскольку она должна стать первым фокусируемым элементом для всех страниц:

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink">Skip to main content</a>
  </li>
</ul>

1
2
3
4
5

Чтобы скрыть ссылку до тех пор пока она не получит фокус можно добавить следующие стили:

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: .5em;
  border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

При переходе на новую страницу возвращаем фокус обратно на ссылку. Для этого вызовем соответствующий метод на элементе через ref, как показано ниже:

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus();
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9

See the Pen Skip to Main by Maria (@mlama007) on CodePen.

Документация о реализации ссылок для перехода к основному содержимому (opens new window)

# Структурирование содержимого

Одна из важнейших частей доступности — разработка дизайна с прицелом на доступность. Дизайн должен рассматривать не только цветовой контраст, шрифт, размер текста и язык, но и то, как структурировать содержимое в приложении.

# Заголовки

Пользователи могут осуществлять навигацию по заголовкам в приложении. Наличие заголовков для каждого раздела даст общее представление об содержащейся в них информации. Несколько полезных рекомендаций для улучшения доступности заголовков:

Используйте вложенные заголовки в порядке очерёдности: <h1> - <h6>
Ссылки на заголовки должны быть доступны для фокуса
Следует использовать именно теги заголовков вместо стилизации текста

Узнать подробнее про заголовки (opens new window)

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Основной заголовок</h1>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Заголовок раздела </h2>
    <h3>Вложенный заголовок раздела</h3>
    <!-- Содержимое -->
  </section>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Заголовок раздела  </h2>
    <h3>Вложенный заголовок раздела</h3>
    <!-- Содержимое -->
    <h3>Вложенный заголовок раздела</h3>
    <!-- Содержимое -->
  </section>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Ориентиры

Ориентиры (landmarks) описывают способ доступа к разделам внутри приложения. Пользователи, использующие вспомогательные технологии, могут перейти непосредственно к каждому разделу приложения минуя остальное содержимое. Для этого следует использовать ARIA-роли (opens new window).

HTML	ARIA-роль	Назначение ориентира
header	role="banner"	Основной заголовок: заголовок страницы
nav	role="navigation"	Коллекция ссылок для перемещения по странице или другим страницам
main	role="main"	Основное или самое важное содержимое на странице
footer	role="contentinfo"	Информация о странице: сноски, авторские права, ссылки на политику конфиденциальности
aside	role="complementary"	Дополнение к основному содержимому
Недоступен	role="search"	Раздел, содержащий функциональность поиска по приложению
form	role="form"	Коллекция элементов формы
section	role="region"	Сопутствующее содержимое, которое пользователь возможно захочет изучить. Для такого элемента нужно указать метку

Совет

Для улучшения совместимости с устаревшими браузерами, которые не поддерживают семантические элементы HTML5 (opens new window) при использовании HTML-элементов ориентиров рекомендуется добавлять соответствующие, пусть и устаревшие, атрибуты ролей.

Подробнее про ориентиры (opens new window)

← Отрисовка на стороне сервера Семантика →