Масштабирование текста с нейросетью начинайте с подготовки двух отдельных сценариев: увеличения текста и перекомпоновки содержимого в узкой области просмотра. ИИ может помочь составить протокол, а человек проверяет готовую страницу и записывает наблюдения. Ответ «адаптивная версия работает» не подтверждает, что подпись кнопки сохранилась, весь абзац читается и нужное действие осталось доступным.
Ниже — учебное задание для команды, которая выпускает инструкции и страницы корпоративного обучения. Его результат — воспроизводимые замечания разработчику, а не заключение о соответствии всего сайта WCAG.
Что должно получиться после упражнения?
Представьте условную памятку для участника практикума. На большом экране рядом стоят описание задания и блок материалов. При увеличении текста последние слова инструкции пропадают под кнопкой. В узкой области просмотра блок материалов переезжает вниз, однако длинные строки основного текста остаются за правым краем. Это два разных наблюдения, даже если оба появились после изменения масштаба.
Запись «мелкий шрифт» их не описывает.
Для коллеги, который не видел экран, нужны условия воспроизведения.
В первом случае нужно проверить сохранность текста и действия при увеличении. Во втором — возможность прочитать обычный абзац без движения по двум направлениям. Сотрудник готовит отдельную строку для каждого испытания: версия страницы, исходные настройки, способ изменения, ожидаемый результат, фактическое наблюдение и доказательство.
Мы предлагаем редакционное упражнение с вымышленной страницей. Числа, заданные стандартом, опираются на документы W3C; последовательность учебной работы, поручение модели и карточки замечаний предложены редакцией. Здесь нет результатов испытания конкретной нейросети или аудита клиента AURMIND.
Не подменяйте этот результат соседними задачами. Контраст текста проверяют через пары цветов, а порядок фокуса — через переходы с клавиатуры. Контрастный абзац тоже может обрезаться. Правильная последовательность Tab не доказывает, что при увеличении видны все слова инструкции.
Мнение. Я предлагаю принимать у сотрудника не общий вывод «всё удобно», а одну карточку, по которой коллега повторит потерю конкретной строки. На таком материале видно, умеет ли команда отличать помощь ИИ в подготовке проверки от выполненной проверки.
Расскажите, чему хотите научить команду. Обсудим задачи и формат обучения.
Чем увеличение текста отличается от перекомпоновки?
Факт. Критерий WCAG 2.2 1.4.4 Resize Text уровня AA требует возможности увеличить текст до 200% без вспомогательной технологии, сохранив содержание и функциональность. В формулировке есть исключения для субтитров и изображений текста. В пояснении W3C Resize Text также сказано, что достаточно хотя бы одного механизма масштабирования, поддерживаемого пользовательскими агентами.
Поэтому не превращайте учебную таблицу в требование «каждый браузер обязан пройти любой способ увеличения». Для конкретной проверки согласуйте поддерживаемую среду и способ. Если механизм предлагает промежуточные ступени между 100% и 200%, содержание и функции должны сохраняться и на них. Проверка только конечной точки может пропустить проблему на одной из таких ступеней.
Факт. Критерий 1.4.10 Reflow уровня AA рассматривает другое: представление без потери информации или функций и без необходимости прокрутки по двум направлениям. Для содержимого с вертикальной прокруткой указана ширина, эквивалентная 320 CSS px. Для содержимого с горизонтальной прокруткой — высота, эквивалентная 256 CSS px. Есть исключение для частей, которым двумерная раскладка нужна для использования или смысла; оно разобрано в пояснении W3C Reflow.
В нашей тренировке русский текст расположен горизонтальными строками, а страницу читают с вертикальной прокруткой. Поэтому работаем с шириной 320 CSS px. Ветка для вертикально написанного текста здесь не проверяется. Сужение области просмотра само по себе не доказывает увеличение букв вдвое: это отдельное условие первого испытания.
Разделите основания заранее.
| Испытание | Что задаём в упражнении | Что наблюдаем |
|---|---|---|
| Увеличение текста | Поддерживаемый способ увеличения до 200% и его промежуточные ступени | Сохранились ли текст и действия |
| Перекомпоновка | Область просмотра шириной, эквивалентной 320 CSS px | Читаются ли обычные строки без прокрутки по двум направлениям; сохранены ли функции |
| Повтор после исправления | Та же среда и те же условия, новая версия страницы | Устранено ли конкретное расхождение |
Схема разделяет два вопроса. Первое испытание проверяет сохранность текста и действий при увеличении, второе — перенос обычных строк в узкой области просмотра. Успех одного испытания не заполняет фактическую колонку другого.
Какие исходные данные передать нейросети?
Для первого занятия возьмите условный фрагмент без персональных данных, закрытых адресов и реальных ответов сотрудников. Рабочий стенд и его содержимое используйте только в инструменте, разрешённом организацией. Упражнение можно подготовить по описанию; для фактической проверки затем потребуется сама страница.
Наш учебный исходник состоит из четырёх элементов. Абзац А объясняет задание, кнопка Б открывает материалы, заметка В сообщает условие отправки, таблица Г показывает расписание. Это согласованная спецификация примера, а не выдержка из действующего регламента компании.
| Код | Содержание | Действие или связь |
|---|---|---|
| А | «Прочитайте памятку и выберите один пример для разбора» | Обычный абзац, его нужно прочитать целиком |
| Б | «Открыть материалы практикума» | Кнопка открывает блок материалов на этой странице |
| В | «Перед отправкой проверьте, что указали тему вопроса» | Обычная заметка рядом с формой; должна оставаться доступной |
| Г | Расписание: тема, ведущий, время, ссылка на занятие | Табличные данные со связью строк и столбцов |
Рядом с этой спецификацией оставьте поля для адреса стенда, идентификатора версии и среды. Не пишите вымышленную версию браузера ради заполненной строки. До начала проверки допустима запись «проверяющий заполнит перед выполнением». Назначение заготовки — показать недостающие сведения.
Опишите начальное состояние.
В нашем примере блок материалов сначала закрыт. Для проверки открытого блока нужно отдельно активировать кнопку Б и записать состояние. Если участник сравнил закрытую версию до увеличения с открытой после, различие размеров страницы ещё не говорит о дефекте. В таблице должны сопоставляться одинаковые состояния.
Сохраните и сам текст исходника. Иначе модель может сократить кнопку до «Материалы», а затем заявить, что длинная подпись помещается. Такое изменение способно решить отдельную редакционную задачу, но не подтверждает сохранность заданной подписи. В этом упражнении сокращение без согласования считается расхождением с исходными условиями.
Не ограничивайте описание словом «десктоп».
Размер экрана, размер окна и размер области просмотра страницы — разные сведения. Попросите технического специалиста указать способ определения фактической области просмотра в выбранной среде. Скриншот рабочего стола без этих данных не устанавливает ширину в CSS px.
Как поставить ИИ задачу на подготовку протокола?
Передайте исходник А–Г, названия испытаний и ограничения. Не просите «проверь страницу по скриншоту»: изображение не позволяет выполнить действия, раскрыть блок и проверить весь путь к скрытому содержимому. Если модель не имеет доступа к стенду, это нужно явно сохранить в поручении.
Предлагаемый шаблон:
По спецификации учебной страницы А–Г составь заготовку двух протоколов. Первый — увеличение текста до 200% поддерживаемым способом с проверкой доступных промежуточных ступеней. Второй — перекомпоновка при ширине области просмотра, эквивалентной 320 CSS px, для страницы с вертикальной прокруткой. Для каждой строки укажи элемент, начальное состояние, настройку испытания, ожидаемый результат по заданию и пустое поле фактического наблюдения. Сохрани тексты А–В без сокращений. Таблицу Г отметь для отдельного разбора исключения, не распространяя его на всю страницу. Если неизвестны среда, версия, способ увеличения или измерения ширины, задай вопрос. Не утверждай, что открыл страницу или выполнил проверку. Не делай заключения о соответствии сайта WCAG и не назначай CSS-исправления без наблюдений.
Этот шаблон — предложение редакции, а не проверенный эксперимент с определённой моделью. Сохраните фактический ответ используемого сервиса.
Если он сразу заполнил наблюдения словами «всё видно», верните этим ячейкам статус «не выполнено» и разберите с сотрудником, на каком основании появилось утверждение.
Ожидание не равно наблюдению.
До испытания фактическая колонка остаётся пустой.
Для кнопки Б ожидаем, что её полная подпись доступна, а материалы можно открыть. Но до действий человека мы не знаем, сохранились ли они в выбранной версии. Фраза «кнопка не обрезается» в ожидаемой колонке допустима как условие задания; та же фраза в фактической требует выполненного испытания.
Проверьте, не смешала ли модель два масштаба. «Открыть на телефоне» не задаёт 320 CSS px, а «увеличить скриншот в редакторе» не увеличивает текст на работающей странице. Если в ответе появились такие шаги, исправьте протокол до выхода на стенд. Не тратьте время на выполнение процедуры, которая измеряет другой объект.
Модель также может предложить «уменьшить шрифт при узком экране». В этом упражнении это не критерий приёмки: задача состоит в сохранности содержимого и работоспособности при согласованных условиях. Оценку изменения стилей оставьте специалисту, который проверит оба требования и фактическое увеличение букв.
Как выполнить испытание увеличения текста?
Сначала откройте согласованную версию стенда и зафиксируйте исходные настройки. Сравните текст А–В с утверждённым исходником, убедитесь, что кнопка Б открывает материалы. Если текст уже отсутствует при обычных настройках, сохраните отдельное замечание. Нет смысла приписывать увеличению то, что было потеряно раньше.
Затем примените выбранный поддерживаемый механизм увеличения. Запишите его название и значения, а не только сочетание клавиш: в разных средах одно сочетание может означать разные действия. Для упражнения важен воспроизводимый способ, согласованный проверяющим и техническим специалистом.
В технике W3C G179 приведена процедура: увеличить текст до 200% и проверить доступность всего содержимого и функциональности. Техника описывает один способ выполнения требования; применять именно её во всех проектах стандарт не обязывает. В нашей тренировке она помогает сформулировать предмет наблюдения — что сохранилось после изменения, а не насколько красивой стала раскладка.
Просмотрите абзац А до последнего слова. Проверьте полную подпись кнопки Б, возможность активировать её и прочитать открытый блок. Найдите заметку В. Если проверка включает форму, сохраните те же разрешённые тестовые значения, чтобы сравнивать одинаковое состояние. Не отправляйте реальные заявки для упражнения без согласованной необходимости.
Потом повторите наблюдения на промежуточных ступенях, доступных в выбранном механизме между исходным и конечным увеличением. Их конкретные значения внесите из реальной среды. Не подставляйте универсальную последовательность, которую браузер участника не предлагает. Итоговая отметка относится к зафиксированным условиям, а не ко всем возможным настройкам.
На схеме перечислены сведения одной строки журнала. Например, «200%» без способа увеличения и исходного состояния недостаточно. А номер версии связывает наблюдение с теми байтами страницы, которые увидел проверяющий; после выкладки исправлений потребуется новая строка.
Прокрутка сама по себе не означает провал Resize Text. Важно, остаются ли содержание и функции доступными; Reflow задаёт отдельную рамку для прокрутки по двум направлениям. Не переносите вывод одного критерия на другой. Если все слова можно увидеть только после движения вправо и обратно, сохраните это наблюдение и разберите его во втором испытании.
Обрезание тоже требует точного описания. Иногда полное значение доступно после фокуса или активации специального элемента. Пояснение Resize Text рассматривает такие интерфейсы при определённых условиях, включая возможность добраться до полного содержимого и указание на неё. В нашей простой спецификации А–В такого механизма нет, поэтому участник не должен придумывать его для оправдания потерянной строки.
Как проверить перекомпоновку в узкой области просмотра?
Верните страницу в согласованное исходное состояние. Теперь подготовьте испытание Reflow: для нашей страницы с вертикальной прокруткой нужна ширина области просмотра, эквивалентная 320 CSS px. Способ подготовки и реальное значение сохраните в протоколе. Проверять следует содержимое и действия, а не название выбранного режима в инструменте.
В пояснении Reflow приведён пример эквивалентности: исходная ширина области просмотра 1280 CSS px при увеличении 400% соответствует 320 CSS px. Это объяснение соотношения, а не гарантия для любого монитора с разрешением 1280 пикселей. Панели браузера, размер окна и другие особенности среды влияют на доступную область. Нельзя вписать «320» только по характеристикам экрана.
Попросите специалиста подтвердить фактическую геометрию.
В выбранной среде можно согласовать способ сужения области просмотра или увеличения, позволяющий получить требуемый эквивалент. Запишите, что именно сделали. При проверке через узкую область без увеличения не отмечайте автоматически выполненным испытание Resize Text: размер букв мог остаться прежним.
Читайте обычный абзац А от начала до конца. Нужно ли двигать страницу по горизонтали, чтобы увидеть окончание каждой строки, а затем возвращаться к началу следующей? Сохранилась ли заметка В? Можно ли открыть материалы кнопкой Б и прочитать их? Проверяйте и исходное, и открытое состояние блока по отдельным строкам.
Если элементы стали одной колонкой, это ещё не ответ.
Колонка может содержать абзац фиксированной ширины или кнопку с недоступной подписью. И наоборот, сам по себе другой порядок визуальных блоков не означает потерю, если информация и функции остаются доступны. В рамках этой задачи фиксируйте именно наблюдаемую сохранность и необходимость прокрутки для чтения обычных строк.
Иллюстрация условная: слева строки переносятся внутри области, справа для их чтения требуется движение вправо и обратно. Это объяснение разных наблюдений, а не скриншоты испытанной страницы. Реальное доказательство добавляет проверяющий из согласованной среды.
Не уменьшайте текст вручную, чтобы уместить его ради отчёта. Такое действие меняет условия испытания. Если адаптивный шаблон сам меняет размер шрифта, специалист отдельно оценивает, можно ли всё равно получить требуемое увеличение текста по Resize Text. Успешный перенос строк в этой ситуации не закрывает первый протокол.
Что делать с таблицей, схемой и длинной строкой?
В учебном исходнике есть таблица Г. Её двумерные связи могут требовать сохранения раскладки. W3C допускает исключение Reflow для частей, которым двумерное представление необходимо для смысла или использования. Но таблица не освобождает от проверки абзац А, заметку В, соседнюю подпись или элементы управления.
Исключение локальное.
Граница должна быть объяснена назначением содержимого.
В пояснении Reflow отдельно разбирается, что и обычное содержимое ячеек должно отвечать требованию перекомпоновки, если само по себе не нуждается в двумерном представлении. Поэтому запись «вся таблица исключена, текст не смотрели» слишком широка. Специалисту нужно определить границы исключённой части и отдельно проверить окружающее содержимое.
Для нашего расписания сохраните связь темы, ведущего, времени и ссылки. Если команда предлагает превратить его в карточки, проверьте, сохранились ли эти отношения и действия. Это вариант реализации, который обсуждают с разработчиком, а не обязательное решение W3C. Удаление ведущего ради уменьшения ширины меняет исходную информацию.
Наличие горизонтальной полосы прокрутки у всей страницы само по себе тоже не устанавливает нарушение Reflow. В пояснении есть случаи, когда она нужна исключённому содержимому, а обычные тексты при этом корректно переносятся. Проверяющий должен записать, какой именно фрагмент требует движения по двум направлениям. Отдельный прокручиваемый контейнер для таблицы может быть удобнее, но это не единственная допустимая реализация.
Схема показывает область исключения, а не запрещает таблицы. Соседний абзац и подпись остаются отдельными объектами проверки. Правило не меняется от того, что разработчик использовал один общий контейнер: назначение содержимого нужно разобрать по частям.
Для длинной строки не придумывайте одно универсальное решение. Адрес, идентификатор, программный код и обычное предложение могут иметь разные требования к сохранению символов и форматирования. В статье мы не назначаем CSS всем таким случаям. Передайте специалисту точную строку, место и условия наблюдения; уточните, какой смысл может потеряться при переносе или сокращении.
В учебной заметке В обычная фраза, поэтому объявлять её «технической строкой» для исключения нельзя. Если в реальном материале есть код, где отступы несут смысл, потребуется отдельный разбор. Ссылка на исключение должна объяснять необходимость двумерной раскладки конкретной части, а не просто её неудобную ширину.
Иллюстрации в этой статье дублируются текстом рядом с ними. Они объясняют протокол и не содержат единственного экземпляра исходных условий. Не измеряйте по уменьшенной иллюстрации размер реальной кнопки или область просмотра стенда.
Как передать разработчику воспроизводимый дефект?
Сравните ожидание из исходника с фактическим наблюдением. Не начинайте карточку с предполагаемой причины вроде «неправильный overflow». Сотрудник мог увидеть потерю текста из-за нескольких разных решений шаблона. Диагноз реализации ставит специалист после воспроизведения; автор протокола отвечает за точность условий и наблюдения.
Пример карточки ниже вымышленный. Он показывает формат, а не выполненное нами испытание:
Элемент: Б, кнопка «Открыть материалы практикума». Версия и среда: заполняются при выполнении. Испытание: увеличение текста выбранным поддерживаемым способом до 200%. Состояние: блок материалов закрыт. Ожидание по спецификации: полная подпись доступна, кнопку можно активировать. Условное наблюдение: видны слова «Открыть материалы», окончание подписи скрыто; другого способа получить полную подпись в исходнике нет. Доказательство: проверяющий приложит запись состояния и последовательность действий. Статус: заготовка, не выполнено.
У настоящего замечания поля версии, среды и доказательства должны быть заполнены реальными сведениями. До этого карточку нельзя считать подтверждённым дефектом. Если наблюдение есть только в воображаемом примере, оставьте статус учебной заготовки.
Для второго испытания сделайте другую карточку: абзац А, фактическая ширина области просмотра, способ её получения и наблюдаемая прокрутка. Не копируйте в неё «200%» из первой. Исправление подписи кнопки может никак не изменить перенос строк абзаца.
Одно замечание — одна проверяемая проблема.
Не объединяйте разные наблюдения общей отметкой.
Объединить связанные карточки можно общей задачей разработчику, сохранив отдельные условия воспроизведения. Иначе после частичной правки непонятно, что именно закрыто. Статус «исправлено» от исполнителя — повод повторить проверку, а не готовый результат повторного испытания.
Попросите ИИ отредактировать карточку, сохранив все исходные значения. Он может помочь убрать неясное «вылезает» и перечислить недостающие поля. Однако нельзя разрешать ему добавлять не наблюдавшийся масштаб, номер браузера, причину или результат. Сверьте отредактированный вариант с журналом человека.
Как принять исправление и работу сотрудника?
После правки страницы создайте новую запись с новой версией. Воспроизведите прежние условия каждого открытого замечания, проверьте полную подпись Б, текст А, заметку В и связанные действия. Старые наблюдения сохраните рядом: они объясняют, что изменилось, и не должны исчезать после успешного повтора.
Если исправляли общий стиль блока, согласуйте со специалистом, какие соседние элементы нужно посмотреть дополнительно. Не объявляйте весь сайт исправленным по одной кнопке. В упражнении достаточно честно указать охваченный фрагмент и непроверенные состояния.
На схеме повторная проверка отделена от сообщения о правке. Новая версия получает собственное наблюдение; прежняя карточка остаётся доказательством исходной проблемы. Если условия изменились, это надо объяснить, а не сравнивать несопоставимые результаты.
Приёмку учебного задания можно провести по небольшой таблице. Это критерии редакционного упражнения, а не полный чек-лист WCAG:
| Что сдаёт сотрудник | Что проверяет ведущий |
|---|---|
| Исходник А–Г и версия | Тексты и действия не изменены ради прохождения |
| Два отдельных протокола | Увеличение и перекомпоновка не смешаны |
| Настройки и фактические наблюдения | Коллега может повторить действия в той же среде |
| Разбор таблицы Г | Исключение ограничено обоснованной частью |
| Повтор после исправления | Новая версия проверена, старые сведения сохранены |
Если человек подготовил хороший промпт, но не выполнил сценарии, примите только подготовительный этап. Если выполнил тест, но потерял исходные настройки, попросите восстановить воспроизводимость. Разделение этих результатов помогает увидеть, чему ещё нужно научить сотрудника, без фиктивной общей оценки.
Для командной практики можно разобрать такой фрагмент на корпоративном обучении ИИ: согласовать исходник, поручить модели подготовку протокола и проверить, как сотрудники фиксируют реальные наблюдения. Формат занятия подбирают под задачи команды; сама статья не подтверждает результат обучения или соответствие её материалов всем требованиям доступности.
Частые вопросы
Достаточно открыть страницу на телефоне?
Для нашего протокола этого мало. Нужны зафиксированные условия: способ увеличения текста либо область просмотра с требуемым эквивалентом ширины. Название устройства не устанавливает эти параметры. Мобильную проверку можно согласовать отдельно, сохранив её фактические ограничения.
Обязательно ли убирать любую горизонтальную прокрутку?
Нет. В Reflow есть исключения для частей, которым двумерная раскладка необходима. Важно, не заставляет ли такая часть двигаться по двум направлениям ради чтения обычных строк. Сохраните конкретное наблюдение; по одной полосе прокрутки нельзя судить обо всех фрагментах.
Можно ли поручить модели подтвердить результат по скриншоту?
В нашем упражнении изображение — дополнительное доказательство состояния, а не выполнение действий. Оно не подтверждает, что кнопка открывает материалы, весь текст доступен после прокрутки и исходные настройки соблюдены. Фактический результат записывает человек, который прошёл сценарий.
Если строки переносятся, значит увеличение текста тоже прошло?
Нет. Узкая область просмотра и увеличение текста проверяют разные условия. Отдельно подтвердите возможность требуемого увеличения и сохранность содержимого и функций. Затем внесите фактическое наблюдение в соответствующий протокол.
Что отправить специалисту, если причина неизвестна?
Адрес и версию, среду, исходное состояние, способ изменения и значения, ожидаемый результат по исходнику и наблюдение. Неизвестную причину так и обозначьте. Точная карточка с вопросом полезнее уверенного CSS-рецепта без воспроизведения.
Источники
- W3C: Resize Text — увеличение до 200% — .
- W3C: Reflow — перекомпоновка и границы исключений — .
- W3C: G179 — сохранность текста и функций при увеличении — .
