SkipNav

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

Chakra UI реализует эту функциональность через два основных компонента: SkipNavLink и SkipNavContent.

SkipNavLink создаёт ссылку, которая остаётся визуально скрытой до тех пор, пока пользователь не получит на неё фокус. Обычно она размещается в начале документа.

import { SkipNavLink, SkipNavContent } from "@chakra-ui/react";

function App() {
  return (
    <>
      <SkipNavLink>Перейти к основному контенту</SkipNavLink>
      <Header />
      <Sidebar />
      <SkipNavContent />
      <MainContent />
    </>
  );
}

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

  • Фокусируемость: Ссылка становится видимой при получении фокуса с клавиатуры.
  • Текст ссылки: Должен быть кратким и описательным, например: “Пропустить навигацию” или “Перейти к основному контенту”.
  • Позиционирование: Рекомендуется размещать в самом верху компонента App или страницы, чтобы она была доступна сразу при загрузке.

SkipNavContent

SkipNavContent используется для указания места, куда будет переносить фокус SkipNavLink. Обычно это основной блок с контентом страницы.

<SkipNavContent>
  <main>
    <h1>Главная статья</h1>
    <p>Содержимое страницы...</p>
  </main>
</SkipNavContent>

Особенности использования:

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

По умолчанию SkipNavLink скрыт с помощью CSS, чтобы не мешать обычным пользователям. В Chakra UI это реализовано через srOnly стили. При получении фокуса ссылку можно визуализировать с помощью встроенных возможностей Chakra:

<SkipNavLink
  zIndex="skipLink"
  p={4}
  bg="blue.500"
  color="white"
  fontWeight="bold"
  _focus={{ outline: "none", bg: "blue.600" }}
>
  Перейти к основному контенту
</SkipNavLink>
  • zIndex: обеспечивает отображение поверх других элементов.
  • **_focus:** псевдокласс для изменения стиля при фокусе.
  • Паддинги и цвет: делают ссылку заметной и удобной для навигации.

Интеграция с React Router

Если приложение использует маршрутизацию, SkipNav работает без дополнительной настройки. Достаточно поместить SkipNavLink в верхнюю часть корневого компонента, а SkipNavContent перед основным маршрутом.

function App() {
  return (
    <>
      <SkipNavLink>Пропустить навигацию</SkipNavLink>
      <Header />
      <Routes>
        <Route
          path="/"
          element={
            <SkipNavContent>
              <HomePage />
            </SkipNavContent>
          }
        />
        <Route
          path="/about"
          element={
            <SkipNavContent>
              <AboutPage />
            </SkipNavContent>
          }
        />
      </Routes>
    </>
  );
}
  • Для каждой страницы можно использовать один SkipNavContent.
  • Ссылка SkipNavLink останется универсальной для всего приложения.

Доступность и лучшие практики

  1. Видимость при фокусе: важно, чтобы пользователь клавиатуры видел ссылку.
  2. Ясный текст: короткое описание, что именно будет пропущено.
  3. Не конфликтовать с другими интерактивными элементами: SkipNav должен быть первым в DOM, чтобы избежать проблем с фокусом.
  4. Тестирование с экранными читалками: проверка с NVDA, VoiceOver или JAWS обеспечивает правильную работу.

Использование с Chakra UI Theme

Можно настроить цвета и z-index через тему:

const theme = extendTheme({
  components: {
    SkipNavLink: {
      baseStyle: {
        zIndex: "tooltip",
        bg: "teal.500",
        color: "white",
        _focus: { bg: "teal.600" },
      },
    },
  },
});

Это позволяет централизованно управлять стилями и делать ссылку согласованной с визуальной системой приложения.

Совместимость с мобильными устройствами

На мобильных устройствах SkipNavLink обычно остаётся скрытой, так как пользователи используют сенсорный экран. Chakra UI автоматически применяет srOnly стили, что делает компонент невидимым для сенсорного интерфейса, но доступным для технологий вспомогательного доступа.

Пример полной структуры страницы с SkipNav

import { ChakraProvider, SkipNavLink, SkipNavContent, Box, Heading, Text } from "@chakra-ui/react";

function Page() {
  return (
    <ChakraProvider>
      <SkipNavLink>Перейти к основному контенту</SkipNavLink>
      <Box as="header" bg="gray.200" p={4}>Шапка сайта</Box>
      <SkipNavContent>
        <Box as="main" p={6}>
          <Heading>Главная статья</Heading>
          <Text mt={4}>
            Здесь находится основной контент страницы, который можно сразу прочитать после использования SkipNavLink.
          </Text>
        </Box>
      </SkipNavContent>
      <Box as="footer" bg="gray.100" p={4}>Футер</Box>
    </ChakraProvider>
  );
}
  • SkipNavLink располагается перед всеми элементами, которые нужно пропустить.
  • SkipNavContent ограждает основной контент, обеспечивая корректный фокус и доступность.
  • Комбинация этих компонентов улучшает навигацию и соответствует стандартам WCAG.
Оглавление