From 2a0bb62494faed7ae9694f7cd40a8fb079748426 Mon Sep 17 00:00:00 2001 From: Tura2 Date: Thu, 16 Apr 2026 18:26:59 +0300 Subject: [PATCH 1/2] Add wcag-accessibility-widget skill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Self-hosted floating accessibility widget for Israeli websites. Covers WCAG 2.1 AA / ת"י 5568 compliance, CSS class architecture, RTL-safe toggles, position:fixed filter bug, and הצהרת נגישות page template. --- wcag-accessibility-widget/SKILL.md | 244 ++++++++++++++ wcag-accessibility-widget/SKILL_HE.md | 309 ++++++++++++++++++ wcag-accessibility-widget/metadata.json | 43 +++ .../references/README.md | 48 +++ 4 files changed, 644 insertions(+) create mode 100644 wcag-accessibility-widget/SKILL.md create mode 100644 wcag-accessibility-widget/SKILL_HE.md create mode 100644 wcag-accessibility-widget/metadata.json create mode 100644 wcag-accessibility-widget/references/README.md diff --git a/wcag-accessibility-widget/SKILL.md b/wcag-accessibility-widget/SKILL.md new file mode 100644 index 0000000..bae3156 --- /dev/null +++ b/wcag-accessibility-widget/SKILL.md @@ -0,0 +1,244 @@ +--- +name: wcag-accessibility-widget +description: Build a self-hosted floating accessibility widget for Israeli websites — WCAG 2.1 AA / ת"י 5568 toggles (high contrast, font size, keyboard nav, readable font, heading/link markers), settings persisted in localStorage, applied as CSS classes on . Use when building an accessibility widget, implementing Israeli accessibility law compliance (חוק שוויון זכויות לאנשים עם מוגבלות), creating an הצהרת נגישות page, or debugging position:fixed elements that break under CSS filter. Covers React/Next.js component architecture, RTL-safe toggle switches, CSS class strategy, and required accessibility declaration page content. Do NOT use for third-party accessibility overlay services (UserWay, AccessiBe) or non-Israeli WCAG audits. +license: MIT +compatibility: Works with React 18+ and Next.js 13+ (App Router). No external API or service required — fully self-hosted with localStorage. Compatible with Tailwind CSS projects. RTL/Hebrew layout aware. +--- + +# WCAG Accessibility Widget + +## Overview + +A self-hosted floating accessibility widget: a fixed button that opens a panel with toggles for common WCAG 2.1 AA features. Settings are persisted in `localStorage` and applied as CSS classes on ``. No third-party service needed. + +--- + +## WCAG 2.1 AA Checklist — What to Build + +Before touching any component, audit these items first: + +| Item | What to check / implement | +|------|--------------------------| +| **Skip link** | `` in layout, visually hidden, visible on focus. Target `
` | +| **Alt text** | Every `` has descriptive `alt`. Decorative images get `alt=""` + `aria-hidden="true"` | +| **Color contrast** | Normal text ≥ 4.5:1, large text ≥ 3:1. Common fail: `text-gray-500` on dark bg (~3.9:1) → use `text-gray-400` | +| **Keyboard navigation** | All interactive elements reachable by Tab. Test with keyboard only | +| **ARIA labels** | `aria-label` on icon-only buttons, `aria-expanded` on toggles, `aria-label` on `