Создание настоящей культуры цифровой доступности в компании — это миссия устойчивости и настойчивости. Дискуссия о доступности нетрудно впасть в привычные клише. Доступность очень важна для людей. Доступность цифровых продуктов и услуг способствует инклюзивности. Или даже все профессионалы в командах должны участвовать в работе по обеспечению доступности. Конечно. Никто в здравом уме не станет оспаривать ни одно из этих утверждений (надеюсь). Однако вторая часть этого разговора, до которой доходят очень немногие компании, — «как?» Как нам добиться этого в условиях повседневной работы команд цифровой трансформации, которые, как мы все знаем, погружены в сложные сценарии, часто с очень ограниченным количеством людей? В большинстве случаев выбор оказывается между «мы делаем это» и «то». И не должно быть, потому что в этих случаях я никогда не видел победы доступности в этом уравнении. Так быть не должно. Вам не обязательно быть таким. Прежде всего потому, что выбор между доступностью и чем-либо еще — неправильный выбор. Доступность больше не является просто еще одной функцией, которую следует добавить к остальным. Это добавленная стоимость для бизнеса и в настоящее время юридическое обязательство, которое может иметь серьезные последствия для компаний. С другой стороны, существуют разумные, оптимизированные и эффективные способы включить принципы доступности в естественную динамику работы команд. Можно работать над доступностью, не переворачивая командную работу с ног на голову. По сути, это то, что делает AccessibilityOps. Расширение прав и возможностей людей и предоставление командам простых процессов, чтобы они могли интегрировать работу по обеспечению доступности в свою повседневную жизнь без непропорциональных усилий. Доступность и дизайн Работа над цифровой доступностью в дизайне может включать в себя несколько действий. Понятно, что нам нужно уделять особое внимание цвету и тому, как он используется для передачи смысла. Разумеется, размеры взаимодействия элементов должны быть комфортными. Но, самое главное, мы должны думать о дизайне с универсальной точки зрения. Интерфейс — это не плакат. Мы можем контролировать многие аспекты этого дизайна, но то, как пользователи взаимодействуют с интерфейсом, зависит от бесконечного числа переменных. Тип устройства, контекст, цель, качество сети и т. д. Все это сильно влияет на опыт и взаимодействие каждого человека. Помимо всего этого, когда в процесс проектирования вносятся вопросы цифровой доступности, это добавляет еще больше переменных.
Люди часто используют так называемые вспомогательные технологии и стратегии. По сути, это технологические инструменты или, по крайней мере, «хитрости», к которым прибегают люди, чтобы найти более комфортные модели использования. Например, знаменитые программы чтения с экрана, обычно ассоциируемые с использованием слепых людей (но которые приносят пользу не только им), являются вспомогательной технологией. Изменение цветов или цветовых контрастов между различными элементами также является вспомогательной технологией. Еще один пример — увеличение размера шрифта (о котором мы говорили в этом тексте). Существует бесчисленное множество вспомогательных технологий и стратегий. Почти столько же, сколько различных контекстов использования для каждого человека. Мы не контролируем все Другими словами (и это «плохая новость» для нас, дизайнеров), «наш дизайн» с точки зрения пользователей подвержен трансформациям, которые мы не контролируем. Он будет «трансформирован» пользователем, гарантируя, что он сможет взаимодействовать с приложением и всем, что оно предлагает, максимально удобным способом. И это хорошо. Если это произойдет и все пойдет хорошо, мы наверняка проделаем очень хорошую работу по обеспечению доступности, и мы все заслуживаем поздравлений. Если пользователь применяет любую из этих технологий и стратегий поддержки и по-прежнему не может использовать цифровое приложение, это признак того, что что-то работает не так, как должно. О, и кстати об этом. Даже не думайте о блокировании использования этих технологий или стратегий поддержки. Возможно, они «разрушают» ваш красивый дизайн, но позволяют все большему и большему количеству людей использовать приложение. В конце концов, разве не это мы обещали сделать? Дизайн для (всех) людей. Без исключения? Увеличить размер шрифта Сколько раз мы слышали, как кто-то — друзья, родственники или даже коллеги — жаловался, что тот или иной текст слишком мал? Текст играет очень важную роль в цифровом опыте. Большая часть информации передается посредством текста:инструкции по использованию, подписи к кнопкам или интерактивные элементы. Все это использует текст как инструмент коммуникации. Если чтение всех этих элементов затруднено, естественно, опыт сильно ухудшается. Комфортное чтение текста, независимо от его функции, является непреложным принципом. Это чтение можно облегчить, если использовать в конструкции удобные размеры. Однако поддержка технологий и стратегий посредством увеличения размера шрифта также может помочь улучшить читаемость. По данным APPT, 26% пользователей мобильных устройств Android и iOS увеличивают размер шрифта по умолчанию (данные на февраль 2026 года). Каждый четвертый пользователь увеличивает размер шрифта на своем смартфоне. Это очень значительная выборка людей, поэтому эта функциональность неизбежна в процессах проектирования.
Соблюдение руководящих принципов Увеличение размера шрифта в интерфейсах может представлять собой огромную проблему для дизайна. Важно понимать, что внезапно некоторые текстовые элементы из-за действий пользователя могут увеличиться вдвое по сравнению с их первоначальным размером. «За исключением подписей и текстовых изображений, размер текста можно изменить без вспомогательных технологий до 200 % без потери содержания или функциональности». — Критерий успеха 1.4.4, «Изменение размера текста» Руководства по обеспечению доступности веб-контента (WCAG), версия 2.2.
Этот критерий успеха находится на уровне соответствия AA, что означает, что это абсолютно обязательная функция в соответствии с любой правовой базой. Легко понять 200% этого критерия успеха. Если мы предположим, что проектируем интерфейсы в масштабе 100 %, то есть размер элемента равен исходному размеру, то увеличение текста до 200 % будет соответствовать удвоению исходного размера. Также можно использовать другие масштабы увеличения, например 120%, 140% и так далее. Другими словами, мы должны гарантировать, что пользователи смогут увеличить текст вдвое по сравнению с его первоначальным размером с помощью поддерживающих технологий или стратегий (и это немаловажная деталь). Чтобы соответствовать этому стандарту, нам не нужно предоставлять в интерфейсах инструменты увеличения размера текста. На практике эти функции являются не чем иным, как избыточностью. Устройства уже позволяют это делать стандартизированным способом. Пользователи, которым действительно нужна эта настройка, знают это (потому что без нее их жизнь была бы намного сложнее). Что ж, на их устройстве уже применен этот параметр. А это значит, что мы можем исключить эти дополнительные элементы интерфейса, упростив работу.
Стандартизированный доступ Важная концепция, которую следует помнить о вспомогательных технологиях, особенно в случае увеличения размера шрифта, заключается в том, что на большинстве устройств многие из этих инструментов уже установлены по умолчанию. Другими словами, во многих случаях пользователям не нужно приобретать собственное программное обеспечение или покупать устройство определенного типа только для того, чтобы иметь эту функциональность. Будь то на мобильных устройствах или даже в веб-браузерах, в подавляющем большинстве случаев легко найти установленные функции, которые позволяют увеличить размер шрифта по умолчанию, который мы используем во всем интерфейсе. Этот принцип увеличения размера шрифта можно применить к цифровым продуктам, таким как приложения, или даже к любому типу веб-сайтов, работающих в стандартных веб-браузерах, используемых сегодня. айфоны На устройствах iPhone функция увеличения размера шрифта встроена по умолчанию. Чтобы использовать эту функцию, просто откройте панель «Настройки», выберите «Доступность», а в группе параметров «Видение» откройте функцию «Размер текста и отображение» и настройте желаемое увеличение размера шрифта на этом экране.
Гугл Хром Веб-браузеры также по умолчанию предлагают функцию увеличения размера шрифта. Например, в Google Chrome эта функция доступна на панели «Параметры», а именно в области «Внешний вид». В списке опций, которые появляются в этой группе, просто выберите опцию «Размер шрифта». Обычно выбирается вариант «Средний — рекомендуется». Вы можете изменить этот параметр на любой другой доступный размер шрифта. Попробуйте, например, вариант «Очень большой».
Тест в Фигме Чтобы работа по обеспечению цифровой доступности стала эффективной в повседневной жизни команд, важно найти простые рабочие процессы. Действия или инициативы, которые можно интегрировать в повседневную работу команды, которые комплексно решают проблему доступности и не требуют радикального преобразования текущей реальности. Если бы это было необходимо, полагает он, в большинстве случаев этого бы не происходило. Таким образом, разработка простых рабочих процессов — это половина дела о том, чтобы доступность действительно стала реальностью.случае, также в рамках проектной группы. Что касается тестирования увеличения размера шрифта в дизайне, сегодня в нашем распоряжении есть необычные инструменты. Те, кто помнит времена проектирования сложных интерфейсов в Adobe Photoshop, поймут различия в инструментах, которые мы имеем сегодня (и, к счастью, это так). Теперь с помощью таких инструментов, как Figma, можно создать такой динамизм в дизайне, что тестирование увеличения размера шрифта для обеспечения доступности становится для команды практически неизбежным.
Примечание. Чтобы пройти этот тест, вам необходимо хорошо разбираться в стилях текста, автоматических макетах и переменных Figma. Эти три являются основными инструментами для достижения успеха без особых дополнительных усилий. Если вы еще не освоили эти функции, настоятельно рекомендуется начать с них. Не пропускайте шаги. Обучение – это постепенный процесс, которому необходимо следовать структурированно, шаг за шагом. Куда мы хотим пойти? Тест увеличения размера шрифта в Figma, который мы хотим выполнить, прост. Мы хотим иметь набор переменных, доступных для всех стилей текста, которые мы используем в интерфейсе, что позволит нам выбирать, хотим ли мы видеть интерфейс с текстом в масштабе 100%, 120%, 140%, 160%, 180% или 200%. Применяя этот набор переменных (так же, как применяя переменные для светлого и темного режима), мы наблюдаем трансформации текста в интерфейсе и понимаем, в какой степени необходимы адаптации в каждой версии интерфейса с разными типографскими масштабами.
Как нам это сделать? Чтобы этот тест прошел так гладко, вам нужно провести некоторую подготовку. Системы проектирования могут существенно помочь оптимизировать большую часть этой первоначальной работы. Но я не буду тебе врать. Чтобы тест работал хорошо, ваш дизайн должен иметь очень серьезный уровень организации и систематизации. Это не совсем руководство, потому что у каждой команды будет своя модель работы, и эти рекомендации можно применять по-разному (и это нормально). Однако для того, чтобы этот тест работал, важно обеспечить определенные допущения при проектировании. Ниже приведены некоторые шаги, которые помогут вам поэтапно реализовать эту тестовую модель. Пошаговые инструкции, которые помогут вам организовать ваши файлы и обеспечить полное выполнение этого теста самым простым и практичным способом. 1. Проектирование интерфейсов Все начинается с дизайна. Перед любым тестированием основное внимание должно быть сосредоточено на разработке каждого интерфейса, который мы захотим протестировать позже. На этом этапе по-прежнему нет особых проблем с тестом увеличения размера шрифта, который мы проведем позже. Естественно, весь дизайн интерфейса должен с самого начала следовать самым основным рекомендациям по доступности, применяемым при проектировании.
2. Примените автоматические макеты ко всем элементам. В каждом дизайне экрана, который вы создаете, вам необходимо убедиться, что вы правильно применяете автоматические макеты. Это очень важный шаг. Именно это последовательное применение автоматических макетов ко всей структуре и элементам дизайна позже будет гарантировать масштабируемость интерфейса, когда мы начнем тестировать увеличение размера шрифта. Этот шаг действительно нельзя недооценивать. Если вы не уделяете этому должного внимания, вы увидите, когда мы тестируем типографское масштабирование в интерфейсах, все ломается, как слон в посудной лавке.
3. Структурирование и применение стилей текста Чтобы выполнить наш тест на увеличение размера шрифта, нам также потребуется, чтобы вы применили стили текста к каждому дизайну интерфейса. Вероятно, вы даже начали создавать их прямо во время рисования. Большой. Если вы этого еще не сделали, важно сделать это сейчас. Чтобы тест работал идеально, нам это очень нужно. Не оставляйте в дизайне ни одного текстового элемента без примененного стиля текста.
4. Определите набор переменных на 100 %. Этот тест требует довольно высокой степени оптимизации. На практике это означает, что нам придется использовать переменные Figma для всех характеристик текстовых стилей, которые есть в интерфейсе. На этом этапе вы должны определить «числовые» переменные Figma, по крайней мере, для размера шрифта и высоты строки текстовых стилей, которые вы применили к рисунку. На этом этапе вы определяете значения масштаба увеличения размера шрифта для модели 100% визуализации, то есть исходной и эталонной версии чертежа. Важно структурировать эти переменные для каждого стиля текста на рисунке, поскольку впоследствии нам придется учитывать масштаб увеличения каждого из этих текстовых элементов.
5. Примените переменные к стилям текста Определив переменные для стилей текста масштаба 100%, теперь вы должны их применить.к элементам уже созданных стилей текста. Не забудьте применить переменные хотя бы к характеристикам размера шрифта и высоты строки. Если у вас больше типографских переменных, это нормально. Но вам, по крайней мере, следует применить переменные к размеру шрифта и высоте строки. Это действительно очень важно.
6. Определите переменные для увеличения размера текста Теперь, когда у вас есть переменные, примененные к стилям текста масштаба 100 %, следующим шагом будет создание переменных для других масштабов увеличения размера шрифта. На практике вам придется создать переменные, которые будут сообщать системе, до какого размера шрифта вырастет каждый текстовый стиль, когда масштаб увеличения составит 120%, 140%, 160% и т. д. Чтобы определить значения размера шрифта и высоты строки, просто умножьте исходное значение на процент масштаба. Например, если текстовый стиль имеет размер шрифта 16 пикселей, размер для масштаба 120% будет равен 16, умноженному на 1,2, что дает результат 19,2. Повторите этот расчет для всех значений размера шрифта и высоты строки выбранного вами процента увеличения размера шрифта. Вы также можете выбрать, применять ли округление к окончательным значениям. Это приблизительный тест, и поэтому любые различия, которые могут возникнуть из-за округления, не повлияют на окончательное восприятие результата теста.
7. Примените переменные к различным версиям масштаба Момент истины настал. Следующий шаг — понять, все ли у нас работает, чтобы тест прошел идеально. Поэтому вам следует скопировать исходный интерфейс и применить набор переменных для каждой скорости увеличения размера шрифта, которая имеет для вас смысл. Повторите этот процесс для всех определенных вами процентов увеличения размера шрифта. В качестве ориентира вы можете использовать проценты увеличения 120%, 140%, 160%, 180% и 200%. Если вы хотите упростить, вы можете уменьшить количество процентов масштабирования, с которыми вы работаете. Независимо от количества процентов, с которыми вы работаете, вам всегда следует работать со шкалами минимум 100% и 200%.
8. Определите области для улучшения Применяя разные масштабы увеличения размера шрифта к одному и тому же экрану, легко понять, где могут потребоваться улучшения. Именно здесь начинается настоящее испытание увеличения размера шрифта в дизайне интерфейса и самая интересная работа по обеспечению специальных возможностей. При анализе различных экранов имейте в виду некоторые важные аспекты:
Тот факт, что текст кажется гигантским, не является проблемой и не «портит» дизайн. Помните, что это может означать разницу между тем, сможет ли кто-то использовать конкретный продукт или услугу или нет. Проблема доступности возникает, когда увеличение размера шрифта делает невозможным чтение определенных текстов или активацию определенных элементов управления. Для текстовых элементов, которые уже очень велики, увеличение размера шрифта может не иметь смысла. Это может сделать эти элементы непропорциональными, что не улучшит читаемость (поскольку они и так хорошего размера) и займут совершенно ненужное пространство. Если есть элементы, которые кажутся выскакивающими из экрана, первым делом нужно проверить, как вы применяете автоматическую компоновку. Многие аспекты дизайна можно легко решить при правильном использовании автоматической компоновки. Независимо от масштаба увеличения размера шрифта, важно сохранять визуальную иерархию типографики, поскольку эта читаемость важна для восприятия различных уровней информации, представленной на экране. Этот тест может помочь выявить элементы, которые могут нуждаться в корректировке непосредственно в коде, чтобы они хорошо функционировали при заданном масштабе увеличения. Не все можно решить только с помощью дизайна, и это прекрасно. Доступность — это, по сути, командная работа.
9. Внесите исправления и корректировки в дизайн. Наконец, основываясь на различных экранах с разными масштабами увеличения текста, вы можете внести разумные изменения в дизайн. Некоторые из этих корректировок могут быть необходимы только в коде. В таких случаях вы документируете все эти предложения и передаете их команде разработчиков. Также важно подчеркнуть (еще раз), что некоторые проблемы, с которыми вы можете столкнуться при проектировании, можно быстро решить в процессе проектирования с помощью простого и правильного применения свойств автоматического макета.
10. Вернитесь к началу и повторите процесс. Это циклический подход. Это означает, что вам следует повторять эти шаги или их варианты столько раз, сколько необходимо на протяжении всего проекта. Естественно, что со временем и при оптимизации процессов некоторыеэти шаги перестанут иметь смысл. Это абсолютно не проблема. Но самое важное, что здесь нужно понимать, это то, что доступность и этот процесс тестирования увеличения размера шрифта не должны выполняться только один раз, и все. Это испытание, которое необходимо проводить много-много раз в повседневной работе каждого проекта и команды.
Роль систем проектирования На первый взгляд этот список шагов может показаться сложным упражнением. Но это не так. Это связано с тем, что подавляющее большинство, если не все, этих шагов легко выполнить в любом контексте, где существует система дизайна. Фактически, системы дизайна стали неизбежным стандартом в индустрии дизайна продуктов. Мы можем обсуждать то, что каждая команда называет системой дизайна, но правда в том, что сегодня очень сложно найти команду продуктового дизайна, у которой нет хотя бы минимально структурированной библиотеки компонентов и стилей.
Имея эту основу, более или менее документированную, очень легко применить этот тип теста увеличения размера шрифта с использованием переменных Figma. Более того, если в вашей дизайн-системе уже есть, например, структурированные переменные для светлого и темного режима, это означает, что вы уже применяете те же принципы, которые мы использовали для выполнения этого теста. Итак, ничего нового. Работа с системами дизайна предполагает определенный уровень структурирования и организации, что также очень полезно для создания тестов такого типа. Существует миф о том, что дизайн-системы ограничивают творчество. Это неправда. Системы дизайна помогают решить «бюрократическую» часть дизайна, поэтому у нас действительно может быть больше времени для того, что действительно важно: в данном случае, для тестирования доступности и создания все большего и большего количества продуктов и услуг, которые действительно доступны наибольшему количеству людей. Пример файла Всегда проще увидеть пример, чем просто прочитать описание процесса. Если это справедливо во многих дисциплинах знания, в том числе в дизайне, эта предпосылка приобретает еще больший смысл. Поэтому в этом файле Figma, свободно опубликованном и общедоступном для сообщества, вы найдете практический пример всего описанного здесь процесса тестирования. Помните, что это всего лишь пример. Может быть бесчисленное множество способов выполнить этот тип теста в контексте файла Figma.
Обязательно посмотрите на этот подход критическим взглядом. Это предложение по тестированию увеличения размера шрифта, которое следует определенному процессу. Несмотря на это, подход должен быть адаптирован к конкретной реальности, процессам и уровню зрелости вашей команды. Простое копирование формул других команд без понимания того, имеют ли они смысл в нашем контексте, — верный способ сделать усилия по обеспечению доступности непропорциональными. Каждая ситуация уникальна. Этот подход пытается максимально упростить работу по обеспечению доступности в этом конкретном контексте. И помните: если что-то происходит, пусть даже незначительное, это шаг вперед, а не шаг назад. И это следует праздновать всем в команде.
