Accordion Schema for YOOtheme Pro

Accordion Schema is a builder element for YOOtheme Pro 4.x and 5.x on Joomla 5 and Joomla 6. It builds on the UIkit 3 accordion and adds two things the default one lacks: structured data following Schema.org and operation without a mouse. It includes two elements, the accordion and the item.

Schema.org/FAQPage as JSON-LD

A checkbox in the Settings tab switches on the structured data. The element then writes application/ld+json into its own output: a FAQPage node with one Question entry per accordion item, each with an acceptedAnswer of type Answer. Only items with a title and content are included, the answer text is stripped of HTML via strip_tags and protected against script injection with JSON_HEX_TAG. It generates FAQPage only, no QAPage. Since 2023, Google shows FAQ rich results only for government and health websites; the question-and-answer structure stays machine-readable anyway, including for AI assistants.

Accessibility built into the markup

Every accordion title gets role="button", tabindex="0" and aria-expanded. The bundled JavaScript updates aria-expanded on every open and close and handles Enter and Space, so the accordion is fully operable by keyboard. Focus stays visible: a 2-pixel outline with a 2-pixel offset, shown via :focus-visible to keyboard users only. You set a separate ARIA label per item, otherwise the title text without HTML serves as the label. Built to WCAG 2.1 AA, the standard behind the German Accessibility Strengthening Act (BFSG), the European Accessibility Act, EN 301 549 and BITV 2.0.

An item holds more than a question and an answer

Each item has a title, editor content, an image with alt text and a link. The image sits above, below, left or right of the text; side by side, a UIkit grid takes over with 15 width steps, its own gaps and a selectable breakpoint for wrapping. On top of that come 9 focal points for cropping, three border shapes, eager loading and inline SVG with 7 color roles. The link offers 8 styles from button to text link, three sizes, plus nofollow and noreferrer.

Styling questions and answers

The title offers 16 text styles, from Heading 3X-Large through h1 to h6 down to Meta and Lead. You place the icon on the left or right and optionally add a second one for the open state; the two crossfade in 0.3 seconds. The answer text can be styled as Lead or Meta, start with a drop cap and be split into 2 to 6 columns.

Behavior and technical details

Two switches control the behavior: several items open at once, and start with all items closed. Each item can render as a div, article or section, and a CSS field takes your own rules for .el-item, .el-title, .el-content, .el-image and .el-link. Title, content, icons, image and link are exposed as dynamic sources. The plugin loads CSS and JavaScript only when the element is on the page, with a version stamp against stale caches.