HTML Template with FAQ Section 2026

Q: How do I make an accessible FAQ accordion?

Accessible FAQ accordion requirements: 1) Use ` / ` for native browser accordion (no JS needed, fully accessible). 2) Or with JS: add `aria-expanded='true/false'` to the question button and toggle on click. 3) Ensure keyboard navigation works (Tab to focus, Enter/Space to toggle). 4) Screen readers should announce 'expanded' or 'collapsed' state. UIXDraft FAQ sections meet WCAG 2.1 AA.

FAQ Accordion — Complete Code

/* ── CSS ────────────────────── */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  padding: 18px 0; cursor: pointer;
  display: flex; justify-content: space-between;
  font-weight: 600; list-style: none;
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  color: var(--t2); padding-bottom: 0;
}
.faq-item.open .faq-a {
  max-height: 500px;
  padding-bottom: 16px;
}

/* ── JS ─────────────────────── */
document.querySelectorAll('.faq-q').forEach(q => {
  q.addEventListener('click', () => {
    q.closest('.faq-item').classList.toggle('open');
  });
});

Schema.org FAQPage Markup — Get Rich Results

FAQ Section Best Practices

Answer real objections — not "What is your company?" but "Why should I choose you over X?"
5–8 questions is optimal — fewer looks thin, more looks overwhelming
First FAQ open by default — shows users the accordion is interactive
Add FAQPage schema to every page with a FAQ — Google shows these in search results
Questions should match how users actually search — copy phrasing from GSC queries
Each answer under 100 words — concise answers rank better as featured snippets
Keyboard accessible — space/enter keys toggle, tab moves between questions

Get All 180+ Templates — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I add a FAQ accordion to an HTML website?

CSS approach: use `max-height:0; overflow:hidden; transition:max-height .3s ease` on the answer div. On click, add an `.open` class that sets `max-height:500px`. This creates a smooth expand/collapse animation with pure CSS transition. JavaScript: 3 lines with querySelectorAll and classList.toggle. Full code in the example above — copy and paste directly.

What is Schema.org FAQPage markup?

FAQPage schema tells Google your page contains FAQ content. Google may show the questions and answers directly in search results as an expandable FAQ block — significantly increasing the space your result takes up and improving click-through rate. Add JSON-LD with @type:'FAQPage' and a mainEntity array of Question objects with name and acceptedAnswer. All UIXDraft templates include this markup.

How many questions should a FAQ section have?

5–8 questions is optimal for homepage and landing page FAQ sections. Fewer than 5 looks thin and fails to address common objections. More than 10 becomes overwhelming and users stop reading. For dedicated FAQ pages (support, product docs), 20–50 questions organised into categories works well. Prioritise by: most common sales objections first, technical questions last.

How do I make an accessible FAQ accordion?

Accessible FAQ accordion requirements: 1) Use `

` for native browser accordion (no JS needed, fully accessible). 2) Or with JS: add `aria-expanded='true/false'` to the question button and toggle on click. 3) Ensure keyboard navigation works (Tab to focus, Enter/Space to toggle). 4) Screen readers should announce 'expanded' or 'collapsed' state. UIXDraft FAQ sections meet WCAG 2.1 AA.

Does a FAQ section help SEO?

Yes — FAQ sections with FAQPage schema can trigger Google rich results showing your questions in search, doubling your search result real estate. FAQ content also ranks for long-tail question-based searches ('how does X work', 'what is Y'). Individual FAQ answers under 100 words are prime candidates for featured snippet selection. Always add FAQPage schema to pages with FAQ sections.