UI / UX / DX

Что такое доступность?

<button> вместо <div>?

Семантичная верстка?

ARIA?

Ответ: все вышеперечисленное и даже больше

Зачем нужна доступность?

• Спросите у Вадима Макеева, он уже рассказывал, и не раз
• Доступность – эмпатия, её отсутствие — повод забеспокоиться.
• Даже в PornHub добавляют субтитры к видео, а ты ленишься <label> инпуту добавить

Из двух зол

Что делать?

Все переписать

Разобраться

tl;dr

React Accessibility Docs

tl;dr

1. Пишите осмысленный HTML. Не хватает HTML — WAI-ARIA в помощь
2. Сохраняйте outline на :focus или подсвечивайте сами, ловите и меняйте фокус там, где это необходимо
3. Следите за контрастностью текста
4. Оповещайте пользователя об ошибках и других событиях текстом
5. Используйте HTML-ориентиры (<main>, <nav>, etc.), их ARIA-аналоги (role="banner") и #ссылки для навигации по странице

Из двух зол

Попробуем так:

Самый простой способ проверить

Просто выключите мышку / тачпад

Для смелых и отважных: откройте в реальной читалке:
NVDA для Windows или VoiceOver для macOS

Чеклисты

1. A11y Project — реально чеклист с чекбоксами, берешь и делаешь
2. WebAIM — краткое содержание WCAG 2.0
3. WUHCAG — уже не такое краткое, но все еще понятным языком

WCAG 2.0 (рус.) — набор подробно описанных критериев доступности интерфейса

A11y Project

Линтеры

Код, не проходящий проверки, не должен попадать в ваш master
(и, желательно, в прод тоже)

1. eslint-plugin-jsx-a11y, просто набор eslint-правил для JSX
2. react-a11y, работает в рантайме a-la PropTypes (подойдет для снэпшотных и юнит-тестов)

Есть аналоги для Angular и Ember.

ЛАЙФХАКИ

			<div onClick={something} />
		

ЛАЙФХАКИ

			const onDOMActivate = callback => ({
			  role='button', tabIndex: 0, onClick: callback,
			  onKeyDown: function(e) {
				if ([13, 32].includes(e.keyCode)) 
					return callback.call(this, e);
			})
			
			<div {...onDOMActivate(something)} />
		

Визуализация

Открыл в браузере, посмотрел, что не так

1. Accessibility Inspector, эксперимент в Chrome DevTools
2. Lighthouse, инструмент аудита в Chrome DevTools
3. aXe, экстеншн для Chrome / Firefox

Автотесты

Отрендерил – прогнал тесты

1. react-axe, подключаемый в рантайме плагин, работает почти как react-a11y, но уже на реальном DOM
2. aXe-cli, выполняет аудит заданной страницы в Headless Chrome (или через WebDriver)
3. Tenon, платный облачный сервис для того же самого

Существуют и почти e2e-решения типа intern-a11y

Mocha + axe-core

			it('should have no accessibility violations', done => {
				axe.run('.some-component', {}, (err, res) {
					if (error) return error;
				
					expect(res.violations.length).toBe(0);
				});
			});
		

Типичная дискуссия

Ручное тестирование

Берем WCAG в руки, и вперед

Что дальше?

Критерии доступности для touch, VR, etc...

Спасибо!

Credits