Проверка проекта в AI

На гитхабе дизайнер создал файл A11y.md — готовый контекст, который загружаешь в Claude (или любую другую нейронку) — и она начинает проверять твои макеты по стандартам WCAG 2.2. Дима и Миша рассказывали уже о том, что если не спросить нейронку, то она и не расскажет о доступности, так вот md решает данную проблему. Мне нравится, как этот диз написал: Accessibility is not a feature or an incremental improvement; it is a pre-condition for use. Доступность — это необходимое условие. Как пользоваться, если ты диз? 1. Открыть файл на GitHub A11Y.md из папки docs/en/ 2. Вставить в начало чата с AI «Строго следуй правилам разработки, описанным в файле A11Y.md» 3. Скинуть файл или ссылку на свой проект 4. Готово! Что внутри репозитория: ⚡ Command Center — главный файл с матрицей приоритетов, правилами поведения для AI и протоколом для сложных компонентов. 📚 Support Library — справочная библиотека с готовыми решениями по контрасту, формам, кнопкам, навигации и модалкам. 🛠️ Templates — шаблоны для финальной проверки перед релизом и структурированный лог для фиксации технического долга. 📝 Examples — реальные ошибки доступности из проекта на Figma Make, с конкретными исправлениями, которые предложил A11Y.md в роли автоматического ревьюера. Немного того, что важно для дизайнера: → Контраст текста должен быть 4.5:1, элементов UI — 3:1 → Нельзя передавать состояние только цветом — нужны иконка + текст + цвет → Минимальный размер кнопки — 44×44px → Плейсхолдер не заменяет подпись к полю → Графики обязаны различаться без цвета — текстурами или штриховкой и многое другое Этот файл не научит доступности с нуля, он действует скорее как быстрый фильтр и сверка с WCAG. Конечно, я за то, чтобы изучать A11y глубже )

Accessible Colour Palettes by Furquan Ahmad

Большой набор из более чем 50 гармоничных цветовых палитр для твоего нового проекта. 🌈Скачать палитры🌈 #материалы

Новый виток 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

Все уже попробовали 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 Пока сама не тестировала, попробую попозже )
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
Если Фигма и дальше продолжит с такими вялыми обновлениями (а инвесторы не оч рады, там акции упали в нулину почти после их IPO), то скоро им придёт конец)
А на пятки уже наступают вот такие ребята типа Wonder, которые делают инструмент для дизайнеров и это чувствуется от видоса. Что будет по факту посмотрим, но если они грамотно запустятся и фичи будут реально те, что все просят годами от фигмы, то это может полететь Можно записаться в early access: https://wonder.so/ Что думаете, есть шансы у них?) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
♿ 40-60% интерфейса Moni требует доработки для незрячих пользователей, но большинство проблем не сложные
Незрячий разработчик разобрал доступность web3-проекта Moni. Доступность в финтех и web3 редко рассматривается как обязательная часть архитектуры. Внимание уделяется визуальной составляющей, а сценарии использования без мыши или без экрана остаются вне фокуса. Выяснил: примерно 40-60% интерфейса требует доработки с точки зрения accessibility. Большинство проблем не архитектурно сложные, это вопросы корректного использования aria-атрибутов, логичной структуры заголовков и поддержки клавиатурной навигации. Внутри: – Кнопки без описания: под полем «Check account» должна быть кнопка поиска, но есть элемент "По щелчку" без описания; – Заголовки на каждой строке: неудобно слушать текст, когда каждая строка это заголовок уровня 1 или 2; – Таблицы представлены кнопками: столбцы это кнопки, нет нормальной HTML-таблицы с table, tr, th, td; – Слияние строк без пробелов: «Ethereum$395.790.1 ETH100%+0%», «L117.62%-1.93%», «Smarts244+1»; – Курсор не попадает в модальные окна: после клика по «Manage filters» курсор не переходит к настройкам; – Поиск недоступен с клавиатуры: ввел HYPE, что-то появилось на экране, но с клавиатуры не смог поймать и перейти; – Кнопки навигации без названий: первая и последняя в постраничной навигации неподписанные, лучше «First» и «Last»; – Решения простые: использовать aria-label=«Name» у элементов, tabindex=-1 и .focus в JS для фиксации курсора, разделять блоки h2 и h3 заголовками. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Тред в твиттере по созданию Accessibility интерфейса на основе маштабируемых шрифтов с помощью вариантов.
Плагин «Comprehensive Accessibility Tool» by Adee
Плагин для проверки контрастности, с возможностью смоделировать 8 имитаций дальтоников. 🛋 Скачать плагин 🛋 #plugin
Изображение поста
Тред в твиттере по созданию Accessibility интерфейса на основе маштабируемых шрифтов с помощью вариантов.
Accessible Colour Palettes.
Цветовые палитры были вдохновлены футбольными командами в Лондоне и Манчестере, а также местами в окрестностях Лондона. Открыть в figma 🔗 #Файлы
Изображение поста
Обновил Microsoft 365 Vector Icon Set 2025
Вслед за Microsoft освежил ключевые иконки. Новый дизайн получили: Access, Clipchamp, Defender Antivirus, Excel, Family Safety, Forms, OneDrive, OneNote, Outlook, Planner, Power Platform, PowerPoint, SharePoint и Teams. Старые версии остались скрытыми в файле Figma. Новая иконка: Power Platform. Всего: 51 шт. Формат: SVG, PNG, Figma 🔗 Скачать на Gumroad 🍩 Не получается скачать? Нажмите на пончик и напишите @pptxman. Материалы по теме 🔗 Microsoft 365 Liquid Glass Icon Set 2025 #иконки #figma #gumroad #ссылки #2k25
Изображение поста
Polycom — инструмент для проверки цветового контраста.
Подборка актуальных инструментов для работы с цветом:
🔶 Gradients.app. Подбор цветов и сочетаний по фотографиям, генерация собственных палитр 🔶 Colorsinspo. Помощь с выбором цвета, обучение, вдохновение 🔶 Darker. Простая генерация цветовых оттенков по заданному параметру 🔶 Accessible Palette. Инструмент для экспериментов и создания своей палитры. Здесь используется цветовая модель CIELAB, максимально приближенная к человеческому зрению 🔶 Huemint. Оригинальные цветовые схемы от искусственного интеллекта. Возможность оценить результат на реальных объектах 🔶 IWantHue. Онлайн-генератор с расширенными настройками для подбора цветов и их сочетаний 🔶 Leonardo. Продвинутый инструмент по созданию и аналитике цветовых палитр 🔶 Supa Palette. Возможен импорт готовых палитр и создание своих, исходя из параметров 🔶 Atmos. Можно проверить цвета на доступность по нормам WCAG 2 и WCAG 3, имитировать нарушения зрения, отсматривать взаимосвязи на цветовом круге Сохраняйте себе и делитесь в комментариях своими находками! [Фабрика Дизайна]
Изображение поста
Simple WCAG 2.1 — плагин для проверки цветового контраста.
Изображение поста
Сервис ContrastChecker.com — это онлайн-инструмент для проверки контрастности цветов в соответствии со стандартами доступности WCAG (Web Content Accessibility Guidelines).
Что делает этот сервис: ▪️Проверяет, соответствует ли пара цветов стандартам доступности WCAG 2.1: AA и AAA для обычного и крупного текста; ▪️Даёт чёткий результат: Pass (проходит) или Fail (не проходит); ▪️Показывает коэффициент контрастности (например, 7.5:1); ▪️Визуально демонстрирует, как будет выглядеть текст на фоне.
All-Access Pass Lifetime 35$ - 5 seats
What is that ? ✅Lifetime access ( no monthly payment ) ✅Access to all ✔️courses, ✔️updates, and ✔️new courses ✅Lifetime support ( UI8.net, Envato, Freepik, Craftwork.design, Motion Array, Artlist.io etc.) ✅One-time purchase List of courses and services: List [ Read before purchase ] ‼️ This is a supportive community that helps with learning. We value not only courses but also communication. You can get access via the bot: @madbax_bot Select a plan for 800 months ❗️ Price reduced as much as possible — you won’t find a better offer! 👀
Autolayout All — плагин добавляет auto layout сразу к нескольким выбранным элементам.
Autolayout All — плагин добавляет auto layout сразу к нескольким выбранным элементам.
Roast — плагин для выявления отсутствующих стилей в проекте.
Бесплатный период 14 дней. Figma Community#accessibility 🗳 Плагины Figma