Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Ярослав Лосев • Яндекс Путешествия • Программный комитет HolyJS • Интересуюсь темой доступности • Мемелье

Slide 3

Slide 3 text

Я не самурай, у меня есть цель

Slide 4

Slide 4 text

DISCLAIMER

Slide 5

Slide 5 text

Да кто такой эта ваша доступность?!

Slide 6

Slide 6 text

Типичный разработчик

Slide 7

Slide 7 text

An accessible site is one whose content can be accessed regardless of any user's impairments – web.dev

Slide 8

Slide 8 text

Спектр проблем Зрение • слабовидящие • незрячие • дальтоники Слух • глухие • слабослышащие • нарушения речи Моторика • тремор • паралич • нет конечностей Когнитивные • дислексия • СДВГ • эпилепсия Ситуативные • блики • заняты руки • переломы

Slide 9

Slide 9 text

Для таких людей очень важно чувствовать собственную независимость

Slide 10

Slide 10 text

Но ведь никто не жаловался?

Slide 11

Slide 11 text

12 млн с инвалидностью пожилые 37 млн + 50 млн ≈ *Росстат

Slide 12

Slide 12 text

Мы все там будем

Slide 13

Slide 13 text

Мир более разнообразен

Slide 14

Slide 14 text

Технологии спешат на помощь

Slide 15

Slide 15 text

Программы экранного доступа NVDA Windows VoiceOver iOS/macOS TalkBack Android

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Ярослав Voice over 1 : 0 Легко ли?

Slide 19

Slide 19 text

Другие технологии

Slide 20

Slide 20 text

51% Имеет хотя бы одну настройку доступности Используют увеличенный шрифт 35% Используют скринридер 0.02% Настройки доступности https://inclusion.yandex.ru/settingsresearch

Slide 21

Slide 21 text

Мир меняется, и это здорово!

Slide 22

Slide 22 text

О критериях

Slide 23

Slide 23 text

01 Perceivable Operable 02 Understandable Robust 04 03 WCAG https://www.w3.org/WAI/WCAG21/Understanding/ Web Content Accessibility Guidelines

Slide 24

Slide 24 text

Perceivable Семантическая структура Контент представлен не только графически 02 Цвет и контраст 03 Масштабируемость 04 Подписи и лейблы 05 01

Slide 25

Slide 25 text

Operable Навигация не только мышью Порядок фокуса 02 Нет ярких вспышек 03 Пользователь успевает взаимодействовать с интерфейсом 04 01

Slide 26

Slide 26 text

Understandable Не используется неизвестных слов и аббревиатур Предсказуемое поведение 02 Подсказки для ошибок 03 01

Slide 27

Slide 27 text

Robust Максимизируем совместимость между новыми и старыми фичами 01

Slide 28

Slide 28 text

Как это устроено в Яндексе

Slide 29

Slide 29 text

Команда инклюзии Валерия Курмак Руководитель инклюзии @neiskluchenie Анатолий Попко Эксперт по доступности

Slide 30

Slide 30 text

Не думать про доступность Ждать, что команда инклюзия все исправит Обратиться к инклюзии и исправить командой сервиса

Slide 31

Slide 31 text

Аудит доступности Определение пользовательских сценариев 02 Аудит (зрячий + незрячий) 03 Отчёт 04 Работа над ошибками 05 Формируется перечень сервисов и окружений 01

Slide 32

Slide 32 text

Что там с путешествиями?

Slide 33

Slide 33 text

В ролях…

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Открыли отчёт

Slide 36

Slide 36 text

Не скрыта декоративная графика

Slide 37

Slide 37 text

Плохая семантика

Slide 38

Slide 38 text

Нет подписей

Slide 39

Slide 39 text

Кастомные контролы

Slide 40

Slide 40 text

Не вижу контент – его нет

Slide 41

Slide 41 text

Исключительно графическое представление

Slide 42

Slide 42 text

¿Hablas español?

Slide 43

Slide 43 text

Сели думать

Slide 44

Slide 44 text

Как это решать у себя в команде?

Slide 45

Slide 45 text

Какие есть опции «Набегами» • Неконсистентно между итерациями • Потенциально дорого • Всегда найдется, чем заняться кроме a11y Непрерывно • В идеале — рабочий продукт в любой точке • Модифицируются процессы • Доступность становится частью культуры (например, как мобильный адаптив) • Многие команды Яндекса идут по этому пути

Slide 46

Slide 46 text

Пример непрерывного флоу • На этапе планирования фичи менеджер думает про необходимость доступности (не все сценарии требуют этого) • Менеджер подсвечивает необходимость и серые зоны • RFC как сделать фичу доступной • Дизайн-ревью (разработчик проверяет в том числе и доступность) • Разработка • Ручное тестирование, тестирование асессорами (?), автоматическое тестирование

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Я ж программист

Slide 51

Slide 51 text

Как сделать приложение доступным?

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Accessibility Object Model

Slide 54

Slide 54 text

Как сделать приложение доступным? Семантические элементы • header, footer, h1… • button, a, input, textarea… • dialog, popover ARIA-атрибуты • role=“heading”, aria-level=“1" • aria-pressed, aria-labbeledby • role=“dialog”, aria-hidden, inert

Slide 55

Slide 55 text

FIRST RULE OF ARIA – DO NOT USE ARIA

Slide 56

Slide 56 text

ESLint

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Настраиваемые правила

Slide 59

Slide 59 text

Пара интересных правил • 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

Slide 60

Slide 60 text

Конфигурация

Slide 61

Slide 61 text

Что сделали мы? Сконфигурировали линтер и мапинги 02 Включили на уровень warning 03 Часть подняли до error, завели задачи для остальных 04 Выбрали актуальные для нас правила 01

Slide 62

Slide 62 text

ESLint 01 03 02 04 Статически проверили код React и отловили часть ошибок Пропустили часть человеческих ошибок Указали обязательные атрибуты Не проверили страницу целиком

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Axe is an accessibility testing engine for websites and other HTML-based user interfaces axe-core

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Основное • Конфигурируемые правила: 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

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

01 03 02 04 axe-core Проверили страницу Интегрируется с любимыми тестами Отловили часть интеграционных ошибок Не поймали часть ошибок

Slide 70

Slide 70 text

Что сделали мы?

Slide 71

Slide 71 text

Lighthouse

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Проверили страницу целиком Предложил добавить alt Получили какую-то среднюю температуру по релизу Lighthouse

Slide 74

Slide 74 text

Не на этой неделе точно, а все, что дальше недели, — туманно ”

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Как можно решать на уровне кода?

Slide 77

Slide 77 text

Делать всё самим Взять готовый Ul-kit ???

Slide 78

Slide 78 text

Гибко и контролируемо Долго и объёмно Делать самим

Slide 79

Slide 79 text

Tabs Pattern Tabs Pattern: 1. Tab 2. Left/Right Arrow 3. Space/Enter 4. Home/End * 5. Delete * 6. Shift + F10 *

Slide 80

Slide 80 text

Select с множественным выбором

Slide 81

Slide 81 text

Взять готовый Ul-KIT

Slide 82

Slide 82 text

Подумали за нас Сложно кастомизировать Взять готовый UI-KIT

Slide 83

Slide 83 text

Гибко Подумали за нас ГИБКО УЖЕ ПОДУМАЛИ

Slide 84

Slide 84 text

react-aria

Slide 85

Slide 85 text

Предыстория Использовали как часть дизайн-системы Adobe Spectrum 02 Разработка первой публичной версии заняла 1 . 5 года 03 Появились в Adobe 01

Slide 86

Slide 86 text

С какими проблемами столкнулись? Существующие библиотеки слишком специфичны 02 Большая вариативность требований 03 Разное поведение даже стандартных элементов в браузерах 01 • Разные браузеры, устройства, способы взаимодействия • Специфика LTR, RTL, i18n

Slide 87

Slide 87 text

Архитектура Отображение (DOM, …) Обработка событий, i18n, a11y, … Логика работы с состоянием

Slide 88

Slide 88 text

Архитектура

Slide 89

Slide 89 text

react-aria Берет на себя ответственность только за поведение, но не за отображение 02 Мышь, клавиатура, тач, скрин ридеры 03 WAI - ARIA 04 Представляет набор хуков для основных примитивов 01

Slide 90

Slide 90 text

Примитивы для событий • useFocus • useFocusVisible • useFocusWithin • useHover • useKeyboard • useLongPress • useMove • usePress • useFocusRing • useClipboard https://react-spectrum.adobe.com/react-aria/getting-started.html

Slide 91

Slide 91 text

Контролы • useButton • useCheckbox • useTextField • useBreadcrumbs • useMenu • useTabList • useModal • usePreventScroll • useSelect • useRangeCalendar https://react-spectrum.adobe.com/react-aria/getting-started.html

Slide 92

Slide 92 text

{props.text}
import {useButton} from "@react-aria/button"; … const ref = useRef(null); const { buttonProps } = useButton( { ...props, onPress, elementType: 'div', }, ref, ); … return (
{props.text}
); Button.tsx

Slide 93

Slide 93 text

import {useButton} from "@react-aria/button"; … const ref = useRef(null); const { buttonProps } = useButton( { ...props, onPress, elementType: 'div', }, ref, ); … return (
{props.text}
);
Sign in
Button.tsx

Slide 94

Slide 94 text

const TextField: React.FC = (props) => { const ref = useRef(null); const validationState = props.hasError ? 'invalid' : 'valid'; const { labelProps, inputProps } = useTextField({ ...props, validationState }, ref); return (
); }; TextField.tsx

Slide 95

Slide 95 text

Login
TextField.tsx

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Ярослав React Aria 1 : 0 Как бы не так…

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

x Беда подкралась незаметно...

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Chromium bug

Slide 103

Slide 103 text

react-aria – не просто библиотека

Slide 104

Slide 104 text

Заключение

Slide 105

Slide 105 text

Дальнейшие планы Перевезти основные компоненты на react-aria 02 Внедрить E2E тестирование доступности 03 Правила ESLint должны стать обязательными 04 Пропагандировать культуру доступности в команде 01

Slide 106

Slide 106 text

Задумайтесь на своём сервисе

Slide 107

Slide 107 text

Помните принцип Парето 80/20

Slide 108

Slide 108 text

inclusion.yandex.ru

Slide 109

Slide 109 text

Дополнительные материалы https://youtu.be/UiE1VVMDX6E https://youtu.be/9OnyHiRjayM

Slide 110

Slide 110 text

Вопросы? Ярослав Лосев @losyear