لوحات الأكورديون باستخدام Button وaria-expanded

An accordion is a stack of headings that expand and collapse to reveal content. Each section can open on its own, unlike tabs.

Make every accordion header a real button. Buttons are focusable, work with Enter and Space, and announce themselves to screen readers for free.

Watch out for a clickable div as a header. It is not focusable, ignores the keyboard, and tells assistive tech nothing about its job.

Add aria-expanded to the button so screen readers announce collapsed or expanded. This single state is what makes an accordion accessible.

When the user activates the button, flip aria-expanded between true and false. Keep it in sync with whether the panel is actually showing.

Use aria-controls on the button, set to the id of the panel it opens. Users learn which content this header reveals.

When a section is closed, give its panel the hidden attribute. That removes it from the page and from the accessibility tree until reopened.

Place each button inside a real heading like h3. Screen reader users can then jump section to section using heading navigation.

A lone show-and-hide is a disclosure, not a tab set. It needs only a button with aria-expanded, no tablist or tab roles at all.

After toggling, leave focus on the button the user pressed. Do not steal focus into the panel; that surprises keyboard users.

Because the button carries its own state, a screen reader says expanded or collapsed every time. Users always know what activating it will do.

You are building an accordion header that opens and closes a section. Which attribute makes its state accessible?

You learned an accordion header is a button with aria-expanded, wrapped in a heading. Toggle the state, point at the panel, and hide it when closed.