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

Семантическая разметка играет ключевую роль при создании пользовательских интерфейсов, обеспечивая правильную структуру документа и доступность компонентов. В контексте Element Plus семантическая разметка проявляется через использование компонентов с понятными, логически структурированными HTML-тегами и атрибутами, а также через настройку их свойств для улучшения восприятия как пользователями, так и вспомогательными технологиями.

Основные принципы семантики в Element Plus

  1. Использование логичных контейнеров

    • Компоненты ElContainer, ElHeader, ElAside, ElMain, ElFooter соответствуют семантике HTML5:

      <el-container>
  <el-header>Заголовок приложения</el-header>
  <el-container>
    <el-aside width="200px">Боковая панель</el-aside>
    <el-main>Основной контент</el-main>
  </el-container>
  <el-footer>Футер приложения</el-footer>
</el-container>

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

  2. Кнопки и действия

    • Компонент ElButton всегда должен содержать явное назначение через атрибут type и текстовую подпись. Например:

      <el-button type="primary" aria-label="Сохранить изменения">Сохранить</el-button>

    • Для кнопок, выполняющих специфические действия, рекомендуется использовать aria-label для улучшения доступности.

  3. Формы и поля ввода

    • ElForm и связанные компоненты (ElFormItem, ElInput, ElSelect, ElCheckbox) имеют встроенные механизмы валидации и поддержки семантики:

      <el-form :model="form" :rules="rules">
  <el-form-item label="Имя" prop="name">
    <el-input v-model="form.name" placeholder="Введите имя"></el-input>
  </el-form-item>
</el-form>

    • Атрибут label в ElFormItem связывает поле ввода с текстовой меткой, обеспечивая корректную работу вспомогательных технологий.

  4. Таблицы и списки

    • Компоненты ElTable и ElTableColumn используются для структурированных данных и автоматически создают семантически корректные <table>, <thead> и <tbody>:

      <el-table :data="tableData">
  <el-table-column prop="date" label="Дата"></el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
</el-table>

    • Для списков применяются компоненты ElMenu и ElMenuItem, которые формируют правильные <ul> и <li> элементы при рендеринге.

Доступность и ARIA-атрибуты

Element Plus активно использует ARIA-атрибуты для улучшения доступности интерфейсов:

  • role — указывает тип компонента для вспомогательных технологий.
  • aria-expanded — для компонентов раскрывающихся меню и аккордеонов (ElCollapse, ElDropdown).
  • aria-label и aria-labelledby — для кнопок, иконок и элементов без видимого текста.
  • aria-disabled — для индикации недоступных элементов.

Пример использования в аккордеоне:

<el-collapse v-model="activeNames">
  <el-collapse-item title="Секция 1" name="1" aria-expanded="true">
    Контент секции
  </el-collapse-item>
</el-collapse>

Семантическая структура модальных окон и диалогов

Компонент ElDialog создает модальные окна с правильной структурой:

  • Тег <dialog> или аналог <div role="dialog"> при рендеринге.
  • Атрибут aria-modal="true" для обозначения модальности.
  • Связь заголовка с контентом через aria-labelledby:
<el-dialog title="Подтверждение" :visible.sync="dialogVisible" aria-modal="true" aria-labelledby="dialog-title">
  <span id="dialog-title">Подтвердите действие</span>
  <p>Вы действительно хотите удалить запись?</p>
</el-dialog>

Семантика навигационных компонентов

  • ElMenu и ElBreadcrumb создают структурированные списки для навигации:

    <el-breadcrumb separator="/">
  <el-breadcrumb-item to="/">Главная</el-breadcrumb-item>
  <el-breadcrumb-item>Категория</el-breadcrumb-item>
</el-breadcrumb>

  • Каждый элемент <el-breadcrumb-item> формирует семантически корректный <li> с вложенным <a> при необходимости, поддерживая SEO и удобство навигации.

Иконки и визуальные индикаторы

Использование ElIcon с явным назначением и текстовыми альтернативами:

<el-button>
  <el-icon><Delete /></el-icon>
  <span class="sr-only">Удалить</span>
</el-button>
  • sr-only — класс для скрытого текста, доступного скринридерам.
  • Комбинация визуального индикатора и текста обеспечивает полную семантику и доступность.

Рекомендации по поддержанию семантики

  1. Всегда использовать компоненты Element Plus вместо чистого HTML, когда требуется функциональность и доступность.
  2. Присваивать логичные метки и aria-атрибуты для интерактивных элементов.
  3. Следить за вложенностью контейнеров (ElContainer, ElHeader, ElMain), чтобы структура была отражена в DOM.
  4. Для динамически генерируемых списков и таблиц использовать key и prop для корректного связывания данных и столбцов.

Соблюдение этих принципов позволяет создавать интерфейсы, которые одновременно удобны для пользователя, корректно индексируются поисковыми системами и соответствуют стандартам доступности.

Оглавление