Помню тот момент, когда осознала, что мое идеальное с точки зрения кода портфолио на React на самом деле трудно использовать. Тогда я только что завершила обучающий курс по доступности. Уверенная в полученных знаниях, решила протестировать свой сайт. Отключила мышь и начала перемещаться по сайту с помощью клавиши «Tab».

Tab (Главная). Tab (Обо мне). Tab (Контакты).

Я многократно нажимала клавишу «Tab», чтобы добраться до первого поста в блоге.

Tab. Tab. Tab.

Я все еще застревала в цикле переключения по пунктам навигационного меню.

К тому моменту, когда курсор наконец остановился на кнопке «Читать дальше» моей главной статьи, я нажала клавишу «Tab» бесчисленное количество раз. Это было не просто раздражающе. Это было изнурительно. Я поняла, в чем проблема: я создала интерфейс, который блокировал базовую навигацию, а не облегчал ее.

В тот день я узнала о ссылке «Перейти к контенту» («Skip to Content»). Эту мини-функцию часто недооценивают. Но ее добавление полностью изменило мое представление о том, как проявлять эмпатию в коде.

В этой статье я расскажу, как я исправила навигацию, чему научилась в процессе и почему это изменение имеет значение для React-приложений.

Зачем нужна ссылка «Перейти к контенту»?

Если вы никогда не слышали о ссылке «Перейти к контенту», не смущайтесь. Я тоже не знала о ней до недавнего времени.

Представьте, что вы звоните в службу поддержки своего банка. Вы просто хотите проверить остаток на счете. Однако прежде чем это сделать, вам приходится выслушивать, как робот перечисляет все пункты меню.

«Нажмите 1 для информации о часах работы. Нажмите 2 для информации об отделениях. Нажмите 3 для записи на прием…»

Меню воспроизводится при каждом звонке. Это быстро начинает раздражать.

Использование веб-сайта с клавиатурой без ссылки «Перейти к контенту» вызывает именно такие ощущения. Пользователи вынуждены «прослушивать» (то есть перебирать с помощью Tab) ваш логотип, строку поиска и каждую ссылку в навигационном меню, прежде чем смогут получить доступ к основному контенту.

Ссылка «Перейти к контенту» работает как кнопка «0» в телефоне, позволяющая немедленно связаться с оператором. Она дает пользователям возможность пропустить повторяющееся меню и перейти сразу к нужной информации.

Как я реализовала эту функцию (сначала неправильно, потом правильно)

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

  1. Структура HTML

В основном компоненте App.js или layout это выглядит примерно так:

const App = () => {
  return (
    <>
      <a href="#main-content" className="skip-link">
        Skip to content
      </a>
      
      <nav>
        {/* Ссылки для навигации здесь */}
      </nav>

      <main id="main-content" tabIndex="-1">
        {/* Контент главной страницы здесь */}
      </main>
    </>
  );
};

Я добавила tabIndex=»-1″ к основному контейнеру. Это рекомендуемый подход, позволяющий гарантировать, что фокус действительно попадает на контейнер и остается на нем в одностраничных React-приложениях.

  1. Магия CSS

Здесь я застряла. Мне очень хотелось разместить видимую ссылку для пропуска в верхней части моего безупречно выполненного макета. Поэтому использовала display: none.

Никогда не делайте этого.

Если вы используете display: none, скринридеры полностью игнорируют ссылку. Это сводит на нет всю задумку.

Мне пришлось изучить документацию, чтобы найти правильный подход. Я начала с чтения MDN Web Docs (Mozilla Developer Network — бесплатный открытый справочный ресурс для веб-разработчиков), который, по сути, является библией веб-стандартов. Там объяснялось основное правило: «Ссылка должна быть визуально скрыта, пока на нее не будет установлен фокус».

Затем я посмотрела на CSS-Tricks (платформа для веб-разработчиков, посвященная каскадным таблицам стилей (CSS) и созданию сайтов) и фрагменты кода на freeCodeCamp (бесплатная обучающая платформа), которые показали мне шаблон класса «visually hidden» («визуально скрытый»).

Вот код для CSS (стилизации ссылки «Перейти к контенту»), который в итоге сработал для меня:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

Теперь, если пользователь, управляющий мышью, просматривает сайт, то не замечает ничего необычного. Но как только пользователь, управляющий клавиатурой, впервые нажимает клавишу «Tab», с экрана выскакивает крупная кнопка «Перейти к контенту». Вот такая магия.

Подведем итоги

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

Я поняла, что мне нужен более структурированный подход. Изучила несколько курсов. Udemy предлагает глубокие погружения в конкретные правила WCAG (Web Content Accessibility Guidelines — Руководство по обеспечению доступности веб-контента), а Coursera предоставляет обширные сертификационные программы по веб-дизайну. Google UX Design Professional Certificate (профессиональный сертификат от Google) также дал мне полезные идеи об эмпатии к пользователям и паттернах взаимодействия.

Настоящий прорыв произошел, когда я познакомилась с курсом Learn React 19: The Complete Guide to Modern Web Apps  («Изучите React 19: Полное руководство по современным веб-приложениям») на Educative. Возможность увидеть темы доступности, такие как «Enhancing Forms Accessibility» («Улучшение доступности форм»), встроенными в структуру проекта, а не добавленными позже, помогла мне увидеть общую картину.

Для освоения сложных концепций курс Learn React Hooks for Frontend Development («Изучите хуки React для разработки фронтенда») стал настоящим спасением. Этот курс научил меня использовать useRef для программного управления фокусом.

Для разработчика, стремящегося выйти за рамки копирования кода и начать понимать системы, эти наиболее эффективные пути обучения.

Почему это важно (не только с точки зрения кода)

Добавление этой ссылки заняло у меня около 15 минут. Но это навсегда изменило мое представление об эмпатии.

Раньше я беспокоилась о том, как выглядит мой сайт. Теперь беспокоюсь о том, каковы ощущения пользователей от его использования.

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

Добавляя ссылку «Перейти к контенту», вы как бы говорите своим пользователям: «Я ценю ваше время. Я хочу, чтобы вы добрались до того контента, ради которого пришли».

Контрольный список по доступности

Готовы сделать свое React-приложение более удобным? Вот краткий список того, что нужно проверить сегодня:

  • Добавьте идентификатор: Убедитесь, что тег <main> имеет уникальный идентификатор, например id=»main-content».
  • Создайте анкор: Поместите <a href=»#main-content»> самым первым элементом в теге body.
  • Настройте стиль для фокуса: Убедитесь, что ссылка становится визуально заметной, когда получает фокус. Установите высокий уровень контрастности.
  • Протестируйте с помощью клавиатуры: Отключите мышь. Проверьте, можно ли добраться до поста в блоге за один-два нажатия «Tab».
  • Протестируйте фокус: Проверьте, действительно ли кольцо фокуса попадает на область контента.

Принимайте продуманные решения

Интернет — общая инфраструктура, формируемая решениями, которые мы, разработчики, принимаем. Создавая панель навигации, подумайте о посетителях вашего сайта, которые пользуются клавиатурной навигацией и вынуждены переходить по всем элементам с помощью клавиши «Tab». Предоставьте им четкую ссылку «Перейти к контенту» или соответствующее сочетание клавиш. Это значительно повысит уровень удобства использования вашего сайта.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Sofia Marques: The overlooked accessibility feature: Why “skip to content” links matter

Предыдущая статьяРазработка мобильных приложений —  это все еще золотая жила (если вы делаете все правильно)