/* Accessibility Basics. Every fix hangs off a token in , set by the settings screen; every toolbar choice off one set by a11y.js. */ .a11yb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ─── Skip link ─── */ .a11yb-skip { position: absolute; left: 8px; top: -100px; z-index: 100000; padding: 10px 16px; background: #fff; color: #111; font: 600 16px/1.2 system-ui, sans-serif; text-decoration: underline; border: 2px solid #111; border-radius: 4px; } .a11yb-skip:focus { top: 8px; } /* ─── Visible keyboard focus ─── */ [data-a11yb~="a11yb-focus"] :focus-visible { outline: 3px solid var(--a11yb-focus, #1a5fb4) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px #fff !important; } /* ─── Reduced motion: the OS setting, or the toolbar's pause ─── */ @media (prefers-reduced-motion: reduce) { [data-a11yb~="a11yb-reduced-motion"] *, [data-a11yb~="a11yb-reduced-motion"] *::before, [data-a11yb~="a11yb-reduced-motion"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } html.a11yb-t-motion *, html.a11yb-t-motion *::before, html.a11yb-t-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* ─── Links in running text must not rely on colour alone (WCAG 1.4.1) ─── */ [data-a11yb~="a11yb-underline"] :is(.entry-content, .wp-block-post-content, .page-content, .post-content, article) :is(p, li, td, dd, blockquote) a:not(.wp-element-button):not([class*="button"]) { text-decoration: underline; text-underline-offset: .15em; } html.a11yb-t-links a:not(.a11yb-bar a) { text-decoration: underline !important; text-underline-offset: .15em; } /* ─── Toolbar choices ─── */ html.a11yb-t-size body { zoom: 1.2; } html.a11yb-t-font body, html.a11yb-t-font body :not(svg):not(svg *) { font-family: Verdana, "Atkinson Hyperlegible", system-ui, sans-serif !important; letter-spacing: .02em !important; word-spacing: .08em !important; } html.a11yb-t-contrast body, html.a11yb-t-contrast body *:not(img):not(video):not(svg):not(svg *):not(.a11yb-bar):not(.a11yb-bar *) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; } /* Same :not() chain as above plus the type selector, so this one wins. */ html.a11yb-t-contrast body a:not(img):not(video):not(svg):not(svg *):not(.a11yb-bar):not(.a11yb-bar *) { color: #0000c8 !important; text-decoration: underline !important; } /* ─── The toolbar itself ─── */ .a11yb-bar { position: fixed; bottom: 16px; z-index: 99999; font: 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; zoom: 1; } .a11yb-bar[hidden] { display: none; } .a11yb-bar--left { left: 16px; } .a11yb-bar--right { right: 16px; } /* The page's zoom would shrink the toolbar back; undo it so the button stays put. */ html.a11yb-t-size .a11yb-bar { zoom: calc(1 / 1.2); } .a11yb-bar__toggle { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #1a4f8a; color: #fff; fill: currentColor; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .a11yb-bar__toggle:hover { background: #123a66; } .a11yb-bar__panel { position: absolute; bottom: 58px; width: 220px; padding: 12px; background: #fff; color: #111; border: 1px solid #767676; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); } .a11yb-bar--left .a11yb-bar__panel { left: 0; } .a11yb-bar--right .a11yb-bar__panel { right: 0; } .a11yb-bar__panel[hidden] { display: none; } .a11yb-bar__title { margin: 0 0 8px; font-weight: 700; font-size: 15px; } .a11yb-bar__opt, .a11yb-bar__reset { display: block; width: 100%; margin: 0 0 6px; padding: 9px 10px; font: inherit; text-align: left; color: #111; background: #f1f3f5; border: 1px solid #c4c8cc; border-radius: 6px; cursor: pointer; } .a11yb-bar__opt[aria-pressed="true"] { color: #fff; background: #1a4f8a; border-color: #1a4f8a; } .a11yb-bar__opt[aria-pressed="true"]::after { content: " ✓"; } .a11yb-bar__reset { text-align: center; background: #fff; } .a11yb-bar__note { margin: 4px 0 0; font-size: 12px; color: #555; } .a11yb-bar :focus-visible { outline: 3px solid #1a5fb4 !important; outline-offset: 2px; } @media print { .a11yb-bar, .a11yb-skip { display: none !important; } }