Для цього особливого виду тестування наша звичайна форма для звіту про помилку не містить достатньої кількості полів для всієї необхідної інформації. Крім того, до звітів доступності застосовуються додаткові вимоги на відміну від вимог до звичайних звітів про помилки, сформульовані в статтях академії "Вимоги до звітів про помилку" та "Вкладення до звітів про помилку".
Додаткові зобов'язання, які повинні бути дотримані в кожному звіті доступності, описані в наступних розділах. Наприкінці статті наведено два приклади, які демонструють звіти доступності із застосованими правилами.
Заголовок
Заголовок вашої помилки повинен відповідати наступному формату, залежно від рівня доступності (A або AA) та критерію успішності WCAG (WCAG Success checkpoint):
Помилки рівня А | Помилки рівня АА |
|
|
|
|
Плейсхолдер слід замінити описом вашої помилки, який ви використовуєте у звичайних звітах про помилки. Наприклад:
[A] [1.1.1] Посилання на соціальні мережі анонсуються некоректно
Ось приклади заголовків помилок для найпоширеніших проблем доступності. Не соромтеся використовувати та адаптувати їх для своїх цілей:
[A] [4.1.2] Посилання "Вийти з системи" оголошено без ролі[A] [2.4.3] Кнопка перемикача фільтра оголошена з невірним станом[A] [2.4.2] Заголовок сторінки не є унікальним і описовим[AA] [2.4.7] Тестове посилання під кнопкою "Вхід" не відображає контур фокусу
Кроки для відтворення
В цілому
Перший крок: Крім виклику тестового URL, включіть ім'я інструменту, який ви використовували в першому кроці. Замініть плейсхолдер <інструмент>, наприклад, на NVDA, JAWS, WAVE і т.д., у наступному шаблоні:
Використовуючи <інструмент>, відкрийте <тестовий URL>, так наприклад:Використовуючи NVDA, відкрийте https://www.test.io
Кілька елементів: Якщо критерій успішності не спрацьовує для декількох елементів одного типу (наприклад, кнопки або посилання), згрупуйте ці повторення в одному звіті.
Багаторазові повторення: Щоб задокументувати кілька ідентичних випадків проблеми на одній сторінці або на різних сторінках, перелічіть їх у фактичних результатах у розділі під назвою "Інші випадки:".
Опис дій: Оскільки люди з вадами зору або незрячі не користуються комп'ютерною мишкою, не описуйте дії мишкою. Натомість опишіть дії з клавіатурою та тачпадом, наприклад:
Використовуйте клавішу "TAB" для переходу до облікового запису користувачаНатисніть клавішу "ENTER" для активації посилання "Вийти з системи"Проведіть пальцем вліво, для фокусування на меню навігації
Автоматизовані інструменти: Ви можете використовувати такі інструменти, як WAVE, для виявлення проблем, але ваш звіт, включаючи ваші кроки, повинен бути описаний з точки зору користувача. Ви не повинні описувати в кроках, як ви використовуєте автоматизований інструмент та що він повідомляє, а описати все так, ніби ви не використовували жодного інструменту, а просто спиратися на критерії успішності WCAG.
Проблеми з контрастом кольорів
Ваші кроки повинні бути наступними (замініть плейсхолдери):
Відкрийте <тестовий URL>...
...
Виміряйте коефіцієнт кольорової контрастності <назва елемента>
Про проблеми з одним і тим самим набором кольорів можна повідомити лише один раз. Наприклад, проблема з синім переднім планом на білому фоні та білим переднім планом на синьому фоні - це один і той самий набір кольорів, і їх не можна подавати двічі.
Фактичний Результат
У полі "Фактичний результат" - окрім типового фактичного результату, який використовуєте у звичайних дослідницьких тестах - вкажіть, який контрольний пункт невдалий, наприклад:
Невдалий WCAG 2.1 пункт(и): 1.3.2 Рівень A
Вкладення
Яке саме вкладення потрібно прикріпити, залежить від типу проблеми доступності:
Контраст кольорів: знімок екрану (скріншот)
Всі інші проблеми: відеозапис екрану (скрінкаст)
Скріншоти: Як і в звичайних тестах, проблема повинна бути виділена на скріншотах.
Скрінкасти: Записуючи відео, будь ласка, сповільніть свої дії до того, як дійдете до елемента, в якому виникла помилка. Якщо ви будете записувати свої дії зі звичайною швидкістю, глядач може пропустити помилку. Якщо ви виконуєте дії занадто швидко під час запису, керівник команди може попросити вас покращити запис.
Помилки навігації при використанні клавіатури
У вашому скрінкасті має бути вказано, які клавіші ви натискали на клавіатурі під час запису, інакше глядачі не зможуть зрозуміти суть проблеми. Увімкніть екранну клавіатуру на вашому комп'ютері, яка доступна як для Windows, так і для macOS. Віртуальна клавіатура буде відображатися на частині екрану, тож ви просто натискаєте на кнопку, щоб імітувати відповідне натискання клавіші.
Шаблон форми
Наразі у нас немає форми для звітів доступності, тому ми використовуємо форму для звітів про юзабіліті. Для того, щоб всі звіти виглядали однаково, їх потрібно відформатувати. Нижче наведено відформатований шаблон, який просимо вас використовувати.
Просто скопіюйте шаблон в єдине текстове поле форми юзабіліті, замініть плейсхолдери (наприклад, <інструмент>, <URL> і т.д.) і додайте свою інформацію.
Примітки:
Якщо ви не використовували інструмент для пошуку помилки, наприклад, для помилок навігації за допомогою клавіатури, перший крок має бути звичайним: Відкрийте <URL>.
Якщо вам потрібно більше або менше кроків, просто змініть нумерацію відповідно.
##### Steps
1. Using <tool>, open <URL>
2.
3.
4.
5.
##### Actual result
<actual result>
**Failed WCAG 2.1 checkpoint(s)**: X.X.X Level <A/AA>
##### Expected result
<expected result>
Приклади
Приклад зчитування з екрану
Заголовок:
[AA] [2.4.3]: Фокус не встановлюється в модальному гамбургер-меню
Кроки:
Використовуючи VoiceOver, відкрийте https://test.io/
Свайп праворуч, щоб відобразити гамбургер-меню
Двічі тапніть, щоб активувати його
Проведіть пальцем по розгорнутому модальному вікні гамбургер-меню і спостерігайте
Фактичний результат:
Фокус продовжує переміщуватися через вміст на задньому плані за межами модального вікна гамбургер-меню, що не є його частиною.
Невдалий WCAG 2.1 пункт(и): 2.4.3 Рівень AA
Очікуваний результат:
Фокус має бути зафіксований у модальному гамбургер-меню. Приховані елементи з нижньої сторінки не повинні бути сфокусовані та анонсовані.
Приклад навігації за допомогою клавіатури
Заголовок:
[AA] [2.4.7] Посилання "Gat a Demo" не має видимого контуру фокусу
Кроки:
Використовуючи NVDA, відкрийте https://test.io/
Натисніть TAB, щоб сфокусуватися на кнопці "Gat a Demo" в розділі "Do you take Quality Personally" і спостерігайте
Фактичний результат:
Посилання "Get a Demo" в розділі “Do you take Quality Personally” не має контуру фокусу.
Інші випадки: Іконки соціальних мереж
Невдалий WCAG 2.1 пункт(и): 2.4.7 Рівень AA
Очікуваний результат:
Дієві елементи повинні мати видимі контури фокусу, коли вони сфокусовані.
Приклад контрастності кольорів
Заголовок:
[AA] [1.4.3] Білий текст на синьому фоні для посилання "Gat a Demo" не відповідає вимогам щодо контрастності кольорів
Кроки:
Відкрийте https://test.io/
Прокрутіть вниз до посилання "Gat a Demo"
Виміряйте коефіцієнт кольорової контрастності посилання "Gat a Demo"
Фактичний результат:
Посилання “Get a Demo” не відповідає вимогам контрастності кольорів. Синій текст на передньому плані (#21BEF4) на білому фоні (#FFFFF) має коефіцієнт контрастності лише 2.15:1.
Невдалий WCAG 2.1 пункт(и): 1.4.3 Рівень AA
Очікуваний результат:
Дрібний текст повинен мати контрастність не менше 4.5:1. Великий текст (14 пікселів напівжирного або 18 пікселів та більше) повинен мати контрастність не менше 3:1.