/* פאנל נגישות נייד — ת"י 5568 / תקנה 35 ──────────────────────────────────────────────────────────────────────── מקורי, בלי סקריפט צד-שלישי. הנימוק: ווידג'טים מסוג overlay דורסים הגדרות דפדפן ומתנגשים עם קוראי מסך (overlayfactsheet.com), ותקנה 35 ממילא אינה מחייבת ווידג'ט — היא מחייבת שהאתר עצמו יעמוד בת"י 5568 ברמה AA. מיתוג: לשנות רק את בלוק ה-:root שלמטה. שאר הקובץ אינו דורש נגיעה. מוסכמות: · כל מחלקות ההתאמה מוחלות על (documentElement) — a11y-* · הפאנל עצמו מודד ב-px בלבד, כדי שלא יגדל יחד עם הגדלת-הגופן · שום כלל כאן אינו פעיל לפני שהמשתמש בחר בו — האתר הרגיל לא מושפע ──────────────────────────────────────────────────────────────────────── */ :root { /* ── מיתוג — לשנות כאן בלבד ── */ --a11y-accent: #446762; /* הטורקיז של המאפייה (PALETTE.md) */ /* צבע הכפתור וראש הפאנל */ --a11y-accent-hover: #345450; --a11y-on-accent: #FFFDF9; /* 6.25:1 על הטורקיז */ /* טקסט מעל צבע האקצנט — לוודא ניגודיות ≥4.5:1 */ --a11y-surface: #ffffff; /* רקע הפאנל */ --a11y-surface-2: #f4f2ef; /* רקע פריט */ --a11y-surface-3: #eae7e2; /* פריט בריחוף/פעיל */ --a11y-text: #1a1a1a; --a11y-text-soft: #55494b; --a11y-border: #d9d3d0; --a11y-radius: 16px; --a11y-radius-sm: 10px; /* מיקום הכפתור. ברירת מחדל: פינה תחתונה בצד ה-start (ימין ב-RTL). אם כבר יש שם כפתור צף (וואטסאפ/צ'אט) — להעביר אותו לפינה הנגדית, לא לחפוף. */ --a11y-offset-inline: 10px; --a11y-offset-block: 45vh; /* לשונית-צד באמצע הגובה: לא על סרגל-ה-CTA הדביק (78px) ולא על רצועת העוגיות שמעליו */ --a11y-z: 90; /* מעל כפתורים צפים אחרים */ } /* ═══════════ 1. הכפתור הצף ═══════════ */ .bc-a11y-btn { position: fixed; inset-inline-start: var(--a11y-offset-inline); inset-block-end: var(--a11y-offset-block); z-index: var(--a11y-z); inline-size: 48px; block-size: 48px; border: 0; border-radius: 12px; background: var(--a11y-accent); color: var(--a11y-on-accent); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .bc-a11y-btn:hover { background: var(--a11y-accent-hover); transform: translateY(-2px); } .bc-a11y-btn svg { inline-size: 26px; block-size: 26px; display: block; fill: currentColor; } @media (max-width: 960px) { .bc-a11y-btn { inset-inline-start: 16px; inset-block-end: 16px; } } /* ═══════════ 2. הפאנל ═══════════ */ .bc-a11y-panel { position: fixed; inset-inline-start: var(--a11y-offset-inline); inset-block-end: calc(var(--a11y-offset-block) + 60px); z-index: calc(var(--a11y-z) + 1); inline-size: 320px; max-block-size: min(74vh, 620px); overflow-y: auto; overscroll-behavior: contain; background: var(--a11y-surface); color: var(--a11y-text); border-radius: var(--a11y-radius); border: 1px solid var(--a11y-border); box-shadow: 0 18px 48px rgba(0, 0, 0, .22); font-family: inherit; font-size: 15px; line-height: 1.5; } .bc-a11y-panel[hidden] { display: none; } /* במובייל — גיליון תחתון ברוחב מלא, כדי שלא יכסה את כל המסך */ @media (max-width: 640px) { .bc-a11y-panel { inset-inline: 0; inset-block-end: 0; inline-size: auto; max-block-size: 82vh; border-radius: 18px 18px 0 0; border-inline: 0; border-block-end: 0; } } /* ── ראש דביק, כדי שהסגירה תמיד בהישג יד ── */ .bc-a11y-head { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; background: var(--a11y-accent); color: var(--a11y-on-accent); border-radius: calc(var(--a11y-radius) - 1px) calc(var(--a11y-radius) - 1px) 0 0; } @media (max-width: 640px) { .bc-a11y-head { border-radius: 17px 17px 0 0; } } .bc-a11y-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; color: inherit; } .bc-a11y-close { inline-size: 44px; block-size: 44px; /* יעד מגע WCAG 2.5.5 */ border: 0; cursor: pointer; border-radius: var(--a11y-radius-sm); display: grid; place-items: center; color: var(--a11y-on-accent); background: rgba(255, 255, 255, .12); } .bc-a11y-close:hover { background: rgba(255, 255, 255, .24); } .bc-a11y-close svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .bc-a11y-body { padding: 14px 16px 8px; } /* ── קבוצות ── */ .bc-a11y-group + .bc-a11y-group { margin-block-start: 18px; } .bc-a11y-group > h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--a11y-text-soft); } /* ── פריט/טוגל ── */ .bc-a11y-item { inline-size: 100%; min-block-size: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; cursor: pointer; border-radius: var(--a11y-radius-sm); background: var(--a11y-surface-2); color: var(--a11y-text); text-align: start; font: inherit; font-size: 15px; transition: background .15s ease; } .bc-a11y-item + .bc-a11y-item { margin-block-start: 6px; } .bc-a11y-item:hover { background: var(--a11y-surface-3); } .bc-a11y-item .ico { inline-size: 22px; flex: none; display: grid; place-items: center; color: var(--a11y-accent); } .bc-a11y-item .ico svg { inline-size: 17px; block-size: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .bc-a11y-item .txt { flex: 1 1 auto; } /* נורית מצב — לא מסתמכת על צבע בלבד: המסגרת מתמלאת ומופיע ✓ (WCAG 1.4.1) */ .bc-a11y-item .dot { flex: none; inline-size: 20px; block-size: 20px; border-radius: 6px; border: 2px solid var(--a11y-border); display: grid; place-items: center; font-size: 12px; line-height: 1; color: transparent; } .bc-a11y-item[aria-checked="true"] { background: var(--a11y-surface-3); font-weight: 600; } .bc-a11y-item[aria-checked="true"] .dot { background: var(--a11y-accent); border-color: var(--a11y-accent); color: var(--a11y-on-accent); } .bc-a11y-item[aria-checked="true"] .dot::before { content: "\2713"; } /* ── מדרגות גופן ── */ .bc-a11y-steps { display: flex; align-items: center; gap: 8px; } .bc-a11y-steps .lbl { flex: 1 1 auto; font-size: 15px; } .bc-a11y-step { inline-size: 44px; block-size: 44px; border: 0; cursor: pointer; border-radius: var(--a11y-radius-sm); background: var(--a11y-surface-2); color: var(--a11y-accent); display: grid; place-items: center; font: inherit; font-size: 18px; font-weight: 700; line-height: 1; } .bc-a11y-step:hover { background: var(--a11y-surface-3); } .bc-a11y-step[disabled] { opacity: .4; cursor: default; } .bc-a11y-level { min-inline-size: 40px; text-align: center; font-size: 13px; color: var(--a11y-text-soft); font-variant-numeric: tabular-nums; } /* ── תחתית: איפוס · הצהרה · דיווח — שלושתם חובה ── */ .bc-a11y-foot { margin-block-start: 14px; padding: 12px 16px 14px; border-block-start: 1px solid var(--a11y-border); display: grid; gap: 8px; } .bc-a11y-reset { min-block-size: 44px; border: 0; cursor: pointer; border-radius: var(--a11y-radius-sm); background: var(--a11y-accent); color: var(--a11y-on-accent); font: inherit; font-size: 15px; font-weight: 600; display: grid; place-items: center; } .bc-a11y-reset:hover { background: var(--a11y-accent-hover); } .bc-a11y-foot a { min-block-size: 44px; display: flex; align-items: center; gap: 8px; padding-inline: 4px; font-size: 14px; color: var(--a11y-accent); text-decoration: underline; } .bc-a11y-foot a svg { inline-size: 15px; block-size: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .bc-a11y-note { margin: 2px 0 0; font-size: 12px; color: var(--a11y-text-soft); line-height: 1.45; } /* קורא-מסך בלבד */ .bc-a11y-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════════ 3. ההתאמות — מוחלות על ולכן על כל האתר ═══════════════════════════════════════════════════════════════════════ */ /* ── 3.1 גודל טקסט ── rem נגזר מ-font-size של :root, ולכן שינוי כאן מרחיב את כל הסקאלה. ⚠ עובד רק אם האתר מודד ב-rem/em. אתר שמודד ב-px לא יגיב — לבדוק לפני הבטחה. */ html.a11y-fs-1 { font-size: 112.5%; } html.a11y-fs-2 { font-size: 125%; } html.a11y-fs-3 { font-size: 137.5%; } html.a11y-fs-4 { font-size: 150%; } /* ── 3.2 גופן קריא ── בלי letter-spacing: בעברית הוא פוגע בקריאוּת. */ html.a11y-font, html.a11y-font body, html.a11y-font button, html.a11y-font input, html.a11y-font select, html.a11y-font textarea, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font h4 { font-family: Arial, 'Noto Sans Hebrew', 'Segoe UI', sans-serif !important; } html.a11y-font body { font-weight: 500; } /* ── 3.3 ריווח שורות ── */ html.a11y-lh body, html.a11y-lh p, html.a11y-lh li, html.a11y-lh td { line-height: 2.1 !important; } /* ── 3.4 הדגשת קישורים ── */ html.a11y-links a:not(.bc-a11y-btn) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; } html.a11y-links a:not(.bc-a11y-btn):hover { outline: 2px dashed currentColor; outline-offset: 2px; } /* ── 3.5 הדגשת מיקוד מוגברת ── */ html.a11y-focus :focus-visible, html.a11y-focus a:focus, html.a11y-focus button:focus { outline: 4px solid #ff8a00 !important; outline-offset: 3px !important; } /* ── 3.6 סמן גדול ── SVG משובץ: בלי בקשת רשת ובלי קובץ חיצוני. */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 2 L6 36 L15 28 L21 41 L27 38 L21 26 L33 26 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, auto !important; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"] { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M14 2 C11 2 10 4 10 7 L10 22 L8 20 C5 17 2 20 4 23 L13 37 C15 40 17 41 21 41 L30 41 C34 41 36 38 36 34 L36 18 C36 15 33 14 32 16 C31 13 28 13 27 15 C26 12 23 12 22 14 L22 7 C22 4 20 2 17 2 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2, pointer !important; } /* ── 3.7 עצירת אנימציות ── */ html.a11y-nomotion, html.a11y-nomotion * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-nomotion video { display: none; } /* ═══════════ 3.8 מצבי צבע — בלעדיים הדדית ═══════════ filter על בטוח ל-position:fixed: מפרט CSS Filter Effects מחריג במפורש את document root מיצירת containing block. filter על body או על wrapper **ישבור** הדר דביק וכפתורים צפים. (נבדק חי בכרום 26.7.26 — לאמת מחדש בכל פרויקט.) */ html.a11y-mono { filter: grayscale(1); } /* ניגודיות כהה (שחור/צהוב) — הקונבנציה שמשתמשים ישראלים מכירים. ⚠ שכבת כפייה ולא טוקנים: באתר טיפוסי יש מאות צבעים קשיחים, ומצב-ניגודיות שמכסה חצי מהם גרוע מלא-להציע-אותו בכלל. */ html.a11y-cd body, html.a11y-cd body * { background-color: #000 !important; background-image: none !important; color: #ffff00 !important; border-color: #ffff00 !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-cd a, html.a11y-cd a * { color: #00ffff !important; text-decoration: underline !important; } html.a11y-cd img, html.a11y-cd video { opacity: .82; } html.a11y-cd input, html.a11y-cd select, html.a11y-cd textarea { border: 2px solid #ffff00 !important; } /* ניגודיות בהירה (לבן/שחור) */ html.a11y-cl body, html.a11y-cl body * { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-cl a, html.a11y-cl a * { color: #00309c !important; text-decoration: underline !important; } html.a11y-cl input, html.a11y-cl select, html.a11y-cl textarea { border: 2px solid #000 !important; } /* ⚠ לוגו שמצויר ב-mask + background-color (לא ) נעלם בשכבת הכפייה — שחור-על-שחור. אותר בבדיקת צילום 26.7.26. אם באתר יש כזה, להוסיף: html.a11y-cd .YOUR-LOGO { background-color: #ffff00 !important; } html.a11y-cl .YOUR-LOGO { background-color: #000000 !important; } ולבדוק בצילום — לא רק ב-DOM. */ /* שחזור הפאנל עצמו מעל שכבות הכפייה. ספציפיות: html.a11y-cd .bc-a11y-panel * = (0,3,1) גובר על html.a11y-cd body * = (0,1,2). */ html.a11y-cd .bc-a11y-panel, html.a11y-cd .bc-a11y-panel *, html.a11y-cl .bc-a11y-panel, html.a11y-cl .bc-a11y-panel * { background-color: transparent !important; color: #1a1a1a !important; border-color: #d9d3d0 !important; } html.a11y-cd .bc-a11y-panel, html.a11y-cl .bc-a11y-panel { background-color: #fff !important; border: 2px solid #000 !important; } html.a11y-cd .bc-a11y-head, html.a11y-cl .bc-a11y-head, html.a11y-cd .bc-a11y-reset, html.a11y-cl .bc-a11y-reset, html.a11y-cd .bc-a11y-btn, html.a11y-cl .bc-a11y-btn { background-color: #1a1a1a !important; color: #ffffff !important; } html.a11y-cd .bc-a11y-head *, html.a11y-cl .bc-a11y-head * { color: #ffffff !important; } html.a11y-cd .bc-a11y-item, html.a11y-cl .bc-a11y-item { background-color: #f2f0ec !important; } html.a11y-cd .bc-a11y-item[aria-checked="true"] .dot, html.a11y-cl .bc-a11y-item[aria-checked="true"] .dot { background-color: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; } html.a11y-cd .bc-a11y-foot a, html.a11y-cl .bc-a11y-foot a { color: #1a1a1a !important; } html.a11y-cd .bc-a11y-btn svg, html.a11y-cl .bc-a11y-btn svg { fill: #ffffff !important; } html.a11y-cd .bc-a11y-close svg, html.a11y-cl .bc-a11y-close svg, html.a11y-cd .bc-a11y-item .ico svg, html.a11y-cl .bc-a11y-item .ico svg { stroke: currentColor !important; } /* בהדפסה — בלי כפתור ובלי פאנל */ @media print { .bc-a11y-btn, .bc-a11y-panel { display: none !important; } } /* ═══════════ 4. בסיס שכל אתר חייב (לא חלק מהפאנל) ═══════════ אם הבסיס הזה כבר קיים באתר — למחוק מכאן. אם לא — הוא חשוב יותר מהפאנל עצמו. */ /* דילוג לתוכן — תבנית clip תקנית, בלי transition (עם transition נוצר מצב "תקוע גלוי") */ .skip-link { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; inset-inline-start: 1rem; inset-block-start: 0; inline-size: auto; block-size: auto; margin: 0; padding: .7rem 1.25rem; overflow: visible; clip: auto; clip-path: none; z-index: 9999; background: var(--a11y-accent); color: var(--a11y-on-accent); border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); } /* חיווי מיקוד — מופיע רק בניווט מקלדת, לא בלחיצת עכבר */ :focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } #main:focus { outline: none; } /* יעד הדילוג ממוקד תכנותית — בלי טבעת סביב כל התוכן */ /* ═══════════ מאפיית השומרון — התאמות מקומיות (אחרי הקובץ המקורי, בספציפיות זהה ומאוחר יותר) ═══════════ הכפתור: לשונית-צד באמצע הגובה בכל הרוחבים (45vh ב-:root) — לא על סרגל ה-CTA הדביק (73px, z70) ולא על רצועת העוגיות שמעליו (z110). במובייל הקובץ המקורי מחזיר אותו ל-16px מהתחתית — שם יושב הסרגל; מבטלים. הפאנל: הקובץ המקורי מעגן אותו 60px מעל הכפתור — עם כפתור באמצע הגובה הוא יוצא מהמסך למעלה (נמדד חי ב-1440×900: top=-185px, כפתור ה-"+" אינו ניתן ללחיצה). לכן מ-641px הפאנל מעוגן לתחתית עם גובה שתמיד נכנס למסך, ו-z מעל רצועת העוגיות כדי שקישורי האיפוס/ההצהרה/הדיווח בתחתיתו לא יוסתרו. ≤640px נשאר גיליון-תחתון (הכלל המקורי). */ :root { --a11y-z: 115; } /* עוגיות 110 < כפתור 115 < פאנל 116 < טוסט 120 < לייטבוקס 130 */ @media (min-width: 641px) { .bc-a11y-panel { inset-block-end: 16px; max-block-size: min(920px, calc(100dvh - 32px)); } /* התוכן המלא ~900px — במסך גבוה בלי גלילה */ } @media (max-width: 960px) { .bc-a11y-btn { inset-inline-start: 10px; inset-block-end: var(--a11y-offset-block); } }