♿ Accessibility (A11y)

OnigiriJS provides built-in accessibility helpers to ensure your UI works seamlessly with keyboards, screen readers, and assistive technologies — without requiring a SPA framework.

Quick Start

<script src="onigiri-core.js"></script>
<script src="onigiri-a11y.js"></script>

<script>
// Accessibility module initializes automatically
// No configuration required
</script>

• Visible keyboard focus indicators
• Screen reader announcements
• Focus trapping for modals
• ARIA attribute helpers
• Reduced motion & high contrast support

Screen Reader Announcements

API Usage

// Polite announcement (default)
Onigiri.a11y.announce('Profile saved successfully');

// Assertive announcement
Onigiri.a11y.announce('Error saving profile', 'assertive');

// Using Onigiri prototype
O('#save').announce('Saving changes');

Live Example

Focus Management

Programmatic Focus

// Focus by selector
Onigiri.a11y.focus('#main-content');

// Using Onigiri selection
O('#title').focus();

Live Example

Focus Trapping (Modals)

API Usage

const trap = Onigiri.a11y.trapFocus('#modal', {
    initialFocus: '.close',
    returnFocus: true,
    escapeDeactivates: true
});

// Release
Onigiri.a11y.releaseFocusTrap(trap);

Live Example

ARIA Attribute Helpers

// Set attributes
Onigiri.a11y.aria.set('#menu', 'expanded', true);
Onigiri.a11y.aria.toggle('#like', 'pressed');

// Using Onigiri selection
O('#tab-1').aria('selected', true);

Skip Links

// Create skip-to-content link
Onigiri.a11y.createSkipLink('#main-content');

Live Example

Motion & Contrast Preferences

if (Onigiri.a11y.prefersReducedMotion()) {
    console.log('Reduced motion enabled');
}

if (Onigiri.a11y.prefersHighContrast()) {
    console.log('High contrast enabled');
}

Accessibility Validation

const result = Onigiri.a11y.validate('#form');

if (!result.valid) {
    console.error(result.errors);
    console.warn(result.warnings);
}

Live Example

Accessibility Checklist

• All interactive elements are keyboard accessible
• Focus indicators are visible
• Modals trap focus correctly
• Forms have labels or aria-labels
• Images include alt text
• Dynamic updates are announced
• Reduced motion is respected