Lena Ryan

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

План

План

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

Закон в Штатах

• Americans with Disabilities Act (ADA)
• Section 508
• Штрафы
• Прецедентная система, более 4000 дел за 2021 год

Хуан Карлос Гил против Winn-Dixie (2018)

• Winn-Dixie - продуктовая сеть
• Магазин - общественное место
• Нарушение ADA
• Штраф $250,000 + сделать сайт доступным

Закон в Европе

• Web Accessibility Directive
• European Accessibility Act
• European standard EN 301 549 “Accessibility requirements for ICT products and services”
• Наказание - на усмотрение страны (в 2022 г.)
• Реализация компаниями - до конца июня 2025 г.

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

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

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

Аудитория

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

• WCAG
• Web Accessibility Initiative (WAI)
• The US Government guide on accessibility
• Developer Mozilla Network
• WebAIM
• Inclusive Components

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

• Доступная вёрстка (Глафира Жур)
• Доступная вёрстка (снова Глафира Жур)
• Семаническая вёрстка (Деми Мурыч)
• Доступная валидация формы (Марианна Минич)
• Доступность в дизайн-системе (Ник Лопин)
• A11yCast by Rob Dodson

Курсы

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

Сообщества

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

Мероприятия

• Конференция по цифровой доступности (Валерия Курмак)
• Global Accessibility Awareness Day (третий четверг мая)
• Список сообществ по всему миру

Рассылки

• 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)
• React Aria

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

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

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

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

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

Скринридеры

• NVDA
• JAWS
• VoiceOver
• ChromeVox

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

• Доступные сайты
• Тёмные темы
• Yandex - статья на Хабре про Yandex Go
• Сбер - Сбербанк Онлайн
• Додо Пицца (мобильное приложение)
• Be My Eyes

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

The Last Of Us 2

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

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

• Профессии с a11y — спецы по внедрению, консультанты
• Доступные гаджеты
• Доступные контроллеры
• ColorADD

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

ColorADD

Контакты

Lena Ryan