Це переклад статті «It's Not About Morals: Accessibility is for the Masses» з блогу веб-розробниці Уни Кравець.
Говорячи про доступність, часто мають на увазі лише людей з обмеженнями. І невеликі фірми зі стартапами часто легко відмахуються від неї, виправдовуючись тим, що їм ніколи і нема на що возитися з цією групою. Хоча деяким групам людей дійсно потрібен особливий підхід, від загального поліпшення доступності виграє і бізнес в цілому.
Доступність не зводиться до моральних принципів та зручності Інтернету для крихітної групи людей. Вона говорить про зручність Інтернету для мас. Серйозне ставлення до доступності у вашій компанії не повинно триматися на загрозі потрапити до суду чи посилань до моральних аргументів. Навпаки, зрозумійте, що величезній масі ваших користувачів буде набагато зручніше, якщо покращиться доступність.
І це проявляється по-різному.
Розмітка
Головний плюс для a11y (загальноприйняте скорочення для «accessibility», тобто доступності) — використання потрібних елементів і ARIA-ролей, де треба. Ви, мабуть, чули, що це добре для людей зі скринрідерами. Так і є! Але майте на увазі, що скринрідерами користуються не тільки люди з поганим зором.
Зразок: я користуюся скринрідерами постійно. Мені краще сприймати довгі тексти. Це допомагає мені зосереджуватись на головній темі. У моєму випадку це діє, я вже писала про це тут, і раджу спробувати теж.
Якщо ваша програма стане доступною, їм буде легше користуватися буквально кожному!
Словник
Якщо ви читаєте цей блог, ймовірно, ви працюєте над англомовним продуктом. Але з ймовірністю ¼ ваша рідна мова — не англійська. Якось несправедливо, що англійська мова настільки підім'яла під себе світ технологій та опенсорс загалом, але не про це. Повернемось до доступності.
Важлива частина доступності — вибір мови. Ясність та лаконічність викладу. І щоб не було занадто хитромудрих слів, якщо без них можна обійтися.
25,4% читачів мого блогу, чия мова входить до першої десятки — не англомовні. Хоча англійська і на першому місці, на другому місці — російська, на третьому — китайська. Алфавіт, граматика та словник у всіх цих мов абсолютно різні. І безліч слів унікальна. Вам же знайомо, якщо ви говорите кількома мовами, як деякі слова часом взагалі не вдається перекласти з однієї мови іншою? Причому часто навіть не усвідомлюєш цього, доки не спробуєш перекласти?
Як би там не було, фокус у тому, що для більш ніж чверті читачів мого блогу англійська мова — не рідна. Це зовсім не меншість. Це дуже багато користувачів.
Ілюстрації
Продовжуючи цю тему інтернаціоналізації, ще один стовп доступності — щоб можна було перекладати текст (тобто він був саме текстом у коді). Я сповна намучилася з цим одного разу на зимових студентських канікулах, коли мені по півдня доводилося закривати рекламні віконця у грі «Кенді Краш» для моєї бабусі, у якої з англійською погано.
Є чудові ігри для айпада, які вміють підлаштовуватися під ваші мовні уподобання, тому що текст у них написаний у коді. А є ігри на кшталт «Кенді Краш», де тексти вставлені картинками, тому їх ніяк не перекладеш.
Ось чому так важливо намагатися якомога не вставляти жодних текстів в ілюстрації (навіть діаграми). А якщо без них ніяк, то опишіть все до дрібниці і/або додайте візуальну підказку. Це справді важливо. Чисто текстові діаграми не зможуть розібрати тих, хто не знає вашої мови.
Чи перевіряли ви коли-небудь, як поводиться ваш сайт під час перекладу? Це легко: у Хромі можна клацнути на сторінці правою кнопкою та вибрати «Перекласти англійською». Після відкриття діалогового вікна можна вибирати з цілої купи мов.
Джейк Арчібальд використовує у себе у статтях чудові анімовані SVG-діаграми. Хоча вони масштабуються і анімація в них допомагає донести думку, SVG-тексти не перекладаються іншими мовами без перезавантаження сторінки, оскільки DOM працює з SVG трохи інакше (бо до них звертаються за допомогою SVGElement, а не DOMElement).
Ось що буває при перекладі сторінки стандартним перекладачем у Хромі:
Якщо «прогнати» сайт через веб-інтерфейс Google Translate Tool, то він зможе перекласти SVG-тексти, якщо в зазначеному шрифті є потрібні символи, але може зіпсувати SVG тим, що текст перестане поміщатися у своїх рамках. Отже, хоча текст на діаграмі й можна виділити, майте на увазі, що SVG-картинки — не зовсім те, що потрібно перекладати текст.
Добре вивчивши цю тему, я з'ясувала, що найкраще рішення — використовувати звичайні DOM-елементи на кшталт абзаців, позиціонуючи їх абсолютно відносно позиціонованому контейнері.
Газета «Нью-Йорк Таймс», яка майстерно робить чудові інтерактивні статті, показує нам, як це робити, ось у цій, яка чудово перекладається:
Типографіка
Коли справа доходить до вибору тексту, не забувайте подумати про друкарню. Дивлячись на картинку з гри «Кенді Краш» вище, пам'ятайте, що мальований текст може заплутати когось, хто володіє англійською не вільно і не може розпізнати його у всіх випадках.
Або погляньте на цей приклад:
Крім зеленої кнопки, яка збиває з пантелику (яка кольором і формою не відрізняється від кнопки запуску гри, шикарний шахрайський прийом у всій красі), текст воістину читається насилу.
Крім того, всі підзаголовки написані рукописним шрифтом. Знову ж таки, це посилює плутанину і ускладнює користування додатком. Тож, будь ласка, подумайте над кольоровим контрастом та шрифтом!
Висновок
Впроваджувати доступність для людей з особливими потребами, безперечно, важливо, але думати про доступність у такому ключі загрожує спокусі знехтувати доступністю взагалі, ніби вона зачіпає занадто мало користувачів і тому не настільки важлива. Швидше за все, група користувачів, на яких вона впливає, набагато більше, ніж ви думаєте!
«Доступність схожа на кекс із чорницею — не можна запхати в нього ягоди потім» (@CordeliaDillon)
Коротка вичавка: використовувати відповідну розмітку, ясну мову, розбірливу друкарку з правильним контрастом кольору, і не змішувати текст з картинками — ось найголовніше, чим ви можете зробити свої сайти доступнішими для мас.
