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

SkateJS — это библиотека для создания веб-компонентов на JavaScript, которая обеспечивает строгую интеграцию с нативными возможностями браузера, включая Custom Elements и Shadow DOM. Одним из ключевых аспектов при разработке компонентов является семантическая разметка, позволяющая компонентам оставаться доступными, логически структурированными и легко интегрируемыми в любую страницу.

Определение компонентов и их семантика

Компонент в SkateJS создаётся через функцию skate(), где определяется его имя, свойства и рэндеринг. Семантика напрямую зависит от того, какие HTML-теги используются внутри рендера. Например, заголовки должны использовать <h1>–<h6>, списки — <ul> или <ol>, кнопки — <button>.

import { skate } from 'skatejs';
import { h } from 'skatejs';

skate('my-card', {
  render() {
    return h('article', [
      h('header', h('h2', 'Заголовок карточки')),
      h('section', 'Основное содержание карточки'),
      h('footer', 'Подвал карточки')
    ]);
  }
});

Здесь компонент my-card использует семантически правильные теги: article, header, section, footer. Это важно для:

  • SEO — поисковые системы корректно индексируют структуру контента;
  • Доступности — скринридеры и ассистивные технологии распознают разделы;
  • Поддерживаемости — структура компонентов легко читается другим разработчиком.

Свойства компонентов и семантика

Свойства (props) в SkateJS могут влиять на семантическое поведение компонентов. Например, динамическая смена тега для заголовка:

skate('dynamic-heading', {
  props: {
    level: {
      attribute: true,
      default: 1,
      type: Number
    }
  },
  render(elem) {
    const Tag = `h${elem.level}`;
    return h(Tag, 'Динамический заголовок');
  }
});

Использование переменной Tag позволяет менять семантический уровень заголовка без нарушения структуры документа.

Shadow DOM и семантика

SkateJS по умолчанию поддерживает Shadow DOM, что влияет на видимость элементов для внешних стилей и скриптов. Семантическая разметка внутри Shadow DOM должна оставаться логически правильной:

skate('user-profile', {
  shadow: true,
  render() {
    return h('section', [
      h('header', h('h3', 'Имя пользователя')),
      h('p', 'Описание профиля')
    ]);
  }
});

Использование section и header сохраняет семантику, даже если компонент инкапсулирован в Shadow DOM.

Доступность и ARIA

Семантика компонентов тесно связана с ARIA-атрибутами, которые делают интерфейсы доступными:

skate('modal-dialog', {
  props: {
    open: { attribute: true, type: Boolean }
  },
  render(elem) {
    return h('div', {
      role: 'dialog',
      'aria-hidden': !elem.open
    }, [
      h('header', h('h2', 'Заголовок модального окна')),
      h('section', 'Содержимое окна')
    ]);
  }
});
  • role="dialog" указывает скринридерам, что это модальное окно.
  • aria-hidden скрывает компонент, если он закрыт.
  • Использование семантических тегов внутри улучшает понимание структуры контента.

Контейнеры и вложенность

Правильная вложенность семантических элементов — критично для читабельности и доступности:

  • article может содержать header, section и footer.
  • section не должен использоваться для отдельных предложений, только для логически связанных блоков.
  • nav используется для навигационных ссылок, не для всех ссылок страницы.

Пример комплексного компонента:

skate('blog-post', {
  render() {
    return h('article', [
      h('header', [
        h('h1', 'Заголовок поста'),
        h('p', 'Автор и дата публикации')
      ]),
      h('section', 'Основной текст статьи с параграфами и списками'),
      h('footer', [
        h('p', 'Комментарии и ссылки для взаимодействия')
      ])
    ]);
  }
});

Итоговое соблюдение семантики

Ключевые моменты при использовании SkateJS:

  • Использовать правильные HTML-теги для каждого типа контента.
  • Shadow DOM не нарушает семантику, если правильно структурировать элементы внутри.
  • ARIA и доступность дополняют семантическую разметку, делая компоненты доступными.
  • Динамические свойства позволяют менять семантические элементы без ломки структуры документа.

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

Оглавление