/** * Accessibility Profile — трансформації сторінки за профілями. * Кожен профіль вмикається класом на (напр. body.ap11y-vision). * Селектори віджета (.ap11y-panel, .ap11y-toggle) навмисно не змінюються. */ /* Спільна змінна масштабу шрифта — використовується кількома профілями. */ :root { --ap11y-scale: 1; } /* ------------------------------------------------------------------ */ /* 1. Слабкий зір — збільшення тексту, більший курсор, вищий контраст */ /* ------------------------------------------------------------------ */ body.ap11y-vision { --ap11y-scale: 1.25; } body.ap11y-vision p, body.ap11y-vision li, body.ap11y-vision a, body.ap11y-vision span, body.ap11y-vision td, body.ap11y-vision th, body.ap11y-vision label, body.ap11y-vision input, body.ap11y-vision button, body.ap11y-vision h1, body.ap11y-vision h2, body.ap11y-vision h3, body.ap11y-vision h4, body.ap11y-vision h5, body.ap11y-vision h6 { font-size: calc(1em * var(--ap11y-scale)) !important; line-height: 1.6 !important; } body.ap11y-vision :not(.ap11y-panel *) { letter-spacing: .01em; } body.ap11y-vision:not(.ap11y-panel) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M6 2 34 20 21 22 28 34 24 36 17 24 6 32Z'/%3E%3C/svg%3E") 4 2, auto; } /* ------------------------------------------------------------------ */ /* 2. Дислексія — читабельний шрифт, міжлітерний/міжрядковий інтервал */ /* ------------------------------------------------------------------ */ body.ap11y-dyslexia p, body.ap11y-dyslexia li, body.ap11y-dyslexia a, body.ap11y-dyslexia span, body.ap11y-dyslexia td, body.ap11y-dyslexia th, body.ap11y-dyslexia label, body.ap11y-dyslexia h1, body.ap11y-dyslexia h2, body.ap11y-dyslexia h3, body.ap11y-dyslexia h4, body.ap11y-dyslexia h5, body.ap11y-dyslexia h6 { font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Tahoma, sans-serif !important; letter-spacing: .08em !important; word-spacing: .16em !important; line-height: 1.8 !important; text-align: start !important; } body.ap11y-dyslexia p { max-width: 70ch; } /* ------------------------------------------------------------------ */ /* 3. Дальтонізм — підсилення контрасту й розрізнення кольорів */ /* Використовуємо SVG-фільтр (див. widget.js) + підкреслення посилань. */ /* ------------------------------------------------------------------ */ body.ap11y-colorblind:not(.ap11y-panel) { filter: url("#ap11y-daltonize"); } body.ap11y-colorblind a { text-decoration: underline !important; } /* ------------------------------------------------------------------ */ /* 4. РДУГ — маска читання / зменшення відволікань */ /* ------------------------------------------------------------------ */ body.ap11y-adhd .ap11y-reading-mask { display: block; } /* Приглушення яскравих банерів та реклами під час фокусу */ body.ap11y-adhd [class*="banner"], body.ap11y-adhd [class*="promo"], body.ap11y-adhd [class*="slider"], body.ap11y-adhd aside { filter: grayscale(.4) opacity(.85); } .ap11y-reading-mask { display: none; position: fixed; inset-inline: 0; height: 100vh; top: 0; z-index: 99990; pointer-events: none; } .ap11y-reading-mask::before, .ap11y-reading-mask::after { content: ""; position: absolute; inset-inline: 0; background: rgba(0, 0, 0, .55); } .ap11y-reading-mask::before { top: 0; height: var(--ap11y-mask-top, 0px); } .ap11y-reading-mask::after { bottom: 0; height: var(--ap11y-mask-bottom, 0px); } /* ------------------------------------------------------------------ */ /* 5. Епілепсія — зупинка анімацій, безпечні кольори */ /* ------------------------------------------------------------------ */ body.ap11y-epilepsy *:not(.ap11y-panel):not(.ap11y-panel *) { animation: none !important; transition: none !important; scroll-behavior: auto !important; } body.ap11y-epilepsy video, body.ap11y-epilepsy .video, body.ap11y-epilepsy [class*="autoplay"] { filter: grayscale(.15) brightness(.95); } body.ap11y-epilepsy img[src$=".gif"] { visibility: hidden; position: relative; } /* ------------------------------------------------------------------ */ /* 6. Когнітивні — підсвітка посилань і заголовків, напрямна читання */ /* ------------------------------------------------------------------ */ body.ap11y-cognitive a:not(.ap11y-card):not(.ap11y-close):not(.ap11y-toggle) { background: #fff6bf !important; color: #1a1a1a !important; box-shadow: 0 0 0 2px #f2c200; text-decoration: underline !important; } body.ap11y-cognitive h1, body.ap11y-cognitive h2, body.ap11y-cognitive h3 { outline: 2px dashed #1046b4; outline-offset: 4px; } body.ap11y-cognitive p, body.ap11y-cognitive li { max-width: 65ch; } .ap11y-reading-guide { display: none; position: fixed; inset-inline: 0; height: 44px; z-index: 99991; pointer-events: none; border-top: 2px solid rgba(16, 70, 180, .7); border-bottom: 2px solid rgba(16, 70, 180, .7); background: rgba(16, 70, 180, .08); } body.ap11y-cognitive .ap11y-reading-guide { display: block; } /* ------------------------------------------------------------------ */ /* 7. Моторика — більші клікабельні зони, чіткий фокус */ /* ------------------------------------------------------------------ */ body.ap11y-motor a, body.ap11y-motor button:not(.ap11y-close), body.ap11y-motor input[type="checkbox"], body.ap11y-motor input[type="radio"], body.ap11y-motor [role="button"] { min-height: 44px !important; min-width: 44px !important; padding: 10px 14px !important; } body.ap11y-motor a { display: inline-block; } body.ap11y-motor *:focus { outline: 4px solid #1046b4 !important; outline-offset: 2px !important; } /* Прибираємо hover-меню, що зникають — примусово тримаємо відкритими за фокусом */ body.ap11y-motor :focus-within > ul, body.ap11y-motor :focus-within > .submenu { display: block !important; } /* ------------------------------------------------------------------ */ /* 8. Літній вік — комбінований профіль: більший текст + контраст */ /* ------------------------------------------------------------------ */ body.ap11y-elderly { --ap11y-scale: 1.2; } body.ap11y-elderly p, body.ap11y-elderly li, body.ap11y-elderly a, body.ap11y-elderly span, body.ap11y-elderly td, body.ap11y-elderly th, body.ap11y-elderly label, body.ap11y-elderly input, body.ap11y-elderly button, body.ap11y-elderly h1, body.ap11y-elderly h2, body.ap11y-elderly h3, body.ap11y-elderly h4, body.ap11y-elderly h5, body.ap11y-elderly h6 { font-size: calc(1em * var(--ap11y-scale)) !important; line-height: 1.7 !important; } body.ap11y-elderly a:not(.ap11y-card) { text-decoration: underline !important; font-weight: 600; } body.ap11y-elderly *:focus { outline: 3px solid #1046b4 !important; outline-offset: 2px; } body.ap11y-elderly:not(.ap11y-panel) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M6 2 34 20 21 22 28 34 24 36 17 24 6 32Z'/%3E%3C/svg%3E") 4 2, auto; } /* Повага до системного налаштування «зменшити рух» — не чіпаємо віджет */ @media (prefers-reduced-motion: reduce) { body:not(.ap11y-panel) *:not(.ap11y-panel *) { animation-duration: .001ms !important; transition-duration: .001ms !important; } }