מה NAGISOT עושה אוטומטית?
המדריך המקיף ליכולות המערכת

איך זה עובד בקצרה

המערכת בנויה מארבעה רכיבים שעובדים יחד:

1. תוסף Chrome שמותקן אצלך — הוא רץ על הדפים של האתר שלך, מזהה ליקויי נגישות, ושולח אותם לשרת.
2. שרת NAGISOT (Cloudflare Workers) — מקבל את הליקויים, מפעיל את ה-AI שלך (Gemini/OpenAI/Groq עם המפתח שלך) כדי לייצר תיקונים, ושומר אותם במסד נתונים.
3. הוויג'ט באתר הלקוח — סקריפט קטן (~14KB) שטוען בכל דף. לפני שהמבקר רואה את הדף, הוויג'ט מיישם את התיקונים השמורים.
4. דשבורד — עמוד ניהול שמראה היסטוריית סריקות, רשימת תיקונים, מאפשר עריכה ידנית, ומחולל הצהרת נגישות עדכנית.

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

חוקי WCAG רמה A — 12 חוקים פעילים

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

חוקי WCAG רמה AA — 14 חוקים פעילים

זו הרמה שמחויבת בחוק בישראל (תקנה 35 + ת״י 5568) ובאיחוד האירופי (EAA / EN 301 549). המערכת מכסה את הרוב המוחלט של חוקי AA הניתנים לזיהוי אוטומטי:

תיקוני AI אוטומטיים — מה ה-AI עושה בפועל

במקום לתאר את ה-AI כ"קופסה שחורה", הנה בדיוק מה הוא עושה בכל מקרה:

תמונות חסרות alt → AI Vision

PROMPT: Generate alt-text for an image, WCAG 1.1.1.
Rules:
1. ≤ 125 chars
2. Describe what's IN the image, not "an image of"
3. If decorative (logo / divider), respond exactly: DECORATIVE
4. Match the page language

הקריאה היא ל-gemini-1.5-flash עם ה-URL של התמונה. אם המודל מחזיר DECORATIVE, התיקון הוא alt="" + role="presentation".

קישורים עמומים → AI Text

PROMPT: Rewrite ambiguous link text for WCAG 2.4.4.
Output ONE replacement, 2-8 words, describing where link goes.
Same language. Output ONLY the replacement.
Context: [outerHTML של ההורה]
Current text: "לחץ כאן"
Target: /products/widget-x

תוויות לטפסים → דטרמיניסטי + AI fallback

קודם דטרמיניסטי: אם יש placeholder, משתמשים בו ישירות (ללא קריאת AI).
אחר כך AI: ניסוח לפי name, type, וההקשר.

שדות autocomplete → 100% דטרמיניסטי

מיפוי שמות שדות לערכי autocomplete לפי תקן HTML. דוגמאות:

• name="email" → autocomplete="email"
• name="fname" או name="first-name" → given-name
• name="phone" → tel
• type="tel" ללא name → tel
• שמות בעברית: shem → name, telefon → tel

אין כאן קריאת AI כלל. תיקון מיידי, חינמי לחלוטין.

תמונות-טקסט → AI Vision OCR

תמונות עם יחס רוחב-גובה של באנר/באטון נשלחות ל-Vision. אם מזוהה טקסט, הטקסט עצמו הופך ל-alt. אם לא — התמונה לא מסומנת כליקוי.

כותרות גנריות → AI Text עם הקשר

ה-AI מקבל את הכותרת הנוכחית + עד 400 תווים של תוכן הקטע, ומחזיר ניסוח של 3-8 מילים שמשקף את התוכן. בעברית, באותו טון.

הודעות שגיאה עמומות → AI Text

הודעות כמו "Error 400", "invalid", "שגיאה" מועברות ל-AI עם שם השדה הרלוונטי והוא מנסח הוראה ברורה:

לפני: "Error"
אחרי: "כתובת האימייל לא תקינה. ודא שיש סימן @ ושם דומיין."

כמה זה עולה?

שום דבר ל-NAGISOT. אתה משלם ישירות לספק ה-AI שלך:

• Gemini 1.5 Flash: 1,500 קריאות ביום בחינם. אתר עם 100 תמונות → סריקה בחינם.
• Groq: 14,400 קריאות ביום בחינם (אבל ללא Vision — רק טקסט).
• OpenAI: $5 קרדיט חינם להתחלה, אחר כך ~$0.15 ל-1M tokens של GPT-4o-mini.

ראה את המדריך להשגת מפתחות חינמיים ואת מערכת רוטציית המפתחות שלנו שמאזנת אוטומטית בין כמה מפתחות באותו חשבון.

תהליך סריקה מהתוסף

1. פותחים את התוסף בדפדפן בכל דף באתר שלך. אם זה דף ראשון באתר חדש — תקבל הזמנה לרשום את האתר במערכת.
2. בוחרים רמת יעד: A, AA או AAA. ברירת המחדל היא AA (חוק ישראלי).
3. התוסף סורק את הדף הנוכחי בתוך הדפדפן — לא נשלח HTML לשרת. רק רשימת ליקויים. הגישה: detect() רץ על ה-DOM החי, עם הזיהוי ויזואלי בזמן אמת:
   • פאנל צף מציג ספירה חיה של ליקויים
   • כל ליקוי מודגש בצהוב עם תווית הסבר
   • אחרי תיקון — האלמנט נצבע ירוק
4. השרת מקבל את הליקויים, מפעיל את ה-AI שלך לכל מה שצריך, ומחזיר רשימת תיקונים.
5. התוסף מיישם את התיקונים על ה-DOM החי, ואתה רואה את התוצאה מיד.
6. התיקונים נשמרים. כל מבקר בעתיד יקבל אותם מהוויג'ט באתר.

למפעילי אתרים עם מאות דפים: יש מצב סריקה רב-דפי שעוקב אחרי קישורים פנימיים ויוצר סריקה אחת לכל האתר. אפשר גם לתזמן סריקה שבועית עם chrome.alarms.

עריכה חיה ועקיפת תיקונים

ה-AI לא מושלם. הוא יכול לטעות בניסוח, להחמיץ קונטקסט, או לכתוב משהו שלא תואם לטון של המותג שלך. לכן בכל תיקון יש שלוש דרכים לעקוף:

1. עריכה בלחיצה מתוך הדף עצמו

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

2. עריכה בדשבורד

בעמוד /site/[id] יש רשימה מלאה של כל התיקונים, מקובצים לפי דף. ניתן לערוך כל אחד, להפעיל/לכבות, או לסמן "המתן לאישור". בכל שינוי, הוויג'ט יקבל את הגרסה המעודכנת בקריאה הבאה.

3. סימון אלמנט כ"דקורטיבי בכוונה"

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

הוויג'ט באתר הלקוח — מה הוא עושה?

סקריפט אחד, ~14KB מכווצים:

<script src="https://nagisot-widget.pages.dev/loader.js" data-site="YOUR_SITE_ID" defer></script>

חלק 1: יישום תיקונים שמורים

ברגע שהדף נטען, הוויג'ט קורא ל-/sites/[id]/fixes/by-page ומקבל רשימה של כל התיקונים השמורים לדף הזה. הוא מוצא כל אלמנט לפי 3 אסטרטגיות (CSS selector → XPath → content hash) ומיישם את התיקון.

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

חלק 2: כלי נגישות לחוויית המשתמש

FAB מותאם (כפתור צף) בפינה. לחיצה פותחת פאנל עם:

• גודל טקסט (3 רמות)
• מצב ניגודיות גבוהה
• פונט לדיסלקציה (OpenDyslexic)
• סמן מוגדל
• עצירת אנימציות (CSS animation-play-state: paused)
• מסכת קריאה (Reading Mask)
• הקראת טקסט נבחר (WebSpeech API חינמי)
• פישוט שפה (AA, באמצעות ה-AI שלך)

חלק 3: התאמת SPA

הוויג'ט מאזין ל-MutationObserver: אם הדף מתעדכן בלי ניווט (SPA), התיקונים מיושמים מחדש על האלמנטים החדשים.

מה כן ומה לא נכלל

מכוסה ב-100% אוטומטית

• כל הזיהויים הסטטיים של HTML/CSS (alt, label, contrast, autocomplete)
• תיקוני AI לתוכן (alt-text, link-text, headings, errors)
• חוויית משתמש קצה (FAB, גודל טקסט, ניגודיות)
• הצהרת נגישות אוטומטית מבוססת על תוצאות הסריקה האחרונה
• SEO + Open Graph + JSON-LD בכל הדשבורד

מכוסה חלקית (זיהוי בלבד — דורש פיתוח ידני)

• היררכיית כותרות שבורה (1.3.1)
• חוסר landmarks (1.3.6)
• חוסר reflow ב-320px (1.4.10)
• focus מוסתר ע״י sticky header (2.4.11)
• גודל יעד מגע (2.5.8)
• multiple-ways (2.4.5)

אנחנו מזהים את הליקוי ומדווחים — אבל התיקון דורש שינוי קוד שאי-אפשר לעשות בדפדפן בצורה אחראית (זה ישנה את ה-layout). הדשבורד מציג רשימה ברורה למפתח.

לא מכוסה (בכלל)

• כתוביות לוידאו (1.2.2) — נדרש קובץ VTT שאתה מייצר/מעלה. (בהכנה: שילוב Whisper.)
• תיאורי שמע (1.2.5 AAA) — נדרשת הקלטה.
• ניווט מקלדת מלא (2.1.1) — דורש בדיקה ידנית או Puppeteer.
• שפת סימנים (1.2.6 AAA) — סרטון חדש, לא ניתן ליצור אוטומטית.
• מבחני אבטחה שדורשים זיהוי קוגניטיבי (3.3.8 ברמה AAA).

הכיסוי המוערך

עדכון: מאי 2026. הוספנו 22 חוקים חדשים ברגעי בנייה אלה — Rounds 4, 5, ו-6. הכיסוי עלה מ-{A 40%, AA 70%, AAA 7%} ל-{A 70%, AA 85%, AAA 40%}.

Round 6 — Whisper לכתוביות וידאו

נוספה אינטגרציה מלאה ל-Whisper Large v3 דרך Groq (חינמי, 15,000 שניות ביום) או OpenAI fallback. כשהמערכת מזהה <video> ללא <track kind="captions">:

1. השרת מוריד את קובץ הוידאו (עד 50MB).
2. שולח ל-Whisper עם שפת הדף.
3. מקבל segments עם timestamps + טקסט.
4. ממיר ל-WebVTT.
5. שומר ב-R2 תחת captions/[siteId]/[hash].vtt.
6. הוויג'ט באתר הלקוח מזריק <track kind="captions" src="..." srclang="..." default> אוטומטית.

סוגר את WCAG 1.2.2 (Captions Prerecorded) — הקריטריון הכי מבוקש בתביעות נגישות אמריקאיות.

רמה A נמוכה כי הרבה קריטריונים שלה דורשים החלטות אדריכליות (כתוביות, ניווט מקלדת מלא, פסיכומטריקה של מבחנים). רמה AA, שהיא הרמה החוקית בישראל, מכוסה ב-70% — שיא בתעשייה לתיקון אוטומטי.

מה בדרך — שדרוגים קרובים

השדרוגים הבאים בצנרת, בסדר עדיפויות:

1. דוח תאימות PDF חתום

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

2. ציון אמינות לכל תיקון AI

כל תיקון יקבל ציון 0-100. מעל 85 — אישור אוטומטי. 60-85 — תור המתנה לסקירה. מתחת ל-60 — מכובה כברירת מחדל.

3. תמונות תצוגה מקדימה של כל אלמנט

בדשבורד, ליד כל תיקון, תמונה מוקטנת של איך האלמנט נראה באתר. סקירה ב-30 שניות במקום שעה.

4. השוואה בין סריקות

"מה השתפר מאז הסריקה הקודמת?" — ליקויים חדשים, ליקויים שנפתרו, regressions. KPI לדיווח להנהלה.

5. טון מותאם למותג

הגדרה לכל אתר: "פורמלי / צעיר / טכני". ה-AI מקבל prefix בכל פרומפט, כך שה-alt-texts וה-headings נראים כאילו הסופר של האתר כתב אותם.

6. תיקונים רב-לשוניים

ה-AI יוצר alt-text בעברית + אנגלית + ערבית + רוסית. הוויג'ט בוחר את הגרסה לפי document.documentElement.lang. רב-לשוניות בקריאת AI אחת.

7. Webhooks

POST לכתובת שלך כשסריקה מסתיימת. אינטגרציה ל-Slack, Jira ticket per issue, או CI gate שחוסם deploy אם יש ליקוי קריטי חדש.

8. רשימת חריגים

סימון selectors שלא ייסרקו (לוגו של ספק, אנימציית רקע מכוונת). מסיים false-positives.

9. הערכת עלות מראש

לפני סריקה — "סריקה זו תשתמש בכ-1,200 LLM tokens (כ-$0.0008 בחשבון Gemini שלך)". שקיפות מלאה.

10. כתוביות אוטומטיות (Whisper)

לוידאו שעולה לאתר — קריאה ל-Whisper, ייצור VTT, העלאה ל-R2, חיבור ל-<track>. סוגר את WCAG 1.2.2.

רוצה לקחת חלק בעיצוב התעדפויות? אתה לקוח קיים שיכול להשפיע. דבר איתנו — idanperiyoel@gmail.com.

הצעד הבא

פתח חשבון חינם, הוסף את האתר שלך, הורד את התוסף ל-Chrome, וצור סריקה ראשונה תוך פחות מ-5 דקות.