It’s not suited to FAQ workflow.
-- The user’s initial goal is to identify the appropriate question.
-- There’s never a need to compare column data across rows.
It forces a rigid structure on solutions.
Layout options:
Option 1: Large TOC and headings
-- TOC with links to category headings and answers, set in a nav
-- Group questions by heading in section with aria-labelledby
-- Set each question and answer in article
-- Set each question in a heading
-- Use headings, paragraphs and lists for answer
-- Example: https://www.w3.org/WAI/standards-guidelines/wcag/faq/
Option 2: Small TOC and details elements
-- TOC with links to just category headings, set in a nav
-- Add “Expand all answers” and “Collapse all” buttons directly below the TOC
--- See the ESDC course sitemap for an implementation
-- Group questions by heading in section with aria-labelledby
-- Set each question and answer in details
-- Use headings, paragraphs and lists for answer
-- Example: https://www.tamiu.edu/accessibility/faq.shtml
Complications
-- Since in both cases the TOC is between the filter and the results, you’ll need to write some JS that filters out TOC links if their targets are filtered out (including links to category headings)
-- NVDA has a bad unresolved bug from 2020 : It won’t read the name of a landmark using aria-labelledby if the referenced element is a descendant. You might want to use aria-label instead, though it needs to be translated. It's just for the category headings, and there aren’t many.
Do not use table layout:
-- The user’s initial goal is to identify the appropriate question.
-- There’s never a need to compare column data across rows.
Layout options:
Option 1: Large TOC and headings -- TOC with links to category headings and answers, set in a
nav-- Group questions by heading insectionwith aria-labelledby-- Set each question and answer in
article-- Set each question in a heading -- Use headings, paragraphs and lists for answer -- Example: https://www.w3.org/WAI/standards-guidelines/wcag/faq/Option 2: Small TOC and details elements -- TOC with links to just category headings, set in a
nav-- Add “Expand all answers” and “Collapse all” buttons directly below the TOC --- See the ESDC course sitemap for an implementation -- Group questions by heading insectionwith aria-labelledby-- Set each question and answer in
details-- Use headings, paragraphs and lists for answer -- Example: https://www.tamiu.edu/accessibility/faq.shtmlComplications -- Since in both cases the TOC is between the filter and the results, you’ll need to write some JS that filters out TOC links if their targets are filtered out (including links to category headings) -- NVDA has a bad unresolved bug from 2020 : It won’t read the name of a landmark using aria-labelledby if the referenced element is a descendant. You might want to use aria-label instead, though it needs to be translated. It's just for the category headings, and there aren’t many.