Lena Ryan

• Делаю фронт в
• Борец за вёрстку кнопок кнопками
• Член программного комитета Podlodka Frontend Crew и Codefest
• Официальный амбассадор Евгения Кота
• Мама, я скейтер

План

План

Доступность контента — это специальные технические и архитектурные решения, которые помогают людям с ограниченными возможностями использовать сайты. [...] Термин «доступность контента» также может обозначаться аббревиатурой "a11y"

Закон в России

• Приказ Минкомсвязи России №483
• ГОСТ Р 52872-2019 — Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме...
• КоАП РФ, ст. 14.8., ч.5
• Штрафы

Закон в других странах

Аудитория

Спецификации и статьи

• WCAG
• Web Accessibility Initiative (WAI)
• Developer Mozilla Network
• WebAIM
• Inclusive Components
• Дока
• Блог Татьяны Фокиной

Стримы и видео

• Доступная вёрстка (Глафира Жур)
• Аудит доступности сайта "Дока"
• Семаническая вёрстка (Деми Мурыч)
• Доступный тултип (Глафира Жур, Татьяна Фокина)
• Доступная валидация формы (Марианна Минич)
• Доступность в дизайн-системе (Ник Лопин)

Курсы

• Курс по цифровой доступности (Валерия Курмак)
• Бесплатный курс от Web Accessibility Initiative
• Курс от Deque
• Список платных и бесплатных курсов по доступности

Сообщества

• Accessibility Club
• Accessibility Club Minsk (Глафира Жур)
• Accessibility Community на русском (Валерия Курмак)
• Список сообществ по всему миру

Рассылки

• A11y Project
• Smashing Magazine
• Accessibility News (Twitter)

Проверка контрастности

Проверка на цветовую слепоту

Читабельные шрифты

• Open-Dyslexic
• Arial
• Comic Sans
• Verdana
• Tahoma
• Century Gothic
• Trebuchet

Версии для слабовидящих не нужны

Программа минимум:

• Семантическая вёрстка
• ARIA-атрибуты

В новом ГОСТе нет упоминаний отдельных версий сайтов!

Доступность в Ангуляр

Доступность в Реакте

• Поддерживаются ARIA-атрибуты
• eslint-plugin-jsx-a11y
• react-axe (@axe-core/react)
• Shopify Polaris
• React Aria

Доступность во Вью

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

• axe
• WAVE
• Nu Html Checker
• axe Accessibility Linter
• Lighthouse

Тестирование с DevTools

• Проверка контраста
• Эмуляция дальтонизма
• Lighthouse
• Вкладка Accessibility
• Accessibility tree

Скринридеры

• NVDA
• JAWS
• VoiceOver
• ChromeVox

Что сделано на данный момент

• Тёмные темы
• Yandex — более 10 доступных сервисов (Поиск, Такси и т.д.)
• Доступные банки — Сбер, Альфа, Тинькофф, ВТБ
• Додо Пицца (мобильное приложение)
• Be My Eyes
• Голосовое управление
• Расшифровка голосовых сообщений

Доступные видеоигры

The Last Of Us 2

• Высококонтрастный режим
• Помощь при прицеливании
• Вибро для слабослышащих
• Кастомизация контролов
• и прочее

Тренды и перспективы

• Профессии с a11y — спецы по внедрению, консультанты
• Внедрение доступности каждым разработчиком
• Внедрение ИИ в приложения
• Доступные контроллеры
• ColorADD

Доступные контроллеры

ColorADD

Контакты

Lena Ryan