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

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

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

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

<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? העתיקו את הפרומפט והדביקו. הוא מנוסח כך שהעוזר יתקין נכון, לא יעשה יותר מדי, ולא יכתוב לכם טענות שיווקיות שאסור לפרסם.

הוסף לאתר הזה את תוסף הנגישות "שקוף" (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%". התוסף אינו הופך אתר לנגיש; הוא
כלי עזר לתצוגה בלבד. הנגשה אמיתית מחייבת תיקונים בקוד ובתוכן האתר, פרסום
הצהרת נגישות, מינוי רכז נגישות ובדיקה של מורשה נגישות.

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

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

npm install @shakuf-widget/widget

// 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 /* ... */;
}

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

הגדרות

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

מתי צריך data-mount

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

הפתרון הוא להפנות את התוסף אל תוך אותו שורש:

<script src="/shakuf.js" data-mount="#root" defer></script>

אם הסלקטור שגוי או לא מתאים לאף אלמנט, התוסף נטען ל-body כרגיל ורושם אזהרה ב-console. הוא לא ייעלם בגלל טעות הגדרה.

שליטה מתוך קוד

התקנה דרך תג script מגדירה את window.shakuf. כל הפעולות סינכרוניות ואינן מבצעות בקשות רשת:

בהתקנה דרך npm אין window.shakuf — mount() מחזיר את המופע עצמו, עם אותן שיטות.

כדי להחיל העדפה שמורה כבר בטעינה, האזינו לאירוע shakuf:ready על document. האירוע נורה בתוך הטעינה, לפני ש-window.shakuf קיים, ולכן המופע מגיע בתוך event.detail:

document.addEventListener('shakuf:ready', function (e) {
  if (userPrefersHidden) e.detail.hide();
});

אם אתם כבר יודעים מראש שהכפתור צריך להיות מוסתר, עדיף data-hidden — הוא חוסך את ההבהוב.

פרטים טכניים

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

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

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

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

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

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

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

   עמוד ייעודי ומתוארך שמפרט את מצב הנגישות באתר, את ההתאמות שבוצעו ואת המגבלות הידועות.

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

   אדם בשם ובפרטי קשר, לא כתובת כללית.

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

   ושמישהו באמת עונה בו.

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

   בדיקה חיצונית מקצועית. שקוף אינו תחליף לה, ואיננו מורשי נגישות.