Extension Docs

Accessibility & Responsive Behavior

Details
Category: ES Content Display

ES Content Display is built with keyboard operation and accessible states as part of the renderer design rather than as a separate visual add-on.

Accordion and FAQ

  • Native button triggers
  • aria-expanded
  • aria-controls
  • Heading structure around controls
  • Keyboard movement with Arrow Up/Down, Home and End

Tabs

  • tablist, tab and tabpanel relationships
  • aria-selected
  • Roving tabindex
  • Manual activation with Enter/Space
  • Direction-appropriate arrow-key navigation

When Tabs convert to the mobile Accordion interface, the active item remains represented correctly and focus is transferred if the previously focused desktop/mobile control is about to become hidden.

Directory

  • Search results are announced through a status region
  • A–Z exposes active state
  • Filtering does not steal focus
  • Deep-linked items can receive programmatic focus without adding every Directory item to the normal Tab order

Repeated Read More links receive a distinct accessible name that includes the item title where available.

Metadata

Category, Tags and Author values include semantic labels for assistive technologies.

Heading Level

Set:

Accessibility → Item Heading Level

Choose H2–H6 according to the surrounding page hierarchy.

ES Content Display cannot infer the headings used elsewhere by the site template or page content, so the site administrator is responsible for choosing the appropriate level.

Responsive behavior

The module is designed to adapt to its available container width.

Important behaviors include:

  • Tabs may convert to Accordion at approximately 768px module width.
  • Directory collapses appropriately in narrow containers.
  • A–Z can scroll horizontally when space is limited.
  • Long text and URLs wrap instead of forcing page overflow.
  • Images and embedded media are constrained to the module width.
  • Wide tables/preformatted content receive controlled overflow.
  • Main interactive controls use generous touch target sizing.
  • Reduced-motion preferences are respected where animation behavior is relevant.

Template compatibility

ES Content Display CSS is scoped under the module root and avoids global resets. Typography and text color are intentionally inherited from the Joomla template.