Ми щодня користуємося гаджетами з інтернетом для роботи, відпочинку, спілкування або хобі. Коли стоїть задача створити аплікацію, здавалося би все стандартно: спершу слід визначитися зі стилем, дизайном та контентом. Далі написати код, потім усе протестувати. Але, уявіть якби Ви користувалися цією аплікацією, поводилися, якщо б не могли повноцінно бачити, чути, рухатися? Ми здорові люди майже ніколи над цим не задумуємося, проте QA тестувальнику потрібно подбати за доступність ресурсу для людей з обмеженими можливостями також.

QA несуть відповідальність аби жоден користувач не був знехтуваним та втрачений. Щоб цей допис був не тільки пізнавальним, але й практичним ми додали у нього максимальну кількість корисних посилань на «заміточку»!

Чому важливо перевіряти Accessibility? 

Згідно з міжнародними стандартами інтернету W3.org та Web Content Accessibility Guidelines (WCAG) 2.1 всі електронні та інформаційні технології повинні бути доступні для людей з обмеженими можливостями. Необхідність створювати доступні сайти офіційно підтримана законодавством багатьох країн, так званим Accessibility Legislations. У таких країнах, як США, Канада, Австралія та країнах ЄС, куди прагне аутсорс — відповідність стандартам accessibility є дуже строгою і карається доволі суворо. Вимоги стосуються як сайтів державних, так і комерційних організацій. 

В інших країнах вже теж говорять про обов’язкове забезпечення доступності сайтів для комерційних організацій у близькому майбутньому. Accessibility сайтів це актуальне завдання для QA Engineers й у плані Compliance Testing, бо рано чи пізно до підтримки цієї політики прийде більшість держав. Отже, сформулюємо:

Що таке Accessibility Testing

Accessibility Testing — це область знання, яка займається вивченням питань доступності сайтів, мобільних додатків і програмного забезпечення для людей з обмеженими можливостями. Йдеться про те, що контент на сайті має бути доступним всім, не зважаючи на будь-які обмеження:

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

Згідно WCAG, доступність веб-ресурсу визначається наступними чотирма принципами:

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

Залежно від якості виконання цих умов, сайти поділяються на кілька рівнів доступності:

  • Мінімальний (A)
  • Середній (АА)
  • Високий (ААА)

Прибуток або вигода, яку отримує бізнес

Уявіть, у світі живе понад 1 мільярд людей з особливими потребами. Щодо України, то у 2017 році кількість людей з інвалідністю становила 2,6 млн. 

Так, всім цим користувачам потрібні інклюзивні сайти. Створювати інклюзивні сайти виявляється вигідно! 

Чимало аналітичних досліджень доводять, що доступні сайти у поєднанні з хорошим дизайном, окрім більшої аудиторії мають кращі результати у видачі пошуковиків. Вони добре взаємодіють з SEO, бо зазвичай володіють швидкодією та є більш зручними у використанні. А це є вже бізнесова складова. Компанії з інклюзивними сайтами збільшують свої прибутки. З цього приводу цікава інформація проскакує у статті на DOU <=

Сайти з підтримкою Accessibility мають краще Usability. Ви не можете відповідати стандартам своїх користувачів, якщо Ви не досліджуєте їх потреб.

Приклади, відомий світовий рітейлер Теско зробив свій сайт доступним. І це збільшило прибутки на 13 мільйонів фунтів стерлінгів. Як виявилось, сайт з полегшеною навігацією та спрощеним доступом сподобався всім користувачам, а не лише тим, хто має особливі потреби. Другий приклад — завдяки покращенням доступності американська компанія Virgin збільшила свої онлайн прибутки на 68%. 

12 технік дизайну User Experience

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

#1 Подбайте про доступність з етапу вимог

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

#2 Контраст кольорів

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

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

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

Саме тому, варто пам’ятати правила:

  • Шрифт повинен бути розбірливим.
  • Оптимальним вибором є чорний на білому і навпаки. 
  • Відповідно до WSAG, коефіцієнт контрасту має становити мінімум  4.5:1. Перевірити контрастність додатку можна за допомогою цього сайту https://webaim.org/resources/contrastchecker/
  • Повинна надаватися можливість зміни розміру шрифту (крім титрів і зображень тексту) в межах до 200% без втрати контенту і функціональності.
  • Рядок не повинна бути довшим за 80 символів.
  • Вирівнювання по ширині небажане.
  • Мінімальний інтервал між рядками менше 1,5 інтервалів, а інтервал між абзацами мінімум в 1,5 рази більше.
  • Текст на зображеннях повинен використовуватися тільки для оформлення.
  • Текст кнопок і ключових елементів повинен бути інформативним.
  • Всі поля введення повинні мати осмислені текстові мітки.

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

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

Приклад невдалого перемикача, дизайн якого можна виправити, додавши опис стану вимикача (off / on).

#3 Вирізняй інформацію візуально

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

Узагалі рекомендується використовувати більше однієї змінної для візуальної диференціації інформації.

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

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

#4 Поля для form fields і text inputs

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

#5 Виявляється Веб контент можна слухати, а не читати

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

Це стає можливим завдяки спеціальним програмам, які називаються скрінрідерами. Вони зачитують усю текстову інформацію, представлену на веб-сторінці. Але як бути з мультимедійною частиною — відео і картинками? Очевидно, повністю не текстовий контент повинен мати текстовий еквівалент.

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

  • Прописують текст в атрибут <alt> зображення
  • Додають контекст для самого зображення

Тобто, потрібно описати, що відбувається на зображенні і яке це має відношення до контенту навколо зображення for images and alternative text, form labels, and headings across a site or system. 

Якщо додати порожній <alt> атрибут, програма читання екрану може пропустити зображення. Якщо не додати жодного alt тексту, програми просто пропустять файл. А це найгірше, що може бути. 

Як працює і як тестувати веб додаток скрінрідерами гарно описано у старенькій статті:

Тестування з використанням скрін рідерів або як ненадовго стати сліпим й не зійти з розуму

Медіаконтент, а також контент для створення специфічного сприйняття повинен мати короткий опис змісту. Медіаконтент повинен супроводжуватися синхронізованими титрами. На відео-ресурсі youtube.com до кожного відео прикладається його короткий опис. Відеозаписи містять субтитри, які можна перекласти на різні мови. Субтитри не тільки передають пряму мову, а й описують фонову музику і супутні звуки.

#6 Правильне форматування заголовків та підзаголовків

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

Тому для назви сторінки чи головного заголовку використовуй <h1>. Для заголовків основної  частини <h2>. Для підзаголовків — <h3>. 

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

#7 Інтерактивні елементи

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

#8 Управління. Обов’язково протестуй навігацію клавіатури

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

Для даної категорії користувачів передбачено управління за допомогою клавіатури.

Воно повинно відповідати таким умовам:

  • відсутність обмежень по часу натискання на клавішу
  • можливість введення інформації іншими способами
  • в разі використання нестандартного перекладу курсору і фокуса пропонується опис методу його переміщення

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

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

Тестування shortcuts клавіатури, щоб побачити, як працює сайт під таким тестом.

#9 Збільшуй розмір тач об’єкту

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

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

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

#10 Тестуй, тестуй і ще раз тестуй

Щоб правильно протестувати доступність сайту, потрібно увійти в положення користувача. Скористайся засобами голосової взаємодії. Позближуй екран. Випробуй все по черзі: мишку, тач-скрін, клавіатуру. 

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

#11 Дізнайся більше

Ось список гайдів, що допоможуть:

Підсумок:

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

Related posts

Leave a Comment

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.