Interactive FAQs accordion component

Community feedback

• 

  EmicJoykiller•270

  @EmicJoykiller

  Posted 4 months ago

  Add an aria-expanded attribute to indicate if an answer is open or closed.

  Use aria-controls to associate each question button with its corresponding answer.

  Ensure answers have unique ids for aria-controls to reference.

  Allow full keyboard navigation (Tab to focus, Enter/Space to toggle answers).

  Ensure visible focus styles are present and clear for keyboard users.

  Optionally wrap each answer in a <section> or add role="region" for better screen reader context.

  Maintain logical heading structure (consider using <h2> for each question if appropriate).

  Test with a screen reader (like NVDA, VoiceOver) to catch anything Lighthouse might miss.

  10