Путешествие в страну доступности

Transcript

1. Путешествие в страну доступности Ярослав Лосев
2. Ярослав Лосев • Яндекс Путешествия • Программный комитет HolyJS • Интересуюсь темой доступности • Мемелье
3. Я не самурай, у меня есть цель
4. DISCLAIMER
5. Да кто такой эта ваша доступность?!
6. Типичный разработчик
7. An accessible site is one whose content can be accessed regardless of any user's impairments – web.dev
8. Спектр проблем Зрение • слабовидящие • незрячие • дальтоники Слух • глухие • слабослышащие • нарушения речи Моторика • тремор • паралич • нет конечностей Когнитивные • дислексия • СДВГ • эпилепсия Ситуативные • блики • заняты руки • переломы
9. Для таких людей очень важно чувствовать собственную независимость
10. Но ведь никто не жаловался?
11. 12 млн с инвалидностью пожилые 37 млн + 50 млн ≈ *Росстат
12. Мы все там будем
13. Мир более разнообразен
14. Технологии спешат на помощь
15. Программы экранного доступа NVDA Windows VoiceOver iOS/macOS TalkBack Android
18. Ярослав Voice over 1 : 0 Легко ли?
19. Другие технологии
20. 51% Имеет хотя бы одну настройку доступности Используют увеличенный шрифт 35% Используют скринридер 0.02% Настройки доступности https://inclusion.yandex.ru/settingsresearch
21. Мир меняется, и это здорово!
22. О критериях
23. 01 Perceivable Operable 02 Understandable Robust 04 03 WCAG https://www.w3.org/WAI/WCAG21/Understanding/ Web Content Accessibility Guidelines
24. Perceivable Семантическая структура Контент представлен не только графически 02 Цвет и контраст 03 Масштабируемость 04 Подписи и лейблы 05 01
25. Operable Навигация не только мышью Порядок фокуса 02 Нет ярких вспышек 03 Пользователь успевает взаимодействовать с интерфейсом 04 01
26. Understandable Не используется неизвестных слов и аббревиатур Предсказуемое поведение 02 Подсказки для ошибок 03 01
27. Robust Максимизируем совместимость между новыми и старыми фичами 01
28. Как это устроено в Яндексе
29. Команда инклюзии Валерия Курмак Руководитель инклюзии @neiskluchenie Анатолий Попко Эксперт по доступности
30. Не думать про доступность Ждать, что команда инклюзия все исправит Обратиться к инклюзии и исправить командой сервиса
31. Аудит доступности Определение пользовательских сценариев 02 Аудит (зрячий + незрячий) 03 Отчёт 04 Работа над ошибками 05 Формируется перечень сервисов и окружений 01
32. Что там с путешествиями?
33. В ролях…
35. Открыли отчёт
36. Не скрыта декоративная графика
37. Плохая семантика
38. Нет подписей
39. Кастомные контролы
40. Не вижу контент – его нет
41. Исключительно графическое представление
42. ¿Hablas español?
43. Сели думать
44. Как это решать у себя в команде?
45. Какие есть опции «Набегами» • Неконсистентно между итерациями • Потенциально дорого • Всегда найдется, чем заняться кроме a11y Непрерывно • В идеале — рабочий продукт в любой точке • Модифицируются процессы • Доступность становится частью культуры (например, как мобильный адаптив) • Многие команды Яндекса идут по этому пути
46. Пример непрерывного флоу • На этапе планирования фичи менеджер думает про необходимость доступности (не все сценарии требуют этого) • Менеджер подсвечивает необходимость и серые зоны • RFC как сделать фичу доступной • Дизайн-ревью (разработчик проверяет в том числе и доступность) • Разработка • Ручное тестирование, тестирование асессорами (?), автоматическое тестирование
50. Я ж программист
51. Как сделать приложение доступным?
53. Accessibility Object Model
54. Как сделать приложение доступным? Семантические элементы • header, footer, h1… • button, a, input, textarea… • dialog, popover ARIA-атрибуты • role=“heading”, aria-level=“1" • aria-pressed, aria-labbeledby • role=“dialog”, aria-hidden, inert
55. FIRST RULE OF ARIA – DO NOT USE ARIA
56. ESLint
58. Настраиваемые правила
59. Пара интересных правил • anchor-has-content; anchor-is-valid • control-has-associated-label • alt-text; img-redundant-alt • interactive-supports-focus; no-noninteractive-element-interactions • no-static-element-interactions
60. Конфигурация
61. Что сделали мы? Сконфигурировали линтер и мапинги 02 Включили на уровень warning 03 Часть подняли до error, завели задачи для остальных 04 Выбрали актуальные для нас правила 01
62. ESLint 01 03 02 04 Статически проверили код React и отловили часть ошибок Пропустили часть человеческих ошибок Указали обязательные атрибуты Не проверили страницу целиком
64. Axe is an accessibility testing engine for websites and other HTML-based user interfaces axe-core
66. Основное • Конфигурируемые правила: WCAG A / AA, best practices, … • «With axe-core, you can find on average 57% of WCAG issues automatically» • Есть официальная подвязка к React, WebDriver, Pupeteer • Browsers: Edge 40+ , Chrome 42+ , Firefox 38+ , Safari 7+ • Open Source
68. console.log(results.violations) • html-has-lang: Ensures every HTML document has a lang attribute • landmark-one-main: Ensures the document has a main landmark • page-has-heading-one: Ensure that the page, or at least one of its frames contains a level-one heading • region: Ensures all page content is contained by landmarks
69. 01 03 02 04 axe-core Проверили страницу Интегрируется с любимыми тестами Отловили часть интеграционных ошибок Не поймали часть ошибок
70. Что сделали мы?
71. Lighthouse
73. Проверили страницу целиком Предложил добавить alt Получили какую-то среднюю температуру по релизу Lighthouse
74. Не на этой неделе точно, а все, что дальше недели, — туманно ”
76. Как можно решать на уровне кода?
77. Делать всё самим Взять готовый Ul-kit ???
78. Гибко и контролируемо Долго и объёмно Делать самим
79. Tabs Pattern Tabs Pattern: 1. Tab 2. Left/Right Arrow 3. Space/Enter 4. Home/End * 5. Delete * 6. Shift + F10 *
80. Select с множественным выбором
81. Взять готовый Ul-KIT
82. Подумали за нас Сложно кастомизировать Взять готовый UI-KIT
83. Гибко Подумали за нас ГИБКО УЖЕ ПОДУМАЛИ
84. react-aria
85. Предыстория Использовали как часть дизайн-системы Adobe Spectrum 02 Разработка первой публичной версии заняла 1 . 5 года 03 Появились в Adobe 01
86. С какими проблемами столкнулись? Существующие библиотеки слишком специфичны 02 Большая вариативность требований 03 Разное поведение даже стандартных элементов в браузерах 01 • Разные браузеры, устройства, способы взаимодействия • Специфика LTR, RTL, i18n
87. Архитектура Отображение (DOM, …) Обработка событий, i18n, a11y, … Логика работы с состоянием
88. Архитектура
89. react-aria Берет на себя ответственность только за поведение, но не за отображение 02 Мышь, клавиатура, тач, скрин ридеры 03 WAI - ARIA 04 Представляет набор хуков для основных примитивов 01
90. Примитивы для событий • useFocus • useFocusVisible • useFocusWithin • useHover • useKeyboard • useLongPress • useMove • usePress • useFocusRing • useClipboard https://react-spectrum.adobe.com/react-aria/getting-started.html
91. Контролы • useButton • useCheckbox • useTextField • useBreadcrumbs • useMenu • useTabList • useModal • usePreventScroll • useSelect • useRangeCalendar https://react-spectrum.adobe.com/react-aria/getting-started.html
92. <div className={cx.button} onClick={props.onClick} role="button" tabIndex={0} onKeyDown={props.onClick} > {props.text} </div> import {useButton} from "@react-aria/button"; … const ref = useRef<HTMLDivElement>(null); const { buttonProps } = useButton( { ...props, onPress, elementType: 'div', }, ref, ); … return ( <div ref={ref} className={cx.button} {…buttonProps}> {props.text} </div> ); Button.tsx
93. import {useButton} from "@react-aria/button"; … const ref = useRef<HTMLDivElement>(null); const { buttonProps } = useButton( { ...props, onPress, elementType: 'div', }, ref, ); … return ( <div ref={ref} className={cx.button} {…buttonProps}> {props.text} </div> ); <div … role="button" tabindex="0"> Sign in </div> Button.tsx
94. const TextField: React.FC<ITextFieldProps> = (props) => { const ref = useRef<HTMLInputElement>(null); const validationState = props.hasError ? 'invalid' : 'valid'; const { labelProps, inputProps } = useTextField({ ...props, validationState }, ref); return ( <div className={props.className}> <Label {...labelProps} htmlFor={labelProps.htmlFor} text={props.label} /> <Input {...inputProps} ref={ref} hasError={props.hasError} /> </div> ); }; TextField.tsx
95. <div …> <label … for="react-aria5217437109-1" id="react-aria5217437109-2" > Login </label> <input … id="react-aria5217437109-1" type="text" aria-labelledby="react-aria5217437109-2" value="" /> </div> TextField.tsx
97. Ярослав React Aria 1 : 0 Как бы не так…
100. x Беда подкралась незаметно...
102. Chromium bug
103. react-aria – не просто библиотека
104. Заключение
105. Дальнейшие планы Перевезти основные компоненты на react-aria 02 Внедрить E2E тестирование доступности 03 Правила ESLint должны стать обязательными 04 Пропагандировать культуру доступности в команде 01
106. Задумайтесь на своём сервисе
107. Помните принцип Парето 80/20
108. inclusion.yandex.ru
109. Дополнительные материалы https://youtu.be/UiE1VVMDX6E https://youtu.be/9OnyHiRjayM
110. Вопросы? Ярослав Лосев @losyear