ARIA Live Regions

The ARIA Live Regions system provides professional accessibility support for announcing dynamic content changes to screen reader users.

Features

• Two priority levels — Polite (non-urgent) and Assertive (important alerts)
• Automatic clearing — Announcements clear after 3 seconds (configurable)
• Queue management — Handles multiple rapid announcements gracefully
• Smart duplicate prevention — Prevents repetitive announcements
• Priority handling — Assertive announcements can interrupt polite ones

API Reference

Basic Announcements

// Polite announcement (default)
AriaAnnouncer.announce("Product added to cart");

// Assertive announcement (urgent)
AriaAnnouncer.announce("Error: Form submission failed", "assertive");

Cart Announcements

AriaAnnouncer.cart.added("Blue T-Shirt", 1);
// Announces: "Blue T-Shirt added to cart"

AriaAnnouncer.cart.removed("Blue T-Shirt");
// Announces: "Blue T-Shirt removed from cart"

AriaAnnouncer.cart.updated("Blue T-Shirt", 5);
// Announces: "Blue T-Shirt quantity updated to 5"

AriaAnnouncer.cart.cleared();
// Announces: "Cart cleared"

Search Announcements

AriaAnnouncer.search.results(12, "blue shirts");
// Announces: "12 results found for 'blue shirts'"

AriaAnnouncer.search.results(0, "xyz");
// Announces: "No results found for 'xyz'"

AriaAnnouncer.search.loading();
// Announces: "Searching..."

Form Validation

AriaAnnouncer.form.error("Email", "Please enter a valid email address");
// Announces assertively: "Email: Please enter a valid email address"

AriaAnnouncer.form.success("Form submitted successfully");
// Announces politely

AriaAnnouncer.form.required("Email");
// Announces assertively: "Email is required"

Filter Announcements

AriaAnnouncer.filter.updated(24);
// Announces: "Showing 24 products"

AriaAnnouncer.filter.applied("Color", "Blue");
// Announces: "Filter applied: Color - Blue"

AriaAnnouncer.filter.cleared();
// Announces: "All filters cleared"

How It Works

The system uses two hidden <div> elements with aria-live attributes:

• Polite (aria-live="polite") — Screen readers announce when they finish current task
• Assertive (aria-live="assertive") — Screen readers interrupt and announce immediately

Text is injected into these elements, which screen readers detect and announce. Content clears after a configurable timeout.

Auto-Integration

The system automatically integrates with common Shopify events:

• Cart add/remove/update operations
• Search results changes
• Form validation errors
• Filter and sort changes
• Modal open/close events

Verification

Open your browser console. You should see:

[ARIA] AriaAnnouncer ready and integrated

Test with:

AriaAnnouncer.announce("Test message", "polite");

Best Practices

• Use polite for non-urgent updates (cart changes, search results)
• Use assertive for errors and important alerts
• Keep messages concise and descriptive
• Avoid announcing every minor interaction
• Test with actual screen readers (VoiceOver, NVDA, JAWS)