Setup — שקוף

ההתקנה המהירה

הדביקו את השורה הזו לפני תג </body> באתר שלכם.

html · minimal

<script src="https://cdn.jsdelivr.net/npm/@shakuf-widget/widget" defer></script>

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

html · recommended

<script src="https://cdn.jsdelivr.net/npm/@shakuf-widget/widget"
        data-statement-url="/accessibility"
        data-coordinator-name="שם הרכז"
        data-coordinator-phone="03-0000000"
        data-coordinator-email="access@example.co.il"
        defer></script>

פרומפט מוכן לעורך ה-AI שלכם

עובדים עם Claude Code, Cursor, Codex, Lovable, Base44, Windsurf או Bolt? העתיקו את הפרומפט והדביקו. הוא מנוסח כך שהעוזר יתקין נכון, לא יעשה יותר מדי, ולא יכתוב לכם טענות שיווקיות שאסור לפרסם.

prompt · paste into your agent

הוסף לאתר הזה את תוסף הנגישות "שקוף" (Shakuf).

לפני שאתה מתחיל — שאל אותי את הפרטים הבאים ואל תמשיך עד שתקבל תשובה:

  • מהי הכתובת של עמוד הצהרת הנגישות באתר? (למשל /accessibility)
    אם עדיין אין עמוד כזה — אמור לי זאת במפורש, כי הדין מחייב לפרסם אותו.
  • מה שמו המלא של רכז הנגישות?
  • מה מספר הטלפון שלו?
  • מה כתובת הדוא״ל שלו?

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

מה לעשות אחר כך:

1. הוסף את התג הבא ממש לפני </body> בתבנית הראשית של האתר, כך שייטען בכל עמוד,
   כשהערכים מולאו מהתשובות שקיבלת:
<script src="https://cdn.jsdelivr.net/npm/@shakuf-widget/widget"
        data-statement-url="/accessibility"
        data-coordinator-name="[שם רכז הנגישות]"
        data-coordinator-phone="[טלפון]"
        data-coordinator-email="[דוא״ל]"
        defer></script>
2. אם זה פרויקט React / Next.js / Vue / Svelte — אל תוסיף את התג ל-JSX של
   קומפוננטה בודדת. הוסף אותו ל-layout או ל-index.html הראשי, פעם אחת לכל
   האפליקציה. ב-Next.js App Router השתמש ב-next/script עם
   strategy="afterInteractive" בתוך app/layout.tsx.

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

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

5. אם יש באתר Content-Security-Policy, ודא ש-script-src מתיר את
   cdn.jsdelivr.net. אין צורך ב-connect-src — התוסף לא מבצע בקשות רשת.

חשוב מאוד — מה לא לכתוב:

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

בסיום, דווח לי בדיוק אילו קבצים שינית.

סעיף 4 אינו ניסוח מקרי. עוזרי קוד נוטים ״לעזור״ ולהוסיף תיקוני נגישות אוטומטיים — הוספת ARIA, ניחוש טקסט חלופי, שינוי כותרות — וזו בדיוק הפעולה שמקלקלת אתרים למשתמשי קורא מסך.

התקנה לפי פלטפורמה

פתחו את עורך התבנית
לוח הבקרה ← עיצוב ← עורך קובצי ערכת עיצוב, ובחרו footer.php.
הדביקו לפני </body>
את תג ה-script מלמעלה.
שמרו ורעננו
הכפתור יופיע בפינת המסך.

עדיף להשתמש בערכת בת (child theme) — אחרת עדכון התבנית ימחק את השינוי. לחלופין, כל תוסף מסוג ״Insert Headers and Footers״ יעשה את העבודה בלי לגעת בקוד.

Online Store ← Themes
בתפריט Actions של התבנית הפעילה בחרו Edit code.
פתחו theme.liquid
והדביקו את התג ממש לפני </body>.
Save

דרך npm, או פשוט להשאיר את תג ה-script ב-index.html.

shell

npm install @shakuf-widget/widget

App.tsx

// Mount once for the whole app, not per component.
import { useEffect } from 'react';
import { mount, unmount } from '@shakuf-widget/widget';

export default function App() {
  useEffect(() => {
    mount({
      statementUrl: '/accessibility',
      coordinatorName: 'שם הרכז',
      coordinatorEmail: 'access@example.co.il',
    });
    return () => unmount();
  }, []);

  return /* ... */;
}

Next.js App Router: הוסיפו <Script src="…" strategy="afterInteractive" /> בתוך app/layout.tsx. אין צורך ב-'use client' עבור תג script.

הדביקו לפני </body> בכל עמוד:

index.html

  <script src="https://cdn.jsdelivr.net/npm/@shakuf-widget/widget"
          data-statement-url="/accessibility"
          defer></script>
</body>
</html>

הגדרות

כל ההגדרות אופציונליות ונקראות מתג ה-script עצמו.

רשימת מאפייני ההגדרה של התוסף
attribute	default	תיאור
data-statement-url	—	קישור להצהרת הנגישות של האתר
data-coordinator-name	—	שם רכז הנגישות
data-coordinator-phone	—	טלפון רכז הנגישות
data-coordinator-email	—	דוא״ל רכז הנגישות
data-position	bottom-right	גם bottom-left · top-right · top-left
data-offset	20	מרחק בפיקסלים משולי המסך
data-accent	#0b5fff	צבע ראשי בפורמט hex. צבע הטקסט נבחר אוטומטית לפי ניגודיות

פרטים טכניים

מה התוסף עושה לעמוד

מוסיף אלמנט אחד ל-<body> עם Shadow DOM, כך שהעיצוב שלו לא יכול לדלוף לאתר ולא יכול להישבר ממנו. ההתאמות מיושמות דרך מאפייני data-shakuf-* על תגית <html> וגיליון סגנון אחד.

התוסף אינו משנה ARIA, roles או סמנטיקה, ואינו מתערב בטכנולוגיה מסייעת של המבקר. כל שינוי הפיך לחלוטין בלחיצה על ״איפוס״.

בקשות רשת ופרטיות

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

Content-Security-Policy

אם באתר יש CSP, צריך להתיר את מקור הסקריפט:

csp

script-src 'self' https://cdn.jsdelivr.net;

אין צורך ב-connect-src — התוסף לא מבצע בקשות.

גודל, ביצועים ונעיצת גרסה

כ-13KB דחוס (gzip), ללא תלויות בזמן ריצה. נטען עם defer ולכן אינו חוסם את הצגת העמוד. חלונית ההגדרות נבנית רק כשהמבקר פותח אותה בפועל.

ברירת המחדל מושכת את הגרסה האחרונה. לנעילת גרסה מדויקת:

html · pinned

<script src="https://cdn.jsdelivr.net/npm/@shakuf-widget/widget@0.1.0" defer></script>

מה עוד צריך כדי באמת להיות נגישים

התוסף הוא הצעד הקטן. אלה הדברים שהוא לא עושה, ושבלעדיהם האתר אינו עומד בדרישות הדין:

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

פירוט הדרישות והחשיפה

חיבור שקוף לאתר שלכם

ההתקנה המהירה

פרומפט מוכן לעורך ה-AI שלכם

התקנה לפי פלטפורמה

פתחו את עורך התבנית

הדביקו לפני `</body>`

שמרו ורעננו

Settings ← Custom Code

Add Custom Code

Apply ואז Publish

Online Store ← Themes

פתחו `theme.liquid`

Save

Project settings ← Custom code

Footer code

Save ואז Publish

הגדרות

פרטים טכניים

מה עוד צריך כדי באמת להיות נגישים

תיקון האתר עצמו

פרסום הצהרת נגישות

מינוי רכז נגישות

ערוץ פניות שעובד

בדיקה של מורשה נגישות

חיבור שקוף לאתר שלכם

ההתקנה המהירה

פרומפט מוכן לעורך ה-AI שלכם

התקנה לפי פלטפורמה

פתחו את עורך התבנית

הדביקו לפני </body>

שמרו ורעננו

Settings ← Custom Code

Add Custom Code

Apply ואז Publish

Online Store ← Themes

פתחו theme.liquid

Save

Project settings ← Custom code

Footer code

Save ואז Publish

הגדרות

פרטים טכניים

מה עוד צריך כדי באמת להיות נגישים

תיקון האתר עצמו

פרסום הצהרת נגישות

מינוי רכז נגישות

ערוץ פניות שעובד

בדיקה של מורשה נגישות

הדביקו לפני `</body>`

פתחו `theme.liquid`