Почніть із дії, яку легко переплутати
Відкрити товар і додати його до порівняння можуть бути двома різними намірами, але на телефоні їхні кнопки іноді стоять майже впритул. Перед зміною дизайну складіть короткий список таких пар: пошук і закриття, попередній і наступний кадр, плюс і мінус. Перевіряйте їх разом, а не оцінюйте кожну іконку окремо. Якщо для точного натискання доводиться зупинятися й прицілюватися, варто переглянути компонування.
Маленький знак, достатня активна площа
Візуально компактна іконка може мати просторішу кнопку навколо. Важливо, щоб доданий простір справді реагував на натискання, а не був лише декоративним відступом. Сусідні активні ділянки не повинні перекриватися. WCAG 2.2, критерій 2.5.8 рівня AA, встановлює мінімум 24 × 24 CSS-пікселі з визначеними винятками. Це нижня межа перевірки, а не універсальний рецепт зручного меню.
Спершу спростіть, потім збільшуйте
Якщо всі дії не поміщаються, не стискайте їх без кінця. Залиште основну дію видимою, а рідкісні перенесіть у зрозуміле додаткове меню. Зберігайте назву поточного розділу й очевидний спосіб повернення. Для кнопок з довгими перекладами перевіряйте реальний текст: красивий короткий напис у макеті може приховувати проблему в іншій мові.
Приймання зміни на практиці
Перевірте звичайний і збільшений масштаб, вузький екран та відкриту клавіатуру пошуку. Натисніть біля краю кнопки, між сусідніми діями та на її підпис. Після дії має бути зрозумілий результат, а не випадковий перехід. Окремо пройдіть інтерфейс клавішею Tab: широка зона дотику сама по собі не забезпечує клавіатурної доступності. Запишіть, які екрани й способи введення перевірено; не називайте огляд кількох кнопок повним аудитом сайту.
Продовжіть перевірку матеріалом про видимий фокус і навігацію з клавіатури.