קורן בן עזרא
skills-ilמה זה WCAG Accessibility Widget?
wcag-accessibility-widget בונה ווידג'ט העדפות נגישות עצמאי לאתרי React או Next.js: ניגודיות גבוהה, גודל גופן, הדגשת פוקוס מקלדת, גופן קריא ועצירת אנימציות, עם דף הצהרת נגישות. הוא ממסגר נכון את הרף החוקי בישראל, ת"י 5568 ברמה AA, ומדגיש שהווידג'ט הוא כלי נוחות ולא תחליף לאתר נגיש מלכתחילה.
הרבה בעלי אתרים חושבים שהוספת ווידג'ט נגישות מהצד השלישי פותרת את החובה החוקית, אבל זו בדיוק ההנחה שהובילה בארה"ב לקנס של מיליון דולר נגד חברת accessiBe בגלל טענה שהווידג'ט שלה הופך כל אתר לתואם WCAG. הסקיל הזה בנוי סביב עיקרון הפוך: קודם בונים אתר נכון, עם תוויות, ניגודיות ותמיכת מקלדת, ורק אחר כך מוסיפים ווידג'ט העדפות שהוא שכבת נוחות בלבד ולא תחליף לעבודת הנגישות עצמה.
דוגמה טובה היא קליניקה עם אתר Next.js שרוצה להראות מחויבות אמיתית לנגישות. הסקיל נותן רשימת בדיקה מלאה, קישור דילוג, טקסט חלופי לתמונות, ניגודיות צבעים מדויקת (כולל דוגמה קונקרטית שבה text-gray-500 נכשל על רקע כהה אבל text-gray-400 עובר), ותמיכה מלאה במקלדת, לפני שבכלל מגיעים לקוד של הווידג'ט עצמו.
הרכיב עצמו נשמר בצד הלקוח בלבד, עם localStorage לשמירת העדפות, ובלי קריאה לשירות חיצוני. הסקיל גם פותר תקלה טכנית ידועה, שבה position:fixed נשבר כשקרוב משפחה ב-DOM מקבל CSS filter, ומציג את דף הצהרת הנגישות שהחוק הישראלי דורש.
הסקיל מסביר את הרף החוקי הישראלי בכלליות ואינו ייעוץ משפטי או ביקורת נגישות. ווידג'ט לבדו אינו הופך אתר לתואם ת"י 5568, וההחלטה אם אתר מסוים חייב, פטור או עומד בדרישות שייכת למורשה לנגישות השירות או לעורך דין שבדק את האתר הספציפי.
למי זה מתאים
- מפתחי React או Next.js שצריכים להוסיף ווידג'ט נגישות לאתר ישראלי
- בעלי אתרים שרוצים חלופה עצמאית לשירותי overlay בתשלום כמו UserWay או AccessiBe
- סוכנויות שבונות אתרים ללקוחות וצריכות דף הצהרת נגישות תקני
- מי שכבר יש לו ווידג'ט אבל הוא נשבר ב-RTL או תחת CSS filter
- עסקים שרוצים להבין את הרף החוקי בישראל לפני שמזמינים פתרון חיצוני
מה הוא עושה
ווידג'ט עצמאי בלי שירות חיצוני
כפתור צף שפותח פאנל העדפות, עם שמירה ב-localStorage והחלה כמחלקות CSS על תג ה-html, בלי קריאת רשת לשום שירות.
רשימת בדיקה מלאה ברמת AA
קישור דילוג, טקסט חלופי, ניגודיות 4.5 ל-1 לטקסט רגיל, תמיכת מקלדת מלאה, תיוג ARIA, וכיבוד prefers-reduced-motion כברירת מחדל.
הרף החוקי הישראלי במקום אחד
הסבר על ת"י 5568 ברמה AA, המבוסס על WCAG 2.0 עם שינויים ישראליים, חובת נגישות למסמכים מ-2017 ואילך, ופטור לעוסק פטור או עסק עד מחזור 100 אלף שקל.
פתרון לבאג CSS filter ו-position:fixed
תיעוד מפורש של התקלה שבה כפתור הווידג'ט קופץ למקום לא נכון כשאלמנט אב מקבל CSS filter, עם הפתרון המדויק.
ערכת הגדרות RTL בטוחה
מתג הפעלה שמתאים לכיווניות עברית, כך שהאלמנט הזז לא נשאר מחוץ למסלול כשמחליפים כיוון.
דף הצהרת נגישות מוכן
תבנית לדף שדורש תקנה 35ה בחוק הישראלי, כולל הסבר מה חייב להופיע בו.
דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
ווידג'ט נגישות לאתר Next.js בעברית
תשתמש ב-wcag-accessibility-widget ותבנה לי ווידג'ט נגישות עצמאי לאתר Next.js שלי, עם ניגודיות גבוהה, גודל גופן ועצירת אנימציות, בעברית וב-RTL.מה מקבלים: רכיב client component עם כפתור צף, פאנל טוגלים, שמירה ב-localStorage שמחכה לסיום הטעינה לפני שהיא כותבת ברירת מחדל, ומחלקות CSS שמתאימות לכיווניות RTL.
כתיבת דף הצהרת נגישות
תכתוב לי דף הצהרת נגישות לאתר קטן של קליניקה, כולל מה נבדק, מה עוד לא נגיש ופרטי יצירת קשר לפניות נגישות.מה מקבלים: דף לפי תבנית הסקיל, עם הבהרה שהצהרה זו כללית ושכדאי לאמת אותה מול בדיקת נגישות מקצועית של האתר בפועל.
תיקון באג בכפתור צף
כפתור הווידג'ט שלי קופץ לתחתית העמוד כשמפעילים מצב ניגודיות גבוהה. תעזור לי לאבחן למה.מה מקבלים: זיהוי שהבעיה נובעת מ-CSS filter על אלמנט אב שיוצר הקשר מיקום חדש, והצעת מבנה DOM שמונע את זה.
בדיקת ניגודיות צבעים לפני שחרור
תעבור על צבעי הטקסט באתר שלי ותגיד לי אילו צירופים נכשלים ברמת AA על הרקע הכהה שלי.מה מקבלים: רשימת צירופי צבע עם יחס הניגודיות המדויק שלהם, וסימון אילו עוברים 4.5 ל-1 לטקסט רגיל ואילו לא, בלי להמליץ על הווידג'ט כפתרון לבעיה הזו.
מה צריך לפני שמתחילים
- React בגרסה 18 ומעלה או Next.js עם App Router בגרסה 13 ומעלה
- אין צורך במפתח API או בשירות חיצוני, הכול רץ בצד הלקוח
- תמיכה ב-Tailwind CSS יתרון, אבל אינה חובה
- ידע בסיסי ב-CSS כדי להתאים את מחלקות הניגודיות והגופן לעיצוב הקיים
- בדיקת נגישות אמיתית של האתר לפני הפעלת הווידג'ט, כי הוא לא מתקן תגיות חסרות או וידאו בלי כתוביות
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את WCAG Accessibility Widget.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת wcag-accessibility-widget.zip (33 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי את הסקיל wcag-accessibility-widget ממאגר skills-il/developer-tools לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/skills-il/developer-tools "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/wcag-accessibility-widget" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/skills-il/developer-tools /tmp/skills-il-developer-tools
mkdir -p ~/.claude/skills
cp -R /tmp/skills-il-developer-tools/wcag-accessibility-widget ~/.claude/skills/
rm -rf /tmp/skills-il-developer-tools
# אופציונלי, דורש Node.js 20 ומעלה:
npx skills-il add skills-il/developer-tools@v1.1.1-wcag-accessibility-widget --skill wcag-accessibility-widget -a claude-code -y -gמפעילים מחדש את Claude Code. אין מפתח API להגדיר, אבל לפני שמטמיעים את הווידג'ט כדאי לעבור על רשימת הבדיקה של AA שהסקיל נותן, כי הווידג'ט לא מתקן בעיות תוכן קיימות.
- מריצים ls ~/.claude/skills ומוודאים שמופיעה תיקייה בשם wcag-accessibility-widget
- בשיחה חדשה מקלידים / ומחפשים accessibility או wcag
- שואלים את Claude: אילו סקילים יש לך לבניית ווידג'ט נגישות?
מריצים שוב את פקודת ה-git, שמעתיקה את הגרסה העדכנית מעל הקיימת. עם ה-CLI הרשמי מריצים npx skills-il update.
rm -rf ~/.claude/skills/wcag-accessibility-widget
איך משתמשים ביום יום
- מבקשים מ-Claude לעבור קודם על רשימת הבדיקה של AA מול האתר הקיים, לפני שמדברים על הווידג'ט
- מבקשים את קוד הרכיב עצמו, ומתאימים את מחלקות ה-CSS לפלטת הצבעים והפונטים של האתר
- מוסיפים את דף הצהרת הנגישות לפי התבנית, ומעדכנים אותו עם פרטי הקשר האמיתיים
- בודקים את הווידג'ט עם מקלדת בלבד ועם קורא מסך, לא רק עם עכבר
טיפים שימושיים
- לעולם לא מציגים את הווידג'ט כפתרון הציות המלא, אלא ככלי נוחות נוסף מעל אתר שכבר נבנה נכון
- בודקים ניגודיות בפועל על הצבעים שלכם, ולא מניחים שגוון אפור מסוים תמיד עובר או נכשל
- מוודאים שההגדרות נטענות מ-localStorage לפני שהאפקט השני כותב ברירת מחדל, אחרת ההעדפה של המשתמש נמחקת בכל טעינה
- בודקים את מיקום הכפתור הצף גם כשמצב ניגודיות גבוהה או מצב RTL פעילים, בגלל הבאג הידוע עם CSS filter
תקלות נפוצות
ההגדרות מתאפסות אחרי כל רענון
כפתור הווידג'ט קופץ לתחתית העמוד
המתג של הטוגל יוצא מהמסלול בעברית
העמוד מהבהב בלי עיצוב לפני שהמצב השמור מוחל
שאלות ותשובות
אם אני מתקין את הווידג'ט הזה, האתר שלי הופך נגיש כדין?
מה ההבדל בין הסקיל הזה לבין israeli-accessibility-compliance?
אפשר להשתמש בו בפרויקט שאינו React או Next.js?
האם עסק קטן פטור מהחובה הזו?
קרדיט ומקור. WCAG Accessibility Widget נכתב על ידי skills-il ונמצא ב-skills-il/developer-tools ברישיון MIT. skills-il הוא פרויקט קוד פתוח ישראלי של סקילים ל-AI, ואפשר למצוא את כל הסקילים שלהם גם ב-agentskills.co.il. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (30.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.