Индукционная доступность

Индукционная доступность

Мотивация

С большой силой приходит большая ответственность.

Бенджамин «Бен» Паркер

Индукция

Философский и вообще научный метод движения знания от отдельного, особенного к всеобщему, закономерному

Философский энциклопедический словарь. 2010

Экспозиция

• ReactJS + Redux и вот это вот всё
• 60+ разработчиков в 30+ проектах
• 9+ лет энтерпрайз-разработки

Особое положение

axe-core

Отчет aXe

Сложности

				axe <url>
			

Стратегия нанесения добра

eslint-plugin-jsx-a11y

			{
				"plugins": ["jsx-a11y"]
				"rules": {
					"jsx-a11y/mouse-events-have-key-events": "error",
					"jsx-a11y/alt-text": ["warn', {
						"elements": ["img"],
						"img": ["Icon"]
					}]
				}
			}
		

			<modal>
				<Icon name="close-cross" 
					alt="Закрыть модальное окно" />
				<main>
					Контент
				</main>
			</modal>
		

react-axe

Юнит-тестирование

			it ('a11y check', async function() {
				const wrapper = (<Super Component />)
				const result = await a11yCheck (wrapper)
				expect(result.violations.length)
											.toBe(0)
			}
		

Мои велосипеды

			import axe from 'axe-core'
			function a11yCheck (ReactComponent) {
				const wrapper = mount (ReactCompontn)
				result axe.run (wrapper.getDOMNode())
			  		.then(resolve, reject)
			}
		

Автотестирование

Зачем?

a11y propTypes

			type Props = {
				a11y: {
					prefix: string
				}
			}
		

Чем проще - тем лучше

aria-hidden="true"

Ссылки

• Какие были варианты
• Как стало

Поиск баланса

Подводя итог

Индукционная доступность