FAQ Accordion Widget
Paste your questions and answers, one per line, and get a keyboard-friendly FAQ accordion that follows the WAI-ARIA disclosure pattern, grows a search box when the list gets long and looks at home in light or dark themes.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/faq-accordion" title="FAQ Accordion by A2Z Tools" width="100%" height="560" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="faq-accordion" data-height="560"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Each line is 'Question | Answer'. A line that starts with '## ' opens a named group, and a line without a pipe directly under a question becomes another paragraph of that answer. Answers understand exactly three things: blank-line paragraphs, **bold** and bare https:// links, which open in a new tab with rel=noopener nofollow ugc; everything else, including pasted HTML, is shown as plain text. Every question is a real button inside a heading, with aria-expanded and aria-controls pointing at its answer panel. Enter and Space toggle it natively; Up and Down arrows move between questions, Home and End jump to the first and last. Choose multi-open (default) or single-open, start with the first answer open, all open or none, and number the questions if you like. Above 8 questions a search field appears; it ignores case and accents and politely announces '3 of 12 questions match' half a second after typing stops.
Method
- Line format: Question | Answer; '## Group' starts a group; a pipe-less line under a question adds a paragraph
- Answer markup: blank line = new paragraph; **text** = <strong>; bare https:// URL = link; nothing else is parsed
- Header: <h2|h3><button aria-expanded aria-controls> - panel: aria-labelledby, role=region only when there are 6 panels or fewer (APG guidance)
- Keys: Enter/Space toggle; ArrowDown/ArrowUp next/previous visible question (wrapping); Home/End first/last
- Search shown when questions > 8 (v_search=auto): every typed word must appear in the question or answer, accents ignored
- Options: v_mode=multi|single, v_open=first|none|all, v_numbers=1, v_search=auto|on|off
Worked examples
Two-paragraph answer with bold and a link
Inputs: Can I return an item? | Yes - you have **30 days** from delivery ... + next line 'Refunds go back ... Full policy: https://example.com/returns'
Result: One question; the answer has 2 paragraphs, '30 days' in bold and https://example.com/returns as a link
The pipe-less second line becomes a paragraph of the answer above it.
Hostile paste
Inputs: Q1 <script>alert(1)</script> | see javascript:alert(1) or https://evil.com/"onmouseover=alert(1)
Result: The question shows the tag as text; javascript: is not linked; the link stops at https://evil.com/ and the rest is text
Only p, strong and https links are ever created.
Accent-insensitive search
Inputs: Questions include 'Do you deliver to the Café?'; visitor types 'cafe'
Result: 1 matching question shown
Search folds case and accents and needs every typed word to match.
Limitations
- No FAQPage structured data is added to your page, and Google no longer shows FAQ rich results for any site.
- Answers are text with bold, paragraphs and https links only - no images, lists, tables or embedded video.
- Content travels in the embed code; very long FAQs (over about 16,000 characters) need splitting into two widgets.
- Deep links that open one specific question from a page URL are not supported.
Where publishers use it
- Shipping, returns and payment questions under a Shopify or WooCommerce product description
- A dental or physiotherapy clinic's 'Before your first appointment' page on Squarespace
- A SaaS pricing page answering seat, trial and cancellation questions next to the plans
- A school or council page grouping admissions, uniform and transport questions under '## ' headings
- An event page on Wix with tickets, parking and accessibility answers that visitors can search
Questions
Will this FAQ give my page FAQ rich results in Google?
No, and nothing can any more. Google limited FAQ rich results to well-known government and health websites in August 2023, deprecated the feature in May 2026 and stopped showing it in Search from 7 May 2026. The accordion therefore adds no FAQPage markup to your page. Answers inside the embed are rendered in an iframe, so search engines generally credit them to the frame rather than to your page; if FAQ text matters for your own page's ranking, also publish it as normal HTML.
Is an accordion bad for SEO because answers are hidden?
Collapsed answers in this widget live inside the iframe, so the ranking question is about the iframe, not about hidden text. For content you want indexed as part of your page, write it into the page itself. Use the accordion for the support-style questions visitors scan, where saving vertical space matters more than search snippets.
How do keyboard and screen-reader users operate it?
Tab reaches each question button; Enter or Space opens and closes it, and the button reports Expanded or Collapsed. Arrow keys move between questions and Home/End jump to the ends, as the W3C APG accordion pattern describes. Each answer panel is labelled by its question; with more than 6 questions the panels drop the region role so a screen-reader landmark list does not fill with dozens of entries.
When does the search box appear?
Automatically when there are more than 8 questions; set v_search=on to always show it or off to never show it. Typing 'refund time' shows questions whose question or answer contains both words, so 'Café' is found by 'cafe'. The count is announced politely 450 ms after typing stops, not on every key press.
What is the difference between single-open and multi-open?
Multi-open (the default) lets visitors compare several answers and shows Expand all / Collapse all. Single-open closes the previous answer whenever another opens, which keeps a long list short on phones; Expand all is hidden in that mode because it would contradict it.
Can I put links or formatting in answers?
Write **double asterisks** for bold, leave a blank line (or start a new line without a pipe) for a new paragraph, and paste a full https:// address to make a link. A trailing full stop or closing bracket is not swallowed into the link. Plain http:// and every other scheme stay as text, and HTML tags are displayed literally rather than run.
What does Copy as text produce?
The visible questions as 'Q: ... / A: ...' pairs with the asterisks removed and links kept as plain URLs, numbered when numbering is on. It respects the current search filter, which is handy for pasting a subset into an email or a support macro.
Sources
- Latest Google Search Documentation Updates (changelog) - Google Search Central . May 2026: 'This feature will no longer appear in Google Search starting May 7, 2026'; June 2026: FAQ rich result documentation removed; September 2023 entry: limited to well-known, authoritative government and health websites. Checked 2026-10-01.
- Changes to HowTo and FAQ rich results - Google Search Central Blog . August 2023 announcement restricting FAQ rich results to authoritative government and health sites.
- Accordion Pattern (Sections With Show/Hide Functionality) - W3C WAI-ARIA Authoring Practices Guide . Button with aria-expanded and aria-controls inside a heading; Enter/Space; optional region role, avoided above about 6 panels. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools FAQ Accordion https://a2z.tools/embed/faq-accordion
<a href="https://a2z.tools/embed/faq-accordion">A2Z Tools FAQ Accordion</a>
[A2Z Tools FAQ Accordion](https://a2z.tools/embed/faq-accordion)
FAQ Accordion by A2Z Tools - https://a2z.tools/embed/faq-accordion
Related widgets
-
Customer quotes as cards, a featured quote, a list or a manual slider, with stars and initials avatars.
-
Two to five plan cards with a monthly/yearly switch, saving %, highlighted plan and comparison mode.
-
Numbered How-it-works steps with drawn icons, or an order tracker that highlights the current step.
-
A tick-off checklist with sections, progress, copy and print - saved only on the visitor's device.
-
Shows Open now or Closed and when you open next, in your business's own time zone.
-
Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.