Interactive demos of accessible Site Menu and Carousel components. Each page contains an inaccessible original that AE JS will automatically fix.
@audioeye/a11y-site-menu — An accessible
navigation overlay that adds keyboard-navigable menus to existing site
navigation.
A simple horizontal navigation bar with hover-only dropdown menus. Demonstrates keyboard navigation and screen reader support via the a11y site menu overlay.
Multi-level nested navigation with 3+ levels of depth, inactive category headers, and external links. Tests deep hierarchy handling.
Menu with mobile-only and utility links excluded via
excludeItems, and trigger button placed in a
separate container via triggerButtonContainer.
Simulates a WordPress theme navigation with
.menu-item and .sub-menu classes.
Uses overrideMenuItems with WP-specific selectors
for 3-level hierarchy extraction.
Replicates a Bootstrap navbar with .navbar-nav,
.dropdown-menu, and .dropdown-item.
Extracts items using Bootstrap-specific class selectors.
Two independent fixSiteMenu() calls on the same
page: a primary header nav and a footer nav. Each has its own
trigger button and overlay menu.
Parent page nav + content in an <iframe>.
Demonstrates postMessage-based cross-frame
architecture where the menu overlay lives in the parent and
the iframe receives click events.
@audioeye/a11y-carousel — An accessible carousel
modal with keyboard navigation, screen reader announcements, and i18n
support.
Auto-playing image carousel with mouse-only controls. The a11y fix adds a modal with arrow-key navigation and live region announcements.
Carousel with rich HTML content cards including links and buttons. Demonstrates click proxying and complex content handling.
Non-standard carousel structure using custom
overrideSlides to manually extract slide content
for the accessible modal.
Two independent carousels side by side on the same page. Each has its own trigger button, modal, and slide count. Verifies instance isolation.
Carousel with 7 slides — only 4 have accessible content.
Decorative slides (empty divs, images with alt="")
are automatically skipped by checkAccessibleContent().