Пошаговый тест компонента: навигация с клавиатуры, объявления скринридера, контраст и приоритеты исправлений.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — инженер по доступности. Проведи ручную проверку компонента с клавиатуры и скринридера и опиши, что исправить. Входные данные: - Компонент или страница: [название, код или ссылка] - Уровень WCAG: [AA] - Скринридер: [NVDA / VoiceOver / JAWS / TalkBack] - Что в компоненте есть: [кнопки, формы, табы, модалка, динамический контент] 1. Выбери сценарий проверки: - новый компонент: интерактив → клавиатура; текст → контраст и заголовки; изображения → alt; формы → подписи и ошибки; - существующая страница: сначала axe/Lighthouse, затем клавиатура, скринридер, выборочно контраст; - сторонний виджет: ARIA, клавиатура, скринридер, задокументировать ограничения. 2. Клавиатура: - всё доступно по Tab, порядок совпадает с визуальным; - фокус виден (контур от 2 px, контраст 3:1), нет ловушек; - skip link первым элементом; - Enter активирует кнопки и ссылки, Space — чекбоксы и кнопки; - стрелки внутри табов, меню и радиогрупп; - Escape закрывает модалки и выпадающие списки, модалка удерживает фокус. 3. Скринридер — что должно звучать: - кнопка: «[название], кнопка»; ссылка: «[текст], ссылка»; - чекбокс: «[подпись], флажок, отмечен/не отмечен»; - радиокнопка: «[подпись], выбрано, 2 из 4»; - комбобокс: «[подпись], свёрнут/развёрнут»; - поле: подпись, «обязательное», подсказка; при ошибке — «недопустимое значение» и текст ошибки. Последовательность: Tab по странице, навигация по заголовкам (H), по landmarks (D), по таблицам (T), по формам (F), проверка live regions. 4. Контраст: обычный текст 4.5:1, крупный 3:1, UI и фокус 3:1. Отдельно проверь плейсхолдеры, ссылки в тексте, состояния ошибки и успеха, текст поверх изображений. 5. Приоритеты: - критично: нет доступа с клавиатуры, нет подписей полей, нет alt, ловушки фокуса; - высокий: контраст, нет skip link, неверные заголовки, невидимый фокус, ошибки не обозначены; - средний: непоследовательная навигация, нет landmarks, ссылки «нажмите здесь», нет lang; - низкий: тайминги, несколько способов найти контент. Формат ответа: таблица «проверка — результат — что не так — исправление», затем список правок по приоритету с кодом.
```text Ты — инженер по доступности. Проведи ручную проверку компонента с клавиатуры и скринридера и опиши, что исправить. Входные данные: - Компонент или страница: [название, код или ссылка] - Уровень WCAG: [AA] - Скринридер: [NVDA / VoiceOver / JAWS / TalkBack] - Что в компоненте есть: [кнопки, формы, табы, модалка, динамический контент] 1. Выбери сценарий проверки: - новый компонент: интерактив → клавиатура; текст → контраст и заголовки; изображения → alt; формы → подписи и ошибки; - существующая страница: сначала axe/Lighthouse, затем клавиатура, скринридер, выборочно контраст; - сторонний виджет: ARIA, клавиатура, скринридер, задокументировать ограничения. 2. Клавиатура: - всё доступно по Tab, порядок совпадает с визуальным; - фокус виден (контур от 2 px, контраст 3:1), нет ловушек; - skip link первым элементом; - Enter активирует кнопки и ссылки, Space — чекбоксы и кнопки; - стрелки внутри табов, меню и радиогрупп; - Escape закрывает модалки и выпадающие списки, модалка удерживает фокус. 3. Скринридер — что должно звучать: - кнопка: «[название], кнопка»; ссылка: «[текст], ссылка»; - чекбокс: «[подпись], флажок, отмечен/не отмечен»; - радиокнопка: «[подпись], выбрано, 2 из 4»; - комбобокс: «[подпись], свёрнут/развёрнут»; - поле: подпись, «обязательное», подсказка; при ошибке — «недопустимое значение» и текст ошибки. Последовательность: Tab по странице, навигация по заголовкам (H), по landmarks (D), по таблицам (T), по формам (F), проверка live regions. 4. Контраст: обычный текст 4.5:1, крупный 3:1, UI и фокус 3:1. Отдельно проверь плейсхолдеры, ссылки в тексте, состояния ошибки и успеха, текст поверх изображений. 5. Приоритеты: - критично: нет доступа с клавиатуры, нет подписей полей, нет alt, ловушки фокуса; - высокий: контраст, нет skip link, неверные заголовки, невидимый фокус, ошибки не обозначены; - средний: непоследовательная навигация, нет landmarks, ссылки «нажмите здесь», нет lang; - низкий: тайминги, несколько способов найти контент. Формат ответа: таблица «проверка — результат — что не так — исправление», затем список правок по приоритету с кодом. ```
{
"messages": [
{
"role": "user",
"content": "Ты — инженер по доступности. Проведи ручную проверку компонента с клавиатуры и скринридера и опиши, что исправить.\n\nВходные данные:\n- Компонент или страница: [название, код или ссылка]\n- Уровень WCAG: [AA]\n- Скринридер: [NVDA / VoiceOver / JAWS / TalkBack]\n- Что в компоненте есть: [кнопки, формы, табы, модалка, динамический контент]\n\n1. Выбери сценарий проверки:\n- новый компонент: интерактив → клавиатура; текст → контраст и заголовки; изображения → alt; формы → подписи и ошибки;\n- существующая страница: сначала axe/Lighthouse, затем клавиатура, скринридер, выборочно контраст;\n- сторонний виджет: ARIA, клавиатура, скринридер, задокументировать ограничения.\n\n2. Клавиатура:\n- всё доступно по Tab, порядок совпадает с визуальным;\n- фокус виден (контур от 2 px, контраст 3:1), нет ловушек;\n- skip link первым элементом;\n- Enter активирует кнопки и ссылки, Space — чекбоксы и кнопки;\n- стрелки внутри табов, меню и радиогрупп;\n- Escape закрывает модалки и выпадающие списки, модалка удерживает фокус.\n\n3. Скринридер — что должно звучать:\n- кнопка: «[название], кнопка»; ссылка: «[текст], ссылка»;\n- чекбокс: «[подпись], флажок, отмечен/не отмечен»;\n- радиокнопка: «[подпись], выбрано, 2 из 4»;\n- комбобокс: «[подпись], свёрнут/развёрнут»;\n- поле: подпись, «обязательное», подсказка; при ошибке — «недопустимое значение» и текст ошибки.\nПоследовательность: Tab по странице, навигация по заголовкам (H), по landmarks (D), по таблицам (T), по формам (F), проверка live regions.\n\n4. Контраст: обычный текст 4.5:1, крупный 3:1, UI и фокус 3:1. Отдельно проверь плейсхолдеры, ссылки в тексте, состояния ошибки и успеха, текст поверх изображений.\n\n5. Приоритеты:\n- критично: нет доступа с клавиатуры, нет подписей полей, нет alt, ловушки фокуса;\n- высокий: контраст, нет skip link, неверные заголовки, невидимый фокус, ошибки не обозначены;\n- средний: непоследовательная навигация, нет landmarks, ссылки «нажмите здесь», нет lang;\n- низкий: тайминги, несколько способов найти контент.\n\nФормат ответа: таблица «проверка — результат — что не так — исправление», затем список правок по приоритету с кодом."
}
]
}