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

Ant Design предоставляет набор компонентов с предопределённой семантической структурой, которая соответствует стандартам HTML и облегчает создание доступных и читаемых интерфейсов. Семантическая разметка позволяет не только улучшить SEO, но и обеспечить корректную работу вспомогательных технологий, таких как экранные читалки.

Компоненты с семантической структурой

Layout

Компонент Layout реализует базовую структурную разметку страницы: Header, Footer, Sider и Content. Каждый из этих компонентов соответствует логическому элементу страницы и имеет корректные HTML-теги (header, footer, aside, main).

import { Layout, Menu } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

<Layout>
  <Header>Главная навигация</Header>
  <Layout>
    <Sider>Меню</Sider>
    <Content>Основное содержимое</Content>
  </Layout>
  <Footer>Авторские права © 2026</Footer>
</Layout>

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

  • Использование Header, Content, Footer улучшает восприятие страницы скринридерами.
  • Sider отражает боковую навигацию и логически выделяет вспомогательный контент.
  • Вложенные Layout позволяют структурировать страницу на блоки, сохраняя семантику.

Typography

Компонент Typography предоставляет набор текстовых элементов: Title, Paragraph, Text, Link. Эти элементы не только стилизуются, но и сохраняют семантическую ценность.

import { Typography } from 'antd';

const { Title, Paragraph, Text, Link } = Typography;

<Typography>
  <Title level={1}>Главный заголовок страницы</Title>
  <Paragraph>
    Это пример абзаца с <Text strong>выделением</Text> ключевых слов и <Link href="#">ссылкой</Link>.
  </Paragraph>
</Typography>

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

  • Title с уровнем (level={1-5}) соответствует HTML-тегам <h1>–<h5>.
  • Paragraph рендерится как <p>, поддерживая логическую структуру текста.
  • Использование Text и Link улучшает читаемость и доступность интерфейса.

Form и семантика полей

Компонент Form автоматически связывает элементы ввода с их метками через label и htmlFor. Это гарантирует, что поля формы будут правильно распознаны вспомогательными технологиями.

import { Form, Input, Button } from 'antd';

<Form layout="vertical">
  <Form.Item label="Имя" name="username" rules={[{ required: true }]}>
    <Input placeholder="Введите имя" />
  </Form.Item>
  <Form.Item label="Пароль" name="password" rules={[{ required: true }]}>
    <Input.Password placeholder="Введите пароль" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Войти</Button>
  </Form.Item>
</Form>

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

  • label создаёт привязку к Input, улучшая доступность.
  • Form.Item обеспечивает правильную структуру <label> и <input> внутри формы.
  • Button с htmlType="submit" рендерится как <button type="submit">, что соответствует семантике HTML.

Семантические таблицы

Компонент Table рендерит данные с использованием <table>, <thead>, <tbody> и <th>, что обеспечивает корректное восприятие информации и доступность.

import { Table } from 'antd';

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name' },
  { title: 'Возраст', dataIndex: 'age', key: 'age' },
];

const data = [
  { key: '1', name: 'Алексей', age: 30 },
  { key: '2', name: 'Мария', age: 25 },
];

<Table columns={columns} dataSource={data} />

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

  • Заголовки колонок рендерятся как <th> с атрибутом scope="col".
  • Каждая строка данных рендерится как <tr> с уникальным key, поддерживая идентификацию.
  • Table поддерживает семантику таблиц для скринридеров и поиска.

Навигация и списки

Menu

Компонент Menu рендерится с использованием <ul> и <li> для группировки элементов навигации, а также корректно поддерживает роли (role="menu").

import { Menu } from 'antd';

<Menu mode="horizontal">
  <Menu.Item key="home">Главная</Menu.Item>
  <Menu.Item key="about">О нас</Menu.Item>
  <Menu.SubMenu key="services" title="Услуги">
    <Menu.Item key="design">Дизайн</Menu.Item>
    <Menu.Item key="development">Разработка</Menu.Item>
  </Menu.SubMenu>
</Menu>

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

  • Семантическая структура <ul>/<li> облегчает восприятие меню скринридерами.
  • SubMenu поддерживает вложенную навигацию с правильными ролями.

List

Компонент List строит списки данных, рендеря элементы как <li> внутри <ul> или <ol>.

import { List } from 'antd';

<List
  header="Список задач"
  bordered
  dataSource={['Купить продукты', 'Сделать отчёт', 'Позвонить клиенту']}
  renderItem={item => <List.Item>{item}</List.Item>}
/>

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

  • Семантика списка сохраняется автоматически.
  • Элементы списка корректно воспринимаются скринридерами.
  • header рендерится как заголовок списка (<div> с ролью heading).

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

Использование компонентов Ant Design с корректной семантической разметкой обеспечивает:

  • Поддержку клавиатурной навигации.
  • Читаемость экранными читалками.
  • Улучшенное SEO за счёт логической структуры документа.

Правильное применение Layout, Typography, Form, Table, Menu и List позволяет строить интерфейсы, которые одновременно эстетичны, функциональны и доступны для всех пользователей.

Оглавление