MicroTools

Form Accessibility Validator

Валідуйте мітки, aria-атрибути, обов'язкові поля та повідомлення про помилки в HTML-формах.

Про інструмент Form Accessibility Validator

Вставте HTML-код форми та перевірте доступність. Перевіряє що кожне поле має пов'язану мітку, обов'язкові поля позначені, повідомлення про помилки використовують aria-describedby, fieldsets групують пов'язані елементи, а кнопки відправлення мають описовий текст.

Як використовувати

  1. 1Вставте HTML-код форми у поле введення.
  2. 2Інструмент сканує всі елементи форми: input, select, textarea, button.
  3. 3Кожна проблема перелічена з типом елемента, проблемою та прикладом виправлення.
  4. 4Попередження (низький пріоритет) показані окремо від помилок (критичних).
  5. 5Використовуйте показаний фрагмент виправленого коду поруч з кожною помилкою.

Часті запитання

Що робить форму доступною?
Кожне поле потребує видимої мітки пов'язаної через for/id або aria-labelledby. Обов'язкові поля повинні бути позначені (не тільки кольором). Повідомлення про помилки повинні використовувати aria-describedby для оголошення скрін-рідерами.
Чи достатньо тексту placeholder замість мітки?
Ні. Текст placeholder зникає під час введення, часто має низький контраст, і багато скрін-рідерів не сприймають його як мітку. Завжди використовуйте правильний елемент <label>.
Що таке aria-describedby?
ARIA-атрибут що пов'язує поле з допоміжним текстом або повідомленням про помилку за ID. Скрін-рідери зачитують пов'язаний текст після мітки поля коли поле у фокусі.
Чи потрібні мітки для радіокнопок і чекбоксів?
Так — кожен окремий елемент потребує мітки. Групи пов'язаних елементів також повинні бути обгорнуті у <fieldset> з <legend>.

Інформація

Категорія
compliance
Використання
Необмежено

Схожі інструменти

Heading Structure Auditor

Знаходьте пропущені рівні, дублікати H1 та зламану ієрархію заголовків в HTML/Markdown.

Alt-Text Linter

Знаходьте відсутній, надлишковий або неякісний alt-текст у вашому HTML миттєво.

Keyboard Navigation Checklist

Генеруйте WCAG-чеклист клавіатурного тестування для будь-якого типу UI-компонента.

Більше інструментів: compliance

WCAG Contrast Checker

Перевіряйте рівні AA/AAA контрастності для будь-яких двох кольорів. Отримайте виправлення миттєво.

Non-Text Contrast Checker

Перевіряйте контраст 3:1 для рамок, іконок, кілець фокусу та станів UI.

Heading Structure Auditor

Знаходьте пропущені рівні, дублікати H1 та зламану ієрархію заголовків в HTML/Markdown.

Link Text Quality Checker

Знаходьте «натисніть тут», дублікати посилань та порожні анкери, що порушують WCAG 2.4.4.