https://wiki.bellingham-heritage.org.uk:443/index.php?action=history&feed=atom&title=EdiaWiki%3AGadget-bhc-accessibility.css 2026-05-24T20:07:49Z Revision history for this page on the wiki MediaWiki 1.45.1 https://wiki.bellingham-heritage.org.uk:443/index.php?title=EdiaWiki:Gadget-bhc-accessibility.css&diff=1472&oldid=prev 2026-01-25T18:03:56Z

<p>Created page with &quot;<span class="autocomment">========================================================= Accessibility launcher + menu (bottom-right icon) =========================================================: </span> :root{ --a11y-bg: #111827; <span class="autocomment">dark slate: </span> --a11y-border: #374151; --a11y-fg: #ffffff; --a11y-focus: #FFBF47; <span class="autocomment">strong focus outline: </span> --a11y-link-underline: #1D4ED8; <span class="autocomment">underline color (non-contrast mode): </span> --a11y-menu-width: 340px; } /* Floating accessibility icon...&quot;</p> <p><b>New page</b></p><div>/* =========================================================<br /> Accessibility launcher + menu (bottom-right icon)<br /> ========================================================= */<br /> :root{<br /> --a11y-bg: #111827; /* dark slate */<br /> --a11y-border: #374151;<br /> --a11y-fg: #ffffff;<br /> --a11y-focus: #FFBF47; /* strong focus outline */<br /> --a11y-link-underline: #1D4ED8; /* underline color (non-contrast mode) */<br /> --a11y-menu-width: 340px;<br /> }<br /> <br /> /* Floating accessibility icon button */<br /> .a11y-toggle{<br /> position: fixed;<br /> right: 16px;<br /> bottom: 16px;<br /> z-index: 10001;<br /> <br /> width: 56px;<br /> height: 56px;<br /> border-radius: 50%;<br /> <br /> background: #005FCC; /* accessibility blue */<br /> border: 2px solid #ffffff;<br /> color: #ffffff;<br /> <br /> display: inline-flex;<br /> align-items: center;<br /> justify-content: center;<br /> <br /> box-shadow: 0 10px 24px rgba(0,0,0,0.25);<br /> cursor: pointer;<br /> }<br /> .a11y-toggle:hover{ background:#0047A6; }<br /> .a11y-toggle:focus-visible{<br /> outline: 3px solid var(--a11y-focus);<br /> outline-offset: 3px;<br /> }<br /> .a11y-toggle svg{<br /> width: 34px;<br /> height: 34px;<br /> fill: currentColor;<br /> }<br /> <br /> /* Menu panel (opens above the button) */<br /> .a11y-panel{<br /> position: fixed;<br /> right: 14px;<br /> bottom: 76px;<br /> z-index: 10000;<br /> <br /> width: var(--a11y-menu-width);<br /> max-width: calc(100vw - 28px);<br /> <br /> background: var(--a11y-bg);<br /> border: 1px solid var(--a11y-border);<br /> color: var(--a11y-fg);<br /> border-radius: 16px;<br /> padding: 12px;<br /> <br /> box-shadow: 0 14px 40px rgba(0,0,0,0.28);<br /> }<br /> .a11y-panel[hidden]{ display:none !important; }<br /> <br /> /* Panel header row */<br /> .a11y-head{<br /> display:flex;<br /> align-items:center;<br /> justify-content: space-between;<br /> gap: 10px;<br /> margin: 0 0 10px 0;<br /> }<br /> .a11y-head h2{<br /> font-size: 16px;<br /> margin: 0;<br /> }<br /> .a11y-help{<br /> display:inline-flex;<br /> align-items:center;<br /> justify-content:center;<br /> width: 28px;<br /> height: 28px;<br /> border-radius: 999px;<br /> border: 1px solid #ffffff;<br /> color: #111827;<br /> background: #ffffff;<br /> text-decoration: none;<br /> font-weight: 900;<br /> line-height: 1;<br /> }<br /> .a11y-help:hover{ background:#F3F4F6; }<br /> .a11y-help:focus-visible{<br /> outline: 3px solid var(--a11y-focus);<br /> outline-offset: 2px;<br /> }<br /> <br /> /* Button rows */<br /> .a11y-row{<br /> display:flex;<br /> gap: 8px;<br /> flex-wrap: wrap;<br /> align-items:center;<br /> margin-bottom: 10px;<br /> }<br /> .a11y-btn{<br /> appearance:none;<br /> border: 1px solid #D1D5DB;<br /> background:#FFFFFF;<br /> color:#111827;<br /> <br /> padding: 8px 10px;<br /> border-radius: 999px;<br /> font-size: 14px;<br /> line-height: 1;<br /> font-weight: 800;<br /> <br /> cursor: pointer;<br /> }<br /> .a11y-btn:hover{ background:#F3F4F6; }<br /> .a11y-btn:active{ transform: translateY(1px); }<br /> .a11y-btn:focus-visible{<br /> outline: 3px solid var(--a11y-focus);<br /> outline-offset: 2px;<br /> }<br /> /* Pressed state */<br /> .a11y-btn[aria-pressed=&quot;true&quot;]{<br /> background:#111827;<br /> color:#ffffff;<br /> border-color:#ffffff;<br /> }<br /> <br /> /* Small explanatory text */<br /> .a11y-hint{<br /> font-size: 24px;<br /> color: #D1D5DB;<br /> margin-top: 6px;<br /> line-height: 1.4;<br /> }<br /> <br /> /* Visually hidden helper (for aria-live etc) */<br /> .a11y-sr{<br /> position:absolute !important;<br /> width:1px !important;<br /> height:1px !important;<br /> padding:0 !important;<br /> margin:-1px !important;<br /> overflow:hidden !important;<br /> clip:rect(0,0,0,0) !important;<br /> white-space:nowrap !important;<br /> border:0 !important;<br /> }<br /> <br /> /* =========================================================<br /> Features applied to page via classes / inline font sizing<br /> ========================================================= */<br /> <br /> <br /> /* High contrast: black + yellow (kiosk-friendly) */<br /> body.a11y-contrast{<br /> background:#000 !important;<br /> color:#FFD400 !important;<br /> <br /> /* make the toolbar/panel inherit the same scheme */<br /> --a11y-bg: #000000;<br /> --a11y-border: rgba(255, 212, 0, 0.75);<br /> --a11y-fg: #FFD400;<br /> --a11y-focus: #FFD400;<br /> --a11y-link-underline: #FFD400;<br /> }<br /> <br /> /* Links */<br /> body.a11y-contrast a{<br /> color:#FFD400 !important;<br /> }<br /> <br /> /* Make common button-like elements readable in contrast mode */<br /> body.a11y-contrast button,<br /> body.a11y-contrast .menu-btn,<br /> body.a11y-contrast .back-btn,<br /> body.a11y-contrast .a11y-btn{<br /> color:#FFD400 !important;<br /> border-color: rgba(255, 212, 0, 0.75) !important;<br /> }<br /> <br /> /* Keep dark surfaces dark */<br /> body.a11y-contrast .a11y-panel,<br /> body.a11y-contrast .a11y-toggle{<br /> background:#000 !important;<br /> }<br /> <br /> /* =========================================================<br /> Contrast mode: ensure A11y panel buttons remain readable<br /> - Default .a11y-btn has white background; in contrast mode we force black/yellow.<br /> ========================================================= */<br /> body.a11y-contrast .a11y-hint{<br /> color:#FFD400 !important;<br /> }<br /> <br /> body.a11y-contrast .a11y-btn{<br /> background:#000000 !important;<br /> color:#FFD400 !important;<br /> border:2px solid rgba(255, 212, 0, 0.85) !important;<br /> }<br /> <br /> body.a11y-contrast .a11y-btn:hover{<br /> background:#111111 !important;<br /> }<br /> <br /> body.a11y-contrast .a11y-btn[aria-pressed=&quot;true&quot;]{<br /> background:#000000 !important;<br /> color:#FFD400 !important;<br /> border-color:#FFD400 !important;<br /> }<br /> /* Progress bar in contrast mode */<br /> body.a11y-contrast .progress-wrap{<br /> background: rgba(255, 212, 0, 0.18) !important;<br /> border-color: rgba(255, 212, 0, 0.45) !important;<br /> }<br /> body.a11y-contrast .progress-bar{<br /> background: rgba(255, 212, 0, 0.85) !important;<br /> }<br /> <br /> /* Underline links */<br /> body.a11y-underline-links a{<br /> text-decoration-line: underline !important;<br /> text-decoration-thickness: 3px;<br /> text-underline-offset: 3px;<br /> }<br /> body.a11y-underline-links:not(.a11y-contrast) a{<br /> text-decoration-color: var(--a11y-link-underline) !important;<br /> }<br /> <br /> /* Text spacing presets */<br /> body.a11y-spacing-plus{<br /> line-height: 1.8 !important;<br /> letter-spacing: 0.06em !important;<br /> word-spacing: 0.16em !important;<br /> }<br /> body.a11y-spacing-minus{<br /> line-height: 1.45 !important;<br /> letter-spacing: 0.01em !important;<br /> word-spacing: 0.02em !important;<br /> }<br /> <br /> /* Large cursor (two options) — relative URLs so /churches works */<br /> body.a11y-cursor-white,<br /> body.a11y-cursor-white *{<br /> cursor: url(&quot;./cursors/large-arrow-white-64.png&quot;) 8 8, auto !important;<br /> }<br /> body.a11y-cursor-yellow,<br /> body.a11y-cursor-yellow *{<br /> cursor: url(&quot;./cursors/large-arrow-yellow-64.png&quot;) 8 8, auto !important;<br /> }<br /> <br /> /* Reading ruler overlay — JS positions #a11y-ruler */<br /> #a11y-ruler{<br /> position: fixed;<br /> left: 0;<br /> top: 0;<br /> height: 22px;<br /> width: 100vw;<br /> z-index: 9999;<br /> pointer-events: none;<br /> <br /> background: linear-gradient(<br /> to bottom,<br /> #C8FF00 0%,<br /> #C8FF00 40%,<br /> #000000 40%,<br /> #000000 60%,<br /> #C8FF00 60%,<br /> #C8FF00 100%<br /> );<br /> <br /> opacity: 0.95;<br /> border-top: 1px solid rgba(0,0,0,0.35);<br /> border-bottom: 1px solid rgba(0,0,0,0.35);<br /> }<br /> #a11y-ruler[hidden]{ display:none !important; }<br /> <br /> /* Skip link: visible only when focused */<br /> .skip-link {<br /> position: absolute;<br /> left: 12px;<br /> top: 12px;<br /> z-index: 11000;<br /> padding: 10px 14px;<br /> border-radius: 8px;<br /> background: #111827;<br /> color: #fff;<br /> text-decoration: none;<br /> transform: translateY(-150%);<br /> transition: transform 0.15s ease;<br /> border: 2px solid #FFBF47;<br /> }<br /> <br /> .skip-link:focus,<br /> .skip-link:focus-visible {<br /> transform: translateY(0);<br /> outline: none;<br /> }<br /> <br /> /* =========================================================<br /> Kiosk integration helpers<br /> ========================================================= */<br /> <br /> /* Underline links: also underline key BUTTON labels (kiosk uses buttons not &lt;a&gt;) */<br /> body.a11y-underline-links .menu-btn .title,<br /> body.a11y-underline-links #ov-back,<br /> body.a11y-underline-links .ov-back{<br /> text-decoration-line: underline !important;<br /> text-decoration-thickness: 3px;<br /> text-underline-offset: 3px;<br /> }<br /> <br /> /* Text spacing: make the effect visible on fixed-height menu buttons */<br /> body.a11y-spacing-plus .menu-btn{<br /> height: auto !important;<br /> min-height: 96px;<br /> padding-top: 0.6rem;<br /> padding-bottom: 0.6rem;<br /> }<br /> body.a11y-spacing-plus .menu-btn .title{<br /> line-height: 1.35;<br /> }<br /> <br /> <br /> /* =========================================================<br /> Contrast coverage fixes (black + yellow)<br /> - Menu title + instruction<br /> - Menu scrollbar styling<br /> - Slide overlay title/duration/caption/credit<br /> ========================================================= */<br /> <br /> body.a11y-contrast .menu-screen &gt; h2,<br /> body.a11y-contrast .menu-screen h2,<br /> body.a11y-contrast .menu-footer,<br /> body.a11y-contrast .menu-footer *{<br /> color: #FFD400 !important;<br /> }<br /> <br /> /* Ensure menu buttons remain readable in contrast mode */<br /> body.a11y-contrast .menu-btn .title,<br /> body.a11y-contrast .menu-btn .duration{<br /> color:#FFD400 !important;<br /> }<br /> <br /> /* Scrollbar styling: Firefox + WebKit */<br /> body.a11y-contrast .menu-scroll{<br /> scrollbar-color: #FFD400 #000000; /* thumb track */<br /> scrollbar-width: thin;<br /> }<br /> body.a11y-contrast .menu-scroll::-webkit-scrollbar{<br /> width: 12px;<br /> }<br /> body.a11y-contrast .menu-scroll::-webkit-scrollbar-track{<br /> background: #000000;<br /> }<br /> body.a11y-contrast .menu-scroll::-webkit-scrollbar-thumb{<br /> background: rgba(255,212,0,0.65);<br /> border: 2px solid #000000;<br /> border-radius: 999px;<br /> }<br /> body.a11y-contrast .menu-scroll::-webkit-scrollbar-thumb:hover{<br /> background: rgba(255,212,0,0.85);<br /> }<br /> <br /> /* Slide overlay text (title/duration/caption/credit) */<br /> body.a11y-contrast .track-controls,<br /> body.a11y-contrast .track-controls *{<br /> color:#FFD400 !important;<br /> }<br /> body.a11y-contrast #ov-title,<br /> body.a11y-contrast #ov-duration,<br /> body.a11y-contrast #ov-caption,<br /> body.a11y-contrast #ov-credit,<br /> body.a11y-contrast .ov-title,<br /> body.a11y-contrast .ov-duration,<br /> body.a11y-contrast .ov-caption,<br /> body.a11y-contrast .ov-credit{<br /> color:#FFD400 !important;<br /> }<br /> <br /> /* Tap-to-enable sound button in contrast mode */<br /> body.a11y-contrast #audio-gate button{<br /> background: #000 !important;<br /> color: #FFD400 !important;<br /> border: 3px solid #FFD400 !important;<br /> }<br /> <br /> body.a11y-contrast #audio-gate button:hover{<br /> background: #111 !important;<br /> }<br /> <br /> <br /> /* Force progress bar yellow in contrast mode (override kiosk base CSS) */<br /> body.a11y-contrast .progress-bar{<br /> background: rgba(255, 212, 0, 0.90) !important;<br /> }<br /> body.a11y-contrast .progress-wrap{<br /> background: rgba(255, 212, 0, 0.18) !important;<br /> border-color: rgba(255, 212, 0, 0.55) !important;<br /> }<br /> <br /> /* ===============================<br /> High-contrast: progress bar<br /> =============================== */<br /> <br /> /* Progress bar track */<br /> body.a11y-contrast .progress-wrap {<br /> background: #000 !important;<br /> border-color: #ff0 !important;<br /> }<br /> <br /> /* Progress bar fill */<br /> body.a11y-contrast .progress-bar {<br /> background-color: #ff0 !important;<br /> }<br /> <br /> body.a11y-contrast .ov-bar {<br /> background-color: #ff0 !important;<br /> }</div>

Steve