Доступність

Навіщо нам доступність?

Веб-доступність (також відома як a11y) ґрунтується на дизайні та розробці сайтів, які можуть використовуватися будь-ким. Підтримка доступності необхідна, щоб дозволити допоміжним технологіям інтерпретувати веб-сторінки.

React повністю підтримує створення доступних веб-сайтів, часто за допомогою стандартних методів HTML.

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

WCAG

Правила доступності веб-контенту (Web Content Accessibility Guidelines) надають рекомендації щодо створення доступних веб-сайтів.

Наступні контрольні списки WCAG надають огляд загальних правил:

WAI-ARIA

Документ Web Accessibility Initiative - Accessible Rich Internet Applications містить набір технік для розробки повністю доступних JavaScript-віджетів.

Зверніть увагу, що всі aria-* HTML-атрибути повністю підтримуються у JSX. У той час як більшість DOM-властивостей і атрибутів у React записуються у верблюжому регістрі (camelСase, ще називають горба́тий регістр, верблюже письмо), ці атрибути мають бути записані у дефіс-регістрі (hyphen-case, також відомий як кебаб-регістр, LISP-регістр, і т.д.), оскільки вони знаходяться у простому HTML:

<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>) та <table> (HTML-таблиця).

У такому випадку краще використовувати React-фрагменти, щоб згрупувати декілька елементів разом.

Наприклад,

import React, { Fragment } from 'react';
function ListItem({ item }) {
  return (
    <Fragment>      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}

Ви можете перетворити колекцію на масив фрагментів, так само як і на масив будь-яких інший елементів:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Фрагменти також повинні мати пропс `key` при відображенні колекцій
        <Fragment key={item.id}>          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>      ))}
    </dl>
  );
}

Коли вам не потрібні ніякі пропси тегу Fragment, ви можете скористатися коротким синтаксисом, якщо ваш інструментарій це підтримує:

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

Для більш детальної інформації, перегляньте документацію фрагментів.

Доступні форми

Підписи елементів форм

Кожен елемент HTML-форми, наприклад <input> або <textarea>, повинен мати підпис, який забезпечує доступність контенту. Підписи потрібно виконувати так, щоб їх могли використовувати екранні зчитувальні пристрої.

Наступні ресурси показують нам як це робити:

Ці стандартні практики HTML можна використовувати безпосередньо в React, але зауважте, що атрибут for у JSX записується як htmlFor:

<label htmlFor="namedInput">Ім'я:</label><input id="namedInput" type="text" name="name"/>

Повідомляємо користувача про помилки

Випадки з помилками мають бути зрозумілими для всіх користувачів. Наступні посилання показують як зробити текст помилок доступним для пристроїв зчитування з екрану:

Контроль фокусу

Переконайтеся, що ваш веб-додаток можна повноцінно використовувати, в тому числі, лише за допомогою клавіатури:

WebAIM розповідає про доступність при роботі з клавіатурою

Фокус клавіатури та контур елемента

Фокус клавіатури посилається на поточний елемент у DOM, який вибрано для отримання вводу з клавіатури. Зазвичай такий елемент виділяється контуром, як це показано на малюнку:

Синій контур навколо посилання, вибраного з клавіатури.

Використовуйте CSS, який видаляє цей контур (наприклад, встановлюючи outline: 0), тільки в тому випадку, якщо ви реалізуєте фокус-контур якимось іншим чином.

Забезпечте механізм, що дозволяє користувачам пропускати розділи під час навігації у додатку, оскільки це допомагає і пришвидшує навігацію за допомогою клавіатури.

Так звані «пропускні посилання» чи «пропускні навігаційні посилання» - це приховані навігаційні посилання, які стають видимими лише тоді, коли користувачі клавіатури взаємодіють зі сторінкою. Їх дуже просто реалізувати за допомогою внутрішніх якорів сторінки та певного стилю:

WebAIM - пропускні навігаційні посилання

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

Детальніше про використання цих елементів для підвищення доступності читайте тут:

Доступні орієнтири

Керуємо фокусом програмним шляхом

Наші React-додатки постійно змінюють HTML DOM під час виконання, іноді це призводить до того, що фокус клавіатури втрачається або встановлюється на несподіваний елемент. Для того, щоб виправити це, нам потрібно програмно просунути фокус клавіатури в потрібному напрямку. Наприклад, після закриття модального вікна перевести фокус клавіатури на кнопку, яка його відкрила.

MDN Web Docs розглядає це і описує, як ми можемо побудувати віджети JavaScript, орієнтовані на клавіатуру.

Щоб встановити фокус у React, ми можемо використовувати рефи на елементи DOM.

Використовуючи цей спосіб, спочатку ми створюємо реф у класі компонента на елемент у JSX:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // Створюємо реф на текстове поле вводу як елемент DOM    this.textInput = React.createRef();  }
  render() {
  // Використовуємо зворотній виклик `ref` щоб зберегти реф на текстове поле вводу  // як елемент DOM в полі екземпляру (наприклад, this.textInput).    return (
      <input
        type="text"
        ref={this.textInput}      />
    );
  }
}

Потім ми можемо примусово встановити фокус на елемент за потреби будь-де у нашому компоненті:

focus() {