Семантическая разметка

Chakra UI предоставляет мощный и гибкий подход к построению интерфейсов на основе React, уделяя особое внимание семантической разметке и доступности. Семантика играет ключевую роль в создании компонентов, которые правильно интерпретируются браузерами, поисковыми системами и вспомогательными технологиями, такими как скринридеры.

Основы семантики

Chakra UI использует компоненты-обертки для стандартных HTML-тегов. Например:

  • Box — универсальный контейнер, который можно использовать вместо div, section или article.
  • Text — компонент для текста, который соответствует тегу p по умолчанию.
  • Heading — компонент для заголовков с поддержкой уровней (h1–h6).

Пример базовой структуры:

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

function Article() {
  return (
    <Box as="article" p={6} bg="gray.50">
      <Heading as="h1" size="xl" mb={4}>
        Основы Chakra UI
      </Heading>
      <Text fontSize="lg">
        Chakra UI обеспечивает создание семантически правильных компонентов с минимальными усилиями.
      </Text>
    </Box>
  );
}

Здесь ключевым является использование пропа as, который позволяет задать конкретный HTML-тег. Box as="article" превращает универсальный контейнер в семантический тег article.

Использование пропса as для семантики

Проп as — один из центральных инструментов Chakra UI для семантической разметки. Он позволяет:

  • Изменять тег без изменения стилей компонента.
  • Создавать гибкие и повторно используемые компоненты.
  • Сохранять правильную структуру документа для SEO и доступности.

Примеры:

<Heading as="h2">Раздел 1</Heading>
<Text as="cite">Источник информации</Text>
<Button as="a" href="#">Ссылка-кнопка</Button>

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

Семантические формы

Chakra UI обеспечивает правильную семантику форм через компоненты:

  • FormControl — контейнер для одного элемента формы с меткой и возможными ошибками.
  • FormLabel — ассоциированная метка (label).
  • Input, Textarea, Select — элементы ввода с встроенной доступностью.
  • FormErrorMessage — отображение ошибок формы.

Пример формы:

import { FormControl, FormLabel, Input, FormErrorMessage, Button } from "@chakra-ui/react";
import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Неверный email");
    } else {
      setError("");
    }
  };

  return (
    <form onSub mit={handleSubmit}>
      <FormControl isInvalid={error}>
        <FormLabel htmlFor="email">Email</FormLabel>
        <Input
          id="email"
          type="email"
          value={email}
          onCha nge={(e) => setEmail(e.target.value)}
        />
        <FormErrorMessage>{error}</FormErrorMessage>
      </FormControl>
      <Button mt={4} type="submit">Войти</Button>
    </form>
  );
}

Использование FormControl и FormLabel гарантирует корректную связь между меткой и полем ввода, что важно для скринридеров.

Семантика навигации

Chakra UI позволяет структурировать навигационные элементы:

  • Nav — можно реализовать через Box as="nav".
  • Link — семантическая ссылка с поддержкой стилизации.
  • Breadcrumb — компонент для отображения цепочки навигации.

Пример навигации:

import { Box, Link, HStack } from "@chakra-ui/react";

function Navigation() {
  return (
    <Box as="nav" bg="blue.50" p={4}>
      <HStack spacing={4}>
        <Link href="/">Главная</Link>
        <Link href="/about">О нас</Link>
        <Link href="/contact">Контакты</Link>
      </HStack>
    </Box>
  );
}

Использование as="nav" делает контейнер семантически корректным элементом навигации, что повышает доступность сайта.

Семантические списки

Для списков Chakra UI предоставляет:

  • UnorderedList (ul) и OrderedList (ol)
  • ListItem (li)

Пример:

import { UnorderedList, ListItem } from "@chakra-ui/react";

function Features() {
  return (
    <UnorderedList>
      <ListItem>Простая стилизация</ListItem>
      <ListItem>Семантические компоненты</ListItem>
      <ListItem>Доступность по умолчанию</ListItem>
    </UnorderedList>
  );
}

Правильная семантика списков улучшает восприятие контента для пользователей и поисковых систем.

Доступность и семантика

Chakra UI интегрирует ARIA-атрибуты и автоматически обрабатывает их в компонентах. Например:

  • aria-label для кнопок и ссылок без текста.
  • aria-invalid для форм с ошибками.
  • role для динамических компонентов, таких как модальные окна и вкладки.
<Button aria-label="Закрыть окно" onCl ick={closeModal}>×</Button>

Это обеспечивает соблюдение стандартов доступности без дополнительного кода.

Итоговые рекомендации

  • Использовать проп as для корректной семантики.
  • Применять специализированные компоненты (FormControl, Heading, Text) вместо прямых HTML-тегов.
  • Следить за доступностью через встроенные возможности Chakra UI.
  • Сохранять правильную структуру документа для SEO и скринридеров.

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

Оглавление