Israeli Accessibility Compliance

Israeli Accessibility Compliance

Instructions

Step 1: Understand the Legal Framework

Israeli web accessibility (negishot) is legally mandatory under the Equal Rights for Persons with Disabilities Act (Chok Shivyon Zechuyot Le'Anashim Im Mugbaluyot), 1998 and the Equal Rights for Persons with Disabilities (Service Accessibility Accommodations) Regulations, 2013 (Takanot Negishut LeSherut).

Note on WCAG version. The statute and regulations reference IS 5568. The dominant reading is that IS 5568, including the September 2023 Part 1 edition, stays legally anchored to WCAG 2.0 AA, with WCAG 2.1 alignment being partial or vendor-claimed rather than the legal baseline. Some sources describe IS 5568:2020 as WCAG 2.1 AA, so sources differ. The safe working target is WCAG 2.0 AA plus the Israeli-specific additions below; meeting WCAG 2.1 (and 2.2) criteria on top of that is useful future-proofing but is not the floor the law sets.

Who must comply: All public-facing Israeli websites and mobile applications of service providers open to the public, including government agencies, educational institutions, healthcare providers, businesses, and non-profits.

Standard conformance is necessary but not sufficient. The legal duty is the regulation (Service Accessibility Regulations 2013), which incorporates IS 5568 Part 1 by reference at level AA. You can pass an automated WCAG / IS 5568 audit and still be non-compliant if you lack the accessibility statement, the coordinator (where required), a feedback channel, or the certified-expert opinion described below, and vice versa. Treat "meets IS 5568" and "legally compliant" as two separate checklists.

Certified accessibility expert (Morshe Negishut Hasherut). Where an operator claims an exemption for "technological difficulty" under Regulation 35, the regulation requires a written opinion from a certified service-accessibility expert (morshe negishut hasherut) prepared in consultation with an internet-accessibility professional. In practice the accessibility statement and the audit behind it are also expected to be backed by a morshe negishut; compliance is not a pure developer/automated-audit exercise.

Digital documents (IS 5568 Part 2). IS 5568 is split into Part 1 (web content) and Part 2 (accessibility of digital documents, e.g. PDFs and Office files), published 2020. PDFs and downloadable documents on a public-facing Israeli site fall under the accessibility duty and are one of the most common real-world audit failures, so do not stop at the HTML.

Step 2: Who Is Exempt

The Service Accessibility Regulations base website-accessibility exemptions on revenue, not on employee count. There is no "25 employees" or "300,000 NIS" trigger in the regulations. The exemption tiers are:

These exemptions (except the heavy-burden application) are automatic and need no approval, but the operator must re-check their revenue every 3 years. The exact small-business threshold figure is contested between sources, so a borderline operator should verify against the regulation text or the Commission rather than self-certify as exempt. Exemption from website accessibility does not exempt the operator from other service-accessibility duties, nor from the separate physical-premises accessibility duty (negishut hamivne), which is governed by its own regulations.

Step 3: Enforcement and Penalties

Two enforcement tracks run in parallel:

• Civil lawsuit. A claimant can sue for up to 50,000 NIS in statutory damages without proof of harm, only needing to show the site is non-compliant. 60-day cure period: a deviation is not treated as a violation unless the operator was first sent a notice demanding a fix and failed to fix it within a reasonable time, no later than 60 days from receiving the notice. A class-action request for an inaccessible site has no cause of action if no prior fix notice was sent. This is a real defense for operators.
• Administrative enforcement by the Commission. Amendment 23 to the Equal Rights Act gave the Commission for Equal Rights of Persons with Disabilities an administrative track: warnings, commitments, accessibility orders, and an administrative monetary penalty (izum kaspi). The penalty amount is scaled by the operator's size (micro business up to 2,000,000 NIS turnover, small business up to 20,000,000 NIS, regular business above that or a public authority) and by the cost of the specific accommodation, with a per-day charge while a violation continues. Reductions apply for a clean prior record and for corrective action. This penalty is separate from and on top of the 50,000 NIS civil damages.

Filing a complaint (user side). A user who hits an inaccessible site sends the operator a fix notice (which starts the 60-day clock); if it is not fixed in time, the user can complain to the Commission for Equal Rights of Persons with Disabilities or sue for the statutory damages. The operator's accessibility coordinator (Step 4) is the first point of contact for such complaints, so an operator should route incoming accessibility complaints through the coordinator and act within the cure window.

Step 4: The Accessibility Coordinator (Rakaz Negishut)

The Service Accessibility Regulations require a service provider that is a public body, or that employs 25 or more employees, to appoint one of its staff as an accessibility coordinator (rakaz negishut). Note this 25-employee figure is the trigger for the coordinator appointment, not for the website-accessibility duty itself, which is universal subject to the revenue exemptions above. The coordinator:

• Gives the public information about the accessibility arrangements of the provider's assets and services.
• Handles accessibility inquiries and complaints from the public.
• Helps the parties responsible for accessibility carry out and maintain the required accommodations.

The coordinator's name and contact details must appear in the accessibility statement (see Step 9).

Step 5: IS 5568 vs WCAG -- Key Differences

IS 5568 is anchored to WCAG 2.0 AA (sources differ on whether the current edition reaches 2.1) and adds Israeli-specific requirements:

Step 6: Set Up Accessible RTL HTML Structure

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>שם האתר - כותרת הדף</title>
</head>
<body>
  <!-- Skip navigation link (required) -->
  <a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>

  <header role="banner">
    <nav role="navigation" aria-label="ניווט ראשי">
      <!-- Navigation items -->
    </nav>
  </header>

  <main id="main-content" role="main">
    <!-- Page content -->
  </main>

  <footer role="contentinfo">
    <a href="/accessibility-statement">הצהרת נגישות</a>
  </footer>
</body>
</html>

Key IS 5568 requirements in this structure:

• lang="he" and dir="rtl" on the html element
• Skip navigation link in Hebrew ("דלג לתוכן הראשי")
• ARIA roles for landmarks
• Hebrew ARIA labels for navigation
• Link to accessibility statement (Hatzaharat Negishot) in footer

Step 7: Hebrew Screen Reader Compatibility

Test with these screen readers commonly used in Israel:

Hebrew-specific screen reader patterns:

<!-- Announce content direction changes -->
<p dir="rtl" lang="he">
  טקסט בעברית עם <span dir="ltr" lang="en">English text</span> משולב
</p>

<!-- Hebrew ARIA labels -->
<button aria-label="סגור חלון">X</button>
<input type="search" aria-label="חיפוש באתר" placeholder="חפש...">

<!-- Hebrew live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true" dir="rtl">
  הטופס נשלח בהצלחה
</div>

Step 8: RTL-Specific ARIA Patterns

<!-- RTL form with accessible error messages -->
<form dir="rtl" novalidate>
  <div role="group" aria-labelledby="personal-info">
    <h2 id="personal-info">פרטים אישיים</h2>

    <label for="full-name">שם מלא</label>
    <input id="full-name" type="text" required
           aria-required="true"
           aria-describedby="name-error"
           aria-invalid="false">
    <span id="name-error" role="alert" class="error" hidden>
      נא למלא שם מלא
    </span>

    <label for="teudat-zehut">תעודת זהות</label>
    <input id="teudat-zehut" type="text" pattern="[0-9]{9}"
           inputmode="numeric" dir="ltr"
           aria-required="true"
           aria-describedby="tz-help tz-error">
    <span id="tz-help" class="hint">9 ספרות</span>
    <span id="tz-error" role="alert" class="error" hidden>
      מספר תעודת זהות לא תקין
    </span>
  </div>
</form>

<!-- RTL data table -->
<table dir="rtl">
  <caption>סיכום הזמנות</caption>
  <thead>
    <tr>
      <th scope="col">מספר הזמנה</th>
      <th scope="col">תאריך</th>
      <th scope="col">סכום</th>
      <th scope="col">סטטוס</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td dir="ltr">ORD-12345</td>
      <td>04/03/2026</td>
      <td dir="ltr">1,234.50 &#8362;</td>
      <td>הושלם</td>
    </tr>
  </tbody>
</table>

Step 9: Accessibility Statement (Hatzaharat Negishot)

IS 5568 requires a published accessibility statement. Required content:

<article dir="rtl" lang="he">
  <h1>הצהרת נגישות</h1>

  <p>אנו ב-[שם החברה] מחויבים להנגשת האתר לאנשים עם מוגבלויות
     בהתאם לתקן הישראלי IS 5568, המעוגן ב-WCAG 2.0 ברמה AA.</p>

  <h2>אמצעי נגישות באתר</h2>
  <ul>
    <li>האתר תומך בניווט מלא באמצעות מקלדת</li>
    <li>האתר תומך בקוראי מסך (NVDA, JAWS, VoiceOver)</li>
    <li>תמונות מלוות בטקסט חלופי</li>
    <li>ניגודיות צבעים עומדת ביחס 4.5:1 לפחות</li>
  </ul>

  <h2>מגבלות נגישות ידועות</h2>
  <ul>
    <li>[פרטו כאן רכיבים, דפים או מסמכים שטרם הונגשו במלואם, אם יש, ואת מועד התיקון הצפוי. אם אין מגבלות ידועות, ציינו זאת במפורש]</li>
  </ul>

  <h2>פנייה בנושא נגישות</h2>
  <p>רכז/ת נגישות: [שם]</p>
  <p>טלפון: <a href="tel:+97212345678" dir="ltr">+972-1-234-5678</a></p>
  <p>דוא"ל: <a href="mailto:negishot@example.co.il">negishot@example.co.il</a></p>

  <p>תאריך ביקורת הנגישות האחרונה: [תאריך]</p>
  <p>תאריך עדכון ההצהרה: [תאריך]</p>
</article>

The full required-content list (7 items, including known limitations and the audit date) is in references/is-5568.md. A statement that omits known limitations or the audit date is a common audit finding.

Step 10: Automated Accessibility Testing

See scripts/audit_a11y.py for the full audit pipeline.

# Quick accessibility check with axe-core via selenium
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

def run_accessibility_audit(url):
    options = Options()
    options.add_argument('--headless')
    driver = webdriver.Chrome(options=options)
    driver.get(url)

    # Inject axe-core
    axe_script = open('axe.min.js').read()
    driver.execute_script(axe_script)

    # Run audit with Hebrew locale rules
    results = driver.execute_script("""
        return axe.run({
            rules: {
                'html-has-lang': { enabled: true },
                'valid-lang': { enabled: true },
                'document-title': { enabled: true },
                'bypass': { enabled: true },
                'color-contrast': { enabled: true },
                'label': { enabled: true },
                'image-alt': { enabled: true }
            }
        });
    """)

    driver.quit()
    return results

IS 5568 compliance checklist (automated + manual):

See references/is-5568.md for the complete checklist mapped to IS 5568 clauses.

Recommended MCP Servers

No relevant MCP server applies to Israeli accessibility compliance. The skills-il MCP directory has no accessibility, IS 5568, or WCAG-auditing MCP at this time. The audit in this skill runs as a local Python script (scripts/audit_a11y.py), not through an MCP. If an accessibility-audit MCP is added to the directory later, prefer it for live-site scanning and keep the script for offline checks.

Examples

Example 1: Audit Existing Israeli Website

User says: "Check if my website meets Israeli accessibility standards" Result: Run scripts/audit_a11y.py against the URL, check for IS 5568 requirements including Hebrew lang attribute, RTL direction, contrast ratios, ARIA labels in Hebrew, skip navigation, and accessibility statement page. Generate a compliance report with pass/fail per criterion.

Example 2: Add Accessibility Statement Page

User says: "I need to add an accessibility page to comply with Israeli law" Result: Create a Hebrew accessibility statement (Hatzaharat Negishot) page with all legally required sections: compliance level, accessibility features, known limitations, contact information for the accessibility coordinator (rakaz negishot), and last update date.

Example 3: Fix RTL Form Accessibility

User says: "Screen readers are not reading my Hebrew form correctly" Result: Add dir="rtl" to the form element, ensure all labels are associated with inputs and use Hebrew text, add aria-required="true" for mandatory fields, provide Hebrew error messages with role="alert", and set dir="ltr" on numeric inputs like phone and ID number fields.

Example 4: Make Hebrew Data Table Accessible

User says: "My Hebrew table is not accessible to screen readers" Result: Add dir="rtl" to the table element, include a Hebrew caption, use scope="col" and scope="row" on header cells, mark LTR content like order numbers with dir="ltr", and ensure logical reading order matches visual RTL order.

Bundled Resources

Scripts

• scripts/audit_a11y.py -- Run IS 5568 accessibility audit: automated checks for Hebrew lang attribute, RTL direction, ARIA labels, contrast ratios, and skip navigation using axe-core and selenium. Generates compliance report with pass/fail per IS 5568 clause. Run: python scripts/audit_a11y.py --help

References

• references/is-5568.md -- Complete IS 5568 standard reference: clause-by-clause requirements mapped to WCAG 2.0 AA, Israeli-specific additions, exemption tiers, the two-track enforcement model (civil damages + Commission administrative penalty) with the 60-day cure period, the accessibility coordinator role, mandatory accessibility statement template, and checklist for compliance audits.
• references/widget-implementation.md -- Copy-pasteable TypeScript/React code for a Regulation 35 accessibility preferences widget: pub-sub prefs store with useSyncExternalStore, class-based CSS toggles, FOUC bootstrap script, Alt+A keyboard shortcut (layout-independent via e.code), framer-motion MotionConfig wiring, and counter-invert rules. Consult when the user wants to ship the widget surface itself, not just audit compliance.

Building a Compliant Accessibility Preferences Widget

Regulation 35 and IS 5568 require Israeli consumer-facing sites to expose an accessibility control surface that users can operate with the keyboard, typically a floating widget with toggles for contrast, text size, line spacing, cursor, and motion. This widget is a user-preference comfort tool, not an automation overlay. The difference is legally and financially significant: the FTC fined accessiBe $1M in April 2025 for misleading claims that its overlay auto-remediated sites (it didn't). The widget you ship must do only what the user asks it to do.

Feature Set

A minimum-viable Regulation 35 widget exposes these toggles:

Architecture

Three parts: a preferences store, a UI panel, and a CSS layer.

1. Preferences store. A pub-sub store (subscribe / getSnapshot / getServerSnapshot / set / reset) consumed by React via useSyncExternalStore. State is persisted to localStorage under a versioned key (e.g., site_a11y_prefs_v1). Version mismatches invalidate stored state so schema bumps do not leave stale fields around. Pre-populate the in-memory cache on notify() so subscriber fan-out does not trigger redundant localStorage reads.

2. UI panel. A floating trigger button (fixed bottom-6 start-6 z-40, RTL-aware via CSS logical properties) opens a Radix Sheet containing a 3-column grid of toggle cards plus a Reset action. The trigger carries aria-expanded, aria-controls, and aria-keyshortcuts="Alt+A".

3. CSS layer. Every visual change is driven by CSS classes on <html> (for example a11y-contrast-high, a11y-text-150, a11y-lines-20, a11y-reduce-motion). The widget never mutates content DOM. It does not inject alt text, reorder nodes, or rewrite ARIA. That is the line that separates a compliant user-preference tool from a banned overlay.

Single-Source Class Rules

The class list applied at runtime must be identical to the one applied by the FOUC bootstrap script (below), or users see a flash of unstyled preferences on every page load. Define the mapping once and generate both the runtime applyPrefsToElement() function and the bootstrap <script> body from the same table:

const CLASS_RULES = [
  ['a11y-links',           (p) => p.links,                 '!!p.links'],
  ['a11y-contrast-high',   (p) => p.contrast === 'high',   "p.contrast==='high'"],
  ['a11y-contrast-invert', (p) => p.contrast === 'invert', "p.contrast==='invert'"],
  ['a11y-contrast-mono',   (p) => p.contrast === 'mono',   "p.contrast==='mono'"],
  ['a11y-text-115',        (p) => p.textSize === 115,      'p.textSize===115'],
  ['a11y-text-130',        (p) => p.textSize === 130,      'p.textSize===130'],
  ['a11y-text-150',        (p) => p.textSize === 150,      'p.textSize===150'],
] as const;

FOUC Prevention

Preferences live in localStorage, which means the first paint happens at default styling and only after React hydrates does the widget re-apply the user's settings. That flash is unacceptable for users who rely on high contrast or 150% text. Fix it with an inline <script> in <head> that runs synchronously before React hydrates:

// Generated from CLASS_RULES so runtime and bootstrap can't drift
export const A11Y_BOOTSTRAP_SCRIPT =
  `(function(){try{var raw=localStorage.getItem('site_a11y_prefs_v1');` +
  `if(!raw)return;var p=JSON.parse(raw);if(p.version!==1)return;` +
  `var c=document.documentElement.classList;` +
  CLASS_RULES.map(([cls,,js]) => `c.toggle(${JSON.stringify(cls)},${js})`).join(';') +
  `}catch(e){}})()`;

In your root layout:

<head>
  <script dangerouslySetInnerHTML={{ __html: A11Y_BOOTSTRAP_SCRIPT }} />
</head>

Keep a useEffect safety net in the widget component that re-applies classes after mount. If localStorage is blocked (private browsing, quota exceeded), the bootstrap silently returns and the safety net covers the case.

Keyboard Shortcut: Use e.code, Not e.key

Regulation 35 requires the widget to be reachable from any focus context. Alt+A is the industry default. Detect it via e.code, not e.key:

if (e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && e.code === 'KeyA') {
  e.preventDefault();
  togglePanel();
}

On macOS, Alt+A produces the dead-key å for e.key, which fails the intuitive e.key === 'a' check. e.code is the physical key position and is layout-independent across macOS, Windows, and Linux.

ARIA Correctness

• Binary toggles (links highlight, readable font, cursor, motion, headings): use aria-pressed={active}.
• Cycling toggles (contrast, text size, line spacing): omit `aria-pressed`. Reading "pressed" aloud is misleading when the control has more than two states. The accessible name itself should carry the current value: aria-label={"${label}: ${valueLabel}"}.
• Live region announcing state changes: use role="status" aria-live="polite" and render it outside the Sheet portal. Portals unmount when the Sheet closes; a live region inside the portal loses late-arriving announcements.

framer-motion / Reduced Motion

If the app uses framer-motion, wrap the tree in a <MotionConfig> that mirrors the Stop Animations toggle:

<MotionConfig reducedMotion={prefs.reduceMotion ? 'always' : 'user'}>

'always' forces reduced motion when the widget toggle is on. 'user' falls back to the OS prefers-reduced-motion media query when the toggle is off, so system-level requests are still honored.

Counter-Invert the Widget

If the user enables invert or monochrome contrast, the whole page is filtered. The widget itself must be counter-inverted so the user can still read it to turn the setting off:

html.a11y-contrast-invert #a11y-widget-panel,
html.a11y-contrast-invert #a11y-widget-trigger {
  filter: invert(1) hue-rotate(180deg);
}

Forget this and users end up with an unreadable widget they cannot deactivate.

Print Rule

Reset every a11y-* class in print context so high-contrast filters and inverted colors do not follow the user to paper:

@media print {
  html[class*="a11y-"] { filter: none !important; }
  html[class*="a11y-text-"] { font-size: 100% !important; }
  html[class*="a11y-lines-"] { line-height: normal !important; }
}

See references/widget-implementation.md for complete copy-pasteable code covering the pub-sub store, the FOUC bootstrap, the React component with the ToggleCard grid, the MotionA11yProvider, and the CSS class reference table.

Avoiding Overlay Anti-Patterns

Accessibility overlay products (accessiBe, UserWay, AudioEye) claim to make sites compliant by injecting JavaScript that auto-generates alt text, rewrites ARIA, and fixes inaccessible markup at runtime. Disability advocates and US regulators have documented that overlay-protected sites still fail screen-reader testing. In April 2025 the FTC fined accessiBe $1M and ordered ongoing compliance monitoring for misleading advertising about its overlay's capabilities.

The Israeli Commission for Equal Rights of Persons with Disabilities has not endorsed any overlay product. IS 5568 compliance is evaluated against the site's actual rendered HTML, not against claims made by a plug-in.

When building the widget above, enforce these scope fences:

The widget is one layer of compliance. The other layers, semantic HTML, correct dir and lang, keyboard operability, real screen-reader testing, proper form labels, working focus management, the accessibility statement page (Hatzaharat Negishot), and a named accessibility coordinator, all have to be built into the site itself. No widget substitutes for that work.

Gotchas

• Israeli accessibility law (IS 5568) is anchored to WCAG 2.0 AA (sources differ on whether the current edition reaches 2.1), and adds Israeli-specific requirements on top, including the bilingual-content expectation for public bodies that serve the public in Hebrew and Arabic (see Step 5). Agents may apply only WCAG without the Israeli additions.
• Agents may copy a stale "businesses with 25+ employees or 300,000 NIS revenue must comply" rule. That figure is not in the regulations. The website-accessibility duty is universal for public-facing services, subject to revenue-based exemptions (see Step 2, Who Is Exempt). The 25-employee number is the trigger for appointing an accessibility coordinator, a separate duty.
• Agents may skip the 60-day cure period. A non-compliant operator must first receive a fix notice and be given up to 60 days before a suit or class-action request has a cause of action (see Step 3).
• Screen readers for Hebrew (NVDA, JAWS) read RTL text differently than LTR. Agents may generate ARIA labels assuming LTR reading order, which confuses Hebrew screen reader users.
• Israeli law requires accessibility statements (hatzaharat negishut) to be published on every website. Agents may generate WCAG-compliant sites without this mandatory statement page.
• Color contrast requirements in IS 5568 match WCAG (4.5:1 for normal text, 3:1 for large text), but agents may not account for Hebrew font rendering, which can appear thinner than Latin fonts at the same size, requiring slightly higher contrast.

Reference Links

Troubleshooting

Error: "Screen reader announces content in wrong order"

Cause: Visual RTL order does not match DOM order, or missing dir attribute Solution: Ensure the DOM source order matches the intended reading order for RTL. Add dir="rtl" to container elements. Use CSS logical properties for layout instead of physical positioning that may conflict with reading order.

Error: "Hebrew form validation messages not announced"

Cause: Error messages not using ARIA live regions or alert role Solution: Add role="alert" to error message containers and ensure they are populated dynamically after validation. Use aria-describedby to link error messages to their input fields. Error text must be in Hebrew for Hebrew forms.

Error: "Skip navigation link not working in RTL layout"

Cause: Skip link positioned off-screen using physical CSS (left: -9999px) Solution: Use inset-inline-start: -9999px instead of left: -9999px for the skip link. Ensure the target element has id and tabindex="-1" for focus management. Test that the skip link is the first focusable element in tab order.

Israeli Standard 5568 (IS 5568) Reference

Legal Framework

Equal Rights for Persons with Disabilities Act (1998)

• The 1998 act (Chok Shivyon Zechuyot Le'Anashim Im Mugbaluyot) established the statutory right to accessibility.
• Web and service accessibility are implemented through the Equal Rights for Persons with Disabilities (Service Accessibility Accommodations) Regulations, 2013 (Takanot Negishut LeSherut), which reference Israeli Standard IS 5568 Part 1.
• Mobile applications are covered under the same service accessibility regulations; later amendments and technical updates (2020, 2023) clarified the scope.
• Enforcement is carried out by the Commission for Equal Rights of Persons with Disabilities (Netzivut Shivyon Zechuyot) at the Ministry of Justice.

Who Is Exempt (Website Accessibility)

The Service Accessibility Regulations base website-accessibility exemptions on revenue, not on employee count. There is no "25 employees" or "300,000 NIS" trigger in the regulations.

Most of these exemptions are automatic and need no approval, but the operator must re-check revenue every 3 years. An exemption from website accessibility does not exempt the operator from other service-accessibility duties.

Penalty Structure

Two enforcement tracks run in parallel.

Accessibility Coordinator (Rakaz Negishut)

The Service Accessibility Regulations require a service provider that is a public body, or that employs 25 or more employees, to appoint one of its staff as an accessibility coordinator. This 25-employee figure triggers the coordinator appointment, not the website-accessibility duty itself, which is universal subject to the revenue exemptions above. The coordinator gives the public information about the provider's accessibility arrangements, handles accessibility inquiries and complaints, and helps the responsible parties carry out and maintain the accommodations. The coordinator's name and contact details must appear in the accessibility statement.

IS 5568 Clauses Mapped to WCAG AA

The original IS 5568 took effect aligned with WCAG 2.0 AA. The dominant reading is that IS 5568, including the September 2023 Part 1 edition, stays legally anchored to WCAG 2.0 AA; some sources describe the current edition as WCAG 2.1 AA, so sources differ. Treat WCAG 2.0 AA plus the Israeli additions as the legal floor and WCAG 2.1/2.2 criteria as future-proofing. Clause numbering below follows the WCAG principle structure that the Israeli standard adopts.

Principle 1: Perceivable

Principle 2: Operable

Principle 3: Understandable

Principle 4: Robust

Israeli-Specific Additions (Beyond WCAG)

Mandatory Accessibility Statement

Every website must include an accessibility statement page containing: 1. Organization commitment to accessibility 2. Standard being followed (IS 5568) 3. List of accessibility features implemented 4. Known accessibility limitations 5. Contact details for accessibility coordinator 6. Date of last accessibility audit 7. Available in Hebrew

Feedback Mechanism

Sites must provide a way for users to report accessibility issues:

• Email address for accessibility inquiries
• Phone number for accessibility support
• Contact form accessible to assistive technology users

RTL-Specific Requirements

• dir="rtl" must be declared on Hebrew content
• Keyboard navigation must follow RTL visual flow
• Screen reader reading order must match visual RTL order
• Form labels must align correctly in RTL context

Compliance Checklist

Automated Checks

• [ ] lang="he" on html element
• [ ] dir="rtl" on html element
• [ ] Page title present and descriptive
• [ ] All images have alt attributes
• [ ] Color contrast minimum 4.5:1
• [ ] Form inputs have associated labels
• [ ] No duplicate IDs
• [ ] Valid HTML structure
• [ ] Skip navigation link present

Manual Checks

• [ ] Keyboard navigation works in RTL order
• [ ] Screen reader announces content correctly in Hebrew
• [ ] Focus indicator visible on all interactive elements
• [ ] Error messages in Hebrew and announced by screen reader
• [ ] Accessibility statement page exists and is complete
• [ ] Feedback mechanism is functional
• [ ] Dynamic content updates announced via ARIA live regions
• [ ] Heading hierarchy is logical (one H1, proper nesting)

Accessibility Preferences Widget: Implementation Reference

Copy-pasteable TypeScript/React code for a Regulation 35 / IS 5568 accessibility preferences widget. IS 5568 is anchored to WCAG 2.0 AA (it adds some 2.1-aligned criteria; sources differ).

Consult this file when the user wants to ship the widget itself, not just audit an existing site. The main SKILL.md covers compliance guidance; this file covers the implementation.

Scope reminder: this widget is a user-preference comfort tool. It toggles CSS classes on <html>. It does NOT mutate content DOM, inject alt text, rewrite ARIA, or auto-remediate anything. See "Avoiding Overlay Anti-Patterns" in SKILL.md.

Stack assumptions: Next.js App Router (13+), React 18+, TypeScript, Tailwind (optional but referenced), shadcn/ui Sheet + Button, framer-motion (optional).

---

1. Preferences Core (lib/a11y-prefs/core.ts)

Pure helpers with no 'use client' directive, safe to import from Server Components (needed for the FOUC <script> injection in the root layout).

export type ContrastMode = 'off' | 'high' | 'invert' | 'mono';
export type TextSize = 100 | 115 | 130 | 150;
export type LineSpacing = 'normal' | '16' | '20';

export interface A11yPrefs {
  version: number;
  links: boolean;
  contrast: ContrastMode;
  textSize: TextSize;
  lineSpacing: LineSpacing;
  readableFont: boolean;
  headings: boolean;
  cursorBlack: boolean;
  cursorLarge: boolean;
  reduceMotion: boolean;
}

export const A11Y_VERSION = 1;
export const A11Y_STORAGE_KEY = 'site_a11y_prefs_v1';

export const DEFAULT_PREFS: A11yPrefs = Object.freeze({
  version: A11Y_VERSION,
  links: false,
  contrast: 'off',
  textSize: 100,
  lineSpacing: 'normal',
  readableFont: false,
  headings: false,
  cursorBlack: false,
  cursorLarge: false,
  reduceMotion: false,
});

const CONTRAST_CYCLE: ContrastMode[] = ['off', 'high', 'invert', 'mono'];
const TEXT_SIZE_CYCLE: TextSize[] = [100, 115, 130, 150];
const LINE_SPACING_CYCLE: LineSpacing[] = ['normal', '16', '20'];

export function nextContrast(c: ContrastMode): ContrastMode {
  return CONTRAST_CYCLE[(CONTRAST_CYCLE.indexOf(c) + 1) % CONTRAST_CYCLE.length];
}
export function nextTextSize(s: TextSize): TextSize {
  return TEXT_SIZE_CYCLE[(TEXT_SIZE_CYCLE.indexOf(s) + 1) % TEXT_SIZE_CYCLE.length];
}
export function nextLineSpacing(l: LineSpacing): LineSpacing {
  return LINE_SPACING_CYCLE[(LINE_SPACING_CYCLE.indexOf(l) + 1) % LINE_SPACING_CYCLE.length];
}

export function isAnyActive(prefs: A11yPrefs): boolean {
  return (
    prefs.links ||
    prefs.contrast !== 'off' ||
    prefs.textSize !== 100 ||
    prefs.lineSpacing !== 'normal' ||
    prefs.readableFont ||
    prefs.headings ||
    prefs.cursorBlack ||
    prefs.cursorLarge ||
    prefs.reduceMotion
  );
}

// SINGLE SOURCE OF TRUTH: drives both the runtime applyPrefsToElement() and
// the FOUC bootstrap script below. The JS-expression string column is serialized
// into the bootstrap so the two cannot drift.
const CLASS_RULES: ReadonlyArray<[
  className: string,
  predicate: (p: A11yPrefs) => boolean,
  js: string
]> = [
  ['a11y-links',           (p) => p.links,                 '!!p.links'],
  ['a11y-contrast-high',   (p) => p.contrast === 'high',   "p.contrast==='high'"],
  ['a11y-contrast-invert', (p) => p.contrast === 'invert', "p.contrast==='invert'"],
  ['a11y-contrast-mono',   (p) => p.contrast === 'mono',   "p.contrast==='mono'"],
  ['a11y-text-115',        (p) => p.textSize === 115,      'p.textSize===115'],
  ['a11y-text-130',        (p) => p.textSize === 130,      'p.textSize===130'],
  ['a11y-text-150',        (p) => p.textSize === 150,      'p.textSize===150'],
  ['a11y-lines-16',        (p) => p.lineSpacing === '16',  "p.lineSpacing==='16'"],
  ['a11y-lines-20',        (p) => p.lineSpacing === '20',  "p.lineSpacing==='20'"],
  ['a11y-readable-font',   (p) => p.readableFont,          '!!p.readableFont'],
  ['a11y-headings',        (p) => p.headings,              '!!p.headings'],
  ['a11y-cursor-black',    (p) => p.cursorBlack,           '!!p.cursorBlack'],
  ['a11y-cursor-large',    (p) => p.cursorLarge,           '!!p.cursorLarge'],
  ['a11y-reduce-motion',   (p) => p.reduceMotion,          '!!p.reduceMotion'],
];

export function applyPrefsToElement(el: HTMLElement, prefs: A11yPrefs): void {
  for (const [cls, pred] of CLASS_RULES) el.classList.toggle(cls, pred(prefs));
}

// Inline <script> executed in <head> BEFORE React hydrates, so persisted prefs
// are applied synchronously and the user does not see a flash of default styling.
export const A11Y_BOOTSTRAP_SCRIPT: string =
  `(function(){try{var raw=localStorage.getItem(${JSON.stringify(A11Y_STORAGE_KEY)});` +
  `if(!raw)return;var p=JSON.parse(raw);if(p.version!==${A11Y_VERSION})return;` +
  `var c=document.documentElement.classList;` +
  CLASS_RULES.map(([cls, , js]) => `c.toggle(${JSON.stringify(cls)},${js})`).join(';') +
  `}catch(e){}})()`;

---

2. Pub-Sub Store (lib/a11y-prefs/store.ts)

Client-only. Consumed via useSyncExternalStore so React can correctly render server, hydration, and client phases.

'use client';

import { useSyncExternalStore } from 'react';
import {
  A11Y_STORAGE_KEY,
  A11Y_VERSION,
  DEFAULT_PREFS,
  applyPrefsToElement,
  type A11yPrefs,
} from './core';

export * from './core';

function readStorage(): A11yPrefs | null {
  if (typeof window === 'undefined') return null;
  try {
    const raw = localStorage.getItem(A11Y_STORAGE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw) as A11yPrefs;
    if (parsed.version !== A11Y_VERSION) return null;
    return { ...DEFAULT_PREFS, ...parsed, version: A11Y_VERSION };
  } catch {
    return null;
  }
}

const listeners = new Set<() => void>();
let cached: A11yPrefs | undefined;

function notify(next?: A11yPrefs) {
  // Pre-populate the cache so subscribers' getSnapshot() calls don't each
  // trigger a synchronous localStorage re-read during fan-out.
  cached = next ?? readStorage() ?? DEFAULT_PREFS;
  for (const cb of listeners) cb();
}

function writeStorage(prefs: A11yPrefs) {
  try {
    localStorage.setItem(A11Y_STORAGE_KEY, JSON.stringify(prefs));
  } catch {
    // quota / private mode, in-memory state only
  }
}

export const a11yStore = {
  subscribe(cb: () => void) {
    listeners.add(cb);
    return () => { listeners.delete(cb); };
  },
  getSnapshot(): A11yPrefs {
    if (cached === undefined) cached = readStorage() ?? DEFAULT_PREFS;
    return cached;
  },
  getServerSnapshot(): A11yPrefs {
    return DEFAULT_PREFS;
  },
  set(partial: Partial<A11yPrefs>): A11yPrefs {
    const next: A11yPrefs = { ...this.getSnapshot(), ...partial, version: A11Y_VERSION };
    writeStorage(next);
    if (typeof document !== 'undefined') applyPrefsToElement(document.documentElement, next);
    notify(next);
    return next;
  },
  reset(): A11yPrefs {
    try { localStorage.removeItem(A11Y_STORAGE_KEY); } catch {}
    if (typeof document !== 'undefined') applyPrefsToElement(document.documentElement, DEFAULT_PREFS);
    notify(DEFAULT_PREFS);
    return DEFAULT_PREFS;
  },
};

export function useA11yPrefs(): A11yPrefs {
  return useSyncExternalStore(
    a11yStore.subscribe,
    a11yStore.getSnapshot,
    a11yStore.getServerSnapshot,
  );
}

---

3. Widget Component (components/accessibility/accessibility-widget.tsx)

Floating trigger + Radix Sheet panel + 3-column toggle grid + live region + Alt+A shortcut.

'use client';

import { useCallback, useEffect, useState, type ComponentType } from 'react';
import {
  Accessibility, AlignJustify, CaseSensitive, Contrast, Heading,
  Link2, MousePointer2, MousePointerClick, Pause, RotateCcw, Type,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { cn } from '@/lib/utils';
import {
  a11yStore, applyPrefsToElement, isAnyActive,
  nextContrast, nextLineSpacing, nextTextSize,
  useA11yPrefs, type A11yPrefs,
} from '@/lib/a11y-prefs/store';

interface Props {
  locale: 'he' | 'en';
  dict: { /* labels, values, etc., see below */ };
}

export function AccessibilityWidget({ locale, dict }: Props) {
  const prefs = useA11yPrefs();
  const [open, setOpen] = useState(false);
  const [announcement, setAnnouncement] = useState('');
  const dir: 'rtl' | 'ltr' = locale === 'he' ? 'rtl' : 'ltr';

  // Safety net: re-apply classes after hydration if the inline FOUC script
  // failed (e.g. localStorage blocked). Don't call a11yStore.set({}), that
  // would write back to storage and notify subscribers on every mount.
  useEffect(() => {
    applyPrefsToElement(document.documentElement, a11yStore.getSnapshot());
  }, []);

  // Alt+A keyboard shortcut. e.code (layout-independent) because macOS
  // produces dead-key 'å' for e.key, which would miss an e.key === 'a' check.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && e.code === 'KeyA') {
        e.preventDefault();
        setOpen(prev => !prev);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const toggle = useCallback(
    (feature: keyof A11yPrefs, value: A11yPrefs[keyof A11yPrefs], announce: string) => {
      a11yStore.set({ [feature]: value } as Partial<A11yPrefs>);
      setAnnouncement(`${dict.announceChange}: ${announce}`);
    },
    [dict.announceChange],
  );

  return (
    <>
      {/* Live region OUTSIDE the Sheet portal so announcements aren't lost
          when the portal unmounts. */}
      <div role="status" aria-live="polite" className="sr-only">
        {announcement}
      </div>

      <button
        id="a11y-widget-trigger"
        type="button"
        onClick={() => setOpen(true)}
        aria-label={dict.triggerLabel}
        aria-expanded={open}
        aria-controls="a11y-widget-panel"
        aria-keyshortcuts="Alt+A"
        className={cn(
          'fixed bottom-6 start-6 z-40 flex size-12 items-center justify-center',
          'rounded-full bg-primary text-primary-foreground shadow-lg',
          isAnyActive(prefs) && 'ring-2 ring-white/40',
        )}
      >
        <Accessibility className="size-6" aria-hidden />
      </button>

      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent
          id="a11y-widget-panel"
          side={dir === 'rtl' ? 'right' : 'left'}
          className="w-3/4 sm:max-w-md"
        >
          <SheetHeader className="border-b">
            <SheetTitle>{dict.title}</SheetTitle>
          </SheetHeader>

          <div className="flex-1 overflow-y-auto p-4">
            <div className="grid grid-cols-3 gap-3">
              {/* Binary toggles: aria-pressed={active} */}
              <ToggleCard icon={Link2} label={dict.labels.links}
                active={prefs.links} onClick={() => toggle('links', !prefs.links, dict.labels.links)} />

              {/* Cycling toggles: OMIT aria-pressed, aria-label carries value */}
              <ToggleCard icon={Contrast} label={dict.labels.contrast}
                active={prefs.contrast !== 'off'}
                valueLabel={prefs.contrast === 'off' ? undefined : dict.values.contrast[prefs.contrast]}
                cycling
                onClick={() => {
                  const next = nextContrast(prefs.contrast);
                  toggle('contrast', next, dict.values.contrast[next]);
                }}
              />
              {/* …text size, line spacing, readable font, headings, cursors, motion */}
            </div>

            <button
              type="button"
              onClick={() => { a11yStore.reset(); setAnnouncement(dict.reset); }}
              className="mt-6 inline-flex items-center gap-1.5 text-sm text-destructive"
            >
              <RotateCcw className="size-4" aria-hidden />
              {dict.reset}
            </button>
          </div>
        </SheetContent>
      </Sheet>
    </>
  );
}

interface ToggleCardProps {
  icon: ComponentType<{ className?: string; 'aria-hidden'?: boolean }>;
  label: string;
  active: boolean;
  valueLabel?: string;
  /** True for cycling controls. When true, aria-pressed is omitted, the
   *  accessible name (aria-label) carries the current value instead. */
  cycling?: boolean;
  onClick: () => void;
}

function ToggleCard({ icon: Icon, label, active, valueLabel, cycling, onClick }: ToggleCardProps) {
  return (
    <Button
      type="button"
      variant="outline"
      onClick={onClick}
      aria-pressed={cycling ? undefined : active}
      aria-label={valueLabel ? `${label}: ${valueLabel}` : label}
      className={cn(
        'flex aspect-square h-auto flex-col items-center justify-center gap-2',
        'whitespace-normal rounded-xl p-3 text-center',
        active && 'ring-1 ring-primary',
      )}
    >
      <Icon className="size-6" aria-hidden />
      <span className="text-xs font-medium">{label}</span>
      {valueLabel && <span className="text-[10px] text-muted-foreground">{valueLabel}</span>}
    </Button>
  );
}

---

4. framer-motion Reduced-Motion Provider

'use client';

import { MotionConfig } from 'framer-motion';
import { useA11yPrefs } from '@/lib/a11y-prefs/store';

export function MotionA11yProvider({ children }: { children: React.ReactNode }) {
  const { reduceMotion } = useA11yPrefs();
  // 'always' → always reduce. 'user' → fall back to prefers-reduced-motion.
  return (
    <MotionConfig reducedMotion={reduceMotion ? 'always' : 'user'}>
      {children}
    </MotionConfig>
  );
}

---

5. Layout Wiring

Root layout (Server Component)

Inject the FOUC bootstrap BEFORE React hydrates:

// app/layout.tsx
import { A11Y_BOOTSTRAP_SCRIPT } from '@/lib/a11y-prefs/core';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <script dangerouslySetInnerHTML={{ __html: A11Y_BOOTSTRAP_SCRIPT }} />
      </head>
      <body>{children}</body>
    </html>
  );
}

Locale layout

Mount the widget and the framer-motion provider:

// app/[locale]/layout.tsx
import { AccessibilityWidget } from '@/components/accessibility/accessibility-widget';
import { MotionA11yProvider } from '@/components/accessibility/motion-a11y-provider';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: 'he' | 'en' }>;
}) {
  const { locale } = await params;
  const dict = await getDictionary(locale);

  return (
    <MotionA11yProvider>
      {children}
      <AccessibilityWidget locale={locale} dict={dict.accessibility.widget} />
    </MotionA11yProvider>
  );
}

---

6. CSS Class Reference Table

Each toggle produces one or more CSS classes on <html>. Map them in globals.css with whatever rules make sense for the site.

Counter-invert (required)

html.a11y-contrast-invert #a11y-widget-panel,
html.a11y-contrast-invert #a11y-widget-trigger,
html.a11y-contrast-mono #a11y-widget-panel,
html.a11y-contrast-mono #a11y-widget-trigger {
  filter: invert(1) hue-rotate(180deg);
}

Without this, users end up with an unreadable widget when invert/mono is active.

Print reset (required)

@media print {
  html[class*="a11y-"] { filter: none !important; }
  html[class*="a11y-text-"] { font-size: 100% !important; }
  html[class*="a11y-lines-"] { line-height: normal !important; }
  html.a11y-cursor-black, html.a11y-cursor-large { cursor: auto !important; }
}

---

7. Dictionary Shape

The widget expects this bilingual dictionary shape:

interface AccessibilityWidgetDict {
  triggerLabel: string;
  title: string;
  close: string;
  reset: string;
  keyboardHint: string;
  announceChange: string;
  footerLink: string;
  labels: {
    links: string;
    contrast: string;
    textSize: string;
    lineSpacing: string;
    readableFont: string;
    headings: string;
    cursorBlack: string;
    cursorLarge: string;
    reduceMotion: string;
  };
  values: {
    contrast: Record<'off' | 'high' | 'invert' | 'mono', string>;
    lineSpacing: Record<'normal' | '16' | '20', string>;
  };
}

---

Testing Checklist

Before shipping:

• [ ] Disable JavaScript → bootstrap script should still apply classes from localStorage
• [ ] Clear localStorage → widget opens at defaults, no flash
• [ ] Set prefs, reload → no flash of default styling (FOUC test)
• [ ] Alt+A on macOS Chrome, Safari, Firefox → panel opens
• [ ] Alt+A on Windows / Linux → panel opens
• [ ] Tab through page → widget trigger is reachable by keyboard
• [ ] Enable invert contrast → widget remains readable (counter-invert works)
• [ ] Enable 150% text → no text clipped, no horizontal scroll introduced
• [ ] Print preview → filters removed, text at 100%
• [ ] Enable "Stop animations" → framer-motion animations skip via MotionConfig
• [ ] Screen reader (NVDA / VoiceOver) → cycling toggle announces current value, not "pressed"
• [ ] Cross-tab test → preferences persist across tabs (storage event not required; each tab reads from localStorage on load)

Scope Reminder

This widget must NOT:

• Generate or alter alt attributes
• Add, remove, or rewrite ARIA on content elements
• Inject structural DOM changes to fix heading order or landmarks
• Include a "we are compliant" badge or claim
• Load third-party overlay SDKs

The widget is one control surface. Compliance with IS 5568 and WCAG 2.0 AA comes from the site's own HTML, not from the widget. See SKILL.md section "Avoiding Overlay Anti-Patterns" and the April 2025 FTC action against accessiBe for why this matters.

נגישות אתרים ישראלית

הנחיות

שלב 1: להבין את המסגרת החוקית

נגישות אתרים בישראל היא חובה לפי חוק שוויון זכויות לאנשים עם מוגבלויות, התשנ"ח-1998 ותקנות שוויון זכויות לאנשים עם מוגבלות (התאמות נגישות לשירות), תשע"ג-2013.

הערה על גרסת WCAG. החוק והתקנות מפנים אל ת"י 5568. הקריאה המקובלת היא שת"י 5568, כולל מהדורת חלק 1 מספטמבר 2023, נשאר מעוגן משפטית ב-WCAG 2.0 AA, וההתאמה ל-WCAG 2.1 היא חלקית או מבוססת על טענות ספקים ולא על הבסיס המשפטי. חלק מהמקורות מתארים את ת"י 5568:2020 כ-WCAG 2.1 AA, אז המקורות חלוקים. כיוון העבודה הבטוח הוא WCAG 2.0 AA בתוספת ההתאמות הישראליות שלמטה; עמידה בקריטריוני WCAG 2.1 (ו-2.2) מעבר לכך מועילה להתכוננות לעתיד אבל אינה הרצפה שהחוק קובע.

מי חייב לעמוד בדרישות: כל האתרים והאפליקציות הציבוריות של ספקי שירות הפתוחים לציבור בישראל, כולל גופים ממשלתיים, מוסדות חינוך, ספקי בריאות, עסקים ומלכ"רים.

עמידה בתקן היא תנאי הכרחי אבל לא מספיק. החובה החוקית היא התקנות (תקנות נגישות לשירות, 2013), שמאמצות את ת"י 5568 חלק 1 ברמה AA בהפניה. אפשר לעבור ביקורת WCAG / ת"י 5568 אוטומטית ועדיין לא לעמוד בחוק אם חסרים הצהרת נגישות, רכז נגישות (היכן שנדרש), ערוץ משוב, או חוות דעת מורשה הנגישות שמתוארת למטה, ולהפך. התייחסו ל"עומד בת"י 5568" ול"עומד בחוק" כשתי רשימות נפרדות.

מורשה נגישות השירות. כשמפעיל מבקש פטור בשל "קושי טכנולוגי" לפי תקנה 35, התקנה דורשת חוות דעת בכתב ממורשה נגישות השירות שנערכה בהתייעצות עם מומחה נגישות אינטרנט. בפועל גם הצהרת הנגישות והביקורת שמאחוריה מצופות להיתמך במורשה נגישות; עמידה בחוק אינה משימה של מפתח או ביקורת אוטומטית בלבד.

מסמכים דיגיטליים (ת"י 5568 חלק 2). ת"י 5568 מחולק לחלק 1 (תוכן ווב) וחלק 2 (נגישות מסמכים דיגיטליים, למשל PDF וקובצי Office), שפורסם ב-2020. קובצי PDF ומסמכים להורדה באתר ציבורי נכללים בחובת ההנגשה והם אחד מכשלי הביקורת הנפוצים ביותר, אז אל תעצרו ב-HTML.

שלב 2: מי פטור

תקנות נגישות לשירות מבססות את הפטור מהנגשת אתר על מחזור ולא על מספר עובדים. אין בתקנות סף של "25 עובדים" או "300,000 ש"ח". מדרגות הפטור הן:

הפטורים האלה (חוץ מבקשת הנטל הכבד) אוטומטיים ואינם דורשים אישור, אבל המפעיל חייב לבדוק מחדש את המחזור כל 3 שנים. סכום סף העסק הקטן שנוי במחלוקת בין המקורות, אז מפעיל גבולי צריך לאמת מול נוסח התקנות או מול הנציבות במקום להכריז על עצמו פטור. פטור מהנגשת אתר אינו פוטר מחובות נגישות אחרות בשירות, ואינו פוטר מחובת נגישות המבנה (נגישות פיזית) שמוסדרת בתקנות נפרדות.

שלב 3: אכיפה וסנקציות

שני מסלולי אכיפה פועלים במקביל:

• תביעה אזרחית. תובע יכול לתבוע עד 50,000 ש"ח פיצוי סטטוטורי ללא הוכחת נזק, וצריך רק להראות שהאתר אינו נגיש. תקופת תיקון של 60 יום: סטייה אינה נחשבת הפרה אלא אם נשלחה למפעיל הודעה הדורשת תיקון והוא לא תיקן בתוך זמן סביר, ולא יאוחר מ-60 יום מקבלת ההודעה. לבקשה לאישור תביעה ייצוגית בגין אתר לא נגיש אין עילת תביעה אם לא נשלחה קודם הודעת תיקון. זו הגנה ממשית למפעילים.
• אכיפה מנהלית של הנציבות. תיקון 23 לחוק שוויון זכויות נתן לנציבות שוויון זכויות לאנשים עם מוגבלות מסלול מנהלי: התראות, התחייבויות, צווי נגישות ועיצום כספי. סכום העיצום נקבע לפי גודל המפעיל (עסק זעיר עד מחזור 2,000,000 ש"ח, עסק קטן עד 20,000,000 ש"ח, עסק רגיל מעל זה או רשות ציבורית) ולפי עלות ההתאמה הספציפית, עם תוספת לכל יום שבו ההפרה נמשכת. הפחתות חלות בעבור עבר נקי ובעבור פעולה מתקנת. העיצום הזה נפרד ומתווסף לפיצוי האזרחי של 50,000 ש"ח.

הגשת תלונה (צד המשתמש). משתמש שנתקל באתר לא נגיש שולח למפעיל הודעת תיקון (שמפעילה את שעון ה-60 יום); אם זה לא תוקן בזמן, המשתמש יכול להתלונן לנציבות שוויון זכויות לאנשים עם מוגבלות או לתבוע את הפיצוי הסטטוטורי. רכז הנגישות של המפעיל (שלב 4) הוא איש הקשר הראשון לתלונות כאלה, אז מפעיל צריך לנתב תלונות נגישות נכנסות דרך הרכז ולפעול בתוך חלון התיקון.

שלב 4: רכז הנגישות

תקנות נגישות לשירות מחייבות ספק שירות שהוא גוף ציבורי, או שמעסיק 25 עובדים או יותר, למנות אחד מעובדיו לרכז נגישות. שימו לב שסף 25 העובדים הוא הטריגר למינוי הרכז, ולא לחובת הנגשת האתר עצמה, שהיא אוניברסלית בכפוף לפטורי המחזור שלמעלה. הרכז:

• מוסר לציבור מידע על הסדרי הנגישות של הנכסים והשירותים של הספק.
• מטפל בפניות ובתלונות נגישות מהציבור.
• מסייע לאחראים על הנגישות לבצע ולתחזק את ההתאמות הנדרשות.

שם הרכז ופרטי הקשר שלו חייבים להופיע בהצהרת הנגישות (ראו שלב 9).

שלב 5: IS 5568 מול WCAG - ההבדלים העיקריים

ת"י 5568 מעוגן ב-WCAG 2.0 AA (המקורות חלוקים אם המהדורה הנוכחית מגיעה ל-2.1) ומוסיף דרישות ייחודיות לישראל:

שלב 6: מבנה HTML נגיש ב-RTL

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>שם האתר - כותרת הדף</title>
</head>
<body>
  <!-- קישור דילוג ניווט (חובה) -->
  <a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>

  <header role="banner">
    <nav role="navigation" aria-label="ניווט ראשי">
      <!-- פריטי ניווט -->
    </nav>
  </header>

  <main id="main-content" role="main">
    <!-- תוכן הדף -->
  </main>

  <footer role="contentinfo">
    <a href="/accessibility-statement">הצהרת נגישות</a>
  </footer>
</body>
</html>

דרישות IS 5568 המרכזיות במבנה הזה:

• lang="he" ו-dir="rtl" על אלמנט ה-html
• קישור דילוג ניווט בעברית ("דלג לתוכן הראשי")
• תפקידי ARIA לציוני דרך
• תוויות ARIA בעברית לניווט
• קישור להצהרת נגישות בתחתית הדף

שלב 7: תאימות קוראי מסך בעברית

תבדקו עם קוראי המסך הנפוצים בישראל:

תבניות קורא מסך ייחודיות לעברית:

<!-- הכרזה על שינויי כיוון תוכן -->
<p dir="rtl" lang="he">
  טקסט בעברית עם <span dir="ltr" lang="en">English text</span> משולב
</p>

<!-- תוויות ARIA בעברית -->
<button aria-label="סגור חלון">X</button>
<input type="search" aria-label="חיפוש באתר" placeholder="חפש...">

<!-- אזורים חיים בעברית לתוכן דינמי -->
<div aria-live="polite" aria-atomic="true" dir="rtl">
  הטופס נשלח בהצלחה
</div>

שלב 8: תבניות ARIA ייחודיות ל-RTL

<!-- טופס RTL עם הודעות שגיאה נגישות -->
<form dir="rtl" novalidate>
  <div role="group" aria-labelledby="personal-info">
    <h2 id="personal-info">פרטים אישיים</h2>

    <label for="full-name">שם מלא</label>
    <input id="full-name" type="text" required
           aria-required="true"
           aria-describedby="name-error"
           aria-invalid="false">
    <span id="name-error" role="alert" class="error" hidden>
      נא למלא שם מלא
    </span>

    <label for="teudat-zehut">תעודת זהות</label>
    <input id="teudat-zehut" type="text" pattern="[0-9]{9}"
           inputmode="numeric" dir="ltr"
           aria-required="true"
           aria-describedby="tz-help tz-error">
    <span id="tz-help" class="hint">9 ספרות</span>
    <span id="tz-error" role="alert" class="error" hidden>
      מספר תעודת זהות לא תקין
    </span>
  </div>
</form>

<!-- טבלת נתונים RTL -->
<table dir="rtl">
  <caption>סיכום הזמנות</caption>
  <thead>
    <tr>
      <th scope="col">מספר הזמנה</th>
      <th scope="col">תאריך</th>
      <th scope="col">סכום</th>
      <th scope="col">סטטוס</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td dir="ltr">ORD-12345</td>
      <td>04/03/2026</td>
      <td dir="ltr">1,234.50 &#8362;</td>
      <td>הושלם</td>
    </tr>
  </tbody>
</table>

שלב 9: הצהרת נגישות

ת"י 5568 דורש לפרסם הצהרת נגישות. התוכן הנדרש:

<article dir="rtl" lang="he">
  <h1>הצהרת נגישות</h1>

  <p>אנחנו ב-[שם החברה] מחויבים להנגשת האתר לאנשים עם מוגבלויות
     בהתאם לתקן הישראלי IS 5568, המעוגן ב-WCAG 2.0 ברמה AA.</p>

  <h2>אמצעי נגישות באתר</h2>
  <ul>
    <li>האתר תומך בניווט מלא במקלדת</li>
    <li>האתר תומך בקוראי מסך (NVDA, JAWS, VoiceOver)</li>
    <li>תמונות מלוות בטקסט חלופי</li>
    <li>ניגודיות הצבעים עומדת ביחס של 4.5:1 לפחות</li>
  </ul>

  <h2>מגבלות נגישות ידועות</h2>
  <ul>
    <li>[פרטו כאן רכיבים, דפים או מסמכים שטרם הונגשו במלואם, אם יש, ואת מועד התיקון הצפוי. אם אין מגבלות ידועות, ציינו זאת במפורש]</li>
  </ul>

  <h2>פנייה בנושא נגישות</h2>
  <p>רכז/ת נגישות: [שם]</p>
  <p>טלפון: <a href="tel:+97212345678" dir="ltr">+972-1-234-5678</a></p>
  <p>דוא"ל: <a href="mailto:negishot@example.co.il">negishot@example.co.il</a></p>

  <p>תאריך ביקורת הנגישות האחרונה: [תאריך]</p>
  <p>תאריך עדכון ההצהרה: [תאריך]</p>
</article>

שלב 10: בדיקת נגישות אוטומטית

תסתכלו על scripts/audit_a11y.py לפייפליין הביקורת המלא.

# בדיקת נגישות מהירה עם axe-core דרך selenium
from selenium import webdriver
from selenium.webdriver.chrome.options import Options

def run_accessibility_audit(url):
    options = Options()
    options.add_argument('--headless')
    driver = webdriver.Chrome(options=options)
    driver.get(url)

    # הזרקת axe-core
    axe_script = open('axe.min.js').read()
    driver.execute_script(axe_script)

    # הרצת ביקורת עם כללי לוקאל עברי
    results = driver.execute_script("""
        return axe.run({
            rules: {
                'html-has-lang': { enabled: true },
                'valid-lang': { enabled: true },
                'document-title': { enabled: true },
                'bypass': { enabled: true },
                'color-contrast': { enabled: true },
                'label': { enabled: true },
                'image-alt': { enabled: true }
            }
        });
    """)

    driver.quit()
    return results

רשימת בדיקות לעמידה ב-IS 5568 (אוטומטי + ידני):

תסתכלו על references/is-5568.md לרשימת הבדיקות המלאה ממופה לסעיפי IS 5568.

שרתי MCP מומלצים

אין שרת MCP רלוונטי לנגישות אתרים ישראלית. בספריית ה-MCP של skills-il אין כרגע MCP לנגישות, לתקן 5568 או לביקורת WCAG. הביקורת בסקיל הזה רצה כסקריפט פייתון מקומי (scripts/audit_a11y.py), לא דרך MCP. אם יתווסף בעתיד MCP לביקורת נגישות לספרייה, עדיף להשתמש בו לסריקת אתר חי ולהשאיר את הסקריפט לבדיקות לא מקוונות.

דוגמאות

דוגמה 1: ביקורת אתר ישראלי קיים

המשתמש אומר: "בדוק אם האתר שלי עומד בתקני הנגישות הישראליים" תוצאה: מריצים את scripts/audit_a11y.py מול הכתובת, בודקים דרישות IS 5568 כולל תכונת שפה עברית, כיוון RTL, יחסי ניגודיות, תוויות ARIA בעברית, דילוג ניווט ודף הצהרת נגישות. מפיקים דוח עמידה עם עובר/נכשל לכל קריטריון.

דוגמה 2: הוספת דף הצהרת נגישות

המשתמש אומר: "אני צריך להוסיף דף נגישות כדי לעמוד בחוק הישראלי" תוצאה: יוצרים דף הצהרת נגישות בעברית עם כל הסעיפים שהחוק דורש: רמת עמידה, תכונות נגישות, מגבלות ידועות, פרטי יצירת קשר לרכז/ת נגישות, ותאריך עדכון אחרון.

דוגמה 3: תיקון נגישות בטופס RTL

המשתמש אומר: "קוראי מסך לא קוראים את הטופס העברי שלי נכון" תוצאה: מוסיפים dir="rtl" לאלמנט הטופס, מוודאים שכל התוויות משויכות לשדות הקלט ומשתמשות בטקסט עברי, מוסיפים aria-required="true" לשדות חובה, נותנים הודעות שגיאה בעברית עם role="alert", וקובעים dir="ltr" על שדות מספריים כמו טלפון ותעודת זהות.

דוגמה 4: הנגשת טבלת נתונים בעברית

המשתמש אומר: "הטבלה העברית שלי לא נגישה לקוראי מסך" תוצאה: מוסיפים dir="rtl" לאלמנט הטבלה, מוסיפים caption בעברית, משתמשים ב-scope="col" וב-scope="row" על תאי הכותרת, מסמנים תוכן LTR כמו מספרי הזמנה עם dir="ltr", ומוודאים שסדר הקריאה הלוגי תואם לסדר החזותי של RTL.

משאבים מצורפים

סקריפטים

• scripts/audit_a11y.py -- מריץ ביקורת נגישות לפי IS 5568: בדיקות אוטומטיות לתכונת שפה עברית, כיוון RTL, תוויות ARIA, יחסי ניגודיות ודילוג ניווט עם axe-core ו-selenium. מפיק דוח עמידה עם עובר/נכשל לכל סעיף ב-IS 5568. הרצה: python scripts/audit_a11y.py --help

קובצי עזר

• references/is-5568.md -- מדריך תקן IS 5568 המלא: דרישות סעיף-אחר-סעיף ממופות ל-WCAG 2.0 AA, התוספות הישראליות, מדרגות הפטור, שני מסלולי האכיפה (פיצוי אזרחי + עיצום כספי של הנציבות) עם תקופת התיקון של 60 יום, תפקיד רכז הנגישות, תבנית הצהרת נגישות חובה, ורשימת בדיקות לביקורות עמידה.
• references/widget-implementation.md -- קוד TypeScript/React מוכן להעתקה לווידג'ט העדפות נגישות לפי תקנה 35: חנות pub-sub עם useSyncExternalStore, הפעלה מבוססת-קלאסים ב-CSS, סקריפט bootstrap למניעת FOUC, קיצור Alt+A בלי תלות בפריסת המקלדת (דרך e.code), חיווט MotionConfig של framer-motion, וכללי counter-invert. להיעזר כשהמשתמש רוצה להטמיע את הווידג'ט עצמו, ולא רק לבצע ביקורת עמידה.

בניית ווידג'ט העדפות נגישות תואם לתקנה

תקנה 35 ות"י 5568 מחייבות אתרים ישראליים הפונים לצרכנים לחשוף ממשק נגישות שניתן להפעיל במקלדת, לרוב ווידג'ט צף עם מתגים לניגודיות, גודל טקסט, מרווח שורות, סמן ותנועה. הווידג'ט הזה הוא כלי העדפות למשתמש, לא שכבת אוטומציה. ההבדל קריטי: באפריל 2025 ה-FTC קנס את accessiBe במיליון דולר על הטעיה צרכנית סביב טענות שהשכבה שלהם "מתקנת" אתרים אוטומטית (היא לא). הווידג'ט שאתם משגרים חייב לעשות בדיוק מה שהמשתמש ביקש, לא יותר.

סט התכונות

ווידג'ט תקנה 35 בסיסי חושף את המתגים האלה:

ארכיטקטורה

שלושה חלקים: חנות העדפות, פאנל UI, ושכבת CSS.

1. חנות העדפות. חנות pub-sub (subscribe / getSnapshot / getServerSnapshot / set / reset) שנצרכת ב-React דרך useSyncExternalStore. המצב נשמר ב-localStorage במפתח עם גרסה (למשל site_a11y_prefs_v1). חוסר התאמת גרסה מבטל את המצב השמור כדי ששדרוגי סכמה לא ישאירו שדות מיושנים. להקדים-למלא את המטמון ב-notify() כדי שפיזור למנויים לא יפעיל קריאות מיותרות ל-localStorage.

2. פאנל UI. כפתור טריגר צף (fixed bottom-6 start-6 z-40, מודע ל-RTL דרך תכונות CSS לוגיות) פותח Radix Sheet עם רשת של 3 עמודות של כרטיסי מתג ופעולת איפוס. הטריגר נושא aria-expanded, aria-controls, ו-aria-keyshortcuts="Alt+A".

3. שכבת CSS. כל שינוי ויזואלי מונע על ידי קלאסים של CSS על <html> (למשל a11y-contrast-high, a11y-text-150, a11y-lines-20, a11y-reduce-motion). הווידג'ט לעולם לא משנה את ה-DOM של התוכן. הוא לא מזריק alt, לא מסדר מחדש אלמנטים, ולא משכתב ARIA. זה הקו שמפריד בין כלי העדפות תואם לשכבת אוטומציה אסורה.

כללי קלאסים ממקור יחיד

רשימת הקלאסים שמופעלת בזמן ריצה חייבת להיות זהה לרשימה שהסקריפט של bootstrap (ראו בהמשך) מחיל, אחרת המשתמשים יראו הבזק של העדפות לא מסוגננות בכל טעינת דף. הגדירו את המיפוי פעם אחת וצרו ממנו גם את פונקציית הריצה applyPrefsToElement() וגם את גוף ה-<script> של ה-bootstrap:

const CLASS_RULES = [
  ['a11y-links',           (p) => p.links,                 '!!p.links'],
  ['a11y-contrast-high',   (p) => p.contrast === 'high',   "p.contrast==='high'"],
  ['a11y-contrast-invert', (p) => p.contrast === 'invert', "p.contrast==='invert'"],
  ['a11y-contrast-mono',   (p) => p.contrast === 'mono',   "p.contrast==='mono'"],
  ['a11y-text-115',        (p) => p.textSize === 115,      'p.textSize===115'],
  ['a11y-text-130',        (p) => p.textSize === 130,      'p.textSize===130'],
  ['a11y-text-150',        (p) => p.textSize === 150,      'p.textSize===150'],
] as const;

מניעת FOUC

ההעדפות יושבות ב-localStorage, כלומר הציור הראשון קורה בסגנון ברירת המחדל ורק אחרי ש-React נהידרר הווידג'ט מיישם מחדש את ההגדרות של המשתמש. ההבזק הזה לא מקובל למי שתלוי בניגודיות גבוהה או ב-150% טקסט. הפתרון: סקריפט inline ב-<head> שרץ סינכרונית לפני ההידרציה של React:

// מיוצר מ-CLASS_RULES כדי שהריצה וה-bootstrap לא יסטו אחד מהשני
export const A11Y_BOOTSTRAP_SCRIPT =
  `(function(){try{var raw=localStorage.getItem('site_a11y_prefs_v1');` +
  `if(!raw)return;var p=JSON.parse(raw);if(p.version!==1)return;` +
  `var c=document.documentElement.classList;` +
  CLASS_RULES.map(([cls,,js]) => `c.toggle(${JSON.stringify(cls)},${js})`).join(';') +
  `}catch(e){}})()`;

בפריסת השורש:

<head>
  <script dangerouslySetInnerHTML={{ __html: A11Y_BOOTSTRAP_SCRIPT }} />
</head>

תשאירו רשת ביטחון useEffect בקומפוננטת הווידג'ט שמיישמת קלאסים מחדש אחרי mount. אם localStorage חסום (גלישה פרטית, חריגה ממכסה), ה-bootstrap חוזר בשקט ורשת הביטחון מכסה את המקרה.

קיצור מקלדת: השתמשו ב-e.code, לא ב-e.key

תקנה 35 דורשת שהווידג'ט יהיה נגיש מכל הקשר פוקוס. Alt+A הוא ברירת המחדל בענף. תזהו אותו דרך e.code, לא e.key:

if (e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && e.code === 'KeyA') {
  e.preventDefault();
  togglePanel();
}

ב-macOS, Alt+A מייצר את מפתח המת å ל-e.key, שנופל על בדיקת e.key === 'a' האינטואיטיבית. e.code הוא המיקום הפיזי של המקש ועצמאי מהפריסה ב-macOS, Windows ו-Linux.

נכונות ARIA

• מתגים בינאריים (הדגשת קישורים, גופן קריא, סמן, תנועה, כותרות): aria-pressed={active}.
• מתגים מחזוריים (ניגודיות, גודל טקסט, מרווח שורות): להשמיט `aria-pressed`. להכריז "לחוץ" מטעה כשלבקר יש יותר משני מצבים. השם הנגיש עצמו צריך לשאת את הערך הנוכחי: aria-label={"${label}: ${valueLabel}"}.
• אזור חי שמכריז על שינויי מצב: role="status" aria-live="polite", וחשוב לרנדר אותו מחוץ לפורטל ה-Sheet. פורטלים מתפרקים כשה-Sheet נסגר; אזור חי בתוך הפורטל מאבד הכרזות שמגיעות באיחור.

framer-motion / הפחתת תנועה

אם האפליקציה משתמשת ב-framer-motion, עטפו את העץ ב-<MotionConfig> שמשקף את המתג "עצור אנימציות":

<MotionConfig reducedMotion={prefs.reduceMotion ? 'always' : 'user'}>

'always' מכריח הפחתת תנועה כשהמתג בווידג'ט פעיל. 'user' חוזר ל-prefers-reduced-motion של מערכת ההפעלה כשהמתג כבוי, כדי שבקשות ברמת OS עדיין יכובדו.

להפוך חזרה את הווידג'ט עצמו

אם המשתמש מפעיל ניגודיות היפוך או מונוכרום, כל הדף עובר פילטר. הווידג'ט עצמו צריך להיות מופך-חזרה כדי שהמשתמש יוכל לקרוא אותו כדי לבטל את ההגדרה:

html.a11y-contrast-invert #a11y-widget-panel,
html.a11y-contrast-invert #a11y-widget-trigger {
  filter: invert(1) hue-rotate(180deg);
}

אם תשכחו את זה, המשתמשים ייתקעו בווידג'ט לא קריא שהם לא יכולים לכבות.

כלל הדפסה

תאפסו כל קלאס a11y-* בהקשר הדפסה כדי שפילטרי ניגודיות וצבעים הפוכים לא ילכו עם המשתמש לנייר:

@media print {
  html[class*="a11y-"] { filter: none !important; }
  html[class*="a11y-text-"] { font-size: 100% !important; }
  html[class*="a11y-lines-"] { line-height: normal !important; }
}

ראו את references/widget-implementation.md לקוד מלא להעתקה המכסה את חנות ה-pub-sub, ה-bootstrap למניעת FOUC, קומפוננטת React עם רשת ToggleCard, ה-MotionA11yProvider, וטבלת ייחוס לקלאסים של CSS.

הימנעות מדפוסי שכבות כושלים

מוצרי שכבות נגישות (accessiBe, UserWay, AudioEye) טוענים שהם הופכים אתרים לתואמים על ידי הזרקת JavaScript שמייצר טקסט alt אוטומטית, משכתב ARIA, ו"מתקן" HTML לא נגיש בזמן ריצה. ארגוני זכויות לאנשים עם מוגבלויות ורגולטורים בארה"ב תיעדו שוב ושוב שאתרים עם שכבות כאלה עדיין נכשלים בבדיקות קוראי מסך. באפריל 2025 ה-FTC קנס את accessiBe במיליון דולר ודרש ניטור תאימות מתמשך על פרסום מטעה שנגע ליכולות השכבה שלהם.

נציבות שוויון זכויות לאנשים עם מוגבלויות בישראל לא אישרה ולא ממליצה על אף מוצר שכבה. עמידה בת"י 5568 נבדקת מול ה-HTML המרונדר בפועל של האתר, לא מול טענות של תוסף.

כשאתם בונים את הווידג'ט שלמעלה, תאכפו את גבולות ההיקף האלה:

הווידג'ט הוא שכבה אחת של עמידה. השכבות האחרות, HTML סמנטי, dir ו-lang נכונים, עבידות מלאה במקלדת, בדיקות אמיתיות עם קוראי מסך, תוויות טופס תקינות, ניהול פוקוס שעובד, דף הצהרת הנגישות, ורכז/ת נגישות בעלי שם, חייבות להיבנות אל תוך האתר עצמו. אף ווידג'ט לא מחליף את העבודה הזו.

מלכודות נפוצות

• חוק הנגישות הישראלי (תקן ישראלי 5568) מעוגן ב-WCAG 2.0 AA (המקורות חלוקים אם המהדורה הנוכחית מגיעה ל-2.1), ומוסיף מעליו דרישות ישראליות, כולל הציפייה לתוכן דו-לשוני לגופים ציבוריים שמשרתים את הציבור בעברית ובערבית (ראו שלב 5). סוכנים עלולים ליישם רק WCAG בלי התוספות הישראליות.
• סוכנים עלולים להעתיק כלל ישן ולפיו "עסקים עם 25+ עובדים או מחזור 300,000 ש"ח חייבים בהנגשה". המספר הזה אינו בתקנות. חובת הנגשת האתר אוניברסלית לשירותים הפתוחים לציבור, בכפוף לפטורים לפי מחזור (ראו שלב 2, מי פטור). סף 25 העובדים הוא הטריגר למינוי רכז נגישות, חובה נפרדת.
• סוכנים עלולים לדלג על תקופת התיקון של 60 יום. מפעיל לא נגיש חייב לקבל קודם הודעת תיקון ולקבל עד 60 יום לפני שלתביעה או לבקשה לאישור תביעה ייצוגית יש עילה (ראו שלב 3).
• קוראי מסך לעברית (NVDA, JAWS) קוראים טקסט RTL אחרת מ-LTR. סוכנים עלולים לייצר תוויות ARIA לפי סדר קריאה LTR, וזה מבלבל את משתמשי קוראי המסך בעברית.
• החוק הישראלי דורש הצהרת נגישות בכל אתר. סוכנים עלולים לייצר אתרים תואמי WCAG בלי דף הצהרת הנגישות החובה הזה.
• דרישות ניגודיות הצבעים בתקן 5568 תואמות ל-WCAG (יחס 4.5:1 לטקסט רגיל, 3:1 לטקסט גדול), אבל סוכנים עלולים לא להתחשב בעיבוד גופנים עבריים, שנראים דקים יותר מגופנים לטיניים באותו גודל ולפעמים דורשים ניגודיות קצת גבוהה יותר.

קישורי עזר

פתרון בעיות

שגיאה: "קורא המסך מכריז על תוכן בסדר שגוי"

סיבה: סדר RTL חזותי לא תואם לסדר ה-DOM, או חסרה תכונת dir פתרון: תוודאו שסדר מקור ה-DOM תואם לסדר הקריאה המיועד ל-RTL. תוסיפו dir="rtl" לאלמנטים מכילים. תשתמשו בתכונות CSS לוגיות לפריסה במקום במיקום פיזי שיכול להתנגש עם סדר הקריאה.

שגיאה: "הודעות אימות טופס בעברית לא מוכרזות"

סיבה: הודעות השגיאה לא משתמשות באזורי ARIA חיים או בתפקיד התראה פתרון: תוסיפו role="alert" למכולות הודעות השגיאה ותוודאו שהן מאוכלסות דינמית אחרי אימות. תשתמשו ב-aria-describedby לחיבור הודעות שגיאה לשדות הקלט שלהן. טקסט השגיאה חייב להיות בעברית לטפסים עבריים.

שגיאה: "קישור דילוג הניווט לא עובד בפריסת RTL"

סיבה: קישור הדילוג ממוקם מחוץ למסך עם CSS פיזי (left: -9999px) פתרון: תשתמשו ב-inset-inline-start: -9999px במקום ב-left: -9999px לקישור הדילוג. תוודאו שלאלמנט היעד יש id ו-tabindex="-1" לניהול פוקוס. תבדקו שקישור הדילוג הוא האלמנט הממוקד הראשון בסדר ה-Tab.