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