Next DB 6.1: Auto-Updating Tables, Printing, Phone Layout and SEO Next Task 6.0.0: a task manager for Joomla Next Inventory 6.1.1: smoother Check Out, no more list limits, and much faster PHP2Shell: Is Your Joomla Site Safe? What to Do Today Introducing Next Boards: Kanban project and task boards for Joomla Building the Future of Joomla Extensions
NextSoftware
Smart Local Youtube — Documentation

Accessibility

Smart Local Youtube is built to meet WCAG 2.1 Level AA accessibility standards. Every visitor can interact with the consent dialog, including keyboard-only users and screen reader users.

Dialog Role & ARIA

The consent box uses proper ARIA attributes:

Attribute Value Purpose
role dialog Identifies the element as a dialog to assistive technology
aria-modal true (center modal only) Set only for the center modal, which has a backdrop. The bottom bar and corner boxes are non-modal dialogs
aria-label The consent headline Provides an accessible name for the dialog
aria-describedby Points to consent text Links the dialog to its descriptive content
tabindex -1 Allows the dialog to receive programmatic focus

Focus Trap

When the center modal is visible, it receives focus and keyboard focus is trapped inside it:

  • Pressing Tab cycles through the interactive elements (close button, privacy link, decline button, accept button)
  • Focus does not escape to the page behind the dialog

The bottom bar and the corner boxes do not take focus and do not trap Tab: keyboard users can keep reading the page and reach the box with Tab when they want to. The inline placeholders are part of the page and are reached with Tab in reading order.

The focus trap and keyboard handling are implemented in smartlocalyoutube.js, which also restores the visitor's scroll position across the consent reload via sessionStorage.

Keyboard Navigation

All interactive elements in the consent dialog are reachable via keyboard:

Key Action
Tab Move focus to the next interactive element
Shift+Tab Move focus to the previous interactive element
Enter or Space Activate the focused button or link
Escape Moves focus to the close button (×). It does not close the dialog; activating the close button declines

Screen Reader Support

  • The center modal is announced when it appears (focus moves to the dialog element), and every position announces its label through the live region
  • The close button (×) has an aria-label of "Close" for screen readers
  • The consent text is linked via aria-describedby so screen readers read it automatically
  • The decorative icon uses aria-hidden="true" so it's skipped by screen readers
  • A live region (role="status", aria-live="polite") is available for dynamic status updates

Reduced Motion

The plugin respects the prefers-reduced-motion: reduce media query:

  • When enabled in the visitor's OS settings, all CSS animations are disabled
  • The consent box appears instantly without any motion
  • This is handled purely in CSS — no JavaScript detection is needed

Focus Visible

Interactive elements (buttons, links) show visible focus outlines when navigated via keyboard, so keyboard users can always see which element is currently focused.

Semantic HTML

The consent dialog uses semantic HTML elements:

  • A heading element for the title (proper heading hierarchy)
  • <p> for the consent text
  • <form> with proper action and method for the consent submission
  • <button> elements with type="submit" for accept and decline
  • <a> for the privacy policy link
  • A hidden CSRF token <input> inside the form

All Extensions