Гайд: доступність інтерфейсів через тексти

Photo by Daniel Ali on Unsplash

Завдяки росту свідомості та вимог споживачів, доступність стає ключовим аспектом розробки інтерфейсів в сучасних застосунках, сервісах чи сайтах. Бренди та бізнеси активно працюють над створенням користувацьких інтерфейсів, які були б доступними для всіх категорій користувачів. Це означає, що інтерфейси повинні бути розроблені таким чином, щоб бути зрозумілими, простими у використанні та пристосованими до потреб різних користувачів, включаючи людей з інвалідністю.

UX (User Experience) райтинг відіграє важливу роль у вимірюванні та покращенні рівня доступності, допомагаючи забезпечити для всіх ефективну взаємодію з продуктом або сервісом.

Доступний UX — не тільки етичний, але й стратегічно важливий аспект дизайну

Створення доступних UX-текстів часто сприймається як додаткова робота. Існує також побоювання, що інклюзивний дизайн обмежує можливості створення візуально привабливих продуктів. Насправді відсутність доступності та інклюзивності в UX може впливати довгостроково:

• Задоволеність користувачів. Недоступні або неінклюзивні продукти можуть призводити до незадоволеності користувачів, особливо тих, хто має обмеження або потребує спеціальних адаптацій для використання.
• Псування репутації бренду. Недоступність може стати причиною негативних відгуків та враження про бренд як про недбалого до потреб своїх користувачів.
• Втрата доходу. Недоступність може призвести до втрати доходу через меншу залученість користувачів, втрату потенційних клієнтів або недоступність ринків, де доступність є обов’язковою.
• Порушення законодавства. У багатьох країнах існують законодавчі акти, які вимагають відповідну доступність цифрових продуктів для всіх користувачів. Невиконання цих вимог може призвести до правових проблем для компаній.
• Обмеження аудиторії. Недоступні або неінклюзивні продукти можуть обмежувати аудиторію, не дозволяючи всім користувачам отримати доступ до послуг чи інформації.

Ось вражаюча статистика, яка може вас здивувати: лише 3% Інтернету доступні для людей з інвалідністю.

Робота UX-райтерів повʼязана з тим, щоб відстоювати доступність і робити її пріоритетом для всіх у команді. Таким чином ми покращуємо репутацію нашої компанії, а також допомагаємо зробити Інтернет кращим (більш доступним) місцем.

Photo by Carl Heyerdahl on Unsplash

Типи проблем із доступністю

Серед основних проблем доступності виокремлюються наступні типи:

• Зорові (дальтонізм, втрата зору)
• Моторність/рухливість (параліч, ДЦП)
• Слухові (труднощі зі слухом)
• Судомні (особливо світлочутлива епілепсія)
• Навчання/когнітивні (дислексія, СДУГ)
• Випадкові (депривація сну)
• Середовищні (використання мобільного пристрою в темряві)

Більшість користувачів з вадами зору та сліпотою — це люди старше 50 років (це може рано чи пізно стосуватися кожного). Проте відсутність або втрата зору стосуються людей будь-якого віку.

Можливо, порушення когнітивних здібностей або нейрорізноманіття є неочевидним, але важливим аспектом доступності — це може включати низку станів, які впливають на когнітивні та поведінкові функції. До спектра нейрорізноманіття входять синдром дефіциту уваги та гіперактивність (СДУГ, інша назва РДУГ), епілепсія, аутизм, диспраксія та дислексія, а також такі вікові захворювання як деменція чи хвороба Альцгеймера тощо. Залежно від користувача та характеру його нейрорізноманіття вебсайти чи застосунки можуть створювати численні перешкоди для людей з різним когнітивним досвідом.

Доступність та інклюзивність стосується всіх

Наявність інвалідності не є обов’язковою передумовою, щоб мати труднощі з доступом до діджитал продуктів. Усі люди у певних ситуаціях можуть бути маломобільними й стикатися з бар’єрами.

Наприклад, згадайте, як на яскравому сонці складно прочитати текст на екрані смартфона або замовити таксі однією рукою, коли в іншій — валіза. Чи не доводилося вам декілька разів перечитувати сповіщення, щоб зрозуміти, про що саме вас запитує застосунок: слід погодитись або скасувати запит?

Ситуативні та тимчасові порушення працездатності:

• Водіння: ситуаційні порушення зору, рухливості та уваги;
• Їзда в автобусі/потязі, що качається: ситуаційно порушена спритність;
• Подорожі та відсутність здібностей розмовляти місцевою мовою: ситуативно порушена вербальна комунікація;
• Носіння сумок під час покупок: ситуативно обмежена рухливість;
• Зіниці розширені після огляду очей в окуліста: тимчасове погіршення зору;
• Носіння гіпсу у зв’язку з травмою кістки: тимчасове порушення рухливості;
• Недостатність сну та втома: тимчасове порушення когнітивних здібностей.

У таких ситуаціях фізично здорова людина під час використання цифрових продуктів відчуває ті ж обмеження, що й людина з постійною інвалідністю.

Речі, розроблені для людей з інвалідністю, часто допомагають усім — класичним прикладом доступного дизайну є ефект вирізаного бордюру (the curb cut effect). Таким бордюром з комфортом користуються як маломобільні люди, так і люди без фізичних порушень.

The photo is originally published on the U.S. DEPARTMENT OF LABOR BLOG

Створення доступного контенту

Не всі користувачі з вадами зору, слуху чи когнітивними порушеннями застосовують допоміжні технології. Проте незалежно від того, яким способом вони отримують доступ до продуктів, їм важливо, щоб контент було подано у зручній для них формі, а саме:

• відео з субтитрами для тих, хто не чує, або з коментарями для тих, хто не бачить;
• зрозумілий текст без складних конструкцій з хорошою контрастністю та структурою, який легко читати просто з екрана чи з допомогою екранного читача;
• зображення, іконки, емодзі, які добре описані за допомогою alt-текстів тощо.

Технічні особливості створення контенту

Перед тим як створювати доступні UX-тексти, необхідно звернути увагу також на те, як дизайнери та розробники створюють продукти для роботи з допоміжними технологіями.

Що потрібно знати про фокус

Фокус допомагає вибрати елемент і перенаправляє всі натиснення з клавіатури на вибраний елемент. Одночасно на екрані може бути тільки один елемент у стані фокуса.

Для користувачів, які користуються навігацією з клавіатури фокус — це основний механізм взаємодії з компʼютером — люди, що не можуть користуватися мишкою або люди, що користуються екранними читачами та використовують клавіатуру для навігації екраном.

Порядок, за яким фокусуються елементи, називається Tab Order (порядок табів). Нам потрібно впевнитися, що цей порядок має сенс для користувачів. Деякі стандартні елементи, такі як кнопки, селекти, чекбокси автоматично визначають цей порядок в залежності від того як написана розмітка сторінки.

Стан фокусу мають тільки елементи, з якими можна взаємодіяти. Статичні картинки чи текст не фокусуються.

Екранні читачі та їх недоліки

Коли справа стосується читання контенту, сліпі або слабозорі люди, а також люди з вадами навчання чи порушеннями когнітивних здібностей часто використовують допоміжні технології (наприклад, програми зчитування з екрана) для перетворення цифрового тексту у синтезовану мову або транскрибування його шрифтом Брайля.

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

Сьогодні існує багато екранних читачів як вбудовані в оперативні системи, так і сторонні. На жаль, кожен з них не є ідеальним та створює фрустрації на тому чи іншому етапі взаємодії, не говорячи вже про те, що українською мовою екранні читачі проговорюють слова з неправильними наголосами.

Photo by Omid Armin on Unsplash

Відомі сторонні екранні читачі для Windows:

• JAWS (Має багато функцій, правильно читає символ плюс, але не читає символ мінус, неправильно каже «п’ять тире два», тоді як має бути «п’ять мінус два», навіть якщо використовується об’єкт HTML − (не звичайне тире), щоб указати символ мінуса. JAWS також неправильно читає символ «менше або дорівнює». JAWS говорить «дорівнює», що неправильно).
• Window eyes (Не має української мови).
• NVDA (Безплатна. Майже не читає друкарські символи у конфігурації за замовчуванням, що робить такі звичайні символи, як зірочки та плюс, абсолютно марними для користувачів NVDA. Це означає, що веброзробники не можуть використовувати зірочку для позначення обов’язкових полів у формі, якщо вони не доповнюють зірочку іншим способом, зручним для NVDA. Подібним чином NVDA ігнорує символи плюса та рівності. Вона зчитує «п’ять два сім», тоді як має бути «п’ять плюс два дорівнює семи», що ускладнює — або робить неможливим — написання простих математичних виразів.

Що стосується NVDA та JAWS, розробники, які хочуть написати навіть найпростіші арифметичні вирази — наприклад, один плюс один або один мінус один — не можуть розраховувати на те, що програми зчитування з екрана правильно їх прочитають. Це серйозне обмеження.

Популярні вбудовані екранні читачі:

• Voice Over від Mac OS/ iOS (Не інформує користувачів про лапки, дужки чи тире, тому користувачі не знають, коли цитати чи фрази в дужках починаються, чи закінчуються. До честі VoiceOver робить коротку паузу для цих елементів, але користувачі не знатимуть різниці між тире, дужками чи цитатами, оскільки всі паузи звучать однаково, навіть якщо причини пауз різні, і повинні передавати різні смислові значення).
• Екранний диктор від Windows.
• Talk Back від Android.

📎 Why Don’t Screen Readers Always Read What’s on the Screen? Part 1: Punctuation and Typographic Symbols

Навігація клавіатурою

Якщо ви коли-небудь пробували переглядати веб-сайти за допомогою клавіатури, то ви знаєте, що кнопка “Tab” та клавіші зі стрілками переміщують вас зверху вниз і зліва направо. Технологія перетворення тексту в мовлення дозволяє користувачам прослуховувати контент і навігуватися за допомогою клавіатури, надаючи їм рівень зручності, задоволення та доступності, як і будь-яким інших користувачам.

📎 How to navigate with a keyboard

Photo by Sofya on Unsplash

Створення доступного контенту за допомогою мови

UX райтери взаємодіють зі своєю аудиторією через голос бренду, надаючи корисну інформацію у дружньому форматі. Ідеальний підхід включає написання універсальних текстів, що враховують інклюзивність. При створенні UX текстів необхідно спиратися на певні рекомендації для забезпечення доступності.

Пишіть для рівня читання та сприйняття тексту 6-го класу

Написання для рівня читання 6-го класу за шкалою читабельності Флеша-Кінкейда (Flesch-Kincaid readability scale) охоплює більше людей, а не лише тих що з вадами, які впливають на розуміння. Коли ми полегшуємо читання та сприйняття контенту, ми допомагаємо людям із різноманітними когнітивними та неврологічними здібностями.

Також такий підхід допомагає людям, які, можливо, читають українською як іноземною мовою, людям різного віку тощо. Зрозуміла мова та добре досліджена інтернаціоналізація та локалізація досягають найбільшої кількості аудиторії.

Важливо писати короткими реченнями, без складнопідрядних чи складносурядних зворотів. Уникати великої кількості прислівників і прикметників.

Окрім використання простої мови, ми повинні переконатися, що кожен абзац зосереджений на одній ідеї. Абзац з однією ідеєю легше запам’ятати та засвоїти. Те саме стосується речення з меншою кількістю слів.

Люди, які користуються програмами зчитування з екрана, можуть почути 25 складів на секунду, тоді як люди з рівнем читання 6-го класу можуть прочитати 3 слова на секунду. Використовуйте ці знання, щоб оцінити кількість часу, який знадобиться комусь, щоб прочитати фрагмент тексту.

Загалом, важливо писати грамотно та відповідно до сучасних норм правопису.

Уникайте внутрішнього жаргону без пояснення його значення

Поставте себе на місце людини, яка вперше знайомиться з вашими продуктами. Чи зрозуміють вони жаргонні або технічні слова, які ми використовуємо щодня? Чи надаємо ми достатньо контексту, щоб вони були зрозумілими?

Використання жаргону, внутрішньої мови або корпоративної мови в UX-текстах повинно передбачати, що люди за межами організації знають, що це означає. Якщо виникає необхідність використовувати жаргонізми, поясніть суть зрозумілою мовою та надайте контекст.

Уникайте розмовної мови та сленгу

Сленг і просторіччя не несуть однаковий сенс для Гостей різних поколінь. Слід уникати ейджизму, використовуючи просту, зрозумілу мову для всіх вікових категорій.

Також не варто покладатися на символи чи емодзі, оскільки вони містять культурні посилання, що робить їх за своєю суттю неінклюзивними. Емодзі також погано зчитуються екранними читачами, тому ними краще не зловживати.

Не покладайтеся на візуальні елементи для отримання контексту

Не покладайтеся на візуальні елементи для передачі інформації — будьте чіткими в мікро-текстах. Зображення можуть доповнювати тексти, але не заміняти їх. Ось швидкий прийом: видаліть усі візуальні елементи з екрана, для якого ви пишете копі. Чи текст все ще дає зрозуміти, де ви знаходитесь і що вам потрібно робити далі?

Вибирайте слова свідомо

Такі слова, як «Клікніть»/«Клацніть» або «Перегляньте», часто зустрічаються у закликах до дії (call-to-actions), і проблема з ними полягає в тому, що вони припускають, як хтось орієнтується в продукті. Наприклад, людина з вадами зору не буде «переглядати» продукт. Замість цього краще зосередитися на неупереджених дієсловах, таких як «Оберіть» або «Ознайомтеся». Уникайте фраз, особливо тих, які мають спрямованість на фізичні здібності, наприклад «Давно не бачилися!».

Вибір інклюзивної мови допомагає враховувати потреби різних користувачів. Наприклад, уникання гендерних стереотипів у текстах та використання мовних конструкцій, які включають усіх користувачів, а не виключають когось на основі їхньої ідентичності.

Надавайте чіткі заклики до дії (call-to-actions) та назви кнопок

Важливо писати чіткі заклики до дії — це покращить зручність використання продукту (і його взаємодію з користувачем) для всіх — включно з користувачами з вадами зору.

Сповіщайте про помилки зрозуміло

Повідомлення про помилки чи невірні дані мають бути викладені зрозуміло, з ясними поясненнями та пропозиціями змін.

Щоб визначити чи зрозумілі UX-тексти, поставте собі такі запитання:

• Чи мова зрозуміла і проста?
• Чи кожен абзац зосереджений на одній ідеї?
• Чи є довгі абзаци або довгі блоки нерозривного тексту?
• Чи всі заголовки, посилання, елементи керування та мітки чіткі та описові?

Photo by Alvaro Reyes on Unsplash

Створення доступного контенту за допомогою технічних підходів

Доступні тексти та мікротексти повинні гарантувати, що всі типи користувачів будуть включені, і головна особливість доступності UX-контенту — це екранні читачі. Щоб створювати доступний продукт, необхідне розуміння структури та семантики.

Порядок елементів та ієрархія контенту

Програми зчитування з екрана зчитують сторінку та її контент у послідовному порядку. Коли справа доходить до написання UX-текстів, потрібно надати інформацію, необхідну користувачеві для виконання завдання, перш ніж він приступить до дії. Також, необхідна хороша структура контенту — з заголовками, абзацами, списками тощо.

Розмежування текстового контенту заголовками, списками або зображеннями, допомагає дати користувачеві перерву в думках і підтримувати різні види сприйняття інформації. Використовуйте заголовки, щоб логічно згрупувати та підсумувати інформацію. Заголовки, посилання, елементи керування та мітки мають бути чіткими та описовими, щоб покращити здатність користувачів зрозуміти.

Необхідно знати, як програма зчитування з екрана взаємодіє з елементами HTML на сторінці, щоб розуміти, як покращити роботу з ними.

• Landmark Elements (орієнтирні елементи) — header, nav, main, та footer дозволяють програмі зчитування з екрана переходити до важливих розділів дизайну.
• Headings (h1 → h6) — дозволяють програмі зчитування з екрана просканувати сторінку та отримати огляд високого рівня. Програми зчитування з екрана також можуть переходити до будь-якого заголовка.
• Lists (ul та ol) — згрупування пов’язаних елементів разом дозволяють програмі зчитування з екрана легко переходити від одного елемента до іншого.
• Buttons — ініціюють взаємодії на поточній сторінці.
• Links — забезпечують навігацію або отримання інформації.
• Form labels — повідомляють програмі зчитування з екрана, що значить кожен введений текст.

На інформаційних сторінках сайтів, у разі використання непоширених абревіатур чи акронімів (URL, CAPTCHA), рекомендується надавати повний термін під час першого використання та додавати скорочену версію в дужках. Ви також можете використовувати <abbr> або <acronym> у HTML.

📎 Designing for Screen Reader Compatibility

Слідкуйте за макетом (layout)

Вирівнювання тексту має бути за лівим краєм. Повне вирівнювання тексту створює “текстові ріки” або вирівнювання пробілів, що створює пропуски в тексті. Це робить текст особливо складним для читачів з дислексією. Уникайте перемикання вирівнювання в одному поданні текстів.

Максимальна довжина рядка має бути — 45–75 символів. Занадто довгий рядок змушує користувачів втрачати фокус і ускладнює правильний перехід до наступного рядка, тоді як занадто короткий рядок змушує користувачів занадто часто стрибати, викликаючи втому в очах.

Додайте альтернативний текст (alt text) до зображень, значків та ілюстрацій

Щоразу, коли ви додаєте зображення чи піктограми на веб-сторінки, не забувайте додавати текст заміщення (alt text). Коли відвідувач заходить на сайт за допомогою програми зчитування з екрана, він чує альтернативний текст для вашого зображення, а не бачить зображення. Через це гарною ідеєю буде додавати альтернативний текст до зображень і піктограм, які передають певну інформацію або створюють контекст.

Надайте текстові альтернативи для мультимедіа

Забезпечення текстових альтернатив для аудіо та відео контенту допомагає людям із слуховими чи зоровими обмеженнями зрозуміти контент без необхідності перегляду чи, навпаки, прослуховування.

Налаштуйте взаємодії

Уникайте дій «Очистити» та «Скинути» для форм, тому що їх можна випадково вибрати і стерти багато кропіткої роботи заповнення. Налаштуйте зберігання форм, щоб користувачі під час їх заповнення могли до них повернутися. Забезпечте наявність слів автозаповнення.

Не створюйте додаткові файли для завантаження

Для покращення доступності і досвіду Гостей — деталі акцій слід показувати у вигляді сторінок, а не файлів PDF, які мають завантажуватися окремо.

Використання стандартів Web Content Accessibility Guidelines (WCAG) 2.1

Загалом, доступність через тексти та інклюзивність у UX Writing грають важливу роль у створенні цифрових продуктів, які допомагають всім користувачам з легкістю взаємодіяти з інтерфейсом та змістом, незалежно від їхніх індивідуальних потреб і характеристик.

📎 Короткий посібник з цифрової доступності від Дія

📎 Настанови з доступності вебвмісту (WCAG) 2.1

📎 Інклюзивний дизайн графічних інтерфейсів — free course | Notion

Photo by Rivage on Unsplash

Використання стандартів Web Content Accessibility Guidelines (WCAG) 2.1 має велику важливість при створенні цифрових продуктів, оскільки це сприяє забезпеченню доступності інтернет-ресурсів для всіх користувачів, включаючи осіб з різними видами обмежень і вад. Ось декілька ключових причин, чому використання WCAG 2.1 є настільки важливим:

• Забезпечення рівних можливостей: WCAG 2.1 допомагає створювати цифрові продукти, які доступні для всіх користувачів, незалежно від їхньої фізичної чи психологічної здатності. Це робить інтернет-сайти, застосунки та інші цифрові ресурси більш рівноправними та інклюзивними.
• Законодавча вимога: У багатьох країнах законодавство вимагає відповідність веб-ресурсів стандартам доступності. Наприклад, в США секція 508 Закону про відновлення та розширення можливостей осіб з інвалідністю вимагає, щоб федеральні ресурси відповідали WCAG 2.0 AA.
• Збільшення аудиторії: Забезпечення доступності допомагає залучати нових користувачів, таких як люди з обмеженими можливостями, літні люди або тимчасово обмежені особи. Чим більше користувачів мають доступ до вашого продукту, тим більше відвідувачів і потенційних клієнтів ви залучаєте.
• Покращення SEO: Деякі аспекти стандартів WCAG, такі як якість контенту та його структура, також сприяють покращенню SEO. Виконання WCAG 2.1 може допомогти підняти позицію у пошукових системах.
• Позитивний імідж бренду: Зобов’язання до доступності свідчить про турботу компанії про користувачів та їхні потреби. Це може створити позитивне враження про бренд і збільшити лояльність клієнтів.
• Відповідність нормативним документам: Багато урядових, освітніх і комерційних організацій вимагають відповідності WCAG для проектів, що фінансуються або підтримуються ними. Виконання стандартів WCAG 2.1 дозволяє дотримуватися цих вимог і отримувати більше можливостей для співпраці.

Загалом, WCAG 2.1 є важливим інструментом, який допомагає створювати цифрові продукти, що доступні для всіх, забезпечуючи рівні можливості для усіх користувачів та допомагаючи збільшити успіх вашого бізнесу.

Якщо вам сподобалася моя стаття, будь ласка, поплескайте їй якомога більше! Ваша підтримка надихне мене створювати більше корисного контенту в майбутньому ❤️