Повний посібник з веб-доступності
Автор Команда AsasWeb 5 хв читання
Веб-доступність означає створення сайту, яким може користуватися кожен, зокрема люди, що покладаються на клавіатуру, читач екрана, субтитри або високий контраст. Міжнародний стандарт це WCAG 2.2 на рівні AA, і він спирається на чотири ідеї, а саме що сторінки мають бути сприйнятними, керованими, зрозумілими і надійними. Більша частина роботи є фундаментальною, а не косметичною, тобто правильні елементи HTML, видимий порядок фокуса, достатній колірний контраст, справжні текстові альтернативи і зрозумілі форми. Закладена від початку, вона коштує небагато, розширює вашу аудиторію, зменшує юридичні ризики і водночас покращує SEO.
Веб-доступність це практика створення сайтів, якими може користуватися кожен, зокрема люди з інвалідністю. Це охоплює широке коло людей: того, хто пересувається сторінкою з клавіатури замість миші, користувача читача екрана, який чує сторінку замість того, щоб її бачити, людину зі слабким зором, якій потрібен сильний контраст, і будь-кого, хто дивиться відео без звуку. Цей посібник пояснює, що означає доступність, чому вона варта вашої уваги і як її досягти без жаргону.
Що насправді означає доступність
Міжнародним орієнтиром є Настанови з доступності веб-вмісту, відомі як WCAG. Чинна версія це WCAG 2.2, і більшість організацій прагнуть рівня AA, тобто рівня, на який посилаються закони, як-от Європейський акт про доступність. Вам не потрібно заучувати настанови напам’ять, але корисно знати чотири принципи, на яких вони тримаються. Сторінка має бути:
- Сприйнятною. Люди можуть сприйняти вміст, байдуже, бачать вони його, чують чи відчувають на дотик. Зображення мають текстові альтернативи, відео має субтитри, а текст має достатній контраст.
- Керованою. Люди можуть користуватися сторінкою тим, що мають: мишею, лише клавіатурою, перемикачем або голосом. Ніщо не блокує їх і ніщо не залежить від відчуття чи дії, які їм недоступні.
- Зрозумілою. Вміст читається ясно, а інтерфейс поводиться передбачувано, тож люди не дивуються і не розгублюються.
- Надійною. Сторінка побудована так, щоб браузери і допоміжні технології, теперішні й майбутні, могли надійно її інтерпретувати.
Майже все практичне в цьому посібнику зводиться до однієї з цих чотирьох ідей.
Для кого це
Спокусливо уявити невелику групу користувачів, але доступність ширша за це. Приблизно одна людина із шести живе зі значною інвалідністю, і ще більше людей виграють від доступного дизайну, не вважаючи себе людьми з інвалідністю: старший клієнт, хтось із тимчасовою травмою, людина з повільним з’єднанням або будь-хто з телефоном під яскравим сонцем. Проєктування для крайніх випадків робить досвід кращим і для середини. Субтитри допомагають у гучній кімнаті, сильний контраст допомагає на дешевому екрані, а чіткий порядок фокуса допомагає всім, хто віддає перевагу клавіатурі.
Основи, які важать найбільше
Добра новина в тому, що робота з найбільшою віддачею є структурною, а не декоративною. Закладіть ці основи правильно, і ви пройдете більшу частину шляху до AA.
Використовуйте правильний елемент HTML
Справжня кнопка, справжнє посилання і справжній список мають вбудовану поведінку і значення, безкоштовно. Зберіть їх наново зі стилізованих універсальних блоків, і вам доведеться вручну додавати фокус, підтримку клавіатури і правильне озвучення, а більшість команд щось та й пропустить. Це звичка з найвищою віддачею в доступності. Ми розбираємо її докладно в статті чому семантичний HTML досі важливий.
Зробіть так, щоб усе працювало з клавіатури
Багато людей ніколи не користуються мишею. Кожен елемент керування має бути досяжним і керованим лише з клавіатури, в логічному порядку, з контуром фокуса, який справді видно. Це також найшвидший ручний тест, який ви можете провести на власному сайті. Дивіться навігація з клавіатури, тест, який провалює більшість сайтів.
Обирайте кольори, які може прочитати кожен
Текст потребує достатнього контрасту з фоном, і колір ніколи не має бути єдиним способом передати значення. Це одна з найпоширеніших помилок і одна з найлегших до виправлення, щойно ви знаєте цільові показники. Наш посібник з вибору доступного колірного контрасту проводить через усі числа.
Пишіть справжні текстові альтернативи
Зображення, що несуть зміст, потребують альтернативного тексту, щоб користувачі читачів екрана отримували ту саму інформацію, а декоративні зображення мають бути позначені як декоративні, щоб їх пропускали. Добрий альтернативний текст також допомагає пошуковим системам розуміти ваші зображення. Дивіться альтернативний текст для SEO і доступності.
Створюйте форми, які люди можуть заповнити
Форми це місце, де багато відвідувачів вирішують стати клієнтами, тож заплутана або недоступна форма коштує вам напряму. Підписані поля, зрозумілі помилки і розумне групування допомагають кожному дійти до кінця. Ми пояснюємо як у статті доступні форми приносять більше лідів.
Чому це вигідно для вашого бізнесу
Доступність часто подають як відповідність вимогам, але передусім це більша аудиторія і кращий досвід. Доступний сайт охоплює більше клієнтів, конвертує більшу їх частину і наражає вас на менші юридичні ризики, поки закони про доступність жорсткішають у Європейському Союзі та поза ним. Комерційні аргументи ми наводимо в статті доступність вигідна для бізнесу.
Є і тихий бонус. Та сама структура, що допомагає допоміжним технологіям, тобто змістовні заголовки, справжні орієнтири, описові посилання і належні альтернативи, є саме тим, що читають пошукові системи, щоб зрозуміти сторінку. Доступність і SEO побудовані на тих самих основах, тож робота окупається двічі.
Зауваження щодо e-commerce
Онлайн-магазини мають свої больові точки: галереї товарів, фільтри, вибір варіантів і оформлення замовлення, яке не повинно нікого загубити. Недоступне оформлення замовлення це покинутий продаж. Якщо ви продаєте онлайн, чекліст доступності для e-commerce охоплює найважливіші частини.
Як тестувати
Щоб почати, лабораторія не потрібна. Коротка повторювана процедура виявляє більшість проблем:
- Відкладіть мишу і пройдіть усю сторінку клавішею Tab. Чи можете ви дістатися до всього і всім скористатися, і чи завжди бачите, де перебуваєте?
- Запустіть автоматичну перевірку, як-от axe або Lighthouse. Вона не впіймає все, але швидко позначить очевидні помилки.
- Перевірте свій колірний контраст за цільовими показниками AA.
- Спробуйте читач екрана на десять хвилин. У більшості систем він уже вбудований.
Автоматичні інструменти знаходять хіба що третину проблем, тож поєднуйте їх із ручними перевірками вище. Мета не в ідеальному балі, а в сайті, яким реальна людина справді може користуватися.
З чого почати
Якщо це здається завеликим, почніть з основ: правильний HTML, робочий порядок клавіатури і достатній контраст. Самі лише ці три речі усувають більшість бар’єрів. Далі опрацьовуйте альтернативний текст, форми і решту як постійну звичку, а не разовий проєкт.
Якщо потрібна допомога, доступність закладена в усе, що ми робимо, і ми також пропонуємо її як окрему послугу. Дивіться веб-доступність або розпочніть проєкт і розкажіть, на якому етапі ваш сайт сьогодні.