Блог ·
Виняток доступності, який себе вимірює
Кожен перевіряч доступності зрештою має список винятків. У нашому їх два, кожен із доданим вимірюванням, і запуск падає, щойно один перестає збігатися.
Автор: Provibr
Наведіть автоматичний перевіряч доступності на справжній продукт, і ви дістанете число. Полагодьте все, що він знайшов, і ви дістанете менше число. Десь у цьому процесі ви натрапите на зауваження, яке справді не є дефектом, і тієї миті ви запишете свій перший виняток.
Це і є цікава частина, бо саме на списку винятків програма доступності тихо помирає. Він починається з двох добре обґрунтованих записів. Через рік їх одинадцять, три з яких більше ні з чим не збігаються, один ховає справжню проблему, і ніхто не памʼятає, чому там є хоч якийсь із них. Звіт каже нуль і не означає нічого.
Цього місяця ми побудували перевіряч для нашої панелі. Він не звітує жодного зауваження на жодному рівні серйозності, і ця стаття здебільшого про те, чому ми не віримо цьому числу самому собою.
Три правила були вимкнені типово, і два з них ховали зауваження
Бібліотека, якою ми користуємося, постачає частину правил вимкненими типово. Ми перевірили, які саме, спитавши її, а не припустивши: розбіжність імені та вмісту, комірки таблиці без заголовків і розмір цілі, усі вони вимкнені з коробки.
Два з них дали справжні зауваження на нашій панелі, 36 разом узятих, зокрема обидва з двох пунктів, які попередній раунд лишив відкритими. Тому перевіряч, що працює з типовим набором правил, є зеленим рівно на тих відмовах, які хтось уже шукав, а це найгірший різновид зеленого: він невідрізненний від продукту, з яким усе гаразд.
Їх увімкнено явно, і це єдине рішення змінило базовий рівень більше за будь-який інший вибір конфігурації.
Девʼять мов, бо одна мова це підкидання монети
Перемикач мови в нашій шапці показує дволітерний код і має доступне імʼя, яке каже, що це за мова. Англійською кнопка читається як EN і зветься «Language: English», і правило проходить, бо en випадково трапляється всередині English.
Нідерландською воно падає. Той самий компонент, той самий код, та сама розмітка.
Виміряно на всіх девʼяти мовах, які ми постачаємо: три падають і шість проходять, і кожна з тих шести проходить випадково: en всередині English, de всередині Deutsch, fr всередині Français, it всередині Italiano, es всередині Español, ro всередині Română. Перевірка однієї мови тут є порожньо зеленою.
Тож маркетинговий маршрут проганяє кожну мову на правилах, чий результат може залежати від мови. Це коштує часу, і це єдиний спосіб, яким те зауваження взагалі існує.
Базовий рівень і з чого він складався
Перший повний запуск по маркетингу, входу й панелі після входу дав 3 критичні, 51 серйозне, 72 помірні й 6 незначних. Усе це припадало на вісім правил.
| Правило | Зауваження |
|---|---|
| вміст поза орієнтиром | 60 |
| розбіжність імені та вмісту | 33 |
| контраст кольору | 13 |
| немає орієнтира main | 9 |
| порожній заголовок таблиці | 6 |
| прокручувана область без фокуса | 5 |
| комірка таблиці без заголовка | 3 |
| порядок заголовків | 3 |
Майже все це було структурним, а не візуальним. На сторінках входу й у панелі не було елемента main і не було посилання для пропуску навігації. У таблиць у статтях заголовки були порожні. Блоки коду прокручуються горизонтально, і до них не можна було дістатися з клавіатури, а це означає, що користувач клавіатури просто не може прочитати правий бік довгої команди. Вкладка статистики поставила заголовок діаграми на неправильному рівні під заголовком сторінки.
Після ремонтів: нуль, нуль, нуль, нуль. Що повертає нас до питання, чого той нуль вартий.
Два винятки, кожен із вимірюванням
У списку винятків рівно два записи, і кожен із них несе причину і вимірювання, яке справді було зроблено.
Контраст кольору за примусових кольорів. Прогін панелі з активними примусовими кольорами дав 610 відмов контрасту на дванадцяти сторінках. Це не дефект продукту, це взаємодія між перевірячем і браузером. Перевіряч читає -webkit-text-fill-color раніше за color, а Chrome другого не примушує. На сторінці входу, на тому самому заголовку, за того самого завантаження сторінки:
| властивість | звичайно | примусові кольори |
|---|---|---|
color | rgb(16, 19, 25) | rgb(255, 255, 255) |
-webkit-text-fill-color | rgb(16, 19, 25) | rgb(16, 19, 25) |
| тло сторінки | rgb(244, 246, 248) | rgb(0, 0, 0) |
Тож він порівнює авторський передній план із примусовим тлом і звітує 1,12 до 1 там, де екран насправді показує 21 до 1. У тому режимі вимога до контрасту все одно не діє, бо палітра належить користувачеві.
Правило вимкнено в тому одному режимі, і причину перевимірюють на кожному запуску. Якщо Chrome або перевіряч це полагодить, та самоперевірка впаде, і виняток доведеться обґрунтовувати заново. Виняток без самоперевірки є тихим білим списком.
Кнопка акаунта. Правило про розбіжність імені та вмісту спрацьовує на кнопці меню користувача в панелі. Шість кандидатів на доступне імʼя поставили на справжню кнопку й проганяли правило проти кожного. Воно проходить лише тоді, коли імʼя буквально містить рядок DKDemo Klant€0.00, у якому ініціали й назву акаунта злито разом, і падає з тим самим текстом, розставленим із пробілами як DK Demo Klant €0.00, і зі справжнім імʼям. Усі три нащадки тієї кнопки приховані від допоміжних технологій, чого правило не враховує.
Пройти означало б тому, що зчитувач екрана оголошуватиме DKDemo одним словом. Це гірша кнопка, ухвалена заради правила, яке сама бібліотека позначає експериментальним і постачає вимкненим. Функційну вимогу виконано: той, хто керує голосом, каже Demo Klant, і це є в імені.
Виняток, який помер, нічого не сказавши
Це та частина, яка варта всієї статті.
Виняток мусить упізнати елемент, до якого він застосовується. Власний селектор CSS перевіряча для цього недостатньо стабільний: ту саму кнопку акаунта на одній сторінці визначено одним способом, а на наступній іншим, тож виняток, що збігається за селектором, покриває одну сторінку й не покриває другу. Натомість виняток збігається за атрибутом-маркером, який ставить сам компонент, у фрагменті HTML елемента.
Фрагмент, який звітує перевіряч, обрізано на 140 символах.
Доступна мітка кнопки виросла, бо до неї додали кредит акаунта. Маркер зʼїхав за межу в 140 символів. Фрагмент тепер закінчувався на ... Credit €0.00." data-us. Виняток не збігся ні з чим, тихо, і запуск відзвітував 27 серйозних зауважень, які він покривав запуском раніше.
У тій відмові немає нічого гучного. Виняток не дав помилки, список не зменшився, конфігурація не змінилася. Зміна інтерфейсу в неповʼязаній функції зсунула рядок, і шматок захисної інфраструктури перестав працювати. Виправлення полягає в тому, щоб звіряти з необрізаним відкривальним тегом, який перевіряч теж надає.
Загальний урок більший за доступність: усе, що звіряється з обрізаним текстом, є запобіжником, який відмовляє рівно тієї миті, коли щось змінюється, а це єдина мить, коли він був потрібен.
Виняток, що не збігається ні з чим, валить запуск
Кожен запис лічать. Якщо повний запуск завершується з винятком, у який влучили нуль разів, запуск червоний.
Це та сама форма, що й список констант деінде в цій кодовій базі, і з тієї самої причини: виняток, який більше нічого не покриває, слід видалити, а не лишати стояти. Лишений стояти, він є ще одним рядком, про який має міркувати наступна людина, і зрештою його перестають читати взагалі.
Лічба стосується лише повного запуску. Обмежте запуск одним маршрутом чи одним режимом, і «не влучив» не означає нічого.
Доведення, що нуль є справжнім нулем
Розмір цілі, вимога, щоб елемент керування був щонайменше 24 на 24 пікселі, є одним із трьох правил, які бібліотека постачає вимкненими. Ми ввімкнули його й написали поруч власне друге вимірювання, бо два винятки, які надає сам стандарт, треба виміряти, а не припустити. Остаточний запуск оглянув 2056 цілей. 155 були меншими за розмір. 70 із них підпали під вбудований виняток стандарту, тобто ціль сидить усередині речення, а 85 під виняток за відстанню, тобто коло на 24 пікселі навколо неї нічого не торкається. Не лишилося жодної.
Нуль від зонда, який ви написали самі, невідрізненний від зонда, який не здатен звітувати нічого. Тож окремий скрипт вставляє кнопку розміром 16 на 16 пікселів поруч із сусідом на живій сторінці й проганяє по ній той самий текст зонда, прочитаний із файлу-джерела, а не скопійований. Він іде з 0 до 1 і називає елемент. Шлях звітування працює, тож нуль є результатом, а не мовчанням.
Обидва винятки стандарту виміряні, а не вгадані. Вбудований означає, що обчислене значення display дорівнює точно inline, а найближчий блоковий предок містить ще й інший текст, і саме це насправді означає «сидить у реченні». Це не список назв класів. А перевірка відстані міряє коло проти прямокутників інших цілей, а не проти їхніх кіл, що суворіше за стандарт: вона здатна дати хибний червоний і ніколи хибний зелений.
Чого машина не може
Є коротка інструкція з чотирьох воріт, які потребують людини, бо це те, до чого не дістає жоден перевіряч: чи має сенс порядок читання і чи оголошення справді надходить, чи маршрут здійсненний лише з клавіатури, а не просто досяжний, чи лишається розмітка читабельною при 200 відсотках, а не просто вміщається, і чи екран усе ще щось означає у власній палітрі користувача.
Ці четверо відкриті. Сказати про це є частиною суті: звіт, який каже нуль і не каже, на що він не дивився, є тією самою відмовою, що й виняток без вимірювання.
Що ми б записали
- Спитайте бібліотеку, які правила вимкнені, не припускайте. Наші зауваження були саме у вимкнених.
- Проганяйте кожну мову, яку постачаєте, на кожному правилі, чий результат може залежати від тексту.
- Дайте кожному виняткові причину й вимірювання, записані там, де живе сам виняток.
- Зробіть так, щоб виняток, який ні з чим не збігається, валив запуск.
- Ніколи не звіряйте запобіжник з обрізаним текстом.
- Доводьте свої нулі, вставляючи щось, що має бути впіймане.
- Публікуйте те, чого машина перевірити не може, щоб число читали як те, чим воно є.
Той самий інстинкт, застосований до перекладів, а не до розмітки, є в шістнадцять тисяч ключів, девʼять мов.
З роботи над панеллю Provibr.