Accessibility для чайников

 Публичный пост
25 сентября 2024  2391

О чем тут? Что такое accessibility?

Коротко расскажу, что это такое модное, кому это пригодится в работе, для кого это делается и как это делать. Может быть полезно разработчикам, дизайнерам, тестировщикам и всем интересующимся. Я сама accessibility менеджер с некоторым опытом фронтенда, постараюсь объяснить без особых технических подробностей, чтобы всем было понятно. Какие-то вещи буду немного упрощать и обобщать, пожертвовав научным подходом. Accessibility и disabilities переводить не буду, мне не очень нравится их перевод на русский.

В двух словах, задача accessibility - сделать проект доступным для всех. Если у вас сайт по продаже крокодилов, то их могут купить люди, которые не видят или плохо видят, не слышат, не могут пользоваться руками и т.д. и т.п.

Что это за люди? Сколько их? Как они вообще пользуются сайтами и приложениями?

В мире больше 2 миллиардов людей с разного рода disabilities, и с каждым годом их становится больше. Человечество стареет, медицина и технологии развиваются, войны продолжаются.

Люди, которые не видят, используют программу, которая озвучивает всё, что есть на сайте – скринридер. Изредка (очень дорого) - дисплей Брайля, штука для вывода и ввода шрифтом Брайля.

Люди с очень плохим зрением ставят себе огромные мониторы, садятся очень близко к ним и включают экранную лупу. В телефоне ставят максимальный размер шрифта. Весь экран в итоге будет занимать шапка сайта, её первые несколько пунктов. Могут использовать озвучку (скринридер) в помощь.

Люди без слуха включают субтитры в видео.

Люди, у которых тремор в руках, ампутированы руки, имеют проблемы с движениями в целом (ДЦП, БАС, который был у Хокинга и пр.) могут использовать разные технологии. Самое простое - пользоваться клавиатурой вместо мыши, но также могут управлять взглядом, специальными кнопками или джойстиками, голосовым управлением.

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

Окей, у них есть инструменты, они ими пользуются, в чем проблема?

Возьмите обычные проблемы с ux и умножьте их на 1000. Не подписаны кнопки, на них нельзя нажать, серый текст на белом фоне не виден, текст не влезает на экран и тд и тп.

Так выглядит для людей с disabilities весь интернет. Я не шучу, 96% сайтов.

Что могу сделать я, чтобы они могли пользоваться моим продуктом?

Полагаю, большинство читателей здесь люди среднего возраста, много проводящие времени сидя. И не раз слышали от врачей, что нет волшебной таблетки от боли в спине, надо больше двигаться, заниматься спортом, правильно питаться. Причем не один спринт и даже не один квартал. Более того, если муж или жена будут при этом тащить вас на диванчик с чипсами - вам будет в сто раз сложнее.

С доступностью то же самое - чтобы она имела смысл, нужно включить ее в процесс разработки, причем все участники (менеджеры, дизайнеры, тестировщики и тд) должны понимать, зачем это нужно.

С чего начать?

Моя горячая рекомендация - запустить скринридер (они встроены во все телефоны Apple и все популярные Android и попытаться что-то сделать самим. Запустите axe в DevTools, получите общее представление о фронте работ. Выберите что-то маленькое и простое и попробуйте внедрить на всех этапах (макеты, разработка, тестирование).

Связанные посты
68 комментариев 👇

Ощущение, что мне дали понюхать пробку от хорошего дорогого вина и даже дали прочитали этикетку. А потом резко унесли бутылку(

Начало хорошее, жду продолжения.

  Развернуть 1 комментарий

@cat, спасибо. Мне сложно за раз много написать, я даже этот пост несколько дней писала) Но постараюсь написать ещё

  Развернуть 1 комментарий

@ashegol, всё жду от мироздания accessibility tools для таких как мы!

  Развернуть 1 комментарий

@smallkaa, chat gpt и прочие copilot же! Если, конечно, их не запретят луддиты.

  Развернуть 1 комментарий
🕵️ Юзер скрыл свои комментарии от публичного просмотра...
🕵️ Юзер скрыл свои комментарии от публичного просмотра...

Тут, наверное, еще стоит добавить, что это нужно далеко не всегда и прям далеко не везде. Тут большинство все же в бизнесе работает, а бизнес зарабатывает деньги, а не занимается благотворительностью.

Затраты на внедрение Accessibility должны окупиться либо в виде денег, либо в виде измеримого влияния на восприятие бренда.

Если сервисом с MAU в 50K пользуется дай бог 50 пользователей с disabilities, которые требуют адаптации интерфейса, очевидно, заниматься этим никто не будет. Просто потому что ресурсов это сожрет больше, чем принесет профита.

Поэтому Accessibility, имхо, — это больше тема либо для соцзначимых ресурсов (типа того же сайта BBC или Госуслуг), либо где значимая доля пользователей — люди с disabilities.

Есть еще один вариант — когда у компании бесконечное количество денег и она за счет Accessibility пиарится и выстраивает маркетинговую коммуникацию (за примером далеко не ходим, это Apple).

  Развернуть 1 комментарий

@rdtrifonov, думаю, не только для соцзначимых. В большом B2C проценты MAU — это тысячи заказов, а в B2B без доступности нельзя продавать госучреждениям или глобальным корпорациям.

Плюс accessibility полезна и «простым» пользователям: поддержав высокий контраст, проще сделать тёмную тему; если вёрстка не сломается с большим шрифтом — не сломается и на маленьких экранах.

  Развернуть 1 комментарий

@pakutin, если в большом B2C это имеет смысл финансово, вопросов нет.

Я скорее про те случаи, когда accessibility делают в угоду трендам, как когда-то делали темную тему и интерфейсы с глассморфизмом.

  Развернуть 1 комментарий

@rdtrifonov, согласен, что важна и степень поддержки — инвестировать в скринридеры не всегда оправдано, но 8% мужчин-дальтоников будет у любого сервиса (навигация, трейдинг, аналитика), где цвет элементов почему-то важен :)

  Развернуть 1 комментарий

@rdtrifonov,

У меня, конечно, профдеформация, но я считаю, что accessiblity это база. Надо потратить ресурсы на образование всех участников, но дальше просто ехать по уже выстроенной лыжне. Не существует никаких инвестиций в скринридеры, например. Семантическая верстка закроет 98% проблем этих пользователей, плюс это полезно для SEO, плюс полезно для тестирования.

В общем, мне кажется, что это утверждение из серии, тестирование нужно только корпорациям, у маленьких команд багов нет. Конечно, в каких-то частных случаях это может быть справедливо, но как система?

  Развернуть 1 комментарий

@ashegol,

Надо потратить ресурсы на образование всех участников, но дальше просто ехать по уже выстроенной лыжне

Кому надо? :)

Бизнесу надо деньги зарабатывать. Как заработать на accessibility, если мы, например, знаем, что у нас таких пользователей в лучшем случае доли процента?

А если никак, то зачем этим заниматься?

  Развернуть 1 комментарий

@rdtrifonov, если уж говорить про бизнес, то там кроме MAU важен ещё и retention. Даже те же 50 пользователей с высоким ретеншном это уже может быть ощутимо. А учитывая что все конкуренты (почти) мыслят так же, то добиться отличного ретеншна от этих условным 50 человек будет не сложно. Вы можете оказаться единственным доступным для них вариантом.

  Развернуть 1 комментарий

@rdtrifonov, Популярное заблуждение про то, что доступность — это про социальные проекты для 3 человек. Такое мнение у многих из-за недостатка данных, и это всегда очень сложно опровергать:C

Тут такая особенность. Компаниям/дизайнерам/продактам сложно узнать свою аудиторию (я про вообще всю аудиторию) настолько хорошо, чтобы понимать весь контекст людей, все сложности и потребности.

Нет метрик, показывающих необходимость улучшения доступности. И нет простых способов узнать, какому количеству не-disabled людей помогает доступность.

Есть только разные косвенные подтверждения: примеры других компаний, статьи, разные точечные исследования всяких организаций, и фидбэк юзеров в твоём продукте. Но это не показательно и плохо убеждает

  Развернуть 1 комментарий

@vas_dudin,

социальные проекты для 3 человек

А можешь конкретно показать, где я сказал про социальные проекты на 3 человек?

Госуслуги — соцзначимый проект с аудиторией больше 50 млн человек, и там понятно, зачем нужна доступность.

чтобы понимать весь контекст людей, все сложности и потребности.

А зачем понимать прям весь контекст, все сложности и потребности?

Если ты не корпорация и у тебя нет достаточно бюджета для проработки всех кейсов, тебе эта информация все равно до лампочки, потому что будет жесткая приоритизация при разработке продукта, и о людях с disabilities вы вспомните в лучшем случае в самый последний момент, а в худшем — никогда.

Опять же, за исключением соцзначимых проектов, где с самого начала подразумевается, что продуктом будет пользоваться аудитория с крайне широким спектром параметров.

Ну или если есть требования закона, да.

  Развернуть 1 комментарий

@rdtrifonov,

А зачем понимать прям весь контекст, все сложности и потребности?

Чтобы показать, что ЦА улучшения доступности намного шире, чем кажется. И что даже не очень большие компании могут на этом зарабатывать.
Но это нарисёрчить почти невозможно и не требуется. Поэтому «продать» бизнесу эту затею довольно сложно.

Проиллюстрирую очень условным примером.
Для 10 людей с инвалидностью по зрению я делаю более контрастные цвета на сайте. Ожидая, что поможет только 10 людям.
А в итоге это улучшает юзабилити ещё для 30 людей с ослабленным зрением, 40 людей с ноутбуками в солнечный день и 50 людей, у которых дешёвые дисплеи

  Развернуть 1 комментарий
🕵️ Юзер скрыл свои комментарии от публичного просмотра...

@orbit, И такое иногда бывает, да=)
Но в отличии от города, в вебе довольно просто, дёшево и без переучиваниия можно пофиксить где-то процентов 70 всех проблем просто соблюдая базовые правила вёрстки, дизайна и райтинга

  Развернуть 1 комментарий
Ilya Reshetnikov Accessibility Consultant & Software Developer 25 сентября 2024

Привет, Коллега. 👋 Спасибо за пост. Рад, что вопрос доступности был поднят и в клубе. Есть ли планы продолжить раскрывать тему?

p.s. Было бы здорово, если бы в постах про доступность добавлялись alt-тексты к изображениям. Это поможет сделать их еще более доступными для всех!

  Развернуть 1 комментарий

@devxom, а я не нашла, где их добавить 🤔 по умолчанию стоит пустой альт

  Развернуть 1 комментарий

@ashegol, Когда добавляешь изображение если в квадратные скобки вписать текст он станет alt-текстом.

Пример использование Alt текстов в разметке
Пример использование Alt текстов в разметке

  Развернуть 1 комментарий

@devxom, только вот этот alt тут в Клубе используется чаще для каких-нибудь шуточек, дополняющих картинку (он выводится под картинкой), а не описывающих/заменяющих саму картинку.

  Развернуть 1 комментарий

Такое ощущение, что подавляющее количество сайтов сделано людьми с ампутированными руками или частью межушного ганглия. Ими пользоваться невозможно примерно всем, независимо от того, есть у вас проблемы или нет :)

  Развернуть 1 комментарий
🕵️ Юзер скрыл свои комментарии от публичного просмотра...
Anton Lebedevich Data Engineer | Machine Learning Engineer | AB-testing 30 сентября 2024

C одной стороны, заметная доля айтишников к какому-то возрасту будет так или иначе побита RSI. С другой стороны, изменить они в этот момент уже ничего не смогут, руки-то отвалились. Поэтому вложение в accessibility можно воспринимать как откладывание на пенсию

  Развернуть 1 комментарий

Считаю тема accessibility чайников не раскрыта.

Но если серьёзно отличный тизер, жду продолжения!

  Развернуть 1 комментарий

@alexbudni, спасибо! Вот, кстати, какой-то интересный чайник нагуглился

  Развернуть 1 комментарий

больше 2 миллиардов

получается, каждый четвертый человек на планете инвалид?

  Развернуть 1 комментарий

@Belegor, "инвалид" (во-первых так сейчас стараются не говорить) это не обязательно человек без руки или в кресле-каталке. Есть дальтоники, есть ДЦП, есть люди после инсульта, разной степени проблемы со слухом, зрением, моторикой - возрастные, врожденные или травматические.

Если я на сайте делаю шрифт покрупнее, потому что у меня 4к монитор, а разработчик решил что 800пкс по ширине хватит всем, это тоже Accessibility. Только кто-то делает 120% зум, а кто-то – 400%, и когда (не если) при этом начинает разваливаться верстка, это проблема

  Развернуть 1 комментарий

получается, каждый четвертый человек на планете инвалид?

@Belegor Думаю, что нет, это просто маркетинг и манипуляции цифрами. Просто тяжело продать компаниям заботу о сравнительно небольшой группе людей, приходится манипулировать. Примерно по тем же причинам города с трудом перестраиваются под людей с инвалидностями. Так как цель благородная, на такие легкие манипуляции можно закрыть глаза.

@xmaxsmi, пример про зум к дизабилитис мало относится. Необходимость в зуме 120% процентов зависит от кучи факторов, помимо диагностированных проблем со зрением: размер и плотность пикселей монитора/ноутбука, выбранных шрифтов на сайте, дефолтного размера шрифта, как много там важного мелкого текста, даже стола и кресла.

Я могу за одним монитором и с одним столом ставить зум 100% (и получается я не в категории людей с дизабилитис), а на другом мониторе поставить 120% — я вдруг попал в категорию с дизабилитис. Хотя на самом деле в 90% случаев это проблема неумения/нежелания делать adaptive верстку под разные экраны.

  Развернуть 1 комментарий

@cat, > Я могу за одним монитором и с одним столом ставить зум 100% (и получается я не в категории людей с дизабилитис), а на другом мониторе поставить 120% — я вдруг попал в категорию с дизабилитис

Использование зума конечно не делает пользователя disabled, но сам по себе зум это вполне себе accessibility feature. Аналогично Alt Text для картинок и субтитры для видео нужны не только людям с проблемами зрения и слуха, но и например на плохом интернете, разных read it later аппах, в ситуациях когда звуком пользоваться нельзя/не хочется. Таким образом корректная реализация Accessibility в итоге делает продукт лучше для всех - как для людей с особенностями так и для здоровых

  Развернуть 1 комментарий
🕵️ Юзер скрыл свои комментарии от публичного просмотра...

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб