# Wcag Accessibility Widget > 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 the root html element. 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. - Skill: `skills-il/wcag-accessibility-widget` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add skills-il/wcag-accessibility-widget` - Raw SKILL.md: https://api.skillmd.com/api/skills/skills-il/wcag-accessibility-widget/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: skills-il (https://skillmd.com/u/skills-il) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/skills-il/wcag-accessibility-widget --- # 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 `