{"componentChunkName":"component---src-templates-docs-js","path":"/docs/accessibility.html","result":{"data":{"markdownRemark":{"html":"

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

\n

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

\n

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

\n

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

\n

WCAG

\n

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

\n

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

\n\n

WAI-ARIA

\n

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

\n

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

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

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

\n

Семантичний HTML — це основа доступності у веб-застосунках. Використання різних елементів HTML для посилення значення інформації на наших веб-сайтах часто надає нам доступність «безкоштовно».

\n\n

Іноді ми порушуємо HTML-семантику, коли додаємо елементи <div> до нашого JSX, щоб наш React-код працював, особливо при роботі зі списками (<ol>, <ul> та <dl>) та <table> (HTML-таблиця).

\n

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

\n

Наприклад,

\n
import React, { Fragment } from 'react';\nfunction ListItem({ item }) {\n  return (\n    <Fragment>      <dt>{item.term}</dt>\n      <dd>{item.description}</dd>\n    </Fragment>  );\n}\n\nfunction Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        <ListItem item={item} key={item.id} />\n      ))}\n    </dl>\n  );\n}
\n

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

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

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

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

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

\n

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

\n

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

\n

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

\n

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

\n\n

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

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

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

\n

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

\n\n

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

\n

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

\n\n

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

\n

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

\n\n \n \n \n \n \"Синій\n \n \n \n \n \n

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

\n

Механізм швидкого переходу до бажаного змісту

\n

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

\n

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

\n\n

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

\n

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

\n\n

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

\n

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

\n

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

\n

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

\n

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

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

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

\n
focus() {\n  // Безпосередньо фокусуємося на текстовому полі за допомогою DOM API\n  // Примітка: ми використовуємо властивість \"current\" щоб дістатися вузла DOM\n  this.textInput.current.focus();\n}
\n

Іноді батьківській компонент потребує встановити фокус на елементі у дочірньому компоненті. Ми можемо зробити це за допомогою передачі DOM-рефів батьківським компонентам через спеціальний проп дочірнього компонента який передає батьківському компоненту реф на вузол DOM дочірнього компонента.

\n
function CustomTextInput(props) {\n  return (\n    <div>\n      <input ref={props.inputRef} />    </div>\n  );\n}\n\nclass Parent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.inputElement = React.createRef();  }\n  render() {\n    return (\n      <CustomTextInput inputRef={this.inputElement} />    );\n  }\n}\n\n// Тепер ви можете встановити фокус, коли потрібно.\nthis.inputElement.current.focus();
\n

Якщо ви використовуєте КВП щоб розширити компоненти, рекомендується перенаправляти рефи до огорнутого компоненту за допомогою React-функції forwardRef. Якщо сторонній КВП не реалізує перенаправлення, підхід описаний вище все ще може бути використаний для зворотньої сумісності.

\n

В якості чудового прикладу керування фокусом можна використовувати компонент react-aria-modal. Це доволі рідкий випадок реалізацій повністю доступного модального вікна. Мало того, що він задає початковий фокус\nна кнопці “Скасувати” (заважає користувачеві клавіатури випадково активувати успішну дію) і захоплює фокус клавіатури всередині вікна, він також скидає фокус назад на елемент, який спочатку запустив модальне вікно.

\n
\n

Примітка:

\n

Хоча це дуже важлива особливість доступності, це також техніка яку слід використовувати обачливо. Використовуйте її для відновлення потоку фокусування на клавіатурі, коли його було порушено, але не для того, щоб обумовлювати те,\nяк користувачі хочуть використовувати додатки.

\n
\n

Робота з подіями миші

\n

Переконайтесь, що до всіх функціональних можливостей реалізованих через події миші чи вказівника можна також отримати доступ лише за допомогою клавіатури. Надмірна залежність від миші чи вказівника може призвести до багатьох випадків, коли користувачі клавіатури не зможуть використовувати вашу програму.

\n

Щоб проілюструвати це, давайте розглянемо докладний приклад порушеної доступності спричиненої подіями натискання кнопки миші. Це шаблон натискання кнопки миші поза елементом, коли користувач може закрити відкритий елемент, клацнувши поза ним.

\n\"Кнопка\n

Зазвичай це реалізується шляхом приєднання події click до об’єкту window, яка закриває відкритий елемент:

\n
class OuterClickExample extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = { isOpen: false };\n    this.toggleContainer = React.createRef();\n\n    this.onClickHandler = this.onClickHandler.bind(this);\n    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);\n  }\n\n  componentDidMount() {    window.addEventListener('click', this.onClickOutsideHandler);  }\n  componentWillUnmount() {\n    window.removeEventListener('click', this.onClickOutsideHandler);\n  }\n\n  onClickHandler() {\n    this.setState(currentState => ({\n      isOpen: !currentState.isOpen\n    }));\n  }\n\n  onClickOutsideHandler(event) {    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {      this.setState({ isOpen: false });    }  }\n  render() {\n    return (\n      <div ref={this.toggleContainer}>\n        <button onClick={this.onClickHandler}>Select an option</button>\n        {this.state.isOpen && (\n          <ul>\n            <li>Option 1</li>\n            <li>Option 2</li>\n            <li>Option 3</li>\n          </ul>\n        )}\n      </div>\n    );\n  }\n}
\n

Такий підхід добре працює для користувачів із вказівними пристроями, такими як миша, але робота з цим за допомогою лише клавіатури призводить до порушення функціональності при перемиканні на наступний елемент, оскільки об’єкт window ніколи не отримує події click. Це може призвести до прихованої функціональності, яка заважає користувачам працювати з вашою програмою.

\n\"Кнопка\n

Того ж самого можна досягти, використовуючи натомість відповідні обробники подій, як onBlur та onFocus:

\n
class BlurExample extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = { isOpen: false };\n    this.timeOutId = null;\n\n    this.onClickHandler = this.onClickHandler.bind(this);\n    this.onBlurHandler = this.onBlurHandler.bind(this);\n    this.onFocusHandler = this.onFocusHandler.bind(this);\n  }\n\n  onClickHandler() {\n    this.setState(currentState => ({\n      isOpen: !currentState.isOpen\n    }));\n  }\n\n  // Ми закриваємо відкритий список за допомогою setTimeout.  // Це необхідно, щоб перевірити,  // що інший дочірній елемент отримав фокус, оскільки  // подія 'blur' відбувається завжди перед подією 'focus'.  onBlurHandler() {    this.timeOutId = setTimeout(() => {      this.setState({        isOpen: false      });    });  }\n  // Якщо дочірній елемент отримав фокус, то список не закриваємо.  onFocusHandler() {    clearTimeout(this.timeOutId);  }\n  render() {\n    // React допомагає нам, підіймаючи події `blur` та    // `focus` до батьківського елемента.    return (\n      <div onBlur={this.onBlurHandler}           onFocus={this.onFocusHandler}>        <button onClick={this.onClickHandler}\n                aria-haspopup=\"true\"\n                aria-expanded={this.state.isOpen}>\n          Select an option\n        </button>\n        {this.state.isOpen && (\n          <ul>\n            <li>Option 1</li>\n            <li>Option 2</li>\n            <li>Option 3</li>\n          </ul>\n        )}\n      </div>\n    );\n  }\n}
\n

Цей код робить функціонал доступним як для вказівного пристрою, так і для користувачів клавіатури. Також зверніть увагу на додані aria-* властивості для підтримки користувачів пристроїв екранного зчитування. Для простоти прикладу тут не були реалізовані події клавіатурі, щоб увімкнути перехід по списку за допомогою клавіш зі стрілкою.

\n\"Список,\n

Це один із прикладів багатьох випадків, коли залежно від подій лише вказівника та миші буде порушено функціональність для користувачів клавіатури. Постійне тестування за допомогою клавіатури негайно виділить проблемні області, які потім можна виправити, використовуючи обробники подій, які доступні для клавіатури.

\n

Більш складні рішення

\n

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

\n

Тут ми потребуємо знання ARIA-ролей, а також станів та властивостей ARIA .\nНаведені вище посилання є набором інструкцій по HTML-атрибутам, які повністю підтримуються в JSX. Використовуючи їх можна створювати високо-функціональні і при цьому повністю доступні React-компоненти.

\n

Кожен з таких компонентів наслідує спеціальний шаблон дизайну, та має функціонувати певним чином незалежно від користувача та агента користувача (браузера):

\n\n

На що ще потрібно звернути увагу

\n

Встановлення мови сторінки

\n

Обов’язково вказуйте мову текста на сторінці. Це необхідно для правильних головних налаштувань екранних зчитувальних пристроїв:

\n\n

Встановлення заголовка документа

\n

Встановіть <title> документа, щоб коректно визначити зміст сторінки, оскільки це дає змогу користувачеві орієнтуватися в контексті поточної сторінки:

\n\n

у React ми можемо зробити це, використовуючи компонент «React Document Title».

\n

Контрастність кольорів

\n

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

\n\n

Ручний розрахунок правильних поєднань кольорів для усіх випадків на вашому веб-сайті може бути досить важким. Замість цього ви можете визначити всю доступну палітру кольорів за допомогою Colorable.

\n

Згадані нижче інструменти aXe та WAVE також включають тести на контрастність кольорів та повідомлять про помилки.

\n

Якщо ви хочете розширити свої можливості тестування контрастності, ви можете скористатися цими інструментами:

\n\n

Інструменти розробки та тестування

\n

Існує багато інструментів, якими ми можемо скористатися для створення доступних веб-додатків.

\n

Клавіатура

\n

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

\n
    \n
  1. Від’єднайте вашу мишу.
    2. \n
  2. Використовуйте Tab та Shift+Tab для переміщення сторінкою.
    3. \n
  3. Використовуйте Enter для активації елементів.
    4. \n
  4. Якщо потрібно, використовуйте клавіші зі стрілками клавіатури для взаємодії з деякими елементами, такими як меню та списки, що випадають.
    5. \n
\n

Підтримка у розробці

\n

Ми можемо перевірити певні особливості притаманні доступності безпосередньо у JSX коді. Часто списки автоматичного доповнення які передбачені в IDE з підтримкою JSX, доступні також для ролей, станів та властивостей ARIA. Ми також можемо скористатися наступними інструментами:

\n

eslint-plugin-jsx-a11y

\n

ESLint плагін eslint-plugin-jsx-a11y надає змогу аналізувати АСД (Абстрактне синтаксичне дерево) стосовно проблем доступності у вашому JSX. Багато IDE дозволяють інтегрувати ці висновки безпосередньо до аналізатору коду та вікна вихідного коду.

\n

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

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

Тестування доступності в браузері

\n

Існує багато інструментів, які можуть запускати аудит доступності на веб-сторінках вашого браузера. Будь ласка, використовуйте їх у поєднанні з іншими перевірками доступності згаданими тут, оскільки вони можуть тільки перевірити технічну доступність вашого HTML.

\n

aXe, aXe-core та react-axe

\n

Deque Systems пропонує aXe-core для автоматизованих тестів доступності ваших програм. Цей модуль включає інтеграцію для Selenium.

\n

The Accessibility Engine або aXe, це інспектор доступності в браузері на базі aXe-core.

\n

Ви також можете використовувати модуль react-axe, щоб бачити повідомлення про проблеми доступності у консолі безпосередньо під час розробки та перевірки помилок.

\n

WebAIM WAVE

\n

Web Accessibility Evaluation Tool ще один інструмент для перевірки доступності в браузері.

\n

Інспектори доступності да дерево доступності

\n

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

\n

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

\n\n

Пристрой дл зчитування екрану

\n

Тестування за допомогою пристроїв зчитування екрану має буду невід’ємною частиною вашого тестування доступності.

\n

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

\n

Найпопулярніші пристрої зчитування екрану

\n

NVDA в Firefox

\n

NonVisual Desktop Access або NVDA це зчитувач екрану з відкритим кодом, який широко використовується в Windows.

\n

Зверніть увагу на настуні рекомендації по використанню NVDA:

\n\n

VoiceOver в Safari

\n

VoiceOver це інтегрований зчитувач екрану для пристроїв Apple.

\n

Зверніться до наступних посібників з активації та використання VoiceOver:

\n\n

JAWS в Internet Explorer

\n

Job Access With Speech або JAWS є широко використовуваним зчитувачем екранів у Windows.

\n

Зверніться до наступних посібників, щоб якнайкраще скористатися JAWS:

\n\n

Інші пристрої зчитування екрану

\n

ChromeVox в Google Chrome

\n

ChromeVox є інтегрованим зчитувачем екрана на Chromebook і доступний як плагін для Google Chrome.

\n

Зверніться до наступних посібників, щоб якнайкраще скористатися ChromeVox:

\n","frontmatter":{"title":"Доступність","next":null,"prev":null},"fields":{"path":"content/docs/accessibility.md","slug":"docs/accessibility.html"}}},"pageContext":{"slug":"docs/accessibility.html"}},"staticQueryHashes":[]}