Рейтинг в Figma: Доступность (Accessibility)

Stark Suite - это набор инструментов, который упрощает процесс обеспечения доступности программного обеспечения. С его помощью дизайнеры, инженеры и менеджеры проектов могут создавать доступные веб-сайты, мобильные приложения и SaaS-продукты, используя такие функции, как проверка контрастности, моделирование зрения, аннотации alt-текста и многое другое. Stark позволяет находить и устранять проблемы доступности на этапах проектирования и разработки, экономя время и ресурсы.

Contrast - это плагин для Figma, который помогает проверять контрастность цветов прямо в процессе работы. Он автоматически определяет цвет фона под выбранным элементом и показывает коэффициент контрастности, а также соответствие требованиям WCAG. Плагин позволяет сканировать целые страницы для выявления проблем с контрастностью текста, поддерживая градиенты и изображения в качестве фона благодаря функции Smart Sampling. Contrast обеспечивает быструю и удобную проверку контрастности, позволяя вносить изменения в реальном времени и гарантировать доступность дизайна.

Плагин A11y - Color Contrast Checker помогает убедиться, что ваш текст доступен для всех пользователей, проверяя соответствие стандартам WCAG (Руководство по обеспечению доступности веб-контента). Он анализирует контрастность цветов текста и фона в фрейме и сообщает, соответствует ли она уровням AA и AAA. С помощью ползунков настройки цветов вы можете в реальном времени отслеживать изменения контрастности и подобрать оптимальное сочетание для обеспечения доступности вашего контента.

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

Accessible Form Fields предоставляет набор компонентов для создания форм, соответствующих базовым требованиям визуальной доступности. Компоненты включают в себя поля с достаточным контрастом (уровень AA), поддерживающие иконки и четко различимые состояния (активное, при наведении, заполненное, с ошибкой, отключенное). Это упрощает создание форм, которые удобно использовать людям с различными особенностями зрения, хотя стоит помнить, что полноценная доступность требует учета и других аспектов, описанных в руководстве WCAG.

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

Accessible Palettes предлагает более 50 уникальных, полностью доступных (AAA) цветовых палитр, вдохновленных лондонскими и манчестерскими футбольными командами, а также городскими пейзажами. Эти палитры соответствуют веб-стандартам доступности w3C, опровергая миф о том, что AAA-цвета не могут быть интересными. Созданные для того, чтобы сделать веб более инклюзивным, Accessible Palettes предоставляет дизайнерам широкий выбор цветовых решений, отвечающих требованиям доступности.

Contrast позволяет быстро создавать отчеты о контрастности AA или AAA для всего текста на всех ваших монтажных областях одновременно. Просто выберите несколько слоев и запустите команду, чтобы просмотреть отчет. Это помогает убедиться, что текст соответствует стандартам доступности и легко читается пользователями с нарушениями зрения.

Эта бесплатная и доступная дизайн-система – самый быстрый способ начать новый дизайн-проект. Просто скопируйте файл и настройте его под свои нужды. Она основана на Tailwind CSS и имеет технические спецификации, упрощающие внедрение для разработчиков. Система разработана с учетом доступности и соответствует уровню AA руководства по обеспечению доступности веб-контента (WCAG).

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

UI Color Palette - это плагин для Figma и FigJam, который помогает создавать, управлять и публиковать согласованные и доступные цветовые палитры. Он использует альтернативные цветовые пространства, такие как LCH и OKLCH, для генерации оттенков, соответствующих стандартам WCAG, обеспечивая достаточный контраст между информацией и фоном. Плагин позволяет синхронизировать цвета со стилями, переменными и другими плагинами, а также экспортировать палитры в различные форматы для разработки, включая Style Dictionary, Tailwind, SwiftUI и другие.

Adee - это мощный и всеобъемлющий инструмент для проверки доступности, который позволяет тестировать цветовой контраст и применять изменения, имитировать 8 типов цветовой слепоты и генерировать их, проверять размеры сенсорных элементов на соответствие стандартам различных устройств. Adee также предлагает генератор альтернативного текста для изображений, проверку размеров сенсорных целей на соответствие стандартам, и позволяет делиться результатами тестирования с командой, обеспечивая создание доступного и удобного контента для всех пользователей.

A11y Annotation Kit – это библиотека, разработанная в Indeed, чтобы помочь дизайнерам документировать аспекты доступности и передавать их разработчикам при передаче дизайна. С её помощью можно быстро добавлять выноски для элементов, указывать порядок фокусировки и описывать взаимодействие с клавиатурой. Она призвана упростить создание доступных веб-сайтов и продуктов для всех пользователей.

Плагин Above the Fold помогает дизайнерам убедиться, что самые важные элементы макета всегда будут видны пользователям на любом устройстве. Он отображает слой, обозначающий границу области "над сгибом" (above the fold) на ваших макетах, позволяя определить, какая часть контента будет видна сразу после загрузки страницы. Это критически важно для обеспечения видимости ключевой информации и функциональности, так как пользователи чаще взаимодействуют с контентом, расположенным в этой области. Используя Above the Fold, вы можете оптимизировать дизайн для повышения вовлеченности и достижения бизнес-целей.

Text Resizer - Accessibility Checker помогает быстро и гибко обновлять дизайн, адаптируя его к базовому размеру шрифта, определенному для 1rem. Это особенно полезно при разработке iOS-приложений, позволяя дизайну адаптироваться к настройкам размера шрифта, заданным пользователем в системе. Плагин необходим каждому дизайнеру, заботящемуся о читаемости, обеспечивая гибкость макета и удобочитаемость текста для пользователей.

Use Contrast предоставляет быстрый доступ к правильным коэффициентам контрастности цветов в соответствии с рекомендациями WCAG. Выберите любой текстовый слой или объект на холсте, чтобы получить оценку контрастности. Точно настройте цвета, используя элементы управления плагина, чтобы убедиться, что ваш дизайн соответствует стандартам доступности и удобен для всех пользователей.

Web Accessibility Annotation Kit от CVS Health® предназначен для команд разработчиков веб-интерфейсов, стремящихся создавать доступные и удобные цифровые продукты. Он предоставляет набор инструментов и компонентов для аннотирования макетов, позволяя четко документировать особенности доступности, такие как назначение кнопок, структура заголовков, альтернативный текст для изображений и порядок фокусировки элементов. Использование этого набора помогает командам эффективно передавать замысел дизайна в отношении доступности, предотвращая распространенные ошибки и улучшая пользовательский опыт для всех.

На сессии "Auditing design systems for accessibility - Config 2021" вы узнаете, как выявлять проблемы доступности компонентов от этапа проектирования до написания кода, используя плагины, лучшие практики и инструменты тестирования. Цель – дать вам возможность сделать ваши дизайн-системы доступными на ранних этапах разработки. Вы научитесь проводить аудит компонентов на предмет проблем доступности, что позволит вам создавать более инклюзивные и удобные для всех пользователей интерфейсы.

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

Contrast Checker поможет оценить контрастность в вашем UI-дизайне на соответствие критериям успеха 1.4.3 и 1.4.6 Web Content Accessibility Guidelines (WCAG). Выберите цвета текста и фона, и инструмент определит, достаточно ли контраста для обычного и крупного текста (более 18 пунктов). Это позволит убедиться, что ваш дизайн доступен для всех пользователей, в соответствии с уровнями AA и AAA. Инструмент создан в учебных целях.

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

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

Include – это инструмент, разработанный для упрощения аннотирования проектов с учетом требований доступности (a11y). Он помогает дизайнерам создавать более четкие спецификации, а разработчикам лучше понимать требования к доступности. Include позволяет внедрять принципы доступности на этапе проектирования, улучшая взаимодействие между дизайнерами и разработчиками, что в конечном итоге создает цифровые продукты, удобные для всех пользователей.

Axe for Designers – это бесплатный плагин для Figma, разработанный Deque, который помогает дизайнерам легко и быстро выявлять и устранять проблемы с доступностью непосредственно в процессе проектирования. С помощью таких функций, как сканирование на соответствие WCAG, проверка цветового контраста, определение порядка фокуса и автоматические аннотации, вы можете создавать инклюзивные дизайны, соответствующие стандартам доступности, экономя время и улучшая взаимодействие между дизайнерами и разработчиками.

Цветовое пространство HCL выравнивает видимую яркость оттенков и обеспечивает лучший контроль над контрастом, что особенно важно для визуализации данных. В отличие от HSV/L, HCL позволяет избежать ложных паттернов, возникающих из-за разной яркости оттенков, так как мозг отдает приоритет именно ей. Это гарантирует, что цветовые различия будут соответствовать смысловым, а при просмотре в черно-белом формате не возникнет неожиданных сюрпризов. HCL использует okLab (по умолчанию), Lab или Luv в качестве базового цветового пространства, а контраст рассчитывается по WCAG 3 (по умолчанию) или WCAG 2.

Плагин Contrast Grid позволяет проверить контрастность множества комбинаций цветов текста и фона на соответствие минимальным требованиям WCAG 2.1 для обеспечения доступности (a11y). Он вдохновлен инструментом Eightshapes Contrast Grid. Просто введите цвета текста и фона, по одному на строку, с возможностью указания альфа-канала через запятую, и плагин оценит их контрастность.

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

WCAG 2.2 Card Deck – это инструмент, объединяющий ключевые ресурсы по доступности веб-контента в удобном формате карточек. Он содержит упрощенные описания критериев успеха WCAG 2.2, сгруппированные по темам для тестирования, индикаторы выгоды для пользователей с разными потребностями, указания на роли, ответственные за соответствие, и предложения по совместному применению критериев. Карточки предназначены для проведения воркшопов, аудитов доступности, обучения и других задач, связанных с улучшением доступности веб-контента.

DARK & LIGHT MODE WCAG 2.1 COLOURS предоставляет информацию о цветовых стандартах WCAG 2.1, золотого стандарта веб-доступности. Этот инструмент создан, чтобы сократить время, затрачиваемое на проверку соответствия WCAG, позволяя сравнивать цвета для темной и светлой тем. Это помогает разработчикам создавать веб-сайты и приложения, доступные для пользователей с разными потребностями, учитывая рекомендации по контрастности и цветовосприятию, установленные WCAG.

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

Инструмент "Color Contrast Checker WCAG 2.1" предназначен для проверки соответствия цветового контраста между текстом и фоном требованиям стандарта WCAG 2.1. Он позволяет убедиться, что контент доступен для пользователей с нарушениями зрения, оценивая, насколько хорошо читается текст на выбранном фоне. Проверка контрастности помогает обеспечить удобство и понятность интерфейса для всех пользователей, улучшая общую доступность веб-сайта или приложения.

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

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

Accessibility Annotation Kit for iOS от CVS Health® помогает командам разработчиков iOS фиксировать замысел дизайна, который сложно передать визуально, предотвращая многие проблемы доступности на ранних этапах. Этот набор инструментов, созданный на основе двухлетнего опыта использования в CVS Health®, включает компоненты для кнопок, заголовков, меток VoiceOver и других элементов, а также шаблоны для распространенных сценариев iOS, таких как настраиваемые элементы, карточки и текстовые поля. Набор позволяет добавлять критически важные для людей с ограниченными возможностями модификаторы доступности, такие как метки, значения, подсказки и признаки, обеспечивая более удобный и доступный опыт работы с приложениями iOS.

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

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

Генератор контрастности цветов помогает дизайнерам и разработчикам создавать доступные веб-сайты, проверяя и подбирая комбинации цветов переднего плана и фона, соответствующие стандартам WCAG (Руководство по обеспечению доступности веб-контента). Он позволяет убедиться, что текст и другие элементы интерфейса достаточно различимы для пользователей с нарушениями зрения или другими ограничениями восприятия цвета, обеспечивая тем самым более удобный и инклюзивный опыт для всех.

Плагин Color Contrast Grid помогает убедиться, что используемые вами цвета соответствуют требованиям контрастности. Он генерирует таблицу контрастности для всех локальных стилей цвета, позволяя быстро оценить, какие комбинации обеспечивают достаточную видимость для пользователей. Плагин гибок в настройке благодаря компонентной структуре и позволяет ограничивать отображение цветов в зависимости от коэффициента контрастности. В будущих обновлениях планируется поддержка цветов с прозрачностью и добавление цветов вручную.

Color A11y – это инструмент для документирования доступности цветов в вашей дизайн-системе. Он позволяет настраивать цветовые значения (RGB, HEX, HSL и т.д.), добавлять поясняющий текст и оценивать соответствие стандартам доступности (PASS/FALL, AA/AAA, коэффициенты контрастности). Благодаря компонентной структуре, инструмент легко кастомизировать и использовать в связке с другими плагинами, например, "Contrast", для улучшения цветовой доступности в ваших проектах.

Плагин Contrast Description позволяет быстро добавлять информацию о коэффициенте контрастности WCAG к вашим стилям цвета в Figma, обеспечивая легкий доступ к этой информации прямо в панели цветов. Это помогает всем, кто работает с файлом, понимать, какие цветовые пары безопасны для использования, предоставляя контекстную информацию прямо в интерфейсе Figma, и избавляет от необходимости прерывать рабочий процесс для проверки доступности. Просто запустите плагин, выберите цвета, используемые для текста, и он автоматически рассчитает коэффициент контрастности каждого цвета со всеми остальными цветами в файле.

Плагин "Color Contrast Checker" помогает дизайнерам и разработчикам создавать доступный и визуально привлекательный контент. Он анализирует сочетания цветов в соответствии с рекомендациями WCAG, отображая коэффициент контрастности, уровень доступности и выбранные цвета. Это позволяет убедиться, что текст и другие элементы интерфейса легко читаются для всех пользователей, включая людей с нарушениями зрения.

Accessibility Simulator – это мощный плагин для Figma, который помогает дизайнерам лучше понимать проблемы, с которыми сталкиваются пользователи с нарушениями зрения. Он имитирует различные типы зрительных нарушений, позволяя выявлять потенциальные проблемы доступности на ранних этапах проектирования и создавать более инклюзивный пользовательский опыт. Плагин охватывает светочувствительность, потерю зрения (острую и тяжелую) и дальтонизм (RG и BY).

HCT Color Picker - это инструмент Figma, который помогает дизайнерам легко и быстро подбирать цвета, сохраняя при этом доступность и необходимый цветовой контраст. Он использует цветовую систему HCT от Google, чтобы упростить процесс соответствия стандартам доступности WCAG. С помощью этого плагина вы можете изменять цвета элементов в документе Figma в режиме реального времени и создавать новые стили, обеспечивая необходимую разницу в тоне между цветами для гарантии контрастности. Это делает процесс создания цветовых схем и обеспечения доступности более эффективным и интуитивно понятным.

Contrast Checker позволяет легко проверять соответствие контрастности текста и фона в ваших макетах требованиям WCAG AA или AAA. Добавьте виджет в фрейм, выберите настройки и укажите цвет текста для сравнения с фоном. Плагин сообщит, соответствует ли контрастность заданным стандартам. Идеально подходит для создания дизайн-систем и поддержания высокого уровня доступности ваших проектов.

Этот плагин позволяет вам предварительно просматривать дизайн вашего iOS и Android приложения с масштабированными шрифтами. Просто выберите фрейм, укажите желаемый масштаб и нажмите "Submit". Плагин создаст копии выбранного фрейма с масштабированными шрифтами, что позволяет оценить, как текст будет выглядеть для пользователей с различными настройками размера шрифта.

Source Foundation - это система дизайн-основы на базе Bootstrap, предлагающая готовые палитры цветов (с учетом WCAG 2.2), три масштаба типографики, четыре шкалы интервалов и три шкалы радиусов для создания сбалансированных и доступных интерфейсов в светлом и темном режимах. Она также включает интеграцию с Tailwind CSS и Node CLI для экспорта настроек в CSS-переменные, упрощая взаимодействие между дизайном и разработкой.

Выбирайте цвета откуда угодно, создавайте палитры с общими оттенками, проверяйте контрастность цветов на соответствие WCAG 2.1 и сохраняйте цвета в своей библиотеке стилей. Все это в цветовом пространстве OKLab для более точного выбора.

Этот виджет позволяет рассчитать коэффициент контрастности между двумя шестнадцатеричными кодами цветов. Он предлагает переключаемые темы (светлая/темная) и ориентацию (горизонтальная/вертикальная), а также возможность добавления меток к цветам, что полезно для обозначения названий токенов или шагов в цветовой шкале. По сути, это инструмент для проверки соответствия цветов требованиям доступности, гарантирующий читаемость текста и элементов интерфейса.

InclusiColor - бесплатный плагин для Figma, позволяющий дизайнерам и разработчикам с легкостью создавать доступные и инклюзивные цифровые продукты. Он мгновенно рассчитывает коэффициент контрастности цветов, отображает соответствие стандартам WCAG (AA и AAA) для различных типов цветовой слепоты, позволяет легко выбирать цвета прямо в плагине или из вашего дизайна, дает мгновенную обратную связь о доступности, а также проверяет размеры иконок и текста. InclusiColor - ваш надежный помощник в создании цифрового контента, доступного для всех пользователей.

Text Color Contrast Checker - это плагин для Figma, который проверяет соответствие цветового контраста текста и фона стандартам WCAG. Он учитывает размер и вес шрифта, а также цвет текста и фона, чтобы помочь дизайнерам убедиться, что их проекты доступны для всех пользователей, в том числе с нарушениями зрения. С этим плагином вы сможете легко проверить, соответствует ли ваш текст критериям доступности и внести необходимые корректировки для улучшения читаемости.