Александр Чудеснов написал, как сделать доступным продукт из множества приложений, которые написаны разными командами.

— Страница с правильной цветовой контрастностью, структурой заголовков и HTML-вёрсткой, скорее всего, уже отвечает критериям доступности;
— Есть нюансы: разная реализация некоторых функций в разных браузерах, отдельные неудобные элементы вроде нативного поля ввода даты;
— Проблема в том, что Single Page Applications выходят за рамки возможностей HTML. В них много компонентов, которые не предоставляет сам браузер. При их создании надо отвечать на множество вопросов о взаимодействии с помощью клавиатуры, разметке для скринридеров, управлении фокусом;
— Дизайн-система не всегда спасает: проработанный компонент из ДС может не подходить продукту и не использоваться;
— Относитесь к ДС как к продукту: собирайте статистику использования и обратную связь, отслеживайте и исправляйте проблемы;
— ДС должна решать проблемы команд, предоставлять компоненты с разумными дефолтами, которые можно менять в определённых рамках. Без инструкций в формате «собери сам»;
— Есть проблема в совмещении визуальных и интерактивных паттернов. Кроме визуального стиля компонента важно прорабатывать способы взаимодействия с ним и возможную композицию с другими элементами;
— ДС может содержать визуальный слой, слой интерактивных паттернов и отдельно — собранные готовые компоненты (как в ДС Adobe Spectrum);
— Не пренебрегайте автоматическим тестированием. Тестировать компоненты в разных состояниях проще в Storybook, чем в продакшене. После ручного аудита (в Lighthouse или axe DevTools) стоит написать автоматизированные тесты (axe-Selenium);
— Важно, чтобы доступность интерфейсов стала частью культуры компании: помогите сформировать запрос на доступность, зовите на тестирование людей с инвалидностью, дайте сотрудникам возможность научиться создавать доступные продукты, установить цели, связанные в том числе и с процессами («80% команд знают и используют принципы обеспечения доступности»).

#accessibility

Опубликованы видео со 2-й конференции по цифровой доступности (о пользовательском опыте людей с разными нарушениями).

1. Евгений Арнапольский — незрячий пользователь программ экранного доступа (скринридеров). Проводя аналогии между физическим и цифровым миром, рассказал об ассистивных технологиях, а также на примерах Госуслуг, Вконтакте, Сбермаркета и других сервисов показал барьеры в интерфейсах.

2. Денис Редькин — пользователь с нарушением моторики. Как устроено его рабочее место, каким образом он управляет ноутбуком и мобильным телефоном, как играет в компьютерные игры, какие способы управления усложняют, а какие наоборот упрощают ему жизнь.

3. Павел Любецкий — пользователь с астеническим синдромом. В чём выражается синдром, о трудностях с интерфейсами и роли тёмной темы, что помогает сохранять концентрацию и как себя разгрузить.

4. Геннадий Тихненко — пользователь с нарушением слуха. С какими барьерами сталкиваются глухие и слабослышащих люди в физическом и цифровом мире, какие решения сейчас есть на сайтах и в приложениях.

5. Алексей Цаплин — слабовидящий пользователь, использующий одновременно увеличение и программу экранного доступа. С какими трудностями он сталкивается на примерах Пятёрочки, Самоката, Вконтакте и других.

#accessibility

Лена Райан рассказала об отдельной версии сайта для слабовидящих.

— Доступность — это не только версии для слабовидящих. Есть люди с когнитивными нарушениями, тремором рук, ДЦП, без конечностей. Плюс, любой человек может столкнуться с ситуативными и временными ограничениями: одна рука занята, перелом;
— Доступность расширяет аудиторию продукта;
— Если при разработке реализовывать требования доступности сразу, объём работ вырастает всего на 5–7%. Если выносить эти работы на отдельный этап, возможно, придётся перевёрстывать уже сделанное;
— Пользователю проще ориентироваться, если навигация с клавиатуры соответствует естественному потоку документа. Не используйте положительный tabindex;
— Закон не обязывает создавать версию сайта для слабовидящих, если основная версия доступна (и в том числе есть тёмная тема);
— Специальные версии не всегда работают как надо: с одной только клавиатурой проблематично включить навигацию с клавиатуры на сайте Bershka; версия для слабовидящих сайта РЖД теряет акценты и разделение на блоки, чтобы что-то найти надо пользоваться экранной лупой и всё читать;
— Отдельная версия для слабовидящих — не универсальное решение, если там не будет части функций, вместо инклюзивности выйдет дискриминация. Плюс, это дополнительные затраты на вторую версию сайта.

#accessibility

Евгений Трифонов об интерфейсах для продвинутых пользователей.

— Продвинутые пользователи (power users) стремятся использовать инструменты максимально эффективно;
— Пользователей мобильных устройств стало больше десктопных, сервисы стали ориентироваться на них, что привело к ухудшению десктопного UX. Некоторые сервисы вообще существуют только в виде мобильных приложений;
— Перемещение данных в облака лишает контроля над ними: стриминг может удалить любой альбом, не даёт возможности выбрать подходящий проигрыватель;
— Не всеми сервисами можно управлять клавиатурой и с помощью горячих клавиш (даже просто переключаться между полями клавишей Tab не всегда получается);
— В некоторых случаях ресурсы на такие доработки есть, проблема в том, что об этом просто не подумали. То есть надо просто тестировать сервисы с участием продвинутых пользователей;
— В этой функциональности нет большой социальной пользы, но разработчики часто сами являются продвинутыми пользователями и понимают её ценность. Это может сподвигнуть их к внедрению улучшений силами разработчиков без больших вложений ресурсов.

#accessibility #power_user

Кирилл Улитин написал о цвете в интерфейсе: о контрасте и конфликте разных информационных слоёв цвета.

— Цветовые пространства RGB и производные от него HSB и HSL не адаптированы для человеческого восприятия. Изменение оттенка даёт цвета, неравномерные по контрасту. Цветовые модели LCH и HSLuv призваны это исправить;
— Контраст зависит от способа воспроизведения: на электронно-лучевых экранах контрастнее жёлтый на чёрном, на светодиодных — чёрный на белом;
— Алгоритм расчёта контраста в WCAG 2.1 иногда ошибается. В новую версию стандарта доступности вошёл алгоритм APCA. Можно использовать инструменты Huetone и Accessible Palette;
— Алгоритмы проверяют цвета в идеальных условиях и не учитывают пользовательский контекст: тип матрицы экрана, яркость, режимы вроде Night Shift или корректирующие очки;
— Цвет может обеспечивать узнаваемость бренда;
— Apple в руководстве по интерфейсному дизайну говорит о том, что конфликт разных информационных слоёв цвета нежелателен: красное сообщение о критической проблеме будет менее эффективным, если красный используется в приложении для некритичных ситуаций;
— При этом в новой версии macOS Big Sur разработчикам дана возможность настраивать основной цвет интерфейса приложения;
— Когда цвет бренда (например, красный) совпадает со статусными цветами в интерфейсе (сообщения об ошибках) надо вводить дополнительный цвет для элементов интерфейса, отличающийся от брендового (например, Microsoft Office 365), или добиваться цветовой разницы от 30 до 40 единиц (например, МойОфис).

#color #accessibility

В VK поделились статистикой, которая поможет убедить руководство заняться цифровой доступностью.

— Разные формы инвалидности есть у 8% жителей России. В 80% случаев она приобретённая (например, из-за автомобильной аварии);
— В России более 210 тысяч незрячих и слабовидящих;
— Кроме них есть люди с особенностями восприятия, которые видят всё в расфокусе (астигматизм, катаракта, близорукость и так далее) или других цветах (дальтонизм);
— Дальтонизм — у 8% мужчин и 0,5% женщин;
— В мире не менее 33% людей с нарушением зрения или слепотой, 17–23% с дислексией;
— В России примерно 10% слабослышащих и глухих;
— С 45–50 лет постепенно ухудшается зрение, со временем — слух. В России больше 33% людей старше 50;
— Люди также сталкиваются с ограничениями ситуационно: 69% людей в публичных местах смотрят видео без звука, иногда у людей руки заняты тяжёлыми сумаками;
— 52% людей с инвалидностью хотели бы активнее пользоваться услугами в сфере досуга и развлечений, 36% не пользуются отелями, кафе и ресторанами из-за ограничений;
— У них есть постоянные выплаты от государства. У 30% есть стабильная работа;
— 71% путешествует чаще раза в год. Более 65% посещают кафе и рестораны хотя бы раз в несколько месяцев;
— 52% меняют сервис на аналогичный, потому что не могут им пользоваться;
— 43% пользователей мобильных телефонов включают хотя бы одну настройку доступности. Чаще всего это увеличение шрифта, его жирности, инверсия цветов, увеличение фрагментов экрана.

#accessibility

Никита Геннадьевич изучил исследования о тёмной теме и поделился выводами.

— По разным опросам не менее 2/3 разработчиков при работе используют тёмную тему;
— Хорошее освещение рабочего места, но не слишком яркое, увеличивает продуктивность и уменьшает количество ошибок;
— Более высокая общая яркость и меньший зрачок → более чёткое изображение на сетчатке → лучшее восприятие;
— Восприятие улучшается при использовании светлой темы, но здесь важнее хорошее освещение рабочего места. Обычно светлая тема используется на светлом рабочем месте;
— Исследования показывают, что глаза меньше устают с тёмной темой. Лучше использовать её, если пользователь долго работает с продуктом;
— Среди людей 55–84 лет катаракта (помутнение хрусталика) распространена у 72,8%;
— С ней люди видят сайты в светлой теме размытыми;
— Если включена тёмная тема, зрачок немного расширяется, и изображение воспринимается более чётко;
— Также тёмная тема облегчает жизнь людям с фотофобией.

#dark_theme #accessibility

Михаил Рубанов сделал приложение, с помощью которого можно разметить макеты, настроив специальные свойства элементов интерфейса для скринридеров. Результат можно протестировать с помощью VoiceOver на телефоне и передать разработчикам. Пока только для macOS.

#accessibility #tool

Юля Долгун написала о частых ошибках доступности сайтов для людей с нарушениями зрения.

— Используйте для кнопок тег Button. Это первое правило ARIA, плюс не надо дополнительно беспокоиться о навигации табом и обработке нажатия на элемент пробелом или клавишой Enter;
— Заголовки страницы должны начинаться с тега h1. Основной заголовок страницы должен быть h1, даже если визуально он не самый большой на ней (решается стилями);
— Картинки бывают контентные и декоративные (пользователь ничего не теряет, если они не грузятся). К последним можно отнести иконки в меню, продублированные текстом. Контентные картинки размечайте тегом с атрибутом alt, в котором будет их текстовое описание;
— Иногда иконки показывают изменение цены (↑, ↓) или что цифры 4,8 — это рейтинг. В этом случае можно использовать скрытый текст перед суммой изменения в рублях («Цена акций выросла на») или цифрами рейтинга («Рейтинг:»);
— Не используйте атрибуты ARIA, если можно обойтись нативными html-тегами. Таблицы можно и нужно использовать для разметки табличных данных. Незрячие по нажатию клавиши, например, смогут узнать, на какой строке находятся, название столбца и так далее.

#accessibility

Таня Миронова написала, как встроить работу над доступностью в процессы компании.

— Если нанять отдельную команду и пропускать сервисы через неё, получая отчёты об ошибках, поставки станут дольше и дороже, отчёты могут быть формальными (если тестировать экраны, а не сценарии), сложно охватить сразу много продуктов;
— Если добавить тестирование доступности после функционального, нужны тестировщики (например, незрячие) для всех продуктов, поставки всё ещё будут долгими и дорогими;
— Можно подойти к доступности не как к этапу проверки, а как к определённому уровню знаний всех участников разработки;
— Нужен эксперт — амбассадор доступности, который будет находить проблемы доступности, консультировать, обучать сотрудников, готовить методические материалы;
— Со временем такие люди будут появляться в каждой команде;
— Чтобы ускорить их появление, можно провести внутреннюю стажировку — обучение сотрудников на их рабочих проектах;
— Те, кто не проходят стажировку, могут слушать лекции, чтобы лучше понимать основные принципы;
— В чеклист запуска продукта можно добавить проверку доступности (вначале опциональную).

#accessibility #process

Анастасия Ланцева из UXART написала о контрастности.

— WCAG допускает 2 уровня хорошего контраста: достаточный (АА) и повышенный (ААА);
— АА: от 4,5 для основного текста, от 3 для крупного больше 24 px или жирного больше 18 px;
— ААА: от 7 для основного текста, от 4,5 для крупного или жирного;
— Для элементов, которые не надо читать: от 3;
— Самый светлый цвет в 21 раз ярче самого тёмного. Яркость измеряется от 0 до 1, чтобы не делить на ноль, поделили 1,05 на 0,05 и получили 21. Порог контрастной чувствительности глаза — 0,02;
— Стандарт WCAG рекомендует придерживаться уровня АА, если нет особых требований, придерживаться уровня ААА не обязательно;
— Слишком высокая контрастность может вызывать усталость глаз, повышенную утомляемость, способствовать приступам эпилепсии, создавать визуальные искажения (вспомните визуальные иллюзии с контрастными объектами). Близорукость усиливает эти эффекты;
— Такая контрастность подойдёт промосайтам, с которыми пользователь не взаимодействует долго;
— Вычисляется по значениям RGB, но в реальности на неё влияет тип экрана (TN-матрица понижает контраст), освещение и свойства шрифтов (слишком тонкие линии менее контрастны);
— Текущий алгоритм некорректно оценивает некоторые цветовые пары и в целом не учитывает а) размер цветного элемента, б) где фон, а где текст. В WCAG 3.0 обещают новый алгоритм (APCA);
— Контрастность растёт нелинейно. Для чёрного цвета первая половина цветовой шкалы даёт 4 пункта контрастности, а вторая — 17.

#color #accessibility

Артём Плаксин написал о доступности изображений.

— Альтернативный текст нужен фотографиям, стикерам и смайликам, логотипам, дополняющим статью изображениям;
— Не нужен иконкам списков, декоративным иконкам вроде телефона рядом с номером телефона или конверта рядом с адресом электронной почты, декоративным изображениям и картинкам с подписями;
— В этом случае атрибут alt оставляйте пустым;
— Для тега svg добавляйте атрибут aria-hidden="true";
— Альтернативный текст к картинке должен кратко описывать изображение. Например: «Люди сидят на диванчиках и работают за ноутбуками»;
— Желательно уложиться в 80 символов, использовать простые предложения, начинать с заглавной буквы и не ставить точку в конце, не упоминать роль элемента: изображение, графика, иконка;
— Можно указать категорию изображения: фотография, логотип, скриншот.

#accessibility #image

В Сбербанке подготовили гайд о двух адаптированных вариантах языка: ясном и простом.

— Они нужны людям, которым сложно читать и понимать обычные тексты;
— Понятен текст или нет, нельзя судить по себе. Все читатели разные по возрасту, образованию, жизненному опыту, интеллекту;
— Ясный язык — адаптированный национальный язык для людей с трудностями восприятия информации. Как правило, нужен для передачи информации, важной для обеспечения безопасности или расширения доступности;
— Он нужен для людей с недостаточно развитыми навыками чтения и понимания прочитанного: а) с ментальной инвалидностью; б) особенностями интеллектуального и эмоционального развития; в) возрастными нарушениями; г) иностранцев;
— Использовать его на всякий случай не стоит: писать на нём непросто и аудитории, понимающей простой язык, он может показаться слишком упрощённым;
— Простой язык — адаптированный язык для более массовой аудитории, коммуникации всех со всеми на любые темы;
— Например, он может помочь учащимся старших классов при вступлении во взрослую жизнь, когда нужно разобраться в условиях заключаемых договоров;
— Общие правила: 1) Ориентироваться на потребности и особенности читателя; 2) Учитывать его картину мира; 3) Не использовать абстрактные понятия, безличные конструкции, узкую терминологию, иностранные и многозначные слова, аббревиатуры;
— Также в гайде: как написать и проиллюстрировать текст на простом и ясном языках, практика применения, рекомендации команде и организациям.

#accessibility #writing

Стас Мельников написал о некоторых паттернах, повышающих доступность сайтов.

— Автофокус — автоматическая фокусировка на первом поле, которое пользователь должен заполнить в форме;
— Если главная задача страницы — заполнение формы, автофокус помогает пользователям сразу ей заняться. Особенно полезно тем, кто использует только клавиатуру или скринридер. Не нужно проходить через шапку и навигацию страницы;
— Но важно учитывать контекст. Если незрячий пользователь перешёл к форме со стороннего ресурса, скорее всего, он захочет изучить, куда попал и прочитать хотя бы шапку;
— Skip link — ссылка «Перейти к основному содержимому» — самый первый элемент страницы, отображается тем, кто для перемещения по странице использует клавишу Tab или скринридер, позволяет пропустить шапку с навигацией и перейти к основному содержимому страницы;
— Кнопка «Наверх» — ссылка, которая приводит в меню, аналог клавиши PageUp. С её помощью удобно просматривать одну страницу за другой;
— Но важно, чтобы в коде она располагалась в конце блока с основным содержимым страницы.

#accessibility #navigation

Пользователь Хабра Guren302 написал о доступности игр.

— Добавьте субтитры. В кино у них есть стандарты, облегчающие чтение: определённый формат (хорошо считываемый, а не в стиль того, что на экране), порционная подача, строки не должны заканчиваться предлогами и союзами, отображение от 1 до 7 секунд на экране (зависит от количества символов и скорости произнесения реплики);
— Для отображения на больших и маленьких экранах текст должен масштабироваться, а фон титров — меняться;
— SDH (Subtitles for the Deaf and Hard of hearing) — самые полные субтитры, включающие описание важных звуков (стук в дверь, пронзительный крик);
— Нужно больше визуальной индикации того, что на экране: шаги, стрельба (из чего противник стреляет), звенящий рядом сундук, фразы говорящих рядом персонажей (в Cyberpunk 2077 отображаются над их головами, но не хватает фраз тех, кто говорит вне поля видимости, чтобы можно было к ним повернуться);
— В Metro Exodus можно понять, откуда и с какого расстояния нападает противник («Носач: атакует на 2 часа, 15 метров»);
— Чем больше ползунков настройки звука, тем лучше (хороший пример — Fortnite);
— Озвучивайте меню со всеми пунктами и их описанием. Apex Legends озвучивает текстовый чат;
— Дубляж тоже важен, даже если озвучка не самая качественная;
— Самая крутая фича, которая всё никак не распространится в играх, — аудиодескрипция (тифлокомментарии). Только у Mortal Kombat 1 есть полная аудиодескрипция, включая фаталити;
— Используйте пространственный звук. Идея подключать наушники к геймпаду — одна из лучших фич, придуманных в прошлом десятилетии;
— Для людей с цветовой слепотой добавьте цветовые фильтры. Также можно изначально не использовать красный и зелёный цвет в ответственные моменты геймплея;
— Дайте возможность пропускать QTE (Quick Time Events) или проходить их нажатием одной кнопки или её зажатием;
— Нужно свободное переназначение кнопок.

#accessibility #game

В Яндексе опубликовали исследование настроек доступности, которые включают пользователи мобильного Яндекс Браузера (iOS и Android) в России.

— 51% пользователей (более 20 млн) используют хотя бы одну системную настройку доступности, чтобы адаптировать телефон под свои нужды;
— Зрение: размер текста (35% изменили размер, 28% — увеличили), тёмная тема (27%), экран вслух, чтобы прослушать выделенный отрывок текста или весь экран (6% на iOS), отключение анимации (5% на Android), высокий контраст дисплея (2%), коррекция цвета (1% на Android), скринридер (0,02%), инверсия цвета (0,02%);
— Слух: монозвук, чтобы соединить два канала звучания и подавать их в оба наушника (3%), субтитры (2%), подключение слухового аппарата (0,1% на Android);
— Мобильность (при опорно-двигательных нарушениях): отключение функции встряхивания для отмены (5% на iOS), автоматическое нажатие, чтобы автоматически нажимать, когда курсор какое-то время неподвижен (0,5% на Android);
— Пользователи могут включать эти настройки из-за ситуативных, временных (когда человек заболел) или постоянных ограничений. В исследовании есть примеры таких ограничений, из-за которых люди включают разные настройки доступности.

#accessibility