/* ============================================================================= Версия для слабовидящих — ГОСТ Р 52872-2019, приказ Рособрнадзора № 1493 (п. 21) ============================================================================= Как устроено: режим включается атрибутами на , а не отдельной копией сайта. Отдельная версия по адресу /special/ неизбежно расходится с основной по содержанию — это самая частая претензия при проверке. data-a11y-scheme = off | wb | bw | bb | br | gb data-a11y-font = normal | large | xlarge | xxlarge data-a11y-kerning = normal | medium | large data-a11y-images = on | off Атрибуты выставляются синхронным скриптом в из cookie — до первой отрисовки, иначе виден переход со светлой схемы на выбранную. Схемы соответствуют требуемому ГОСТом набору: wb — чёрным по белому bw — белым по чёрному bb — тёмно-синим по голубому br — коричневым по бежевому gb — зелёным по тёмно-коричневому ========================================================================== */ /* --- Цветовые схемы ------------------------------------------------------ */ html[data-a11y-scheme="wb"] { --a11y-bg: #ffffff; --a11y-fg: #000000; --a11y-accent: #000000; --a11y-line: #000000; } html[data-a11y-scheme="bw"] { --a11y-bg: #000000; --a11y-fg: #ffffff; --a11y-accent: #ffff00; --a11y-line: #ffffff; } html[data-a11y-scheme="bb"] { --a11y-bg: #9dd1ff; --a11y-fg: #063462; --a11y-accent: #063462; --a11y-line: #063462; } html[data-a11y-scheme="br"] { --a11y-bg: #f7f3d6; --a11y-fg: #4d4b43; --a11y-accent: #4d4b43; --a11y-line: #4d4b43; } html[data-a11y-scheme="gb"] { --a11y-bg: #3b2716; --a11y-fg: #a9e44d; --a11y-accent: #a9e44d; --a11y-line: #a9e44d; } /* --- Применение схемы ---------------------------------------------------- */ /* Селектор :not([data-a11y-scheme="off"]) вместе с наличием --a11y-bg: правила включаются только когда схема реально выбрана. */ html[data-a11y-scheme]:not([data-a11y-scheme="off"]) body, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-header, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-footer, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-topbar, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-navbar, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-hero, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-card, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-section, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-section--alt, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .modal-content, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .dropdown-menu, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .accordion-item, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .accordion-button, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .list-group-item, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .form-control, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .form-select { background: var(--a11y-bg) !important; color: var(--a11y-fg) !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y-scheme]:not([data-a11y-scheme="off"]) h1, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) h2, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) h3, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) h4, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) h5, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) h6, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) p, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) li, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) td, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) th, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) span, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) address, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) label, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-footer__title, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-footer__tagline, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-card__meta, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .text-muted { color: var(--a11y-fg) !important; } /* Ссылки обязаны отличаться от текста не только цветом — подчёркивание остаётся единственным надёжным признаком при монохромных схемах. */ html[data-a11y-scheme]:not([data-a11y-scheme="off"]) a { color: var(--a11y-accent) !important; text-decoration: underline !important; text-underline-offset: .2em; } html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .btn { background: var(--a11y-bg) !important; color: var(--a11y-accent) !important; border: 2px solid var(--a11y-line) !important; border-radius: 0; } html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .btn:hover, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .btn:focus-visible { background: var(--a11y-accent) !important; color: var(--a11y-bg) !important; } html[data-a11y-scheme]:not([data-a11y-scheme="off"]) table, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) th, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) td, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .brit-card, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .form-control, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) .form-select { border-color: var(--a11y-line) !important; } html[data-a11y-scheme]:not([data-a11y-scheme="off"]) :focus-visible { outline: 3px solid var(--a11y-accent) !important; outline-offset: 2px; } /* Декоративные градиенты и тени в режиме доступности только мешают. */ html[data-a11y-scheme]:not([data-a11y-scheme="off"]) * { background-image: none !important; box-shadow: none !important; } /* Анимации выключаются: движение затрудняет чтение при слабом зрении. */ html[data-a11y-scheme]:not([data-a11y-scheme="off"]) *, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) *::before, html[data-a11y-scheme]:not([data-a11y-scheme="off"]) *::after { transition: none !important; animation: none !important; } /* --- Размер шрифта ------------------------------------------------------- */ /* Масштабируем корневой font-size: вся вёрстка на rem/clamp тянется за ним, поэтому ничего не ломается и не наезжает. */ html[data-a11y-font="large"] { font-size: 125%; } html[data-a11y-font="xlarge"] { font-size: 150%; } html[data-a11y-font="xxlarge"] { font-size: 200%; } /* При крупном шрифте фиксированная шапка съедает экран — открепляем. */ html[data-a11y-font="xlarge"] .brit-navbar, html[data-a11y-font="xxlarge"] .brit-navbar { position: static !important; } /* --- Межбуквенный интервал ----------------------------------------------- */ html[data-a11y-kerning="medium"] body { letter-spacing: .09em; word-spacing: .12em; } html[data-a11y-kerning="large"] body { letter-spacing: .18em; word-spacing: .24em; } /* --- Отключение изображений ---------------------------------------------- */ /* Изображение заменяется своим alt: контент не теряется, а просто становится текстом. Пустой alt (декоративные) — просто прячем. */ html[data-a11y-images="off"] img { display: inline-block; width: auto !important; height: auto !important; max-width: 100%; border: 1px dashed var(--a11y-line, currentColor); padding: .2em .4em; font-size: .9em; } html[data-a11y-images="off"] img[alt=""] { display: none; } html[data-a11y-images="off"] svg:not(.brit-a11y-panel svg) { display: none; } html[data-a11y-images="off"] [style*="background-image"] { background-image: none !important; } /* ============================================================================= Панель настроек ========================================================================== */ .brit-a11y-panel { display: none; padding: 1rem 0; border-bottom: 2px solid var(--a11y-line, #1a2733); background: var(--a11y-bg, #f5f8fa); color: var(--a11y-fg, #1a2733); } .brit-a11y-panel[data-open="true"] { display: block; } .brit-a11y-panel__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; } .brit-a11y-panel__label { font-weight: 700; min-width: 12rem; margin: 0; } .brit-a11y-panel__btn { min-width: 2.75rem; min-height: 2.75rem; /* цель нажатия не меньше 44 px */ padding: .35rem .8rem; border: 2px solid currentColor; background: transparent; color: inherit; font-weight: 600; cursor: pointer; } .brit-a11y-panel__btn[aria-pressed="true"] { background: currentColor; } .brit-a11y-panel__btn[aria-pressed="true"] > span { /* Инвертируем только текст: фон уже залит currentColor. */ filter: invert(1); mix-blend-mode: difference; } .brit-a11y-panel__swatch { width: 2.75rem; height: 2.75rem; border: 2px solid currentColor; cursor: pointer; font-weight: 700; font-size: .8rem; } .brit-a11y-panel__swatch--wb { background: #fff; color: #000; } .brit-a11y-panel__swatch--bw { background: #000; color: #fff; } .brit-a11y-panel__swatch--bb { background: #9dd1ff; color: #063462; } .brit-a11y-panel__swatch--br { background: #f7f3d6; color: #4d4b43; } .brit-a11y-panel__swatch--gb { background: #3b2716; color: #a9e44d; } .brit-a11y-panel__swatch[aria-pressed="true"] { outline: 4px solid #f2a900; outline-offset: 2px; } @media print { .brit-a11y-panel { display: none !important; } }