Screen readers

Stencil предоставляет разработчикам мощный инструмент для создания веб-компонентов, который позволяет строить высокоэффективные и гибкие интерфейсы. Однако, создание доступных интерфейсов, совместимых с программами чтения с экрана (screen readers), — это обязательный аспект веб-разработки. В этой главе рассматривается, как Stencil помогает создавать доступные компоненты для пользователей с ограниченными возможностями и как интегрировать поддержку screen readers в приложения.

Основы доступности в Stencil

Доступность — это принцип, который должен быть заложен на всех уровнях веб-разработки. В контексте Stencil, доступность компонентов определяется тем, как они взаимодействуют с различными вспомогательными технологиями, включая screen readers. Это особенно важно для людей с ограничениями по зрению, которые используют эти программы для чтения содержимого страницы.

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

  • Семантическая разметка: использование правильных HTML-элементов, таких как button, nav, header и других, для обеспечения правильной работы с screen readers.
  • ARIA-атрибуты: добавление атрибутов доступности, таких как aria-label, aria-hidden, aria-live, которые помогают screen readers правильно интерпретировать элементы интерфейса.

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

Stencil автоматически генерирует компоненты, которые соответствуют стандартам HTML. Например, если компонент использует элемент button, он будет по умолчанию восприниматься как кнопка для screen reader. Однако иногда возникает необходимость в кастомных компонентах, которые не соответствуют стандартным HTML-элементам.

В таких случаях важно явно указывать роли и состояния с помощью атрибутов ARIA, чтобы screen reader мог правильно интерпретировать элемент. Например, если вы создаете кастомную кнопку, используйте роль button и обеспечьте нужные атрибуты:

@Component({
  tag: 'custom-button',
  styleUrl: 'custom-button.css',
  shadow: true,
})
export class CustomButton {
  @Prop() label: string;

  render() {
    return (
      <button
        role="button"
        aria-label={this.label}
        onCl ick={() => console.log('Button clicked')}
      >
        {this.label}
      </button>
    );
  }
}

В этом примере кастомный компонент использует стандартный элемент button, который автоматически распознается screen reader, и добавлен атрибут aria-label для точной интерпретации текста кнопки.

Атрибуты ARIA

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

  1. aria-label: используется для назначения текстовой метки элементу. Это особенно полезно, когда элемент имеет визуальное представление, но не содержит текста, например, иконки.
<button aria-label="Закрыть окно">
  <svg>...</svg>
</button>
  1. aria-hidden: скрывает элемент от screen reader, даже если он визуально доступен на странице. Это помогает избежать избыточных или ненужных объявлений.
<div aria-hidden="true">Не для чтения</div>
  1. aria-live: указывает, что элемент содержит динамическую информацию, которая может изменяться. Это особенно важно для обновлений, которые должны быть озвучены сразу после изменения.
<div aria-live="assertive">
  Контент обновился!
</div>

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

Управление состоянием компонента

Screen readers активно взаимодействуют с элементами, чье состояние изменяется в процессе использования интерфейса. Важно, чтобы все изменения состояния компонента были правильно переданы через ARIA-атрибуты. Например, если кнопка изменяет свое состояние (например, становится активной или отключенной), следует использовать атрибуты, которые явно указывают на эти изменения.

@Component({
  tag: 'toggle-button',
  styleUrl: 'toggle-button.css',
  shadow: true,
})
export class ToggleButton {
  @State() isActive: boolean = false;

  toggle() {
    this.isActive = !this.isActive;
  }

  render() {
    return (
      <button
        aria-pressed={this.isActive.toString()}
        onCl ick={() => this.toggle()}
      >
        {this.isActive ? 'Включено' : 'Выключено'}
      </button>
    );
  }
}

В этом примере кнопка использует атрибут aria-pressed для отображения состояния, что помогает пользователю screen reader понять, активна ли кнопка или нет.

Фокусировка и навигация

Правильное управление фокусом — это важная часть создания доступных интерфейсов. В Stencil можно использовать методы для работы с фокусом и его передачи, что важно для пользователей, которые навигают по интерфейсу с помощью клавиатуры или других вспомогательных устройств.

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

@Component({
  tag: 'focusable-component',
  styleUrl: 'focusable-component.css',
  shadow: true,
})
export class FocusableComponent {
  @Element() el: HTMLElement;

  componentDidLoad() {
    this.el.focus();
  }

  render() {
    return <div tabindex="0">Перехватываем фокус!</div>;
  }
}

В этом примере компонент получает фокус при загрузке страницы, что полезно для пользователей, которые полагаются на клавишу “Tab” для навигации по интерфейсу.

Тестирование доступности

После того как компоненты были разработаны с учетом доступности, необходимо провести тестирование. В Stencil можно интегрировать различные инструменты для тестирования доступности. Один из популярных инструментов — axe-core, который помогает обнаруживать проблемы с доступностью в веб-приложениях.

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

Пример теста с использованием Jest:

import { newSpecPage } from '@stencil/core/testing';
import { ToggleButton } from './toggle-button';

describe('toggle-button', () => {
  it('renders with the correct aria-pressed attribute', async () => {
    const page = await newSpecPage({
      components: [ToggleButton],
      html: `<toggle-button></toggle-button>`,
    });

    const button = page.root.shadowRoot.querySelector('button');
    expect(button.getAttribute('aria-pressed')).toBe('false');
  });
});

Этот тест проверяет, что атрибут aria-pressed правильно устанавливается для компонента кнопки, что важно для его корректной работы с screen readers.

Заключение

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

Оглавление