Скринридеры

FAST Element — это библиотека для создания высокопроизводительных веб-компонентов на базе стандартов Web Components. Она предоставляет декларативный синтаксис для связывания данных, управления состоянием и определения шаблонов элементов, сохраняя при этом совместимость с нативными браузерными API.

Базовый элемент создаётся с помощью класса, наследующего FASTElement, и функции html для описания шаблона:

import { FASTElement, html, css } from "@microsoft/fast-element";

const template = html<MyElement>`
  <div class="container">
    <span>${x => x.label}</span>
  </div>
`;

const styles = css`
  .container {
    padding: 8px;
    background-color: #f0f0f0;
  }
`;

class MyElement extends FASTElement {
  label = "Пример текста";
}

MyElement.define({ name: "my-element", template, styles });

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

  • FASTElement управляет жизненным циклом компонента.
  • Декларативное связывание через ${x => x.property} обеспечивает реактивность.
  • Стили можно задавать через css и прикреплять к компоненту локально.

Связывание данных и реактивность

FAST Element использует одностороннее и двухстороннее связывание данных.

Одностороннее связывание позволяет отображать свойства компонента в шаблоне:

<span>${x => x.username}</span>

Двухстороннее связывание реализуется через директивы bind:

<input value.bind=${x => x.username}>

При изменении username в компоненте, значение автоматически обновляется в DOM и наоборот.

Реактивность достигается через наблюдаемые свойства:

import { observable } from "@microsoft/fast-element";

class UserCard extends FASTElement {
  @observable username = "guest";
}

Любое изменение username вызовет повторный рендер шаблона там, где это свойство используется.

Поддержка скринридеров

FAST Element изначально проектировался с учетом доступности. Основная задача — корректное взаимодействие компонентов с технологиями чтения с экрана.

Основные аспекты:

  1. ARIA-атрибуты

    • Добавляются напрямую в шаблон для обеспечения семантики.
    • Пример для кнопки с динамическим статусом:
    <button aria-pressed="${x => x.active}" @click="${x => x.toggle()}">
  ${x => x.label}
</button>
    • aria-pressed сообщает скринридеру, включена кнопка или нет.

  2. Роль и семантика

    • Каждый компонент должен иметь подходящую роль: role="button", role="dialog", role="tab" и т.д.
    • Семантическая разметка важнее визуального оформления, скринридеры ориентируются на ARIA и нативные HTML-элементы.

  3. Управление фокусом

    • FAST Element позволяет программно управлять фокусом через this.focus() внутри методов компонента.
    • Можно использовать директиву autofocus или слушать события клавиатуры для улучшения навигации:
    handleKeyDown(event) {
  if (event.key === "Enter") this.activate();
}

  4. Обновление текста для скринридеров

    • Если компонент динамически меняет содержимое, важно уведомлять скринридеры через aria-live:
    <div aria-live="polite">${x => x.message}</div>
    • aria-live="polite" сообщает скринридеру, что контент нужно зачитать без прерывания текущей речи пользователя.

Использование слотов и доступность

Слоты (<slot>) позволяют вставлять внешний контент в компоненты, сохраняя семантику:

<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>
  • При работе со скринридерами рекомендуется добавлять семантические элементы (<header>, <main>, <footer>) внутри слотов.
  • Можно задавать slot для кнопок, заголовков или интерактивных элементов, чтобы обеспечить предсказуемое чтение контента.

Динамические уведомления и live regions

Компоненты часто обновляют контент в реальном времени. Для скринридеров используется aria-live:

class NotificationElement extends FASTElement {
  message = "";

  notify(newMessage) {
    this.message = newMessage;
  }
}

const template = html<NotificationElement>`
  <div aria-live="assertive">${x => x.message}</div>
`;
  • aria-live="assertive" прерывает текущую речь скринридера и озвучивает сообщение немедленно.
  • Использование aria-live совместно с реактивными свойствами FAST Element позволяет создавать доступные уведомления без дополнительных библиотек.

Комбинация FAST Element с нативной семантикой

  • Кнопки и ссылки: использовать <button> или <a> вместо <div> для интерактивности.
  • Формы: <input> с label и aria-describedby обеспечивает корректное озвучивание.
  • Диалоги: <dialog role="dialog" aria-modal="true"> совместно с FAST Element позволяет управлять открытием и закрытием модальных окон для скринридеров.

Практические рекомендации

  • Всегда использовать нативные элементы, если есть подходящий.
  • Добавлять ARIA-атрибуты только при необходимости.
  • Управлять фокусом при динамическом создании элементов.
  • Применять aria-live для уведомлений, обновляющихся в DOM.
  • Тестировать компоненты с реальными скринридерами, чтобы проверить последовательность и корректность чтения.

FAST Element сочетает реактивную архитектуру с полной поддержкой стандартов веб-доступности, что делает его мощным инструментом для создания интерактивных и доступных интерфейсов на современных веб-платформах.

Оглавление