Великі кнопки на телефоні: що насправді кажуть правила доступності
WCAG 2.2 не обмежується порадою «робіть кнопки великими». Критерій AA про мінімальний розмір розглядає ціль щонайменше 24×24 CSS-пікселі або за визначених умов простір навколо меншої цілі. Посилений критерій AAA використовує 44×44. Це технічні пороги, а не обіцянка безпомилкового натискання для кожного.
Вимірюйте активну ділянку, а не лише малюнок
Ціль — ділянка, що приймає дотик або інше введення вказівником. Маленька піктограма може мати більшу активну ділянку, а велика плитка — лише малу активну частину. Вимірювання ведеться в CSS-пікселях, відмінних від фізичних пікселів екрана.
Масштаб, розмір пальця й діагональ телефона не створюють відповідність автоматично. Перевіряйте фактичну ділянку в усіх станах, меню, накладеннях та орієнтаціях.
Мінімум AA: 24×24 CSS-пікселі або визначена відстань
WCAG 2.2 SC 2.5.8 вимагає щонайменше 24×24 CSS-пікселі. Менша ціль користується винятком щодо відстані лише тоді, коли уявні кола діаметром 24 CSS-пікселі з центром на малих цілях не перетинають інші цілі чи їхні кола.
Інші винятки: рівнозначний елемент, посилання в рядку, розмір від користувацького агента, істотне або законодавчо обов’язкове подання. Проходження за винятком не означає зручність; W3C радить досягати самого мінімуму.
AAA підвищує орієнтир до 44×44
SC 2.5.5 Target Size (Enhanced) зазвичай вимагає 44×44 CSS-пікселі й має власні винятки. Це суворіший рівень AAA, не мінімум AA і не універсальне число.
Він може бути корисною метою для важливої дії. Але велика ділянка, ясний підпис і простір не достатні за плутаних дій, зсуву макета, неясного підтвердження чи іншого способу введення.
Розмір, відстань і скасування працюють разом
Відстань зменшує ймовірність сусіднього натискання за тремору, руху транспорту, роботи однією рукою чи нижчої точності. Це можливі потреби й умови, а не діагнози за однією помилкою.
SC 2.5.2 Pointer Cancellation стосується моменту активації: багато дій мають завершуватися після відпускання з можливістю скасування чи повернення, з винятками. Для важливого сигналу перевіряйте зрозуміле підтвердження й виправлення.
Матриця: відповідність і зручність
Практична колонка потребує реального продукту й не замінює аудит WCAG.
| Аспект | Правило або поріг | Практична перевірка |
|---|---|---|
| Активна ділянка | Реальна ціль, не піктограма | Відповідає вся очікувана ділянка? |
| Мінімум AA | 24×24 CSS px | Її досі легко досягти? |
| Відстань | Кола 24 px не перетинаються | Сусіда торкаються випадково? |
| AAA посилений | 44×44 CSS px | Пасує головній дії? |
| Підписи | Розмір їх не вирішує | Різняться значення й підсумок? |
| Активація | Урахувати Pointer Cancellation | Можна скасувати до відпускання? |
| Підтвердження | Залежить від ризику й шляху | Запобігає помилці без бар’єра? |
| Адаптація | Текст і система змінюються | Працюють масштаб, поворот, великий текст? |
| Введення | Дотик — один метод | Працює з допоміжними технологіями? |
| Контекст | WCAG не передбачає людину | Перевірено з потрібними людьми й пристроями? |
Обережно застосовуйте WCAG до нативного застосунку
WCAG — стандарт веб-вмісту. WCAG2ICT пояснює перенесення принципів на невеб-програми й документи, але сам не створює декларацію відповідності для будь-якого застосунку чи закону. Перевіряйте застосовний контекст.
У My Safe Circle дослідіть головні дії на справжньому пристрої разом із підписами, підтвердженнями, одержувачами й резервом. Застосунок допомагає спілкуватися з довіреними людьми, але не розпізнає події автоматично, не телефонує екстреним службам і не гарантує доставку чи дію.
- Активну ділянку виміряно в CSS px або належному еквіваленті?
- Малі цілі перевірено за правилом відстані?
- Винятки описано без оголошення доброю UX?
- Випадкову активацію, скасування й підтвердження перевірено?
- Ураховано потрібних людей, пристрої, масштаб і введення?
Поширені запитання
24×24 CSS-пікселі означає доступну кнопку?
Ціль може виконати поріг AA за дотримання решти застосовних вимог. Це не доводить читабельність, розуміння чи зручність для кожного.
44×44 обов’язково для WCAG 2.2 AA?
Ні. 44×44 належить до посиленого критерію 2.5.5 рівня AAA; мінімум 2.5.8 рівня AA використовує 24×24 із винятками.
Велика кнопка усуває випадкові натискання?
Ні. Вона може допомогти, але важливі відстань, сусідні дії, активація, підтвердження, поза, пристрій та індивідуальні відмінності.
Використані джерела
Технічну інформацію та поради з безпеки звірено з цими офіційними джерелами.
- W3C — Target Size (Minimum), SC 2.5.8
- W3C — Target Size (Enhanced), SC 2.5.5
- W3C — Pointer Cancellation, SC 2.5.2
- W3C — WCAG2ICT для невеб-програм
- W3C — літні користувачі й доступність
- My Safe Circle — функції та обмеження
Редакційне розкриття: матеріал підготувала команда My Safe Circle. Він описує критерії W3C та обмеження продукту, не заявляючи придатність інтерфейсу для всіх чи відповідність конкретному правовому режиму.
ВИМІРЮЙТЕ Й СПОСТЕРІГАЙТЕ
Візьміть поріг за основу, потім перевірте досвід.
Перевірте активну ділянку, відстань, помилки й введення.
Дізнатися про My Safe CircleЗагальна інформація, не сертифікація відповідності, юридична чи медична порада. Потреби й точність різняться; технічний поріг не гарантує роботу без помилок.