ReactJS - Доступность (Accessibility)

Почему доступность?

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

React полностью поддерживает создание доступных веб-сайтов, часто используя стандартные методы HTML.

Стандарты и рекомендации

WCAG

В Руководстве по доступности веб- контента содержатся рекомендации по созданию доступных веб-сайтов.

В следующих контрольных списках WCAG представлен обзор:

WAI-ARIA

В документе «Инициатива доступности веб-доступности - доступный богатый интернет-приложения» содержатся методы создания полностью доступных виджетах JavaScript.

Обратите внимание, что все aria-*атрибуты HTML полностью поддерживаются в JSX. В то время как большинство свойств и атрибутов DOM в React являются camelCased, эти атрибуты должны быть уменьшены:

<input
  type="text" 
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Семантический HTML

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

Ссылка на HTML-элементы MDN

Иногда мы разлагаем семантику HTML, когда добавляем <div> элементы в наш JSX, чтобы заставить наш код React работать, особенно при работе со списками (<ol>, <ul> и <dl>) и HTML <table>. В этих случаях мы должны использовать фрагменты React Fragments для группировки нескольких элементов.

Используйте, <Fragment> когда требуется key прокладка:

import React, { Fragment } from 'react';

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Использовать <></> синтаксис везде:

function ListItem({ item }) {
  return ( 
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
  );    
}

Доступ форм

Label

Каждый элемент управления HTML-формой, такой как <input> и <textarea>, должен быть помечен как доступный. Нам нужно предоставить описательные ярлыки, которые также доступны для чтения с экрана.

Следующие ресурсы показывают нам, как это сделать:

Хотя эти стандартные методы HTML могут быть непосредственно использованы в React, обратите внимание, что for атрибут написан как htmlFor в JSX:

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name"/>

Уведомление пользователя об ошибках

Ошибочные ситуации должны быть поняты всеми пользователями. Следующая ссылка показывает нам, как выставлять тексты ошибок для читателей экрана:

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

Убедитесь, что ваше веб-приложение можно полностью использовать только с клавиатуры:

WebAIM говорит о доступности клавиатуры

Фокус и фокусировка фокуса клавиатуры

Фокус клавиатуры относится к текущему элементу в DOM, который выбран для приема ввода с клавиатуры. Мы видим его повсюду в виде фокуса, аналогичного показанному на следующем изображении:

Синяя подсветка клавиатуры сосредоточена вокруг выбранной ссылки. Только когда-либо используйте CSS, который удаляет этот контур, например, путем установки outline: 0, если вы заменяете его другой реализацией плана фокусировки.

Механизмы для перехода к желаемому контенту

Предоставьте механизм, позволяющий пользователям пропускать предыдущие разделы навигации в вашем приложении, поскольку это помогает и ускоряет навигацию по клавиатуре.

Skiplinks или Skip Navigation Links - скрытые навигационные ссылки, которые становятся видимыми только тогда, когда пользователи клавиатуры взаимодействуют со страницей. Их очень легко реализовать с помощью внутренних привязок страниц и некоторых стилей:

WebAIM - Skip Navigation Links

Также используйте элементы и роли ориентиров, например, <main> и <aside>, чтобы разграничить области страниц в качестве вспомогательной технологии, вы можете быстро перейти к этим разделам.

Подробнее об использовании этих элементов читайте здесь:

Доступные ориентиры

Программное управление фокусом

Наши приложения React постоянно изменяют HTML DOM во время выполнения, иногда приводя к тому, что фокус клавиатуры теряется или устанавливается на неожиданный элемент. Чтобы исправить это, нам необходимо программно подтолкнуть фокус клавиатуры в правильном направлении. Например, сбросив клавиатурный фокус на кнопку, которая открыла модальное окно после закрытия этого модального окна.

MDN Web Docs рассматривает это и описывает, как мы можем создавать виджеты JavaScript на клавиатуре.

Чтобы установить фокус в React, мы можем использовать Refs для элементов DOM. Используя это, мы сначала создаем ref для элемента в JSX класса компонента:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // Create a ref to store the textInput DOM element
    this.textInput = React.createRef();
  }
  render() {
  // Use the `ref` callback to store a reference to the text input DOM
  // element in an instance field (for example, this.textInput).
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

Затем мы можем сосредоточить его в другом месте нашего компонента, когда это необходимо:

focus() {
  // Explicitly focus the text input using the raw DOM API
  // Note: we're accessing "current" to get the DOM node
  this.textInput.current.focus();
}

Иногда родительский компонент должен устанавливать фокус на элемент в дочернем компоненте. Мы можем сделать это, подвергая DOM refs родительским компонентам с помощью специальной поддержки дочернего компонента, который перенаправляет референт родителя на дочерний узел DOM.

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.inputElement = React.createRef();
  }
  render() {
    return (
      <CustomTextInput inputRef={this.inputElement} />
    );
  }
}
/>

// Now you can set focus when required.
this.inputElement.current.focus();

При использовании HOC для расширения компонентов рекомендуется перенаправить ref на обернутый компонент, используя forwardRef функцию React. Если сторонний HOC не реализует переадресацию, вышеуказанный шаблон все еще может использоваться как резерв.

Большой пример управления фокусировкой - это react-aria-modal. Это относительно редкий пример полностью доступного модального окна. Он не только устанавливает ориентацию фокуса на кнопку отмены (предотвращая случайную активацию пользователем клавиатуры), и фокус фокуса клавиатуры внутри модального, он также сбрасывает фокус обратно на элемент, который первоначально вызывал модальный.

Заметка:

Хотя это очень важная функция доступности, это также метод, который следует использовать разумно. Используйте его, чтобы восстановить поток фокуса клавиатуры, когда он нарушен, а не пытаться предвидеть, как пользователи хотят использовать приложения.

Более сложные виджеты

Более сложный пользовательский интерфейс не должен означать менее доступный. В то время как доступность наиболее легко достигается путем кодирования как можно ближе к HTML, даже самый сложный виджет может быть кодирован доступным образом.

Здесь нам требуется знание ARIA Roles, а также состояний и свойств ARIA . Это панели инструментов, заполненные атрибутами HTML, которые полностью поддерживаются в JSX и позволяют нам создавать полностью доступные, высокофункциональные компоненты React.

Каждый вид виджета имеет определенный шаблон проектирования и, как ожидается, будет функционировать определенным образом пользователями и пользовательскими агентами:

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

Настройка языка

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

WebAIM - Язык документа

Установка названия документа
Установите документ <title> для правильного описания содержимого текущей страницы, так как это гарантирует, что пользователь останется в курсе текущего контекста страницы:

WCAG - понимание требования к типу документа

Мы можем установить это в Реактировании, используя React Document Title Component.

Цветовой контраст

Убедитесь, что все читаемые тексты на вашем веб-сайте имеют достаточный цветовой контраст, чтобы оставаться максимально читаемыми пользователями с низким зрением:

Может быть утомительно вручную рассчитать правильные цветовые комбинации для всех случаев на вашем сайте, поэтому вместо этого вы можете вычислить всю доступную цветовую палитру с помощью Colorable .

Оба упомянутых ниже инструмента топора и WAVE также включают тесты цветового контраста и сообщают о ошибках контрастности.

Если вы хотите расширить возможности контрастного тестирования, вы можете использовать эти инструменты:

Средства разработки и тестирования

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

Клавиатура

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

Выключите мышь.
Использование Tabи Shift+Tabпросмотр.
Использование Enterдля активации элементов.
При необходимости используйте клавиши со стрелками клавиатуры, чтобы взаимодействовать с некоторыми элементами, такими как меню и выпадающие меню.

Помощь в целях развития

Мы можем проверить некоторые функции доступности непосредственно в нашем коде JSX. Часто проверки intellisense уже представлены в JSX-совместимых IDE для ролей, состояний и свойств ARIA. У нас также есть доступ к следующему инструменту:

eslint-плагин-JSX-a11y

Eslint-плагин-JSX-a11y плагин для ESLint обеспечивает AST обратную связь пыление относительно вопросов доступности в вашем JSX. Многие IDE позволяют интегрировать эти результаты непосредственно в анализ кода и окна исходного кода.

В Create React App есть этот плагин с активированным подмножеством правил. Если вы хотите включить еще больше правил доступности, вы можете создать .eslintrc файл в корне вашего проекта с этим контентом:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

Проверка доступности в браузере

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

aXe, aXe-core and react-axe

Deque Systems предлагает Ax-Core для автоматизированных и сквозных тестов доступности ваших приложений. Этот модуль включает интеграцию для Selenium.

Модуль доступности или aXe - это расширение браузера инспектора доступности, построенное на основе aXe-core.

Вы также можете использовать модуль «react-axe», чтобы сообщать об этих результатах доступности непосредственно на консоли при разработке и отладке.

WebAIM WAVE

Средство оценки доступности веб-страниц является еще одним расширением браузера доступности.

Инспекторы доступности и Дерево доступности

Дерево доступности - это подмножество дерева DOM, которое содержит доступные объекты для каждого элемента DOM, который должен быть подвергнут вспомогательным технологиям, таким как устройства чтения с экрана.

В некоторых браузерах мы можем легко просмотреть информацию о доступности для каждого элемента в дереве доступности:

Считыватели экрана

Тестирование с помощью программы чтения с экрана должно стать частью ваших тестов доступности.

Обратите внимание, что сочетания браузера / экрана чтения имеют значение. Рекомендуется протестировать ваше приложение в браузере, наиболее подходящем для вашего экрана.

NVDA в Firefox

NonVisual Desktop Access или NVDA - это программа для чтения с экрана с открытым исходным кодом, которая широко используется.

Обратитесь к следующим руководствам о том, как наилучшим образом использовать NVDA:

VoiceOver в Safari

VoiceOver - это интегрированное устройство чтения с экрана на устройствах Apple.

Обратитесь к следующим руководствам по активации и использованию VoiceOver:

JAWS в Internet Explorer

Доступ к работе с помощью речи или JAWS - это широко используемый экранный ридер в Windows.

Обратитесь к следующим руководствам о том, как наилучшим образом использовать JAWS: