iRAccess

Live demo — try it on this page

The widget below is loaded exactly as your customers will see it. Open it from the floating button (bottom-right) or use any of these shortcuts:

What's included

Every accessibility tool you need to comply with the Israeli Equal Rights for Persons with Disabilities Act and the IS 5568 standard.

Quick start

Add one script tag before </body>. The widget injects itself, loads its own CSS and logo from the iRestWEB CDN, and exposes window.iRAccessWidget.

<script>
  window.iRAccessConfig = {
    language: 'en',                    // 'en' | 'he' | 'ar' | 'ru'
    position: 'bottom-right',          // trigger button corner
    panelSide: 'auto'                  // 'auto' | 'left' | 'right'
  };
</script>
<script src="https://widgets.irestweb.com/widget.min.js" async></script>

Why load from widgets.irestweb.com?

• Always up-to-date. Bug fixes and a11y improvements roll out without you redeploying.
• Brand stays consistent. The logo, brand colors, stylesheet and asset paths are derived from the script's source — they cannot be overridden by a consumer site. Customers can configure language, position and their accessibility statement, but not repaint or rebrand.
• Cached across sites. Visitors who already loaded the widget elsewhere get it from cache.

Configuration

All options are optional. Defaults are sensible for the most common case.

Israeli Accessibility Statement

Israeli law (Equal Rights for Persons with Disabilities Act 1998 + IS 5568) requires every business to publish an accessibility statement and a coordinator contact. The widget provides this out of the box.

Option A — link to a hosted statement page

window.iRAccessConfig = {
  accessibilityStatement: {
    url: 'https://example.com/accessibility'   // opens in new tab
  }
};

Option B — in-widget statement (recommended)

window.iRAccessConfig = {
  accessibilityStatement: {
    coordinator: {
      name:  'Your Name or Title Here',
      email: 'accessibility@example.com',
      phone: '+972-50-000-0000'
    },
    lastReviewed: '2026-05-02',
    customText: 'For wheelchair-accessible store visits, please call ahead.'
  }
};

The footer "Accessibility Statement" link opens an in-panel sub-view containing:

• Compliance paragraph referencing the 1998 Act, IS 5568 (Level AA), and WCAG 2.0
• List of features available through the widget
• Your customText paragraph (sanitized)
• Coordinator contact card with mail-to and tel: links
• Last-reviewed date
• Feedback prompt directing visitors to the coordinator

Public JavaScript API

All methods are on window.iRAccessWidget. Available after DOMContentLoaded.

Custom events

The widget dispatches DOM events on window:

window.addEventListener('iraccess:opened', () => { /* panel opened */ });
window.addEventListener('iraccess:closed', () => { /* panel closed */ });

Try it from the console

Recipes

Hebrew site, panel anchored to the bottom-left, with coordinator info

<script>
  window.iRAccessConfig = {
    language: 'he',
    position: 'bottom-left',
    panelSide: 'auto',                 // → left in RTL
    accessibilityStatement: {
      coordinator: {
        name:  'נציג נגישות',
        email: 'access@site.co.il',
        phone: '03-1234567'
      },
      lastReviewed: '2026-05-02'
    }
  };
</script>
<script src="https://widgets.irestweb.com/widget.min.js" async></script>

Force the panel side regardless of language

<script>
  // Always slides in from the right, even in Hebrew
  window.iRAccessConfig = { panelSide: 'right' };
</script>
<script src="https://widgets.irestweb.com/widget.min.js" async></script>

Use a hosted statement page instead of the in-widget view

<script>
  window.iRAccessConfig = {
    accessibilityStatement: {
      url: 'https://example.com/legal/accessibility'
    }
  };
</script>
<script src="https://widgets.irestweb.com/widget.min.js" async></script>

React to widget state from your own code

window.addEventListener('iraccess:opened', () => {
  // pause an autoplay carousel while the user is adjusting settings
  window.myCarousel?.pause();
});

Accessibility & compliance

• WCAG 2.1+ AA color contrast on every interactive element.
• Israeli IS 5568 (Level AA) support, mirroring WCAG 2.0.
• Real <button> elements with type="button" (no form-submit hijacking).
• role="switch" with aria-checked on every toggle.
• aria-pressed on contrast options. aria-labelledby linking each section to its eyebrow heading.
• Keyboard: Tab cycles, Enter/Space activates, Esc closes the panel.
• Visible :focus-visible outlines on every focusable element.
• Honors prefers-reduced-motion (animations down to 0.01ms, panel slide preserved).
• Honors prefers-contrast: more (extra outlines on active states).
• Honors prefers-color-scheme: dark (full dark-mode palette).
• Non-color cue on active tile (corner indicator dot).
• RTL-correct: panel side, toggle thumb direction, select chevron, back-arrow icon.