Tag: Accordion accessibility

10 ways to make your WordPress accordion accessible to all users

WordPress accordions are a fantastic way to organise content and make your site look neat, but accessibility is key. If you’re not thinking about all users—including those with disabilities—you’re leaving people behind. Let’s fix that.

1. Follow WCAG guidelines

The Web Content Accessibility Guidelines (WCAG) set the standard for accessible web design. For accordions, this means ensuring proper use of semantic HTML, sufficient contrast, and clear instructions for users. Meeting WCAG standards isn’t just about compliance; it’s about usability for everyone.

2. Use semantic HTML

Make sure your accordion is built with semantic elements like <button> and <div> for toggling content. Screen readers understand these elements better, making navigation easier for users with visual impairments.

3. Add ARIA attributes

ARIA (Accessible Rich Internet Applications) attributes are essential for screen readers:

• aria-expanded: Indicates if the accordion section is open or closed.
• aria-controls: Points to the ID of the element being controlled.
• role=”region”: Defines the accordion content area for better screen reader identification.

4. Ensure keyboard navigation works

Users should be able to navigate through your accordion using just the keyboard. Test the following:

• Tab key: Moves focus to the next accordion header.
• Enter or Space: Opens and closes the accordion sections.
• Arrow keys: Optionally, allow up/down or left/right keys for moving between sections.

5. Use focus indicators

When navigating with a keyboard, users need to see where they are. Add a visible focus indicator (e.g., an outline or border) to your accordion headers to make navigation clear.

6. Provide clear labels

Every accordion section should have a meaningful and descriptive label. Avoid vague terms like “Click here” or “More info”—be specific so users know what to expect.

7. Maintain proper contrast

Text and background colours should have enough contrast for readability. Use a contrast checker tool to meet WCAG’s minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

8. Avoid auto-play or auto-expand features

Automatically expanding or collapsing accordion sections can confuse users, especially those relying on assistive technologies. Let users control the interaction to avoid disruption.

9. Test with assistive technologies

Use tools like screen readers (NVDA, JAWS, or VoiceOver) to test your accordion. These tools help you experience your site as someone with a disability would, allowing you to catch and fix issues.

10. Provide instructions

Include a short description of how to use the accordion, particularly if it’s interactive. For instance: “Use the Tab key to navigate between sections and Enter to expand them.” Clear instructions make your accordion more user-friendly for everyone.

FAQ section

• What are ARIA attributes in WordPress?
  Learn more about ARIA attributes for WordPress.
• How do I meet WCAG guidelines with WordPress?
  Check this tutorial on WordPress block themes and SEO.
• What tools can I use to test accessibility?
  Here’s a detailed guide on icons for WordPress.
• How do I ensure keyboard navigation in WordPress?
  Explore this article on WordPress block templates.