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

Hyperapp — минималистичный JavaScript-фреймворк для создания реактивных веб-приложений. Несмотря на лёгкость и компактность, он позволяет создавать интерфейсы с высокой доступностью и правильно структурированной семантической разметкой. Доступность (accessibility, a11y) обеспечивает возможность использования приложений людьми с ограниченными возможностями, а семантическая разметка улучшает восприятие контента как пользователями, так и поисковыми системами.

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

Hyperapp использует функцию h() для создания виртуальных DOM-элементов. Семантическая разметка достигается через использование корректных HTML-тегов, атрибутов и структурных элементов.

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

import { h, app } from "hyperapp";

const state = { count: 0 };

const actions = {
  increment: () => state => ({ count: state.count + 1 })
};

const view = (state, actions) =>
  h("div", {}, [
    h("h1", {}, "Счётчик"),
    h("button", { onclick: actions.increment, "aria-label": "Увеличить счёт" }, "+"),
    h("p", {}, `Текущее значение: ${state.count}`)
  ]);

app({ init: state, view, node: document.getElementById("app") });

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

  • Использование тегов h1, p, button вместо div или span для обозначения смысловой структуры.
  • Атрибут aria-label обеспечивает доступность для скринридеров.
  • Все интерактивные элементы должны быть фокусируемыми и иметь описательные текстовые метки.

Управление фокусом и навигацией с клавиатуры

Hyperapp не предоставляет встроенных средств управления фокусом, поэтому важно использовать стандартные HTML-атрибуты tabindex, а также обработчики событий для клавиатурной навигации:

h("input", { type: "text", placeholder: "Введите имя", tabindex: 0 })

Для сложных компонентов, таких как модальные окна, необходимо управлять фокусом программно:

const openModal = () => state => {
  setTimeout(() => document.getElementById("modal").focus(), 0);
  return { ...state, modalOpen: true };
};

h("div", {
  id: "modal",
  tabindex: -1,
  role: "dialog",
  "aria-modal": "true"
}, "Контент модального окна")

Важно: role="dialog" и aria-modal="true" сообщают скринридерам о типе и состоянии компонента. tabindex="-1" позволяет программно устанавливать фокус.

Использование ARIA-атрибутов

ARIA-атрибуты дополняют семантику HTML, когда стандартных тегов недостаточно. Hyperapp позволяет легко добавлять их через объект атрибутов:

h("nav", { "aria-label": "Главное меню" }, [
  h("a", { href: "/", "aria-current": "page" }, "Главная"),
  h("a", { href: "/about" }, "О проекте")
]);

Основные рекомендации:

  • Использовать ARIA только при необходимости. Семантические HTML-элементы предпочтительнее.
  • Все интерактивные элементы должны иметь текстовые метки или aria-label.
  • Динамические изменения интерфейса сопровождаются ARIA-уведомлениями через aria-live.

Доступные формы и элементы управления

Формы — ключевая область для доступности. В Hyperapp можно создавать формы с корректной связкой <label> и <input>:

h("label", { for: "email" }, "Email"),
h("input", { id: "email", type: "email", required: true })

Принципы:

  • Атрибут for связывает метку с полем ввода.
  • Использование required, type и pattern помогает валидации и навигации с клавиатуры.
  • Для нестандартных элементов управления (слайдеры, кастомные чекбоксы) обязательно использовать ARIA-атрибуты.

Структура страницы и заголовки

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

h("header", {}, h("h1", {}, "Заголовок сайта")),
h("main", {}, [
  h("section", {}, h("h2", {}, "Раздел 1")),
  h("section", {}, h("h2", {}, "Раздел 2"))
]),
h("footer", {}, "Контакты и информация")

Советы:

  • На странице должен быть один <h1>.
  • <h2>–<h6> создают иерархию разделов.
  • Элементы <header>, <main>, <footer>, <nav>, <section> обеспечивают семантическую структуру документа.

Динамический контент и анонс изменений

Hyperapp позволяет динамически обновлять интерфейс без перезагрузки. Для доступности важно уведомлять пользователя о таких изменениях:

h("div", { "aria-live": "polite" }, state.notification)
  • aria-live="polite" — скринридер озвучит текст, когда будет возможность.
  • Для критичных уведомлений используют aria-live="assertive".

Итоговые рекомендации по доступности в Hyperapp

  • Применять семантические HTML-элементы по назначению.
  • Добавлять ARIA-атрибуты только там, где HTML семантика недостаточна.
  • Контролировать фокус и обеспечивать клавиатурную навигацию.
  • Использовать структурированные заголовки и элементы <main>, <header>, <footer>.
  • Предусматривать уведомления о динамическом контенте через aria-live.

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

Оглавление