This is a self-contained example of an accessible FAQ accordion built with HTML, CSS, and JavaScript. It demonstrates proper use of aria-expanded for state management.
Each question is a button. When clicked, JavaScript updates the aria-expanded attribute and toggles the visibility of the corresponding answer panel using the hidden attribute.
Yes, it uses semantic buttons, aria-expanded to indicate state, aria-controls to associate the button with its panel, and the hidden attribute for visibility. Keyboard navigation is supported natively.