Loading…

Build an Accessible FAQ Accordion with HTML and CSS | CompileQuestHub

Build an Accessible FAQ Accordion with HTML and CSSNew

5/22/2026 • Updated 5/26/2026 • HTMLCSSAccessibilityAccordionWeb Development

Challenge Goal

In this coding challenge, you will build an accessible FAQ accordion using only HTML and CSS. The FAQ section will let users expand a question to reveal its answer without writing any JavaScript.

What You Will Build

You will create a clean and responsive FAQ section with multiple questions and answers. Each question can be clicked or opened with the keyboard, making the component beginner-friendly and accessible by default.

This challenge uses the native <details> and <summary> elements because they already support expand-and-collapse behavior in modern browsers.

Concept Overview

An FAQ accordion is a common website component used to organize questions and answers without taking up too much space. Instead of showing all answers at once, each answer is hidden until the user opens the related question.

In this challenge, you will practice:

Using semantic HTML elements such as <section>, <h2>, <details>, and <summary>.
Creating an accordion without JavaScript.
Styling interactive states with CSS.
Making content readable on mobile and desktop screens.
Improving accessibility with native browser behavior.

Example

Here is a simple FAQ item using native HTML:

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language used to structure web pages.</p>
</details>

When the user clicks the question, the answer appears. When the user clicks it again, the answer closes.

Coding Challenge

Create a complete HTML page named faq-accordion.html. The page should include a responsive FAQ accordion using only HTML and CSS.

Requirements

Create a complete HTML5 document.
Add a page title of Accessible FAQ Accordion.
Create a main FAQ section using <section>.
Add a heading that says Frequently Asked Questions.
Add at least three FAQ items.
Use <details> for each FAQ item.
Use <summary> for each question.
Place each answer inside the matching <details> element.
Style the FAQ section with CSS.
Make the design responsive for smaller screens.
Do not use JavaScript.

Input and Output

Input

The user clicks or focuses a question and presses Enter or Space.

User opens: What is HTML?

Output

The related answer becomes visible inside the accordion.

Visible answer: HTML is the standard markup language used to structure web pages.

Constraints

Use only HTML and CSS.
Do not use JavaScript.
Do not use external libraries or frameworks.
Use semantic HTML whenever possible.
Keep the layout readable on mobile screens.
Do not rely on ARIA attributes when native HTML already provides the behavior.

Hints

Use <details> as the wrapper for each FAQ item.
Use <summary> as the clickable question.
Place the answer content after the <summary>.
Use the [open] attribute selector to style an expanded FAQ item.
Use cursor: pointer; on summary to show that it is interactive.
Use spacing, borders, and background colors to make each FAQ item clear.

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible FAQ Accordion</title>
  <style>
    /* Add your CSS here */
  </style>
</head>
<body>
  <main>
    <section class="faq" aria-labelledby="faq-title">
      <h1 id="faq-title">Frequently Asked Questions</h1>

      <details>
        <summary>Your question here?</summary>
        <p>Your answer goes here.</p>
      </details>
    </section>
  </main>
</body>
</html>

Solution Walkthrough

Step 1: Create the page structure

Start with a complete HTML document. Add the <main> element and a <section> for the FAQ content.

Step 2: Add the FAQ heading

Use a clear heading such as Frequently Asked Questions. The section can reference this heading with aria-labelledby.

Step 3: Add FAQ items

Use one <details> element for each FAQ item. Inside it, use <summary> for the question and a paragraph for the answer.

Step 4: Style the accordion

Use CSS to add spacing, borders, rounded corners, hover states, and readable typography.

Step 5: Style the open state

Use the details[open] selector to style an item when it is expanded.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible FAQ Accordion</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f6f8;
      color: #1f2937;
      line-height: 1.6;
    }

    main {
      max-width: 800px;
      margin: 0 auto;
      padding: 32px 16px;
    }

    .faq {
      background-color: #ffffff;
      padding: 24px;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .faq h1 {
      margin-top: 0;
      margin-bottom: 24px;
      text-align: center;
      font-size: 28px;
    }

    details {
      border: 1px solid #d1d5db;
      border-radius: 10px;
      margin-bottom: 12px;
      background-color: #ffffff;
      overflow: hidden;
    }

    summary {
      padding: 16px;
      font-weight: bold;
      cursor: pointer;
      background-color: #f9fafb;
    }

    summary:hover {
      background-color: #eef2ff;
    }

    summary:focus {
      outline: 3px solid #93c5fd;
      outline-offset: 2px;
    }

    details[open] summary {
      background-color: #dbeafe;
      color: #1d4ed8;
    }

    details p {
      margin: 0;
      padding: 16px;
      border-top: 1px solid #e5e7eb;
      background-color: #ffffff;
    }

    @media (max-width: 600px) {
      main {
        padding: 16px;
      }

      .faq {
        padding: 16px;
      }

      .faq h1 {
        font-size: 24px;
      }

      summary,
      details p {
        padding: 14px;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="faq" aria-labelledby="faq-title">
      <h1 id="faq-title">Frequently Asked Questions</h1>

      <details>
        <summary>What is HTML?</summary>
        <p>HTML stands for HyperText Markup Language. It is used to structure content on web pages.</p>
      </details>

      <details>
        <summary>Why should I use semantic HTML?</summary>
        <p>Semantic HTML gives meaning to your page structure, improves accessibility, and helps search engines understand your content better.</p>
      </details>

      <details>
        <summary>Can an accordion work without JavaScript?</summary>
        <p>Yes. The native details and summary elements provide built-in expand and collapse behavior without JavaScript.</p>
      </details>

      <details>
        <summary>Is this FAQ keyboard accessible?</summary>
        <p>Yes. Users can focus the summary element and open or close it using the keyboard in modern browsers.</p>
      </details>
    </section>
  </main>
</body>
</html>

Why This Works

The <details> element creates a native disclosure widget, and the <summary> element acts as the visible question. Browsers automatically handle the open and closed state, keyboard support, and basic accessibility behavior. CSS is then used only to improve the visual design.

Stretch Goals

Add a custom plus and minus icon using CSS.
Use CSS variables for colors, spacing, and border radius.
Add more FAQ items about HTML, CSS, and accessibility.
Create a dark mode version using CSS custom properties.
Style the accordion to match a landing page or documentation page.
Try building another version using the checkbox method and compare it with <details> and <summary>.

Quick Checklist

Does each FAQ item use <details>?
Does each question use <summary>?
Does each answer appear inside the matching FAQ item?
Does the accordion work without JavaScript?
Is the layout readable on mobile screens?
Are focus styles visible for keyboard users?

Loading…

Build an Accessible FAQ Accordion with HTML and CSSNew

5/22/2026 • Updated 5/26/2026 • HTMLCSSAccessibilityAccordionWeb Development

Challenge Goal

In this coding challenge, you will build an accessible FAQ accordion using only HTML and CSS. The FAQ section will let users expand a question to reveal its answer without writing any JavaScript.

What You Will Build

This challenge uses the native <details> and <summary> elements because they already support expand-and-collapse behavior in modern browsers.

Concept Overview

In this challenge, you will practice:

Using semantic HTML elements such as <section>, <h2>, <details>, and <summary>.
Creating an accordion without JavaScript.
Styling interactive states with CSS.
Making content readable on mobile and desktop screens.
Improving accessibility with native browser behavior.

Example

Here is a simple FAQ item using native HTML:

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language used to structure web pages.</p>
</details>

When the user clicks the question, the answer appears. When the user clicks it again, the answer closes.

Coding Challenge

Create a complete HTML page named faq-accordion.html. The page should include a responsive FAQ accordion using only HTML and CSS.

Requirements

Create a complete HTML5 document.
Add a page title of Accessible FAQ Accordion.
Create a main FAQ section using <section>.
Add a heading that says Frequently Asked Questions.
Add at least three FAQ items.
Use <details> for each FAQ item.
Use <summary> for each question.
Place each answer inside the matching <details> element.
Style the FAQ section with CSS.
Make the design responsive for smaller screens.
Do not use JavaScript.

Input and Output

Input

The user clicks or focuses a question and presses Enter or Space.

User opens: What is HTML?

Output

The related answer becomes visible inside the accordion.

Visible answer: HTML is the standard markup language used to structure web pages.

Constraints

Use only HTML and CSS.
Do not use JavaScript.
Do not use external libraries or frameworks.
Use semantic HTML whenever possible.
Keep the layout readable on mobile screens.
Do not rely on ARIA attributes when native HTML already provides the behavior.

Hints

Use <details> as the wrapper for each FAQ item.
Use <summary> as the clickable question.
Place the answer content after the <summary>.
Use the [open] attribute selector to style an expanded FAQ item.
Use cursor: pointer; on summary to show that it is interactive.
Use spacing, borders, and background colors to make each FAQ item clear.

Starter Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible FAQ Accordion</title>
  <style>
    /* Add your CSS here */
  </style>
</head>
<body>
  <main>
    <section class="faq" aria-labelledby="faq-title">
      <h1 id="faq-title">Frequently Asked Questions</h1>

      <details>
        <summary>Your question here?</summary>
        <p>Your answer goes here.</p>
      </details>
    </section>
  </main>
</body>
</html>

Solution Walkthrough

Step 1: Create the page structure

Start with a complete HTML document. Add the <main> element and a <section> for the FAQ content.

Step 2: Add the FAQ heading

Use a clear heading such as Frequently Asked Questions. The section can reference this heading with aria-labelledby.

Step 3: Add FAQ items

Use one <details> element for each FAQ item. Inside it, use <summary> for the question and a paragraph for the answer.

Step 4: Style the accordion

Use CSS to add spacing, borders, rounded corners, hover states, and readable typography.

Step 5: Style the open state

Use the details[open] selector to style an item when it is expanded.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible FAQ Accordion</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f6f8;
      color: #1f2937;
      line-height: 1.6;
    }

    main {
      max-width: 800px;
      margin: 0 auto;
      padding: 32px 16px;
    }

    .faq {
      background-color: #ffffff;
      padding: 24px;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .faq h1 {
      margin-top: 0;
      margin-bottom: 24px;
      text-align: center;
      font-size: 28px;
    }

    details {
      border: 1px solid #d1d5db;
      border-radius: 10px;
      margin-bottom: 12px;
      background-color: #ffffff;
      overflow: hidden;
    }

    summary {
      padding: 16px;
      font-weight: bold;
      cursor: pointer;
      background-color: #f9fafb;
    }

    summary:hover {
      background-color: #eef2ff;
    }

    summary:focus {
      outline: 3px solid #93c5fd;
      outline-offset: 2px;
    }

    details[open] summary {
      background-color: #dbeafe;
      color: #1d4ed8;
    }

    details p {
      margin: 0;
      padding: 16px;
      border-top: 1px solid #e5e7eb;
      background-color: #ffffff;
    }

    @media (max-width: 600px) {
      main {
        padding: 16px;
      }

      .faq {
        padding: 16px;
      }

      .faq h1 {
        font-size: 24px;
      }

      summary,
      details p {
        padding: 14px;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="faq" aria-labelledby="faq-title">
      <h1 id="faq-title">Frequently Asked Questions</h1>

      <details>
        <summary>What is HTML?</summary>
        <p>HTML stands for HyperText Markup Language. It is used to structure content on web pages.</p>
      </details>

      <details>
        <summary>Why should I use semantic HTML?</summary>
        <p>Semantic HTML gives meaning to your page structure, improves accessibility, and helps search engines understand your content better.</p>
      </details>

      <details>
        <summary>Can an accordion work without JavaScript?</summary>
        <p>Yes. The native details and summary elements provide built-in expand and collapse behavior without JavaScript.</p>
      </details>

      <details>
        <summary>Is this FAQ keyboard accessible?</summary>
        <p>Yes. Users can focus the summary element and open or close it using the keyboard in modern browsers.</p>
      </details>
    </section>
  </main>
</body>
</html>

Why This Works

Stretch Goals

Add a custom plus and minus icon using CSS.
Use CSS variables for colors, spacing, and border radius.
Add more FAQ items about HTML, CSS, and accessibility.
Create a dark mode version using CSS custom properties.
Style the accordion to match a landing page or documentation page.
Try building another version using the checkbox method and compare it with <details> and <summary>.

Quick Checklist

Does each FAQ item use <details>?
Does each question use <summary>?
Does each answer appear inside the matching FAQ item?
Does the accordion work without JavaScript?
Is the layout readable on mobile screens?
Are focus styles visible for keyboard users?

Challenge Goal

What You Will Build

Concept Overview

Example

Coding Challenge

Requirements

Input and Output

Input

Output

Constraints

Hints

Starter Code

Solution Walkthrough

Step 1: Create the page structure

Step 2: Add the FAQ heading

Step 3: Add FAQ items

Step 4: Style the accordion

Step 5: Style the open state

Solution

Why This Works

Stretch Goals

Quick Checklist

Challenge Goal

What You Will Build

Concept Overview

Example

Coding Challenge

Requirements

Input and Output

Input

Output

Constraints

Hints

Starter Code

Solution Walkthrough

Step 1: Create the page structure

Step 2: Add the FAQ heading

Step 3: Add FAQ items

Step 4: Style the accordion

Step 5: Style the open state

Solution

Why This Works

Stretch Goals

Quick Checklist

Keep CompileQuestHub free

Request a topic or report an issue

Freshness and topics

Prerequisites

What you will learn

HTML Foundations

Keep going with nearby resources

Create a Semantic Navigation Bar with HTML

Build a Simple Contact Form Page with HTML

Build Your First Personal Profile Page with HTML

Get Clarity Before Work Gets Chaotic

Turn Projects Into Clear Next Steps