/* ============================================================ Accessibility toolbar — portable CSS Zero edits needed. Everything site-specific lives in a11y-themes.css instead. Load AFTER your own stylesheet (it overrides nothing, but the text-size and spacing rules need to win over your base type). ============================================================ */ /* ─── Base utilities ─────────────────────────────────────────────── Include these only if your site does not already define them. Both are prerequisites: the toolbar mounts after .skip-link and announces through an .sr-only live region. ───────────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { /* Physical left + physical translate. Centring is not a directional idea, and mixing a LOGICAL inset with a PHYSICAL transform only happens to centre in RTL — in LTR it puts the link half off-screen. */ /* Hiding is translateY(-100%), never a fixed top: -100px. Once the font-scale control below can grow this link's own height past 100px (at ~1.85x it starts poking a few px into view on every page), a fixed offset stops covering it. A percentage is relative to the element's OWN box, so it always fully hides regardless of how large the text gets. */ position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); z-index: 200; padding: .8rem 1.3rem; background: #1E5AAB; color: #FFF; border-radius: 0 0 8px 8px; font-weight: 600; transition: transform .2s ease; } .skip-link:focus { transform: translate(-50%, 0); } :root.a11y-motion-off .skip-link { transition: none; } /* ─── Text size & spacing ────────────────────────────────────────── A percentage on the root multiplies the visitor's OWN browser default font size rather than clobbering it — never calc(16px * ...). This is deliberately the same mechanism as the browser's own text-only zoom. For it to behave identically to that zoom, your stylesheet needs zero px font-size declarations and zero em-based breakpoints. Verify at font-scale 2.0 (= 200%) before calling a site done. Five steps: 1 / 1.25 / 1.5 / 1.75 / 2. ───────────────────────────────────────────────────────────────── */ html { font-size: calc(100% * var(--a11y-font-scale, 1)); } /* WCAG 1.4.12 Text Spacing — independent of font-scale above, and of the individual line-height/letter-spacing values set on specific components. Applied at body level so anything WITHOUT its own explicit value inherits it; components that set their own (buttons, nav, cards) are deliberately left alone, since the criterion targets body copy, not UI chrome. Three steps (0/1/2): the top step meets or exceeds the criterion's actual minimums (1.5x line height, 0.12em letter-spacing, 0.16em word-spacing). EDIT the 1.68 below to your own base line-height. */ body { line-height: calc(1.68 + .5 * var(--a11y-space-step, 0)); letter-spacing: calc(.06em * var(--a11y-space-step, 0)); word-spacing: calc(.08em * var(--a11y-space-step, 0)); } p, li { margin-block: calc(.5em * var(--a11y-space-step, 0)); } /* ─── Motion ─────────────────────────────────────────────────────── The toolbar's "stop animations" toggle puts .a11y-motion-off on . Your own components each need a matching override — there is no way to write that generically without also killing motion the site depends on for layout. Pattern, per animated component: :root.a11y-motion-off .my-carousel { animation: none; } :root.a11y-motion-off .my-card:hover { transform: none; } Anything JS-driven should consult window.A11Y.motionOff() and listen for the 'motionchange' event instead. ───────────────────────────────────────────────────────────────── */ :root.a11y-motion-off { scroll-behavior: auto; } /* A blanket kill is deliberately NOT shipped on by default. Setting animation-duration to ~0 globally snaps every animation to its END state, which breaks anything whose layout depends on being mid-animation — a marquee jumps to its wrapped position and shows the duplicated track in the wrong place; a slider leaves its handle parked off the rail. The origin site hit exactly this and writes per-component overrides instead. Uncomment only as a temporary safety net on a site with no marquees or transform-driven layout, and replace it with real per-component rules before shipping. :root.a11y-motion-off *, :root.a11y-motion-off *::before, :root.a11y-motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } */ /* ─── Reading aids ─────────────────────────────────────────────────── */ :root.a11y-headings h1, :root.a11y-headings h2, :root.a11y-headings h3 { outline: 3px solid #1E5AAB; outline-offset: 4px; border-radius: 4px; background: rgb(30 90 171 / .08); } :root.a11y-links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* Arial, NOT a dyslexia-specific face like OpenDyslexic: those ship with no Hebrew glyphs at all, so on a Hebrew-first site the browser just falls back to the default font anyway — a control that visibly does nothing while claiming to help. Arial is also the face Israeli accessibility guidance conventionally names, and has full Hebrew coverage. Overrides both the body font and any display face on headings, since a heading in a display face is exactly the kind of thing this control exists to flatten. !important is deliberate and should be the only one in your CSS: components that set font-family with two classes would out-specificity a plain :root.a11y-font-readable * rule regardless of source order. A user-facing "make everything readable" toggle failing silently on exactly the elements most likely to need it is worse than this one escape hatch. */ :root.a11y-font-readable, :root.a11y-font-readable * { font-family: Arial, Helvetica, sans-serif !important; } /* Reading guide: a bar that tracks the pointer, driven by JS via transform (never top — that would force layout on every mouse move). Off on touch, where there is no hovering pointer to follow. */ .a11y-guide-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; background: #1E5AAB; z-index: 155; pointer-events: none; transform: translateY(-100%); } @media (pointer: coarse) { .a11y-guide-bar { display: none; } } /* Custom cursors. Capped by browsers around 128px and ignored entirely on touch, hence no coarse-pointer guard needed — touch devices already fall back to `auto` on their own. */ :root.a11y-cursor-big, :root.a11y-cursor-big * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 10-6 2 4 7-3 2-4-7-5 4z' fill='black' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 4 4, auto; } :root.a11y-cursor-dark, :root.a11y-cursor-dark * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 10-6 2 4 7-3 2-4-7-5 4z' fill='%23000' stroke='%23FFD400' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto; } /* Keyboard-nav mode: promotes the site's :focus-visible ring to plain :focus, larger, and reserves scroll room above focused elements so a sticky header never covers whatever Tab just moved focus to. --a11y-sticky-h: set this to your sticky header's height (or 0px). */ :root.a11y-kbd :where(a, button, input, select, textarea, [tabindex]):focus { outline: 3px solid #1E5AAB; outline-offset: 3px; border-radius: 4px; } :root.a11y-kbd :where(a, button, input, select, textarea, [tabindex]) { scroll-margin-block: calc(var(--a11y-sticky-h, 0px) + 12px); } /* ─── Toolbar UI ─────────────────────────────────────────────────── Colours here are LITERAL, not your palette tokens, on purpose: those are exactly what the five themes reassign, and a panel that inverts along with the page it controls becomes unreadable the moment someone actually uses it. Standard accessibility blue (#1E5AAB), not your brand colour — it is blue on nearly every Israeli site that has one of these, and blending it into the brand palette makes it harder to find, which is the opposite of the point. ───────────────────────────────────────────────────────────────── */ .a11y-trigger { position: fixed; inset-inline-start: max(1rem, env(safe-area-inset-left, 0px)); inset-block-end: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 150; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; background: #1E5AAB; color: #FFF; border: 2px solid #FFF; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / .3); } .a11y-trigger svg { width: 28px; height: 28px; fill: #FFF; } .a11y-trigger:focus-visible { outline: 3px solid #1E5AAB; outline-offset: 3px; } .a11y-panel { position: fixed; inset-inline-start: max(1rem, env(safe-area-inset-left, 0px)); inset-block-end: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 58px); z-index: 160; width: min(92vw, 360px); max-height: min(80dvh, 640px); overflow-y: auto; overflow-x: hidden; background: #FFF; color: #1A1A1A; border: 1px solid #CCC; border-radius: 14px; box-shadow: 0 20px 50px rgb(0 0 0 / .35); padding: 1rem; } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; } .a11y-panel__title { margin: 0; font-size: 1.05rem; font-weight: 700; } .a11y-panel__close { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid #CCC; border-radius: 50%; cursor: pointer; } .a11y-panel__close svg { width: 16px; height: 16px; fill: #1A1A1A; } .a11y-group { margin-bottom: 1rem; } .a11y-group__title { margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #555; } .a11y-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } .a11y-btn { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-height: 44px; padding: .5rem .4rem; font: inherit; font-size: .82rem; text-align: center; line-height: 1.2; background: #F4F4F4; color: #1A1A1A; border: 1px solid #DDD; border-radius: 10px; cursor: pointer; } .a11y-btn[aria-pressed="true"] { background: #1E5AAB; color: #FFF; border-color: #1E5AAB; } .a11y-btn__key { font-size: .68rem; opacity: .65; } .a11y-steps { display: flex; align-items: center; gap: .5rem; } .a11y-steps button { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; background: #F4F4F4; color: #1A1A1A; border: 1px solid #DDD; border-radius: 8px; cursor: pointer; } .a11y-steps__value { flex: 1; text-align: center; font-size: .85rem; } .a11y-hint { font-size: .76rem; color: #666; margin: .3rem 0 0; } .a11y-panel__foot { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #EEE; } .a11y-panel__foot a, .a11y-panel__foot button { display: block; width: 100%; padding: .6rem; text-align: center; font: inherit; font-size: .88rem; font-weight: 600; text-decoration: none; background: #F4F4F4; color: #1A1A1A; border: 1px solid #DDD; border-radius: 10px; cursor: pointer; }