/* ========================================================== Accessibility Widget — תקן IS 5568 / WCAG 2.0 AA ========================================================== - כפתור צף (♿) שפותח פאנל אפשרויות - מצבי תצוגה: גודל טקסט, ניגודיות גבוהה, הדגשת קישורים, הדגשת פוקוס, עצירת אנימציות - הגדרות נשמרות ב-localStorage - מקלדת תקפה (Tab, Enter, Esc) ========================================================== */ /* === Skip-to-content link (חובה לפי WCAG) === */ .a11y-skip-link { position: absolute; top: -50px; right: 8px; z-index: 9999; background: #000; color: #fff; padding: 10px 18px; text-decoration: none; font-weight: 700; border-radius: 6px; transition: top 0.2s; } .a11y-skip-link:focus { top: 8px; outline: 3px solid #ffeb3b; } /* === כפתור צף === */ .a11y-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9998; width: 56px; height: 56px; border-radius: 50%; background: #1565c0; /* כחול נגישות סטנדרטי */ color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.25); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 28px; transition: transform 0.2s, box-shadow 0.2s; } .a11y-toggle:hover, .a11y-toggle:focus { transform: scale(1.08); outline: 3px solid #ffeb3b; outline-offset: 2px; } /* === פאנל הגדרות === */ .a11y-panel { position: fixed; bottom: 92px; right: 24px; z-index: 9999; width: 320px; max-width: calc(100vw - 48px); background: #fff; border: 2px solid #1565c0; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); padding: 16px; direction: rtl; display: none; max-height: calc(100vh - 120px); overflow-y: auto; } .a11y-panel.is-open { display: block; } .a11y-panel h2 { margin: 0 0 12px 0; font-size: 18px; color: #1565c0; display: flex; justify-content: space-between; align-items: center; } .a11y-panel-close { background: transparent; border: 1px solid #ccc; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 18px; line-height: 1; color: #333; } .a11y-group { border-top: 1px solid #eee; padding: 12px 0; } .a11y-group:first-of-type { border-top: none; padding-top: 4px; } .a11y-group-label { font-weight: 700; margin-bottom: 8px; color: #333; font-size: 14px; } .a11y-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .a11y-btn { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; color: #333; transition: all 0.15s; } .a11y-btn:hover { border-color: #1565c0; background: #e3f2fd; } .a11y-btn[aria-pressed="true"] { background: #1565c0; color: #fff; border-color: #1565c0; } .a11y-reset { margin-top: 12px; width: 100%; padding: 10px; background: #d32f2f; color: #fff; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; } .a11y-reset:hover { background: #b71c1c; } .a11y-statement-link { display: block; text-align: center; margin-top: 12px; padding: 8px; color: #1565c0; text-decoration: underline; font-size: 13px; } /* ========================================================== מצבי נגישות — מופעלים ע"י קלאסים על ========================================================== */ /* גודל טקסט */ html.a11y-text-large { font-size: 118%; } html.a11y-text-xlarge { font-size: 140%; } /* ניגודיות גבוהה — צהוב על שחור (תקן WCAG AAA) */ html.a11y-high-contrast, html.a11y-high-contrast body { background: #000 !important; color: #ffeb3b !important; } html.a11y-high-contrast *, html.a11y-high-contrast *::before, html.a11y-high-contrast *::after { background-color: #000 !important; color: #ffeb3b !important; border-color: #ffeb3b !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-high-contrast a, html.a11y-high-contrast a * { color: #00e5ff !important; text-decoration: underline !important; } html.a11y-high-contrast button, html.a11y-high-contrast input, html.a11y-high-contrast select, html.a11y-high-contrast textarea { border: 2px solid #ffeb3b !important; } html.a11y-high-contrast img { filter: grayscale(100%) contrast(120%); opacity: 0.85; } /* הוויג'ט עצמו לא משתנה בניגודיות גבוהה */ html.a11y-high-contrast .a11y-toggle, html.a11y-high-contrast .a11y-panel, html.a11y-high-contrast .a11y-panel *, html.a11y-high-contrast .a11y-skip-link { background: initial; color: initial; } /* הדגשת קישורים — קו תחתי + צבע ניגוד */ html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; font-weight: 700 !important; } /* הדגשת פוקוס — מסגרת צהובה ברורה למקלדת */ html.a11y-highlight-focus *:focus { outline: 4px solid #ffeb3b !important; outline-offset: 2px !important; box-shadow: 0 0 0 8px rgba(255, 235, 59, 0.4) !important; } /* עצירת אנימציות — לאנשים עם רגישות לתנועה */ html.a11y-no-animations *, html.a11y-no-animations *::before, html.a11y-no-animations *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } /* respect prefers-reduced-motion automatically */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* === מובייל === */ @media (max-width: 600px) { .a11y-toggle { width: 48px; height: 48px; font-size: 24px; bottom: 16px; right: 16px; } .a11y-panel { bottom: 76px; right: 16px; } }