Размер целей нажатия с нейросетью проверяют через ведомость: человек измеряет активные области и их соседство, а ИИ помогает оформить исходные сведения и вопросы. По картинке кнопки нельзя заключить, что нажимаемая область достаточна. Внешний значок, контейнер и фактическая цель могут иметь разные границы.
Упражнение ниже предназначено команде, которая готовит учебные страницы.
Его результат — таблица измерений для конкретной версии стенда с обоснованием каждого вывода. Это предложенный редакцией способ обучения работе с ИИ, а не полный аудит доступности и не подтверждение эффективности модели. Все элементы и размеры примера вымышлены.
Что именно измеряют у кнопки и ссылки?
Представьте страницу учебного каталога: две кнопки переключают карточки, маленькая иконка открывает пояснение, ссылка внутри абзаца ведёт к словарю.
Их нельзя оценивать одной командой «увеличить всё до одинакового квадрата».
Сначала надо определить активную область и применимый критерий.
В пояснении W3C Target Size (Minimum) цель — область, которая принимает действие указателя. Критерий 2.5.8 уровня AA устанавливает размер не менее 24 на 24 CSS-пикселя, но предусматривает исключения. Под указателем здесь понимаются, в частности, мышь, перо и касание.
Это не исключительно мобильная проверка.
Факт. Для проверки размера должно быть возможно поместить внутри цели сплошной квадрат 24 на 24 CSS-пикселя, выровненный по горизонтальной и вертикальной осям страницы.
Одних внешних габаритов сложной фигуры недостаточно.
Сотрудник не обязан самостоятельно разбирать сложные фигуры. В нашем первом упражнении используются только прямоугольные цели без скругления. Если на настоящем стенде граница устроена иначе, строку передают техническому специалисту. Изменить форму мысленно ради удобного расчёта нельзя.
Это отдельная работа от проверки видимого фокуса. Там ищут индикатор при управлении клавиатурой; здесь определяют, какая область принимает нажатие указателя. Видимая рамка вокруг маленькой иконки сама по себе не доказывает увеличение её активной области. Аналогично, порядок фокуса описывает маршрут клавиатурных переходов и не устанавливает размеры для указателя.
Не смешивайте измерения с впечатлениями.
«Мне удобно нажать» можно оставить комментарием участника. Для ведомости нужны границы, единицы и условия наблюдения. И наоборот: соответствие выбранному критерию не означает, что интерфейс удобен каждому человеку во всех ситуациях.
Расскажите, чему хотите научить команду. Обсудим задачи и формат обучения.
Почему 24 и 44 — разные требования?
Target Size (Enhanced) — отдельный критерий 2.5.5 уровня AAA. В нём указан размер 44 на 44 CSS-пикселя и свои исключения.
Не называйте этот порог обязательным минимумом критерия 2.5.8 и не переносите в него автоматически исключение по расстоянию.
Для тренировки договоримся проверять минимум 2.5.8. Если команда хочет дополнительно оценить усиленный критерий, заведите самостоятельную графу с его условиями. Строка «соответствует AA, следовательно соответствует AAA» не имеет основания.
| Что записано | Как трактовать в упражнении | Чего запись не доказывает |
|---|---|---|
| Прямоугольная цель 24 × 24 | Размер достигает порога 2.5.8 | Выполнение усиленного размера 44 × 44 |
| Прямоугольная цель 44 × 44 | Размер достигает обоих порогов | Соответствие страницы всем WCAG |
| Цель меньше 24 по одной стороне | Нужен разбор исключений 2.5.8 | Автоматический провал без рассмотрения условий |
| Известен только размер картинки | Активную область ещё надо установить | Размер самой цели нажатия |
CSS-пиксель отличается от аппаратного пикселя дисплея. Пояснение W3C отдельно отмечает независимость требования от масштаба страницы: обещание «пользователь увеличит экран» не заменяет нужный размер или расстояние в CSS-пикселях. Поэтому линейка по физическому экрану и подсчёт пикселей произвольного снимка не подходят как единственное доказательство.
Запишите, в каких единицах получены числа.
Схема разделяет два критерия. Числа относятся к CSS-пикселям; исключения проверяют по соответствующему документу, а не переносят из одной графы в другую.
Размеры для ведомости подтверждает специалист средствами учебного стенда. Укажите браузер, версию страницы, область просмотра и масштаб. Мы не задаём здесь универсальную команду для измерения любого компонента: наложения и устройство активной области требуют проверки реализации.
Как разобрать расстояние между маленькими целями?
Если размер меньше 24 на 24, критерий допускает исключение по расстоянию. В центре ограничивающего прямоугольника каждой такой цели мысленно размещают круг диаметром 24 CSS-пикселя. Круг не должен пересекать другую цель или круг другой маленькой цели. Проверяют и крупные соседние цели: отсутствие второго маленького кружка ещё не означает отсутствия помехи.
В условном макете ниже все области прямоугольные, имеют размер 20 на 20 и расположены в один горизонтальный ряд. Над рядом и под ним нет других целей. Между краями соседних областей в варианте А оставлено 4 CSS-пикселя, в варианте Б промежутка нет.
Это ровно заданная геометрия, а не наблюдение на сайте клиента.
В А центры соседних квадратов разнесены на 24 CSS-пикселя. В Б — на 20. По примеру W3C первый ряд проходит исключение по расстоянию; второй не проходит, поскольку круги перекрываются. Не делайте из первого варианта общее правило «четырёх пикселей достаточно везде»: рядом может оказаться другая цель, а форма и размеры могут отличаться.
Схема показывает два ряда и круги проверки расстояния. Масштаб изображения увеличен для чтения; по файлу не измеряют реальный интерфейс. Числа и условия повторены в тексте. Подпись «проверка расстояния» относится к исключению, а не к прохождению требования по самому размеру.
Теперь добавим большую карточку-ссылку рядом с маленькой иконкой. Если круг вокруг иконки пересекает активную область карточки, исключение по расстоянию не выполнено. Даже когда до другой маленькой иконки далеко. Ведомость должна содержать ближайшие цели разных размеров, а не только похожие значки.
При неясных границах остановите вывод.
Модель может посчитать расстояние между центрами нарисованных символов.
Это другой расчёт. Верните ей подтверждённые границы активных областей; если их нет, оставьте вопрос специалисту. Дорисованная нейросетью геометрия не становится измерением.
Какие исключения нельзя назначать по внешнему виду?
Кроме расстояния, в минимальном критерии названы эквивалентная цель, строчное расположение, управление пользовательским агентом и существенность конкретного представления.
Они требуют своего основания.
Не пишите «исключение», только потому что элемент маленький и менять его неудобно.
Для эквивалентной цели нужна другая подходящая по критерию возможность выполнить ту же функцию на этой же странице. Ссылка с похожим названием в другом разделе не устанавливает такое условие. В упражнении просите указать обе цели и подтвердить совпадение функции.
Строчное исключение относится к цели внутри предложения либо к случаю, когда размер ограничен высотой строки окружающего текста, который не является целью. Отдельно стоящий список навигации нельзя автоматически назвать строчным текстом из-за того, что его пункты набраны буквами. Если классификация спорна, сохраните фрагмент и вопрос ведущему.
| Основание из 2.5.8 | Что запросить в ведомость | Недостаточное объяснение |
|---|---|---|
| Расстояние | Границы цели, круг и ближайшие цели | «Выглядит свободно» |
| Эквивалент | Другая цель на той же странице, функция, соответствие критерию | «Есть похожее меню» |
| Строчное расположение | Предложение или ограничение высотой строки обычного текста | «Это ссылка, значит исключение» |
| Пользовательский агент | Размер задаёт браузер и автор его не менял | «Похоже на стандартный виджет» |
| Существенность | Почему конкретное представление необходимо либо юридически требуется | «Дизайнер просил сохранить» |
Пояснение W3C приводит плотные отметки карты как пример существенности: положение передаёт местоположение объектов. Это объяснение нельзя переносить на произвольно тесный ряд кнопок каталога. В нашем учебном исходнике существенность не заявлена; модель не вправе её добавлять.
Для настройки браузера важно именно отсутствие авторского изменения размера. Если размер изменили стилями, похожесть на стандартный контрол не возвращает исключение. Все спорные условия оставляют незавершёнными, пока человек не подтвердит основание.
Схема показывает три примера доказательств: геометрию соседей, эквивалентную функцию и контекст предложения. Полный перечень оснований приведён в таблице.
Наша таблица помогает разобрать исключения, но не заменяет полный текст критерия. При необычной форме, перекрытиях или динамически появляющихся целях обратитесь к документу и техническому специалисту. Не обещайте проверку всех состояний по одному снимку.
Что поручить нейросети до измерений?
Подготовьте разрешённое описание стенда. В нём перечислены кнопки «Назад» и «Далее», иконка «Пояснение» и ссылка «Словарь» внутри предложения. Для кнопок задана прямоугольная активная область 24 на 24. Для двух соседних учебных значков задано 20 на 20 и промежуток 4. У ссылки в предложении размеры пока неизвестны; её расположение описано текстом.
Это исходные данные задания. Они позволяют разобрать логику, но не подтверждают, что стенд реализован именно так. В отдельной графе должно остаться «фактически не измерено».
Предложенное поручение:
По описанию подготовь ведомость проверки критерия 2.5.8. Укажи цель, функцию, известные размеры активной области, источник чисел, соседние цели и возможное основание исключения. Раздели расчёт по заданным числам и фактический результат на стенде. Не придумывай размеры, исключения, выполненные испытания и соответствие всей страницы WCAG. Для неизвестных условий задай вопросы. Критерий 2.5.5 с порогом 44 на 44 вынеси отдельно только как дополнительную задачу. Не считай видимый значок активной областью без подтверждения.
Проверьте, сохранил ли ответ различие между данными макета и измерением. Если модель пишет «проверено, нарушений нет», верните эту строку на исправление. Она получила описание, а не доступ к испытанию.
Мнение. Для первого занятия я предлагаю ограничить ведомость одним рядом целей и одной ссылкой в предложении. Так ведущий сможет обсудить происхождение каждого вывода, прежде чем добавлять сложные компоненты. Это выбор учебного формата редакции, не требование W3C.
Не передавайте в неподходящий инструмент внутренние адреса, личные данные участников и закрытые снимки рабочих страниц. Для подготовки таблицы достаточно обезличенного описания разрешённого макета. Организация определяет, какой сервис можно использовать и какие сведения ему доступны.
Как выглядит честная ведомость проверки?
Удобно разделить две таблицы. Первая содержит расчёт по условному исходнику. Вторая предназначена для измерений и сначала пуста по результатам. Это не требование стандарта, а способ не спутать предположение и наблюдение.
| Цель учебного исходника | Что известно | Предварительный разбор | Фактическая проверка |
|---|---|---|---|
| «Назад» | Прямоугольник 24 × 24 | Размер достигает порога минимума | Не выполнена |
| «Далее» | Прямоугольник 24 × 24 | Размер достигает порога минимума | Не выполнена |
| Два значка в отдельном ряду | 20 × 20, промежуток 4; иных целей рядом нет | Разобрать исключение по расстоянию | Не выполнена |
| «Словарь» в предложении | Указан контекст обычного текста | Проверить основание строчного исключения | Не выполнена |
В фактическую часть внесите адрес и версию стенда, условия измерения, способ определения границ, полученные значения и доказательство. Вывод отделите от предлагаемой правки. Если активная область оказалась больше значка, сохраните обе границы с пояснением, какая из них измерена для критерия.
Три элемента схемы показывают происхождение записи. До испытания заполнено описание; после него добавляется отдельное наблюдение. Схема не утверждает, что тест уже выполнен, и не заменяет таблицу с фактическими числами.
Проверку нажатия проводят только на разрешённом стенде. Сначала выясните, не отправляет ли действие заявку, не удаляет ли материал и не меняет ли рабочие данные. Для учебной версии владелец заранее согласует безопасные действия. Нельзя проверять границу реальной кнопки оплаты многократными отправками ради красивого протокола.
Если специалист обнаружил необычную форму, другая строка ведомости должна описывать её. Не сохраняйте предварительный вывод о прямоугольнике после изменения условий. Воспроизводимость важнее заполнения каждой ячейки словом «пройдено».
Почему одного CSS-свойства недостаточно для приёмки?
Техника W3C C42 показывает один способ обеспечить расстояние вокруг маленьких целей. В примере ссылки пагинации центрированы в контейнерах с минимальными размерами. Контейнер помогает разнести цели, хотя сами ссылки могут оставаться меньше 24 на 24.
Это важное различие: свободное место внутри родителя не обязательно стало активной областью ссылки. В C42 задача решается через расстояние. Не пишите «цель увеличилась», если поменялся только контейнер.
Сами техники W3C являются примерами способов выполнения требований; они не обязательны как единственный рецепт. В процедуре C42 для соответствующих маленьких целей рисуют круг и проверяют его относительно других целей и кругов. Поэтому наличие в коде min-width не заменяет проверку результата.
Если команда предлагает правку, специалист сначала определяет способ: расширить активную область, изменить расстояние или разобрать подтверждённое исключение. Затем новая версия проходит измерение. ИИ может оформить карточку передачи, но не должен выбирать CSS вслепую и сообщать о выполненном исправлении.
Сохраните старую запись.
В карточке укажите исходную версию, элемент, числа и способ получения, применимый критерий, наблюдение и вопрос. Для новой версии создайте самостоятельное измерение. Когда меняется ширина окна или положение соседей, зафиксируйте новые условия: старый расчёт расстояния может уже описывать другую раскладку.
Для проверки учебной работы ведущему нужны исходник, ведомость и объяснение хотя бы одной спорной строки. Попросите участника показать, откуда взят порог, где заканчивается активная область и почему исключение применимо или пока не подтверждено. Готовый промпт без измерений закрывает подготовку, но не испытание стенда.
На корпоративном обучении ИИ можно разобрать такую задачу вместе с командой: поручить модели оформление ведомости и научить сотрудников проверять происхождение чисел. Программу согласуют под рабочие процессы организации. Этот материал не подтверждает результат конкретного занятия.
Частые вопросы
Маленькая иконка всегда означает нарушение?
Нет. Сначала установите активную область. Если и она мала, рассмотрите применимые исключения выбранного критерия. Внешний размер рисунка не позволяет закончить проверку.
Достаточно расстояния только между двумя маленькими целями?
Нужно учесть другие соседние цели. Круг вокруг маленькой области не должен пересекать и большую цель. Поэтому одна удачная пара не подтверждает весь ряд или соседнюю раскладку.
Можно ли заменить минимум 24 на универсальные 44?
Команда может выбрать более крупные цели как собственную проектную задачу. Но в протоколе разделяют критерии 2.5.8 и 2.5.5, их уровни и условия. Нельзя называть выбранную цель точной формулировкой другого критерия.
Можно ли принять результат по сгенерированному макету?
Макет помогает обсудить геометрию. Он не доказывает реальные границы и действие элемента в реализации. До измерений на согласованной версии фактические результаты остаются незаполненными.
Источники
- W3C: Target Size (Minimum), критерий 2.5.8 — .
- W3C: Target Size (Enhanced), критерий 2.5.5 — .
- W3C: техника C42, расстояние вокруг целей — .
