Accessible Accordions Block

Welcome to the demo page for our Accessible Accordion Block! Designed with inclusivity and usability in mind, this block brings a seamless and fully customizable accordion feature to your WordPress website.

Here is a demo of the block in action:

• Write anything you want for the accordion heading

  Supports any block inside the expanded accordion

  You can insert any content you wish within the expanded area to allow you to shorten your page length and allow users to focus on other key areas of your page.

  Standard WordPress options

  • Colour Options for background and text, with the notification if the colour combination has sufficient contrast.
  • Typography size selector allows to change the size of the accordion headings.

• What makes our accordion block accessible

  Properly Structured HTML with the use of ARIA and Javascript

  • aria-controls and aria-expanded are used on the accordion header.
  • aria-labelledby on the accordion content area.
  • Unique ID’s for each accordion generated automatically.
  • Accordion Header is a <button> to follow best practices.
  • Javascript controls the expand and collapse and updates the aria-expanded status.
  • The parent block allows you to choose the heading level for all the accordions to meet the heading structure requirement.

Check back for the release in the WordPress.org plugin directory!