Next Inventory 6.1.0: App Manager, dark mode, and more Joomla 6.1 "Nyota" Is Here Building the Future of Joomla Extensions
NextSoftware
Smart Local Google Analytics — Documentation

Accessibility

Smart Local Google Analytics 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 Indicates the dialog is modal (center position uses a backdrop)
aria-label "Cookie Consent" 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 consent dialog is visible, keyboard focus is trapped inside it:

  • Pressing Tab cycles through the interactive elements (decline button, accept button, privacy link, close button)
  • Focus does not escape to the page behind the dialog
  • When the dialog is dismissed (consent given), focus returns to the page

This prevents keyboard users from accidentally interacting with content behind the consent overlay.

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 Not applicable (dialog requires an explicit accept/decline choice)

Screen Reader Support

  • The dialog is announced when it appears (focus moves to the dialog element)
  • The consent text is linked via aria-describedby so screen readers read it automatically
  • The close button (×) has an aria-label of "Close" for screen readers
  • 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 (fade in, slide) 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. This ensures keyboard users can always see which element is currently focused.

Semantic HTML

The consent dialog uses semantic HTML elements:

  • <h4> 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
  • Hidden CSRF token <input> inside the form

All Extensions