Аудит доступности сайта по WCAG 2.2

12 августа 2026

Проверка страницы на соответствие WCAG 2.2 и Section 508: клавиатура, скринридеры, контраст — с объяснениями и исправлениями.

Описание

ДоступностьБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

WCAG 2.2
аудит
скринридер
контраст

Название

Аудит доступности сайта по WCAG 2.2

Категория

Доступность

Источник

awesome-chatgpt-prompts — «Accessibility Auditor» · CC0-1.0

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

21 строка · 190 слов · 1 345 символов

Переменные

Значения сразу появятся в превью, коде и при копировании.

[AA / AAA]

[URL или вставь HTML/JSX]

[например «регистрация», «оформление заказа»]

[React / Next.js / Vue / обычный HTML]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.

Входные данные:
- Страница: [URL или вставь HTML/JSX]
- Ключевые сценарии: [например «регистрация», «оформление заказа»]
- Стек: [React / Next.js / Vue / обычный HTML]

Что проверить:
1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.
2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.
3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.
4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.

Для каждой проблемы:
- Критерий WCAG (номер и название).
- Где находится и кого затрагивает.
- Почему это проблема — одним-двумя предложениями.
- Конкретное исправление с кодом «до/после».
- Серьёзность: критично / серьёзно / умеренно / мелочь.

Формат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час.

```text
Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.

Входные данные:
- Страница: [URL или вставь HTML/JSX]
- Ключевые сценарии: [например «регистрация», «оформление заказа»]
- Стек: [React / Next.js / Vue / обычный HTML]

Что проверить:
1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.
2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.
3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.
4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.

Для каждой проблемы:
- Критерий WCAG (номер и название).
- Где находится и кого затрагивает.
- Почему это проблема — одним-двумя предложениями.
- Конкретное исправление с кодом «до/после».
- Серьёзность: критично / серьёзно / умеренно / мелочь.

Формат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.\n\nВходные данные:\n- Страница: [URL или вставь HTML/JSX]\n- Ключевые сценарии: [например «регистрация», «оформление заказа»]\n- Стек: [React / Next.js / Vue / обычный HTML]\n\nЧто проверить:\n1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.\n2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.\n3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.\n4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.\n\nДля каждой проблемы:\n- Критерий WCAG (номер и название).\n- Где находится и кого затрагивает.\n- Почему это проблема — одним-двумя предложениями.\n- Конкретное исправление с кодом «до/после».\n- Серьёзность: критично / серьёзно / умеренно / мелочь.\n\nФормат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час."
    }
  ]
}

Действия

prompt.txt· заполнено 0 из 4

Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.
Входные данные:
- Страница: [URL или вставь HTML/JSX]
- Ключевые сценарии: [например «регистрация», «оформление заказа»]
- Стек: [React / Next.js / Vue / обычный HTML]
Что проверить:
1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.
2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.
3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.
4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.
Для каждой проблемы:
- Критерий WCAG (номер и название).
- Где находится и кого затрагивает.
- Почему это проблема — одним-двумя предложениями.
- Конкретное исправление с кодом «до/после».
- Серьёзность: критично / серьёзно / умеренно / мелочь.
Формат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час.

Описание

ДоступностьБесплатно

Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.

WCAG 2.2
аудит
скринридер
контраст

Название

Аудит доступности сайта по WCAG 2.2

Категория

Доступность

Источник

awesome-chatgpt-prompts — «Accessibility Auditor» · CC0-1.0

Где работает

ChatGPT, Claude и другие ИИ-ассистенты

Объём

21 строка · 190 слов · 1 345 символов

Переменные

Значения сразу появятся в превью, коде и при копировании.

[AA / AAA]

[URL или вставь HTML/JSX]

[например «регистрация», «оформление заказа»]

[React / Next.js / Vue / обычный HTML]

Как использовать

1Заполните поля выше или замените фрагменты в квадратных скобках вручную.
2Скопируйте промпт — он попадёт в буфер обмена целиком.
3Вставьте его в чат с ИИ: ChatGPT, Claude или любой другой ассистент.
4Уточняйте ответ короткими репликами, не переписывая промпт заново.

Что внутри

Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.

Входные данные:
- Страница: [URL или вставь HTML/JSX]
- Ключевые сценарии: [например «регистрация», «оформление заказа»]
- Стек: [React / Next.js / Vue / обычный HTML]

Что проверить:
1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.
2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.
3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.
4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.

Для каждой проблемы:
- Критерий WCAG (номер и название).
- Где находится и кого затрагивает.
- Почему это проблема — одним-двумя предложениями.
- Конкретное исправление с кодом «до/после».
- Серьёзность: критично / серьёзно / умеренно / мелочь.

Формат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час.

```text
Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.

Входные данные:
- Страница: [URL или вставь HTML/JSX]
- Ключевые сценарии: [например «регистрация», «оформление заказа»]
- Стек: [React / Next.js / Vue / обычный HTML]

Что проверить:
1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.
2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.
3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.
4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.

Для каждой проблемы:
- Критерий WCAG (номер и название).
- Где находится и кого затрагивает.
- Почему это проблема — одним-двумя предложениями.
- Конкретное исправление с кодом «до/после».
- Серьёзность: критично / серьёзно / умеренно / мелочь.

Формат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час.
```

{
  "messages": [
    {
      "role": "user",
      "content": "Ты — аудитор доступности и опытный accessibility-инженер. Проверь сайт на соответствие WCAG 2.2 (уровень [AA / AAA]) и Section 508.\n\nВходные данные:\n- Страница: [URL или вставь HTML/JSX]\n- Ключевые сценарии: [например «регистрация», «оформление заказа»]\n- Стек: [React / Next.js / Vue / обычный HTML]\n\nЧто проверить:\n1. Клавиатура: все интерактивные элементы доступны по Tab, порядок фокуса логичный, фокус виден, нет ловушек, есть skip link, Escape закрывает модалки.\n2. Скринридеры: семантика (landmarks, заголовки h1–h6 без пропусков), доступные имена кнопок и ссылок, alt у изображений, подписи полей, объявление ошибок и динамических изменений.\n3. Контраст: текст 4.5:1, крупный текст и UI-элементы 3:1, фокус-индикатор 3:1; информация не передаётся только цветом.\n4. WCAG 2.2: фокус не перекрыт sticky-элементами, у drag-действий есть альтернатива, размер целей не меньше 24×24 CSS px, нет повторного ввода данных, вход без когнитивных головоломок.\n\nДля каждой проблемы:\n- Критерий WCAG (номер и название).\n- Где находится и кого затрагивает.\n- Почему это проблема — одним-двумя предложениями.\n- Конкретное исправление с кодом «до/после».\n- Серьёзность: критично / серьёзно / умеренно / мелочь.\n\nФормат ответа: краткое резюме (3–5 строк), таблица проблем по убыванию серьёзности, затем список быстрых побед, которые можно исправить за час."
    }
  ]
}