🔔 Inspiration #186

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥 – alveoslabs.com – getanchor.ai – museumofmoney.com – mammothmurals.com – workers.cloudflare.com ——— – hera.travel – ziatile.com – chew.productions – creativegiants.art – gk3.website ——— – circa.so – ecolevision.com/en – factory.ai – accessgrid.com – lacrapulestudio.com ——— – coastalworld.com – one.plasma.to – neonrated.com – jace.ai – amritpalace.com ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

У компании есть конкурс Swift Student Challenge, где студенты со всего мира создают мини-приложения. Ребята объединили платформы Apple, Swift и Ai (чаще использовали Claude на радость теперь уже антропическому Андрею Карпатому, как вам новость кстати?) И знаете, что ребята сделали? Совсем не миниаппы, вы только посмотрите! Steady Hands — Gayatri Goundadkar (20 лет, Индия). Вдохновлена бабушкой, которая из-за тремора рук перестала заниматься традиционной живописью. Приложение стабилизирует рисование Apple Pencil для людей с тремором: анализирует «сырые» данные движения через фреймворки PencilKit и Accelerate, отделяет намеренные движения от дрожания и убирает «тремор-компонент». Готовые рисунки показываются в персональном 3D-музее — «чтобы пользователи чувствовали себя художниками, а не пациентами». pitch coach — Anton Baranov (22 года, Германия). Идея родилась за кухонным столом из слов матери-преподавателя о студентах, у которых много слов паразитов. Приложение даёт обратную связь в реальном времени: отслеживает осанку через AirPods, ловит слова-паразиты («um», «like»), генерирует персональные сводки после каждой сессии через Apple Foundation Models. Вышло в App Store в начале марта, уже более 6000 загрузок. Используют не только для презентаций, но и для репетиций рэпа и стендапа. Asuo — Karen-Happuch Peprah Henneh (Гана). «Asuo» на языке тви означает «текущая вода». Приложение строит безопасные маршруты эвакуации в зонах наводнений в реальном времени. Считает интенсивность дождя и использует алгоритм поиска пути на основе исторических данных о наводнениях. Доступность была заложена с самого начала: VoiceOver-метки на всех элементах, кастомная голосовая система оповещений через AVSpeechSynthesizer. Henneh — дизайнер, поэтому техническую часть (симулятор дождя) делала с помощью Claude. А еще эта умничка ведёт некоммерческую организацию Radiance Girl Africa, поддерживающую женщин в технологиях. LeViola — Yoonjae Joung (21 год, Южная Корея). Не смог взять свой альт на стажировку в Нью-Йорк и затосковал по инструменту. Приложение позволяет учиться играть на альте без самого инструмента: камера отслеживает позу рук — суставы левой руки определяют зажатые ноты, угол правой руки — выбор струны. Использовал Create ML для обучения собственной модели и Core ML для интеграции. Осваивать Swift помогали Claude, OpenAI Codex и Google Gemini. Планирует расширить идею на другие инструменты. Юные разработчики вдохновились личными историями, сделали accessibility ядром продукта, а AI tools позволили ускорить процесс создания. 👉 Полная статья: https://www.apple.com/newsroom/2026/05/ai-meets-accessibility-in-this-years-swift-student-challenge/

Обычно AI-агенты работают с интерфейсом как человек: делают скриншот, пытаются понять по пикселям, где кнопка, и тыкают по координатам. Это медленно, дорого по токенам и довольно хрупко. Автор показывает более умный путь: использовать accessibility tree, который уже есть внутри iOS-приложения и который читают VoiceOver и XCTest. Если у элементов нормально заполнены identifier, label, hint, value и traits, агенту не нужно гадать по картинке. Он может детерминированно находить элемент, понимать, что он делает, и нажимать точно в цель. Плюс это полезно не только для AI: вы одновременно улучшаете доступность для людей и делаете приложение гораздо удобнее для автоматизации, тестов и агентной навигации. Внутри: – Почему навигация по скриншотам для AI дорогая, медленная и хрупкая; – Что такое accessibility tree и какие пять свойств в нем важны; – Какие SwiftUI-модификаторы стоит добавлять на кнопки, строки списков и экраны; – Зачем отслеживать координаты элементов, если у них уже есть identifier; – Почему строгий нейминг accessibility-id сильно помогает агентам; – Как populated accessibility tree меняет экономику токенов и скорость работы; – Почему AI-навигация полезна не только для тестов, но и прямо во время разработки; – Как accessibility и AI support здесь работают как одна и та же инвестиция. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

На гитхабе дизайнер создал файл 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 глубже )

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

Джон Тернус — новый 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: • Аудит компонентов на соответствие 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 и доступность. Задаем одинаковые вопросы и получаем разные ответы ) Наш первый гость — Миша Рубанов @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

А на пятки уже наступают вот такие ребята типа Wonder, которые делают инструмент для дизайнеров и это чувствуется от видоса. Что будет по факту посмотрим, но если они грамотно запустятся и фичи будут реально те, что все просят годами от фигмы, то это может полететь Можно записаться в early access: https://wonder.so/ Что думаете, есть шансы у них?) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Незрячий разработчик разобрал доступность 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 заголовками. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Плагин для проверки контрастности, с возможностью смоделировать 8 имитаций дальтоников. 🛋 Скачать плагин 🛋 #plugin

Цветовые палитры были вдохновлены футбольными командами в Лондоне и Манчестере, а также местами в окрестностях Лондона. Открыть в figma 🔗 #Файлы

Вслед за 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

Figma Community • #accessibility

🔶 Gradients.app. Подбор цветов и сочетаний по фотографиям, генерация собственных палитр 🔶 Colorsinspo. Помощь с выбором цвета, обучение, вдохновение 🔶 Darker. Простая генерация цветовых оттенков по заданному параметру 🔶 Accessible Palette. Инструмент для экспериментов и создания своей палитры. Здесь используется цветовая модель CIELAB, максимально приближенная к человеческому зрению 🔶 Huemint. Оригинальные цветовые схемы от искусственного интеллекта. Возможность оценить результат на реальных объектах 🔶 IWantHue. Онлайн-генератор с расширенными настройками для подбора цветов и их сочетаний 🔶 Leonardo. Продвинутый инструмент по созданию и аналитике цветовых палитр 🔶 Supa Palette. Возможен импорт готовых палитр и создание своих, исходя из параметров 🔶 Atmos. Можно проверить цвета на доступность по нормам WCAG 2 и WCAG 3, имитировать нарушения зрения, отсматривать взаимосвязи на цветовом круге Сохраняйте себе и делитесь в комментариях своими находками! [Фабрика Дизайна]

Figma Community • #accessibility

Что делает этот сервис: ▪️Проверяет, соответствует ли пара цветов стандартам доступности WCAG 2.1: AA и AAA для обычного и крупного текста; ▪️Даёт чёткий результат: Pass (проходит) или Fail (не проходит); ▪️Показывает коэффициент контрастности (например, 7.5:1); ▪️Визуально демонстрирует, как будет выглядеть текст на фоне.