Vue.js

# Основы

Веб-доступность (также называемая как 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 Ссылка для перехода к основному контенту by Vue (@Vue) 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)

← Семантика →