Автор оригинала: FreeCodeCamp Community Member.

В Twitter, в расслаивании, в раздоре, в IRC или везде, где вы тусуетесь с другими разработчиками в Интернете, вы, возможно, слышали некоторые формулировки следующих утверждений:

• Реагистрация не поддерживает доступность
• Реагировать делает веб-сайты недоступными
• Люди должны писать доступный HTML вместо реагирования
• Реагировать разрушает интернет

Есть несколько распространенное неправильное представление, что JavaScript Frameworks и Веб-доступность Не смешивайте. Реагируйте, являясь одним из крупнейших библиотек JavaScript, часто является целью.

Однако в моей карьере у меня был интересный опыт введен в доступность и реагирует примерно в одно и то же время. Я нашел инструменты в реакции, которая помогла мне многому научиться о доступности, что я никогда не встречал иначе.

И пока я не согласен, что есть множество библиотек, веб-сайтов, приложений и т. Д., Написанные в реакции, которые недоступны, я не согласен, что есть что-то, присущее Reactjs, которые заставляют разработчики строить недоступные сайты. На самом деле, я Любовь Приспособление доступности доступна в экосистеме RACTSYSTEM, так что этот пост действительно о том, как реагировать может помочь вам сделать Более доступный сайты, чем вы когда-либо делали раньше.

Я буду набросать, как вы можете объединить инструменты React Linting, DOM Audting и Storybook (инструмент для библиотеки компонентов), чтобы обеспечить действительно поддерживающую среду доступности для разработчиков – независимо от того, являются ли они доступностью или просто начать работу. К концу этого поста у вас будет следующее настроен для вашего Проект GATSBY (или другой проект реагирования):

• Внутри редактора отчетности о ошибках доступности
• Предварительный коммитский крючок для предотвращения ошибок доступности от попадания в репозиторий
• Консоль браузера Отчетность о ошибках доступности во время разработки, со ссылками на информацию о том, как разрешить ошибки
• Компонентная библиотека со встроенным тестированием на доступность, поэтому все заинтересованные стороны проекта могут проводить команду, ответственную за доступ к вопросам доступности

Хочу начать прямо сейчас? Я создал стартер GATSBY со всеми этими инструментами доступности. Оформить заказ GATSBY-Starter-Accessibility Repo Это имеет все эти функции доступны из коробки.

Инструменты и настройка

eslint-plugin-jsx-a11y

Если вы написали JavaScript за последние несколько лет, вы, вероятно, использовали или хотя бы слышали о Eslint Отказ Если нет, сейчас самое большое время, чтобы начать с ним!

ESLINT – это утилита для JavaScript, которая помогает уловить ошибки форматирования и синтаксиса во время записи кода. Большинство редакторов имеют какую-то встроенную конфигурацию, которая позволяет увидеть ошибки в вашем редакторе во время работы.

Это действительно полезно для соблюдения кода, особенно когда есть много людей, работающих над проектом.

Eslint также имеет действительно здоровый плагин экосистема. Вы можете включить правила, специфичные для JavaScript Framework, которые вы работаете с (то есть, реагируют, угловые, Vue, и т. Д.), Среди прочего. Для реагирования я обычно использую eslint-plugin-rect И действительно полезное eslint-plugin-jsx-a11y Отказ Этот плагин связывает ваш код для известных нарушений доступности, используя Эти правила Отказ

Имея эти автоматические тесты, когда вы пишете код, могут предотвратить Так много ошибок Отказ Хотя автоматизированное тестирование доступности только о 20-30% всех ошибок доступности , Ловит эти ошибки, прежде чем они сделают его в кодовую базу, могут сэкономить время, бюджет и энергию для выполнения большего ручного тестирования после того, как код находится в браузере.

использование

Вот как вы можете начать работу с доступом в вашем реактивный проект.

Во-первых, нам нужно установить необходимые пакеты Eslint:

NPM install eslint eslint-plugin-rac rect eslint-plugin-jsx-a11y –save-dev

В вашем Package.json добавьте следующую конфигурацию:

"eslintConfig": {
    "parserOptions": {
      "sourceType": "module"
    },
    "env": {
      "node": true,
      "browser": true,
      "es6": true
    },
    "plugins": [
      "react",
      "jsx-a11y"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended"
    ]
}

С этим добавлено к вашему Package.json ESLINT будет использовать правила, рекомендованные Eslint, React и плагином JSX-A11Y во время работы.

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

Добавьте предварительный коммитский крючок для предотвращения недоступного кода в кодовой базе, используя LINT: устроен

Теперь у нас есть какие-то доступности подвизги, и, надеюсь, все работают над проектом, появились линтами в своем редакторе, чтобы они могли видеть какие-либо ошибки, пока они работают.

Но вы не можете быть на 100% уверены, что каждый будет обращать внимание на Линтер. И даже если они есть, легко сделать быстрое изменение, переключать файлы, а любые ошибки будут вне поля зрения, с ума.

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

использование

Самый простой способ настроить льминальные крюки для предварительной коммиты используют поставленные с линтами Пакет Отказ После того, как вы установили все ваши настройки ESLINT (с нашего первого шага), запустите следующую команду в каталоге проекта:

NPX MRM Clinted

Эта команда установит хаски Пакет Для управления предварительно-коммитными крючками и посмотрите в ваш Package.json, чтобы автоматически настроить предварительный коммитский крюк на основе вашей цепи.

Простая конфигурация, которая связывает все файлы JS на основе существующей конфигурации ESLINT в REPO, будет выглядеть так (от Package.json ):

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.js": [
      "eslint"
    ]
}

Вы можете настроить это, как вы видите в форме. Например, иногда вы хотите ограничить льминание к определенным каталогам. Чтобы запустить предварительный коммитирующий крюк только на файлах JS в каталоге SRC, вы бы обновили конфигурацию, поэтапную лицу, как это:

"lint-staged": {
    "src/*.js": [
      "eslint"
    ]
}

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

реакционный

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

К счастью, у нас есть решение для этого тоже. AX – это двигатель с открытым исходным кодом для автоматического тестирования на доступность, поддерживаемый Дейко Отказ Я впервые появился с топором, используя их действительно полезное расширение браузера для Тестирование отдельных страниц в браузере Отказ

Проблема с тестированием доступности в браузере – это то, что они обычно работают только после Разработка завершена. Используя Библиотека реагирования AX , Вы можете получить автоматическое тестирование на доступность на каждой странице во время разработки, поэтому разработчики могут получить обратную связь в реальном времени по вопросам доступности. Это помогает убедиться, что проблемы доступности никогда не делают его до производства, а также обучает разработчикам, которые не могут быть доступными экспертами по потенциальным подводным камням.

реактивный AX Библиотека – это простое в использовании реализация двигателя AX, специально для реагирования.

использование

Вот как начать использовать AXAT-AX с GATSBY ( Кто-то сделал плагин GATSBY для него! ):

NPM Установка –Save GATSBY-Plugin-Action-AX

Добавьте GATSBY-Plugin-Act-AX в свой массив плагинов в gatsby-config.js

module.exports = {
 siteMetadata: {
        title: 'Gatsby Default Starter',
    description:
      'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
    author: '@gatsbyjs',
  },
  plugins: [
    'gatsby-plugin-react-axe',
    // other plugins go here
  ],
};

Теперь, когда страница рендерирует, плагин распечатает любые ошибки доступности к консоли браузера. Вот пример, где я положил

​

AX AX будет отображать ошибки доступности в консоли, когда вы разрабатываете.

Вы можете увидеть, что в сообщении AX в консоли, которую он определил, что он выявил мою проблему курса: «Вопросы руководства должны увеличиваться только на одну» в качестве умеренной проблемы. Это также включает ссылку, чтобы узнать больше о Почему Это проблема и как это решить: https://dequeuniversity.com/rules/axe/3.2/heading-order Отказ И, наконец, он отображает определенный элемент, который вызывает проблему для легкой идентификации.

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

Стать книги и доступность

Последняя часть нашего рабочего процесса доступности имеет к нашему Рабочий процесс, управляемый компонентами Отказ Для реагирования проектов я действительно пользовался использованием Статьгор Для создания и документирования наших передних компонентов.

Стерейная книжка – это инструмент с открытым исходным кодом для разработки компонентов пользовательского интерфейса в изоляции для реагирования, VUE и угловой. Это делает здание потрясающего UIS организованным и эффективным.

– StoryBook.js.org.

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

Наша конфигурация для сборки истории имеет встроенные испытания AX для каждого компонента и симулятор цветной слепоты, предоставленной дополнением Accessible Accessibility.

За кулисами дополнение на самом деле также использует топор для тестирования. Это действительно приятно, потому что это означает, что тестирование, которое мы используем в разработке, совпадают, так же, как то, что мы используем в библиотеке компонентов. Наличие ошибок, выделенных в компонентной библиотеке, также помогает всем в наших командах проекта уловить проблемы с доступностью, поскольку они просматривают библиотеку либо для целей QA, либо в области анализа.

Настраивать

Настройка для SaleBook немного более вовлечена, поэтому, если вы не использовали сюжетную книжку раньше, вы можете оформить заказ Стать книг для реагирования Документация для универсальной настройки реагирования.

Если вы хотите получить рассказов с GATSBY, посмотрите Визуальное тестирование со сборной книги в GATSBY DOCS.

После того, как у вас есть STALLBOOK SETUP, добавление дополнительного дополнения довольно просто.

Сначала установите дополнительный:

NPM Install @ Storybook/Addon-A11y –save-dev

Затем добавьте эту строку в файл ADDONS.JS в каталоге конфигурации Desearbook:

Импорт ‘@ Storybook/Addon-A11y/Регистрация’;

И, наконец, добавьте эту строку в файле desearbook config.js, чтобы автоматически добавить панель доступности на все компоненты:

Adddecorator (с11y);

Теперь, когда вы запустите Desearbook сейчас, теперь вы должны увидеть панель доступности ( см. Живую версию здесь ):

В качестве бокового примечания – вы можете управлять порядком вкладок на панели надстройки на основе заказа, который вы импортируете дополнения в файл ADDONS.JS, если вы хотите иметь отображение панели доступности по умолчанию, убедитесь, что Это первая строка в ваших addons.js.

Заворачивать

Если вы не следили с настройкой или просто хотите быстро получить новую настройку проекта с помощью этого рабочего процесса, оформить заказ GATSBY-Starter-Accessibility Gatsby Starter!

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

NPX GATSBY New My-Accessible-Project https://github.com/benjamingrobertson/gatsby-starter-accessibility

Или вы можете проверить определенную конфигурацию в репо Отказ

Выполнете ли вы через все шаги выше или используете с Стартер У вас будут следующие функции, созданные в вашем проекте GATSBY/RECT:

• Внутри редактора отчетности о ошибках доступности
• Предварительный коммитский крючок для предотвращения ошибок доступности от попадания в репозиторий
• Консоль браузера Отчетность о ошибках доступности во время разработки, со ссылками на информацию о том, как разрешить ошибки
• Компонентная библиотека со встроенным тестированием на доступность, поэтому все заинтересованные стороны проекта могут проводить команду, ответственную за доступ к вопросам доступности

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

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

Я знаю, что это помогло мне – надеюсь, это поможет вашей команде тоже!

Хотите погрузиться глубже в создание доступных сайтов? Присоединяйтесь к моим бесплатным по электронной почте: ? Общие ошибки доступности и как избежать их Отказ 30 дней, 10 уроков, 100% удовольствия! ? Зарегистрируйтесь здесь !