Составить карту
Отметьте вход, обязательные поля, подсказки, вложения, согласие, отправку, ошибку, успех и ответ.
РУКОВОДСТВО / ПРОТОКОЛ
Сквозной аудит веб-формы
Форма работает, если человек понимает запрос, исправляет ошибки и знает, что было отправлено.
Прямой ответ
Что проверить кроме кнопки отправки?
Пройдите все состояния с клавиатуры и телефона. Оцените необходимость полей, подписи, ошибки, проверку на сервере, хранение данных и полученное подтверждение.
01 / Метод проверки
Метод проверки
Проверить ввод
Попробуйте корректные, пустые, длинные, международные и ошибочные значения; проверьте подписи, порядок Tab и сохранность данных.
Проверить сервер
Проверьте серверную валидацию, конкретные ошибки, дубли, сбои сети, повторную отправку и ожидание.
Проверить продолжение
Подтвердите получение, рабочий адресат, заявленный срок, сохраняемые данные и возможность продолжить.
НА ПРАКТИКЕ
Проверяйте путь, а не только скриншот
Читаемый экран может блокировать действие. Проверьте цель целиком: найти раздел, использовать элемент, понять результат и вернуться. Сохраните первое препятствие и его эффект.
Что проверить в первую очередь?
Выберите наблюдаемую ситуацию. Каждый вариант описывает первую проверку, нужные доказательства и её ограничения.
С мышью работает, с клавиатурой нет
- Первая проверка
- Повторите задачу с Tab, Shift+Tab, Enter и ожидаемыми клавишами компонента. Проследите вход фокуса, активный элемент и выход из меню или диалога.
- Что сохранить
- Шаг, клавиша, активный элемент, открытое или закрытое состояние и точка блокировки либо непонимания.
- Ограничение
- Логичный порядок фокуса не подтверждает всю доступность. Проверьте также имена элементов, объявляемые состояния и чтение контента.
Форма отклоняет ввод без объяснения
- Первая проверка
- Вызовите ошибку одного поля и проверьте подпись, ожидаемый формат и связанное сообщение. Убедитесь, что исправление не стирает остальные полезные значения.
- Что сохранить
- Поле, нечувствительное тестовое значение, сообщение, связь ошибки с полем, поведение фокуса и результат исправления.
- Ограничение
- Видимое сообщение может не быть связано с полем или объявлено вовремя. Проверьте отправку, подтверждение и недоступность.
Текст выходит за границы или плохо читается
- Первая проверка
- Сузьте окно, увеличьте текст и повторите задачу. Найдите компонент, заставляющий прокручивать всю страницу по горизонтали; отличайте его от двумерной таблицы.
- Что сохранить
- Ширина окна, масштаб, язык, компонент, скрытый текст и обоснованная необходимость прокрутки в двух направлениях.
- Ограничение
- Один мобильный снимок не охватывает все масштабы, языки и состояния. Исключение для таблицы не оправдывает переполнение всей страницы.
Дополнительные материалы
| Ситуация | Чего избегать | Полезное исправление |
|---|---|---|
| Навигация | Тестировать только мышью. | Пройти клавиатурой с видимым фокусом. |
| Форма | Полагаться на временный текст поля. | Оставить видимую подпись и связать ошибку с полем. |
| Динамический результат | Менять число без контекста. | Показать результат, единицу и суть изменения. |
Найти
Описывает ли заголовок нужную задачу?
Действовать
Доступен и понятен ли элемент?
Понять
Ясны ли результат и следующий шаг?
Итоговая проверка
Повторите путь с Tab, Shift+Tab и Enter, затем при масштабе 200 %. Убедитесь, что закреплённая шапка не скрывает полностью элемент в фокусе. Откройте и закройте меню клавиатурой, вызовите ошибку формы и проверьте возможность её исправить. Запишите страницу, действие и препятствие; эти проверки не являются сертификацией WCAG.
Документальные источники
Дата обращения .
Практикум чтения данных
Подтверждение, хранение и доставка требуют разных доказательств
Вымышленный DEMO-F22 отслеживает повторную отправку и обновление без реального сообщения.
Вымышленные данные и записи для обучения: результаты не получены запросами к действующим сервисам.
Явный контракт повторения для K1
Демонстрационное приложение обещает: два POST с K1 и одинаковым содержимым дают квитанцию R1 без двух дел. Это проверяют отдельно от HTTP-статуса.
Первый POST
- Наблюдение примера
- K1; 303 на /receipt/R1
- Что установлено
- Наблюдается переход к подтверждению.
- Следующее действие
- Сохранить метод, ответ и несекретный идентификатор.
Чтение и обновление
- Наблюдение примера
- GET /receipt/R1; 200; обновление через GET
- Что установлено
- Это обновление не повторяет POST в последовательности.
- Следующее действие
- Проверить и новую отправку, не только страницу.
Второй одинаковый POST
- Наблюдение примера
- K1; то же содержимое; квитанция R1
- Что установлено
- Пример соблюдает контракт объединения.
- Следующее действие
- Сравнить журнал обработки; одного ключа мало.
Внутренние состояния примера
- Наблюдение примера
- 1 сохранённое дело; доставка ожидается
- Что установлено
- Хранение подтверждено, доставка нет.
- Следующее действие
- Показать «сохранено, доставка ожидается» и вести следующий этап отдельно.
Какой вывод подтверждается?
Раскройте каждый вариант и сравните разбор. Дополнительные проверки могут оставаться необходимыми.
303 доказывает получение адресатом.
Нет: статус не доказывает хранение или доставку.
Безопасное обновление доказывает обработку любого двойного клика.
Нет: повтор GET и второй POST — разные проверки.
Одно сохранённое дело, одинаковый повтор объединён, доставка не подтверждена.
Подходит. Иное содержимое с K1 требует отдельного случая по контракту.
Журнал повторения и обработки
Случай: DEMO-F22 POST 1: K1 → 303 → /receipt/R1 GET и обновление: /receipt/R1; 200 POST 2: K1; одинаковое содержимое; R1 Журнал: одно сохранённое дело Доставка: ожидается Итог: хранение установлено, получение адресатом нет
Связать квитанцию, хранение и доставку тестовым идентификатором. Не помещать персональное содержание формы в URL или публичные доказательства.
Документация правил отдельно от вымышленных примеров
02 / Сохраняемые доказательства
Сохраняемые доказательства
Матрица случаев
Ввод, ожидаемое состояние, сообщение и наблюдаемый результат.
Запись пути
Подписи, помощь, фокус, ошибки и подтверждение на телефоне и с клавиатуры.
Очищенный журнал
Статус, время и тестовый идентификатор без реальных личных данных.
Решение
Препятствие, влияние, исправление, ответственный и повторный тест.
Сравнить другие ситуации и упражнения
КОНТРОЛЬНАЯ ТОЧКА
Прежде чем делать вывод
Типичная ошибка трактовки и проверка, которая помогает её избежать.
Поспешный вывод
Форма, работающая во внутреннем тесте, может оставаться недоступной с клавиатуры, на телефоне или после ошибки проверки.
Решающая проверка
Проверить каждый этап в реальных условиях: обязательные поля, сообщения об ошибках, сохранение значений, подтверждение, управление с клавиатуры и состояние отправки.
ПОСЛЕ ПРОВЕРКИ
Решение по результату
Ошибка стирает уже введённые поля
Считайте потерю сбоем сценария. Сохраните несекретные значения, направьте фокус к ошибкам и проверьте исправление.
Показан успех без подтверждённого получения
Не считайте задачу завершённой. Проверьте ответ сервера и обработку вымышленных данных, затем исправьте сообщение.
Решение и возможность пересмотра
Решение и возможность пересмотра
Что позволяет решить проверка и какие сведения сохранять для пересмотра.
Достаточные данные
Проверьте верный ввод, ошибки, клавиатуру, мобильный экран, сохранение полей и подтверждение. Успех интерфейса не доказывает доставку письма.
Следующее решение
Исправьте первый сбой и повторите сквозную отправку уполномоченному тестовому адресату. Отдельно оцените доступность и доставку.
Подробные случаи проверки
Типовые ситуации для подготовки проверки. Они не описывают выполненные проекты или реальные наблюдения.
Сообщение об успехе не доказывает получение
Что изучить
Разделяйте отправку браузером, принятие сервером и получение в системе назначения. Проследите этапы в разрешённой тестовой среде с разрешённым получателем.
Решение и действие
Описывайте результат на фактически наблюдаемом уровне. Если подтверждено лишь принятие, не заявляйте доказанную доставку; исследуйте недостающий этап и подходящий механизм восстановления.
Что сохранить
Сохраните нечувствительные идентификаторы теста, время и состояния, не копируя секреты и ненужные персональные данные.
Ошибка удаляет уже введённые ответы
Что изучить
Проверьте отказ валидации, обрыв сети и возврат к форме. Оцените сохранность полей, связанные сообщения и возможность исправить ответ без повторного заполнения.
Решение и действие
Восстановите понятное состояние, сохраняя полезные значения с учётом их чувствительности. Не помещайте содержимое формы в URL для компенсации потери состояния.
Что сохранить
Сохраните последовательность, затронутые поля, сообщение и результат второй попытки с тестовыми значениями.
Отказ стирает полезный ввод
Что изучить
Проверить неверный ввод, ошибки, язык и сохранённые поля.
Решение и действие
Сохранить нужные нечувствительные данные без реальной отправки.
Что сохранить
Тестовый ввод, ожидаемый отказ, фокус и продолжение.
Проверка перед решением
Эти вопросы дополняют метод. Они помогают установить подтверждённое, сохранив оговорки в записи.
Ошибка и продолжение
Объясняет ли неверный ввод проблему в тестовой среде без потери других полезных полей? Проверьте клавиатуру, язык и восстановление после сбоя сервера.
Посмотреть разбор решения
Вымышленный пример: статус относится только к указанному критерию и охвату.
- Вымышленное наблюдение
- После ошибки тестового адреса форма стирает также верные тему и сообщение.
- Заявленное состояние
- Наблюдаемое расхождение
- Решение и следующая проверка
- Сохранить полезный ввод, объяснить ошибку нужного поля. Повторить исправление на вымышленных данных.
Без повторной отправки
Могут ли двойное нажатие или поздний ответ вызвать две операции? Разделяйте сообщение об успехе, подтверждение получения и завершение обработки без реальных персональных данных.
Посмотреть разбор решения
Вымышленный пример: статус относится только к указанному критерию и охвату.
- Вымышленное наблюдение
- Браузер показывает успех после двух нажатий; число серверных операций не наблюдалось.
- Заявленное состояние
- Не проверено
- Решение и следующая проверка
- Оставить уникальность непроверенной. В тестовой среде связать идентификатор запроса, приём и итоговую обработку.
Проверка на сервере
Отклоняется ли в тестовой среде неверный запрос без браузерной валидации? Сообщение клиента не гарантирует серверную обработку.
Изученная документация : MDN · Constraint validation ·
Посмотреть разбор решения
Вымышленный пример: статус относится только к указанному критерию и охвату.
- Вымышленное наблюдение
- Сервер отклоняет неверный тестовый запрос без проверки браузера; обработка не создаётся.
- Заявленное состояние
- Подтверждено в этих рамках
- Решение и следующая проверка
- Сохранить вымышленный ввод, ответ и серверное наблюдение. Повторить при изменении валидации или обработки.
ИНСТРУМЕНТЫ / РЕЕСТРЫ
Какие сведения сохранить
Испытайте успех, ошибку ввода и сбой сервера на обозначенных тестовых данных. Сообщение должно соответствовать результату, а введённые данные — сохраняться для восстановления.
- Дата просмотра и часовой пояс
- Точный URL
- Задача / этап пути
- Устройство / браузер
- Ожидаемый результат
- Наблюдаемый результат
- Критерий приёмки
- Решение / следующий шаг
- Ответственный за проверку
- Следующая проверка
03 / FAQ
Частые вопросы
Достаточно проверки JavaScript?
Нет. Немедленная подсказка полезна, но сервер тоже должен проверять ввод.
Отмечать обязательные поля?
Да, до ввода и в ошибке.
Что делать при ошибке?
Объяснить исправление, связать сообщение с полем и сохранить остальные значения.
Как тестировать без личных данных?
Используйте вымышленные случаи и минимальные журналы.
Как тестировать без отправки реальных запросов?
Предположите соответствующую среду или тест-канал и фиктивные данные. Тем не менее, метод должен дать возможность проверить реальные этапы, которые обусловливают прием и лечение.
04 / Официальные источники
Официальные источники
Описать задачу
ДОКУМЕНТИРОВАННЫЕ ОРИЕНТИРЫ
Автозаполнение: читать токены в правильном порядке
Два адреса в одной форме могут требовать разных значений даже при одинаковых именах полей. autocomplete описывает назначение и группу полей, но не заменяет видимую подпись или проверку. Примеры показывают грамматику HTML, а не собранные личности или контакты.
| Ориентир | Значение или форма | Что обозначает |
|---|---|---|
| section-* | 1 | Префикс section- стоит первым. Его значение различает группы; браузер не должен выводить из него родство или деловой смысл. |
| shipping | billing | 2 | shipping или billing задаёт назначение контактных данных. Оба токена нельзя использовать одновременно в одном списке. |
| home | work | mobile | fax | pager | 3 | home, work, mobile, fax или pager может предшествовать контактному полю, например email или tel-national. work postal-code этой грамматике не соответствует. |
| name | postal-code | email | … | 4 | В подробном списке нужен один токен назначения. address-line1 address-line2 задаёт два вместо одного, а не описывает два поля. |
| webauthn | 5 | Последний токен webauthn может указывать на учётные данные с открытым ключом и условным посредничеством. Один атрибут не реализует аутентификацию. |
| on | off | single token | on и off по отдельности для подходящего видимого поля задают общий режим, а не точное назначение. Для input type=hidden такое использование не допускается. |
Разобрать 16 примеров токенов
Примеры относятся к видимым полям указанного типа. Они рассматривают только грамматику: автозаполнение и аутентификация не выполняются.
<input type="text" autocomplete="section-primary shipping work email">
Упорядоченный подробный список · Группа, назначение адреса, контакт, цель поля: порядок опубликованного примера ACT.
| Атрибут autocomplete | Тип поля | Чтение | Толкование |
|---|---|---|---|
| section-primary shipping work email | text | Упорядоченный подробный список | Группа, назначение адреса, контакт, цель поля: порядок опубликованного примера ACT. |
| section-blue shipping postal-code | text | Упорядоченный подробный список | Две именованные группы разделяют адреса доставки при одинаковой цели postal-code. |
| section-red shipping postal-code | text | Упорядоченный подробный список | Две именованные группы разделяют адреса доставки при одинаковой цели postal-code. |
| billing postal-code | text | Упорядоченный подробный список | Назначение адреса и цель поля; группа section необязательна. |
| mobile tel-national | tel | Упорядоченный подробный список | Модификатор контакта предшествует телефонной цели. |
| current-password webauthn | password | Упорядоченный подробный список | Пример ACT: назначение пароля, затем токен данных с открытым ключом. |
| given-name | text | Упорядоченный подробный список | Достаточно одной цели; префиксы необязательны. |
| on | text | Общий режим | Общий режим без подробной цели; правило ACT 73f2c2 исключает этот случай из области проверки. |
| off | text | Общий режим | Общий режим без подробной цели; правило ACT 73f2c2 исключает этот случай из области проверки. |
| work shipping email | Неверный список | Модификатор контакта находится перед назначением адреса: неверный порядок. | |
| work,email | Неверный список | Запятая не разделяет токены в этом списке HTML. | |
| address-line1 address-line2 | text | Неверный список | Две разные цели занимают место, допускающее только одну. |
| shipping | text | Неверный список | Одно назначение адреса не задаёт цель поля. |
| work photo | text | Неверный список | work нельзя применять к photo: это не контактное поле. |
| email invalid | Неверный список | Дополнительный токен invalid после списка не разрешён. | |
| current-password webauthn invalid | password | Неверный список | Дополнительный токен invalid после списка не разрешён. |
Что учитывать в досье
Правильный порядок не доказывает соответствие назначения полю, фактическое автозаполнение или выполнение WCAG 1.3.5. Критерий касается определённых сведений о пользователе и зависит от технологии. Примеры не проверяют внешнюю форму.
Первичная документация
Документация просмотрена .
ПОДРОБНЕЕ / ПРАКТИКА
Проверьте формулы с реалистичными случаями
Формула обычно появляется, но отказывается от законного ввода или подтверждает неудачную доставку. Операционный тест отличает качество ввода, валидации и окончательной обработки.
Обновлено .
Приоритетные проверки
Проверка обязательных полей, форматов, длины, ошибок, согласия и двойного подачи. Использовать данные тестирования и контролировать реальный результат без передачи конфиденциального контента.
Ошибки интерпретации
Активного кнопки или сообщения о успехе недостаточно, чтобы показать завершение обработки. Причины истечения сессии и недоступности также должны оставаться понятными.
Рабочий документ для сохранения
Рабочая проверка хранит нечувствительные данные теста, шаг, ожидаемый результат и наблюдаемый результат. Каждая коррекция сопровождается полным контролем маршрута.