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 Google Maps — Documentation

Accessibility

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

Dialog Role & ARIA

The floating consent box uses these ARIA attributes:

Attribute Value Purpose
role dialog Identifies the element as a dialog to assistive technology
aria-modal true, center modal only Tells assistive technology that the page behind is inactive. The bottom bar and corner boxes are not modal, so they don't set it
aria-label "Google Maps Consent" Provides an accessible name for the dialog (translatable)
aria-describedby Points to the consent text Links the dialog to its descriptive content
tabindex -1 Allows the dialog to receive programmatic focus

Inline and shortcode placeholders use role="region" with the same accessible name, because they sit in the page content rather than over it.

Focus Handling

How focus behaves depends on the position:

  • Center modal (position 1): when the box opens, focus moves to it and stays inside it. Tab and Shift+Tab cycle through the close button, the privacy link and the two buttons, and focus does not escape to the page behind the backdrop
  • Bottom bar and corner boxes (positions 2–4): the box does not take focus or trap it. Keyboard users can keep using the page and reach the box with Tab like any other content
  • Inline and shortcode placeholders: part of the normal page flow, reached with Tab

Keyboard Navigation

All interactive elements in the consent box are reachable with the 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 by itself; activating the close button counts as a decline

Screen Reader Support

  • The live region announces the dialog's name when it appears
  • The consent text is linked through aria-describedby, so screen readers read it with the dialog
  • The close button (×) has an aria-label of "Close"
  • The decorative icon uses aria-hidden="true", so screen readers skip it
  • A live region (role="status", aria-live="polite") is available for 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 box uses semantic HTML elements:

  • A heading element for the title
  • <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, opening in a new tab
  • A hidden CSRF token <input> inside the form

All Extensions