Побудова справжньої культури цифрової доступності в компанії — це місія стійкості та наполегливості. Дискурс про доступність неважко впасти в звичні кліше. Для людей дуже важлива доступність. Доступність цифрових продуктів і послуг сприяє інклюзії. Або навіть усі професіонали в командах повинні бути залучені до роботи з доступності. звичайно. Ніхто при здоровому глузді не стане заперечувати жодне з цих тверджень (я сподіваюся). Однак друга частина цієї розмови, до якої доходить дуже небагато компаній, це «як?» Як це зробити посеред повсякденної роботи команд цифрової трансформації, які, як ми всі знаємо, занурені у складні сценарії, часто з дуже обмеженою кількістю доступних людей? У більшості випадків вибір закінчується між «ми робимо це» і «це». І не повинно бути, тому що в цих випадках я ніколи не бачив, щоб доступність перемагала в цьому рівнянні. Так бути не повинно. Вам не потрібно бути таким. По-перше, тому що вибір між доступністю та будь-чим іншим не є правильним вибором. Доступність більше не є ще однією функцією, яку потрібно додати до інших. Це додаткова вартість для бізнесу та, наразі, юридичне зобов’язання, яке може мати серйозні наслідки для компаній. З іншого боку, існують інтелектуальні, оптимізовані та ефективні способи включити принципи доступності в природну динаміку команд. Можна працювати над доступністю, не перевертаючи роботу команди з ніг на голову. По суті, це те, що робить AccessibilityOps. Розширення можливостей людей і надання командам простих процесів, щоб вони могли інтегрувати роботу з доступності у свої повсякденні справи без надмірних зусиль. Доступність і дизайн Робота над цифровою доступністю в дизайні може включати кілька дій. Зрозуміло, що нам потрібно звернути особливу увагу на колір і те, як він використовується для передачі значення. Зрозуміло, розміри взаємодії елементів повинні бути комфортними. Але, найголовніше, ми повинні думати про дизайн з різнобічної точки зору. Інтерфейс – це не плакат. Ми можемо контролювати багато аспектів цього дизайну, але те, як користувачі взаємодіють з інтерфейсом, залежить від нескінченної кількості змінних. Тип пристрою, контекст, призначення, якість мережі тощо. Все це сильно впливає на досвід і взаємодію кожної людини. Разом з усім цим, коли питання цифрової доступності включаються в процес проектування, це додає ще більше змінних.
Люди часто використовують так звані допоміжні технології та стратегії. В основному це технологічні інструменти або, принаймні, «хитрощі», до яких вдаються люди, щоб знайти більш комфортні моделі використання. Допоміжною технологією є, наприклад, відомі програми зчитування з екрана, які зазвичай асоціюються з використанням сліпих людей (але вони корисні не лише для них). Зміна кольорів або колірних контрастів між різними елементами також є допоміжною технологією. Іншим прикладом є збільшення розміру шрифту (про що ми говорили в цьому тексті). Існує незліченна кількість допоміжних технологій і стратегій. Майже стільки, скільки різних контекстів використання для кожної людини. Ми не контролюємо все Іншими словами (і це «погана новина» для нас, дизайнерів), «наш дизайн» піддається, з точки зору користувачів, трансформаціям, які ми не контролюємо. Користувач буде «трансформувати» його, забезпечуючи максимально комфортну взаємодію з програмою та всім, що вона пропонує. І це добре. Якщо це станеться і все піде добре, ми, безумовно, добре виконаємо нашу роботу з доступності, і ми всі заслуговуємо на привітання. Якщо користувач застосовує будь-яку з цих технологій підтримки та стратегій і все ще не може використовувати цифрову програму, це ознака того, що щось працює не так, як повинно. О, і до речі. Навіть не думайте про блокування використання цих технологій або стратегій підтримки. Можливо, вони «знищують» ваш прекрасний дизайн, але вони дозволяють все більшій кількості людей фактично користуватися програмою. Зрештою, чи не це було саме те, що ми обіцяли, що хочемо зробити? Дизайн для (всіх) людей. Без винятку? Збільшити розмір шрифту Скільки разів ми чули, як хтось — друзі, родина чи навіть колеги — скаржаться, що той чи інший текст замалий? Текст відіграє дуже важливу роль у цифровому досвіді. Багато інформації передається через текст:інструкції з використання, підписи кнопок або інтерактивні елементи. Все це використовує текст як інструмент спілкування. Якщо прочитати всі ці елементи важко, природно, досвід сильно погіршується. Комфортне читання тексту, незалежно від його функції, є принципом, який не підлягає обговоренню. Таке читання можна полегшити, використовуючи в конструкції зручні розміри. Однак допоміжні технології та стратегії завдяки функціональності збільшення розміру шрифту також можуть допомогти покращити читабельність. За даними APPT, 26% користувачів мобільних пристроїв Android та iOS збільшують розмір шрифту за замовчуванням (дані за лютий 2026 року). Кожен четвертий користувач збільшує розмір шрифту на своєму смартфоні. Це дуже значна вибірка людей, що робить цю функціональність неминучою в процесах проектування.
Відповідність інструкціям Збільшення розміру шрифту в інтерфейсах може представляти величезну проблему для дизайну. Важливо розуміти, що раптово деякі текстові елементи через дії користувача можуть подвоїтися від початкового розміру. «За винятком підписів і текстових зображень, розмір тексту можна змінити без допоміжних технологій до 200% без втрати вмісту чи функціональності».— Критерій успіху 1.4.4, «Зміна розміру тексту» Рекомендацій щодо доступності веб-вмісту (WCAG), версія 2.2
Цей критерій успіху відповідає рівню відповідності АА, тобто це абсолютно обов’язкова функція відповідно до будь-якої правової бази. Легко зрозуміти 200% у цьому критерії успіху. Якщо ми припустимо, що ми розробляємо інтерфейси в масштабі 100%, тобто розмір елемента є початковим розміром, тоді збільшення тексту до 200% відповідатиме подвоєнню початкового розміру. Також можна використовувати інші масштаби збільшення, наприклад 120%, 140% і так далі. Іншими словами, ми маємо переконатися, що користувачі можуть збільшити текст до удвічі його початкового розміру за допомогою допоміжних технологій або стратегій (і це не другорядна деталь). Щоб відповідати цьому стандарту, нам не потрібно надавати інструменти збільшення розміру тексту в інтерфейсах. На практиці ці функції є не що інше, як надмірність. Пристрої вже дозволяють це робити стандартизованим способом. Користувачі, яким ця настройка дійсно потрібна, це знають (адже без неї їхнє життя було б набагато складнішим). Ну, вони вже застосували це налаштування на своєму пристрої. А це означає, що ми можемо усунути ці додаткові елементи інтерфейсу, спростивши роботу.
Стандартизований доступ Важливо пам’ятати про допоміжні технології, особливо в цьому випадку щодо збільшення розміру шрифту, полягає в тому, що на більшості пристроїв багато з цих інструментів уже встановлено за замовчуванням. Іншими словами, у багатьох випадках користувачам не потрібно купувати власне програмне забезпечення чи певний тип пристрою, щоб мати цю функцію. На мобільних пристроях чи навіть у веб-браузерах у переважній більшості випадків легко знайти встановлені функції, які дозволяють збільшити розмір шрифту за замовчуванням, який ми використовуємо в інтерфейсі. Цей принцип збільшення розміру шрифту можна застосувати до цифрових продуктів, таких як програми, або навіть до будь-якого типу веб-сайтів, які працюють у стандартних веб-переглядачах, які використовуються сьогодні. iPhone На пристроях iPhone функція збільшення розміру шрифту інтегрована за замовчуванням. Щоб скористатися цією функцією, просто перейдіть на панель «Налаштування», виберіть «Спеціальні можливості» та в групі параметрів «Зір» перейдіть до функції «Розмір тексту та відображення» та налаштуйте бажане збільшення розміру шрифту на цьому екрані.
Google Chrome Веб-браузери також пропонують за замовчуванням функцію збільшення розміру шрифту. Наприклад, в Google Chrome ця функція доступна на панелі «Параметри», а саме в області «Вигляд». У списку параметрів, які з’являються в цій групі, просто виберіть параметр «Розмір шрифту». Зазвичай вибирається параметр «Середній — рекомендований». Ви можете змінити цей параметр на будь-який інший доступний розмір шрифту. Спробуйте, наприклад, опцію «Дуже великий».
Тест у Figma Щоб гарантувати, що робота з цифрової доступності стане ефективною в повсякденному житті команд, важливо знайти прості робочі процеси. Дії чи ініціативи, які можна інтегрувати в повсякденну роботу команди, комплексно спрямовані на доступність і не вимагають різкої трансформації поточної реальності. Якби це було необхідно, вважає він, цього б не відбувалося здебільшого. Тому розробка простих робочих процесів — це половина успіху, щоб доступність справді сталасявипадку, також в рамках команди дизайнерів. Що стосується тестування збільшення розміру шрифту в дизайні, сьогодні ми маємо в своєму розпорядженні надзвичайні інструменти. Ті, хто пам’ятає часи розробки складних інтерфейсів в 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 може бути безліч способів виконати цей тип перевірки.
Подивіться на цей підхід критично. Це пропозиція щодо тестування збільшення розміру шрифту за певним процесом. Незважаючи на це, підхід має бути адаптований до конкретної реальності вашої команди, процесів і рівня зрілості. Просте копіювання формул від інших команд, не розуміючи, чи мають вони сенс у нашому власному контексті, є надійним способом зробити зусилля щодо доступності непропорційними. Кожна ситуація унікальна. Цей підхід намагається максимально спростити роботу зі спеціальними можливостями в цьому конкретному контексті. І пам’ятайте: якщо щось трапляється, хай навіть незначне, це крок вперед, а не крок назад. І це повинні святкувати всі в команді.
