en<able> design - о дизайне и доступности
751 subscribers
126 photos
4 videos
4 files
88 links
О дизайне с фокусом на цифровую доступность

По всем вопросам @anzhelikagerman
Download Telegram
Этим постом Яндекс Инклюзии я хочу возобновить ведение канала. Сегодня день не для торжественных поздравлений, а для напоминания, почему мы все здесь - улучшить цифровую доступность, насколько возможно в наших силах.

Накопила я так много материалов по дизайну в a11y, ai+a11y, что собираю их все на своем сайте. Опубликую ссылку на следующей неделе.

Здесь будут небольшие изменения, много будет и про дизайн в целом. Очень хочется делиться, хочется профессиональной поддержки, споров и всего такого. Как видите, текст написан не ии ))
12👍2
Также я бы очень хотела поддержать проект моей дорогой Светы Бондаренко @allyinforu. Все, кто знают Свету @bonnysveta, удивляются ее юмору, упорству, храбрости и невероятной экспертизе.

Сейчас сделаю перепост канала Ally, почитайте, может вам захочется внести какой-то ресурс, которого мы не знаем, все предложения очень велком 💜
3
Forwarded from allyinfo.ru
Привет!
Рада сообщить о долгожданном запуске проекта Allyinfo!

Allyinfo — это каталог, где мы собрали всё самое важное и полезное о том, как сделать интернет доступным для каждого. Здесь вы найдёте материалы, которые помогут создавать сайты и приложения, удобные для всех пользователей, независимо от их возможностей.

https://allyinfo.ru

У нас есть специальная форма «Предложить материал». Если вы нашли полезную статью, написали руководство или знаете интересный ресурс по доступности — поделитесь им с сообществом! Вместе мы сможем собрать самую полную и полезную библиотеку материалов по цифровой доступности.
13
Всем привет! 5 апреля был день рождения у Леры Курмак 💜

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

Желаю тебе много сил, любви и поддержки твоих людей 💜

Поздравить Леру и почитать ее пост про смерть, инклюзию и принятие себя - тык
17
Субтитры, «Очень странные дела» и D&D

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

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

За субтитрами SDH (субтитры для глухих и слабослышащих) к сериалу «Очень странные дела» стоит Джефф Т., который придумал «[eldritch thrumming]» - [потустороннее гудение].

[Потустороннее гудение] - хороший субтитр. Слово eldritch — из словаря D&D и старой готики: что-то потустороннее, древнее и угрожающее. Джефф вставил его как пасхалку: это ещё и название заклинания чернокнижника. Звук сразу обретает характер существа.


[Музыка] - плохой субтитр: «Музыка» не передаёт ничего: ни жанра, ни интенсивности, ни эмоции. Глухой зритель лишается контекста, который слышащий получает автоматически. Звуковые эффекты создают напряжение, страх, атмосферу. Заменять их общим словом — всё равно что убрать саундтрек из фильма хоррора, который решает все )


Для дизайнеров важное про паттерны цифровой доступности: каждый звук в интерфейсе несёт смысл — и если пользователь его не слышит, этот смысл должен быть передан визуально:

✦ Субтитры включены по умолчанию, а не спрятаны в настройках.

✦ Настраиваемые параметры: шрифт, размер, цвет текста и фона — пользователь сам выбирает под своё зрение.

✦ Визуальные уведомления вместо звука: popups не исчезают сами собой.

✦ Пропущенные события не исчезают сами: бейджи и счётчики остаются видны до явного подтверждения пользователем.

✦ Ошибка, успех, загрузка передаётся цветом, иконкой и текстом одновременно.

✦ Текст состояния конкретный: не «Ошибка», а «Не удалось отправить сообщение — проверьте соединение» (актуалочка подъехала).

Alt текст: Скриншот из «Очень странных дел»: тёмно-синяя сцена, в центре кадра — Векна, гуманоидная фигура с кожей, покрытой прожилками, окружённая длинными органическими щупальцами. Внизу экрана белый субтитр на чёрном фоне: [tentacles squelching wetly] [щупальца хлюпают мокро] — пример профессионального SDH-субтитра, описывающего звук, а не просто называющего его.
❤‍🔥943🕊1
Новые глаза, старый мозг. 

Прочла книгу «Мозг. Ваша личная история». А я же все послеживаю за Neuralink и одна история меня заинтересовала. 

Майк Мэй ослеп в 3 года после химического ожога. Майк был великолепным лыжником, ориентировался на склонах по звуковым сигналам, вот это что-то на нереальном! 

В 2000 году, в 46 лет, ему пересадили роговицу — и глаза физически начали видеть. Счастье? Еще бы, если бы не одно НО. Он видел свет, цвет, движение — но не мог читать лица, не понимал глубину пространства, не различал трёхмерные объекты. Лицо жены он узнавал только по голосу. Мозг просто не знал, что делать с сигналами, которые вдруг начали поступать. Это называется «визуальная агнозия». 

И вот тут становится интересно в контексте Нейралинка. Их имплант Blindsight не восстанавливает глаза, а стимулирует зрительную кору электрическими сигналами. Ставка — на нейропластичность. Мозг адаптируется. Пользователи будут тренироваться с устройством, постепенно обучая зрительную кору интерпретировать искусственные сигналы.

И возможно, этот имплант не даст Майку узнать лицо жены, но он может дать кому-то другому увидеть лицо своего ребенка. Так работает доступность: не сразу, не для всех, не идеально. Но каждый шаг сдвигает границу возможного. Пафосновато для пятницы, но как есть ))

Книгу очень рекомендую, читается легко и интересно )

Alt Коллаж из четырёх изображений: тепловизионный снимок дома, цветок подсолнуха в ультрафиолете, визуализация мозговой активности и крупный план человеческих глаз
9🔥31❤‍🔥1👍1
Цифровая доступность в космосе

Поздравляю всех нас, мы стали свидетелями миссии Artemis II! Ну я как обычно: дизайн, ux/ui и доступность, а последняя в космосе очень важна! Начала сегодня искать информацию и моя челюсть немного отвила, ну либо это последствие куличей ))

Давайте представим: мы — астронавты, наш экипаж взлетает, что видим перед собой? Сенсорные дисплеи! При старте и посадке экипаж лежит под углом примерно 70° к вертикали. То есть мы «сидим» лёжа ) Экраны заточены именно под этот угол — расстояние до глаз, наклон, размер шрифта. Кстати, догадаетесь, почему на экранах нет стрелочек? Потому что в невесомости нет низа, стрелка теряет смысл.

А что если дисплей разобьётся или просто откажет? Давайте сравним 3 подхода, тоже полезно для дизайнеров.

На нашем Союзе сотни тумблеров, кнопок и аналоговых индикаторов, минимум дисплеев. Цена: сложно учить, сложно обновлять, интерфейс не менялся десятилетиями. Зато летает безаварийно уже 60 лет.

Dragon от SpaceXмаксимальная цифровизация. Три сенсорных экрана. Да, есть тройное резервирование экранов и аварийная физическая панель. Цена: более высокий риск зависимости от одного типа интерфейса, зато легко обновлять ПО и переучивать экипаж.

А вот Orion (который сейчас облетел Луну) — это гибридная модель: взяли и дисплеи, и физичесское управление. Тумблер работает при разгерметизации, при пожаре. Плюс астронавты годами нарабатывали мышечную память на Shuttle и Союзе.

Кстати о руках — мы же в перчатках, руки не слушаются, и случайное нажатие на что-то критическое и уже не крикнем «Поехали»! Поэтому опасные кнопки разнесены или спрятаны за откидными крышками. Плюс зона касания - 19×19 мм на сенсорном экране. Что там по нашим, дай Бог, (ох уж эти совместные День космонавтики и Пасха) 44×44? Я уже молчу про размер текста в кнопках 11 )) Таких не берут в космонавты ))

Ура, мы в космосе! Скафандры сняты, капсула вышла на орбиту, переходим к штатной работе. Но мы в невесомости и наш организм перераспределил жидкость наверх, отек, глазное яблоко деформировалось под давлением жидкости, и у нас теперь дальнозоркость. Для дизайнера это означает следующее: должно быть предусмотрено масштабирование текста. Обычно в цифровой доступности — рисуем макеты минимум 150%.

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

На МКС 16 смен дня и ночи за сутки — солнце встаёт каждые 45 минут. Субъективное ощущение времени исчезает. Поэтому бортовые дисплеи меняют цветовую температуру по расписанию экипажа: перед сном убирают синий спектр, ночью уходят в dim-режим с красным фильтром. Это называется circadian lighting adaptation. Звучит как фича )

Вывод простой: проектируем как будто наш пользователь — астронавт. В перчатках, с тремором, с дальнозоркостью, в 3 часа ночи по непонятному часовому поясу. Если интерфейс работает для него — сработает для всех )

Следующая часть про цвет, контраст и важность дизайн-системы завтра )
❤‍🔥147🔥7👍1🎉1👌1🕊1🫡1
AI и доступность

Делаем блиц-интервью про AI и доступность. Задаем одинаковые вопросы и получаем разные ответы )

Наш первый гость — Миша Рубанов @RubanovMobile, разработчик, рассказывает о доступности так, что ты точно начнешь ей интересоваться ) Миша, спасибо и ждем обновления книги о доступности 💙

Ты пробовал использовать Claude или ChatGPT со скринридером или с клавиатуры — как это работает на практике?

— Не пробовал.

Ты знаешь кейсы, где AI улучшил доступность продукта?

— Не слышал про такие кейсы.

Есть ли риск, что AI-инструменты для доступности обучены на данных, которые не отражают реальный опыт людей с ограниченными по здоровью? Что должно измениться в том, как мы обучаем модели, чтобы доступность была в них по умолчанию?

— Я не вижу каких-то особых проблем. По моему опыту AI достаточно много знает про доступность и делает что надо, если ты попросишь его об этом.

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

При этом для AI важно уметь «видеть» что получилось в результате, с этим проблема, потому что почти нет инструментов, которые бы дали ему описание, которое озвучивается для незрячего человека. Главная надежда мобилки вот на этот инструмент: сейчас они прикручивают визуализацию к Preview, может быть и до текстого описания доберутся AccessibilitySnapshot.

70% новых приложений создаётся на low-code и no-code платформах. Люди без технической базы делают продукты для миллионов. AI научит их паттернам доступности?

— Увы, AI никого ничему не научит. Можно сказать, что он ленив: обучен на всех текстах, но не пытается показать все свои знания. Поэтому если человек не знает про дополнительные требования по доступности, то и AI сам их не начнет использовать.

С другой стороны, поверх AI появляются разные скилы и инструменты, в них уже могут быть включены нужные требования. Например, популярный frontend-design доступность упоминает Frontend Design на Github

В России активно пользуются технологиями с Ai — зарубежные скринридеры, программы по типу Open your eyes, есть ли надежда, что подобные сервисы будут разрабатываться российскими разработчиками?

— Сложно сказать. С одной стороны в России будет явный запрос на помощь и реабилитацию людей, с другой стороны вводится огромное количество ограничений. Если ничего не делать, то ничего само не появится. В целом я не в России уже несколько лет, поэтому сложно ответить как-то поточнее

___

en<able> - о дизайне в A11y | Наши статьи на VC
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥21👌1
Стоячий стол и доступность

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

А вообще таким столам уже больше 600 лет. Я сразу побежала спросить у Claude — и он рассказал, что да Винчи писал «Мону Лизу» за таким столом и говорил, что работа стоя помогает мыслить свободнее. Чарльз Диккенс, Хемингуэй, Черчилль — все работали стоя. Томас Джефферсон первым придумал делать такие столы регулируемыми по высоте, а уже в 80-х к ним подвели электричество.

Стол придумали ради продуктивности. Но он помог мне после операции. Помогает людям с болью в спине, беременным, людям на колясках, тем, кто просто не может долго сидеть.

Это и есть универсальный дизайн в действии — когда решение, созданное для одной цели, оказывается полезным для всех 💙

___

en<able> - о дизайне в A11y
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥6❤‍🔥3👍1👌1
👩‍💻 На этой неделе провела консультацию для команды X5 Медиа (Food.ru) — разбирали, как встроить цифровую доступность в процесс проектирования с самого начала.

Ребята задавали много вопросов по ходу и после консультации. Это именно тот знак, что тема зашла. Честное слово, тишина после лекции — самое неприятное ))

Для консультации у меня подготовлен чек-лист для дизайнеров — что заложить сразу, чтобы не переделывать на этапе разработки. Контраст, цвета OKLCH (так жду, когда Figma его введёт), типографика, масштабируемость, alt-тексты, фокус, формы, навигация и не только.

Плагин Include для Figma — как расставлять аннотации доступности прямо в макете и передавать разработчику всё по красоте.


Если ваша команда хочет разобраться — пишите, обсудим всё-всё.

___

en<able> - о дизайне в A11y
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥22
У нас продолжаются блиц-интервью про AI и доступность. Задаем одинаковые вопросы и получаем разные ответы )

Дима Бороухин @dmboro — в прошлом дизайнер и веб-разработчик. После потери зрения объединил свои технические знания с личным опытом и стал консультантом по цифровой доступности.

Ты пробовал использовать Claude или ChatGPT со скринридером или с клавиатуры — как это работает на практике?

Я пробовал ChatGPT, однако по удобству взаимодействия мне больше понравился Gemini. Его интерфейс вполне доступен: элементы управления имеют корректные роли, имена и состояния, что позволяет скринридеру считывать структуру страницы.

В своей работе я активно применяю AI для подготовки HTML-страниц для презентаций — чтобы показывать командам типичные проблемы доступности. Грамотный промпт позволяет сгенерировать страницу, где один элемент оформлен эталонным кодом, а остальные имеют аналогичный дизайн, но содержат критические ошибки — например, невозможность установить фокус. Визуально всё выглядит одинаково, но при взаимодействии через клавиатуру или скринридер различия становятся очевидными. Также я использую AI для подбора цветовых схем и помощи в написании CSS-кода.

— Ты знаешь кейсы, где AI улучшил доступность продукта? или хотя бы часть?

Комплексных кейсов, где AI улучшил доступность продукта, в моей практике не встречалось. Вижу нейросети лишь в точечных задачах — как в примере с описанием изображений, о котором расскажу дальше.

— Есть ли риск, что AI-инструменты для доступности обучены на данных, которые не отражают реальный опыт людей с ограниченными по здоровью?

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

Пример из жизни: недавно я просил AI создать примеры недоступных кнопок. Модель предположила, что «поломанная» кнопка будет полностью неработоспособна для скринридера. Однако на практике скринридер NVDA умеет эмулировать нажатие даже там, где код реагирует только на клик мыши. В итоге для пользователя скринридера кнопка может сработать, а для человека, использующего только клавиатуру, она останется недоступной.

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

— 70% новых приложений создаётся на low-code и no-code платформах. Люди без технической базы делают продукты для миллионов. AI научит их паттернам доступности?

Теоретически — может, но на практике всё зависит от того, как сформулирован запрос. Если создатель продукта не осведомлен о принципах доступности, он просто не включит эти требования в задачу для AI. А без явного запроса модель проигнорирует эти нюансы ради скорости разработки.
Важно помнить: доступность — это не только формальное соответствие ГОСТу или WCAG. Прежде всего это про пользовательский опыт. Можно создать приложение, которое формально пройдет все автоматизированные тесты, но при реальном использовании окажется неудобным.

— В России активно пользуются технологиями с Ai — зарубежные скринридеры, программы по типу Open your eyes, есть ли надежда, что подобные сервисы будут разрабатываться российскими разработчиками?

Это уже реальность. Я постоянно пользуюсь отечественными решениями. Например, «Умная камера» Яндекса — незаменимая вещь в быту: она помогает отличить бутылку молока от кефира в холодильнике, когда упаковки идентичны.

Недавно я показывал зарубежным коллегам функцию описания изображений в Яндекс Браузере. В одном онлайн-магазине одежды вместо внятных alt-текстов были маркетинговые названия коллекций. Нейросеть Яндекса точно описала суть: состав комплекта, цвета, фасон. Это тот случай, когда AI исправляет ошибки контента «на лету». Так что — большой респект и спасибо команде инклюзии Яндекса за их работу!
🔥53❤‍🔥2👏2
Дорогие мои, кто может помочь с реддитом и скриптом на питоне? Никак он не дает мне создать скрипт у себя.

Я хочу сделать исследование аудитории, у реддит очень большое, а, главное, живое коммьюнити R/Blinds, R/deaf, R/ADHD и другие. Но нужно обработать вручную больше 1000 постов и это проблематично. Хочу сделать связку скрипт → док с постами → анализ на Claude.

Знаю, что API у них платный, но есть бесплатный базовый доступ, он даёт ~100 запросов в минуту. Пробовала через Pushshift - никак.

Может есть у кого-то возможность создать скрипт у себя и дать мне выгрузку постов? Или может знает, какие есть еще способы победить реддит?
🔥31
Хочу сильно-сильно поблагодарить Антона @antonkulikov!

Я затеяла исследование реального опыта людей с нарушениями слуха, зрения и когнитивными особенностями через посты на Reddit. Честно, не ожидала что всё получится так быстро. Антон, от всей души: спасибо. Впишу тебя в проект как человека, благодаря которому это случилось 💙

Не могу не рассказать о нём. Антон руководит финтех-командой в платформе для локализации Smartcat в США. Захожу я значит почитать его канал @tobeproduct — а там пост про моего любимого Олега Пащенко, а там про продукт, а там про ИИ, Жюль Верн, Стругацкие, классическая русская литература, разработка приложений, тут же проект для вайбкодинга — и понимаю: у меня новый канал для закрепа! Вот тут навигация по каналу Антона.

Пишу от всей души и на одном дыхании, потому что поражена, как много крутых людей здесь. Спасибо, что вы есть 🙏
Please open Telegram to view this post
VIEW IN TELEGRAM
👍74🔥4❤‍🔥1
Все уже попробовали Claude Design?

А пока я загружаю дизайн-систему туда, напишу про заявленную доступность Claude:

• Аудит компонентов на соответствие WCAG 2.1 / 2.2 (A, AA, AAA) — контрастность, фокус, таб-порядок, размеры тач-таргетов

• Проверка и генерация корректной ARIA-разметки (roles, states, properties, live regions)

• Проверка работы с клавиатурой и фокуса

• Анализ семантики HTML, heading hierarchy, landmark-регионов

• Проверка alt-текстов

• Генерация A11y-документации для компонентов дизайн-системы (do's/don'ts, примеры использования)

Есть набор Accessibility Agents — специализированных агентов для Claude Code, GitHub Copilot и Claude Desktop, которые проверяют код на соответствие WCAG 2.2 AA, покрывают i18n/RTL, дата-визуализации, email, медиа, web components

Пока сама не тестировала, попробую попозже )
👍62
Агима как всегда прекрасны ))
1
Forwarded from AGIMA.design
Ну что, все уже убили Figma за выходные и переехали на Claude Design, или вы вменяемые?
🤣9
Новый виток A11y в Apple?

Джон Тернус — новый CEO Apple, а также тот человек, который в качестве дипломного проекта в University of Pennsylvania разработал механическую руку для кормления, управляемую с помощью движений головы. То есть пользователь, не имеющий возможности двигать конечностями, мог самостоятельно есть — управление шло через head-tracking без участия рук.

Также стоит вспомнить, что именно под его руководством вышли
Apple Watch с Double Tap — классический curb cut effect: жестовое управление изначально появилось в 2021 году как AssistiveTouch, фича для людей с особенностями верхних конечностей, а позже та же технология стала фичей для всех. AirPods Pro с hearing aid — наушники массового рынка, работающие как слуховой аппарат. Vision Pro, где eye-tracking — основной интерфейс: формально это универсальный дизайн, но выросший из accessibility-подхода )

И это уже другой уровень доступности — встройка в железо ) Кайф? Кайф!

Alt: фотография Джона Тёрнуса на сцене Apple-презентации, за ним крупным планом чипы и схемы.

___

en<able> - о дизайне в A11y | Наши статьи на VC
🔥532