Как сделать ответы на сайте: FAQ без лишнего JavaScript

Чтобы сделать ответы на сайте, соберите отдельный блок FAQ: вопрос остаётся видимым, ответ раскрывается по нажатию и доступен с клавиатуры. Ниже есть рабочий вариант на HTML без JavaScript, правила для конструктора и проверка, которая отделяет настоящий FAQ от сломанной декорации.

Что именно считать ответами на сайте

Для одинаковых повторяющихся вопросов подходит FAQ. Если ответ зависит от заказа, аккаунта или личных данных, нужен не общий блок, а форма обращения или поддержка. Для разговора в реальном времени больше подходит чат на сайте.

Используйте простое правило выбора:

• Один официальный ответ подходит всем посетителям: добавьте вопрос в FAQ.
• Нужно уточнить данные человека: ведите в форму, не просите писать их в открытом блоке.
• Ответ меняется каждую неделю: укажите владельца информации и дату последней проверки.
• Посетители могут предлагать разные ответы: это уже страница вопросов и ответов сообщества, а не FAQ компании.

Подготовьте вопросы до верстки

Начните не с анимации, а с содержания. Возьмите обращения поддержки, вопросы перед покупкой и места, где посетители чаще всего останавливаются. Объедините одинаковые формулировки и оставьте один вопрос на одну задачу.

1. Запишите вопрос словами посетителя, без внутренних названий отдела или тарифа.
2. Дайте прямой ответ в первом предложении. Условия и исключения вынесите следом.
3. Добавьте следующее действие: ссылку на инструкцию, форму или страницу условий.
4. Назначьте человека, который обновит ответ при изменении процесса.
5. Уберите вопрос, если на него нельзя дать один честный ответ без личных данных.

Правило контроля: посетитель должен понять ответ, даже если прочитал только вопрос и первое предложение под ним.

По теме: Как сделать сайт с картинками: фото и галерея в 2026

Сделайте раскрывающиеся ответы без JavaScript

Для обычного FAQ достаточно элементов details и summary. HTML Standard определяет details как элемент раскрытия дополнительной информации, а summary как его подпись. Атрибут open показывает ответ сразу. Это нативное поведение браузера, поэтому отдельный обработчик клика не нужен. Спецификация также предупреждает, что details нельзя подменять вкладки или меню: для них существуют другие элементы и модели взаимодействия (HTML Standard).

<section class="faq" aria-labelledby="faq-title">
  <h2 id="faq-title">Частые вопросы о доставке</h2>
  <details>
    <summary>Когда привезут заказ?</summary>
    <p>В течение двух рабочих дней после подтверждения.</p>
  </details>
  <details>
    <summary>Можно изменить адрес?</summary>
    <p>Да, пока заказ не передан курьеру. Напишите в поддержку.</p>
  </details>
</section>

У каждого details первым дочерним элементом ставьте summary. Если первый ответ критичен, можно добавить ему open; значение open="false" не закрывает блок, потому что open является логическим атрибутом и работает самим фактом присутствия (MDN).

Добавьте стили, не ломая управление

Стилизуйте контейнер и подпись, но оставьте заметный фокус. WCAG 2.2 требует видимого индикатора у элементов, которыми управляют с клавиатуры (W3C).

.faq details {
  border-bottom: 1px solid #d8d8d8;
  padding: 12px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
}
.faq summary:focus-visible {
  outline: 3px solid #b8471f;
  outline-offset: 4px;
}
.faq details p {
  max-width: 70ch;
  line-height: 1.6;
}

Не снимайте outline ради аккуратного вида. Не помещайте отдельную кнопку внутрь summary: один вопрос должен оставаться одним понятным элементом управления. Если нужен сложный аккордеон с собственными кнопками и JavaScript, сверяйте Enter, Space, Tab, состояние aria-expanded и связь с панелью по паттерну WAI-ARIA.

По теме: Как сделать описание сайта: лид и meta description

Когда JavaScript действительно нужен

JavaScript добавляйте только для поведения, которого нет у нативного раскрытия: аналитика открытия вопроса, поиск по десяткам ответов или загрузка персонального статуса после авторизации. Для обычных пяти-десяти вопросов он создаёт лишнюю точку отказа. Если вы строите другой тип переключателя, используйте отдельную схему вкладок, а не меняйте смысл details.

Безопасная граница проста: сам текст ответа должен быть в HTML, а JavaScript может только улучшать взаимодействие. Тогда при ошибке скрипта посетитель не останется без информации.

Нужна ли разметка FAQPage

Разметка не обязательна для работы блока. Google прекратил показывать расширенные результаты FAQ в поиске с 7 мая 2026 года, а в июне удалил документацию этой функции. Удалять FAQPage только ради Google не обязательно, однако эта разметка не создаёт отдельный блок FAQ в Google (журнал обновлений Google Search Central).

Если всё же добавляете структурированные данные, они должны точно повторять видимые вопросы и ответы. Google запрещает размечать скрытую от читателя или вводящую в заблуждение информацию и не гарантирует расширенный результат даже при корректном тесте (правила структурированных данных). Тип QAPage здесь не подходит: Google оставляет его страницам с одним вопросом, где пользователи могут публиковать альтернативные ответы (документация QAPage).

По теме: JavaScript: как сделать сайт и понять, где JS не нужен

Проверьте результат перед публикацией

Проверяемый чек-лист занимает несколько минут:

• Откройте страницу в приватном окне и раскройте каждый вопрос мышью или касанием.
• Нажимайте Tab, пока фокус не попадёт на вопрос. Проверьте открытие клавишами Enter и Space.
• Временно отключите JavaScript. Базовые ответы должны по-прежнему открываться.
• Увеличьте масштаб браузера до 200 процентов: текст не должен обрезаться или наезжать на значок.
• Сравните ответы с условиями, тарифами и страницей поддержки. Противоречия важнее любой анимации.
• Если добавлена разметка, сравните каждое поле с видимым текстом и проверьте JSON-LD в валидаторе Schema.org.

Диагностика по симптому

1. Вопрос виден, но не раскрывается: проверьте, что summary стоит первым внутри details, а поверх него нет невидимого слоя.
2. Мышью работает, клавиатурой нет: замените кликабельный div на нативный summary или полноценную кнопку с корректным состоянием.
3. Ответ открылся, но текста не видно: ищите height: 0, overflow: hidden и одинаковый цвет текста с фоном.
4. После отключения скрипта пропали все ответы: перенесите содержание в HTML, скрипту оставьте только улучшения.
5. В разметке один текст, на странице другой: храните вопрос и ответ в одном источнике данных или обновляйте обе версии одной операцией.

Частые вопросы

Можно сделать FAQ в конструкторе сайта?

Да. Выберите штатный блок «Аккордеон» или «Вопросы и ответы», затем проведите клавиатурную проверку. Название блока не гарантирует доступность.

Нужно ли открывать первый ответ сразу?

Только если без него человек может пропустить критичное условие. Для обычного списка оставьте все вопросы закрытыми или вынесите главное условие обычным текстом выше.

Можно оставить ответы обычным текстом без раскрытия?

Да. Заголовок вопроса и абзац ответа часто проще, особенно если вопросов мало. Раскрытие экономит место, но добавляет действие посетителю.

Разметка FAQ поднимет страницу в поиске?

Такого обещания нет. С 7 мая 2026 года Google не показывает расширенные результаты FAQ, поэтому сама разметка FAQPage не поднимает страницу в поиске.