/* Видимая только скринридерам подпись */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Базовые переменные темы; переопределяются классами на */ :root { --a11y-font-scale: 1; --a11y-bg: #ffffff; --a11y-fg: #111111; --a11y-link: #0a58ca; --a11y-link-visited: #6f42c1; --a11y-border: #dcdcdc; --a11y-focus: #1a73e8; } /* Применение масштабирования шрифта ко всему документу */ html { font-size: calc(100% * var(--a11y-font-scale)); background: var(--a11y-bg); color: var(--a11y-fg); } /* Четкий фокус для клавиатурной навигации (WCAG 2.4.7) */ :focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } /* Панель доступности */ .a11y-toolbar { position: fixed; top: 8px; right: 8px; z-index: 9999; display: flex; gap: 8px; align-items: flex-start; font-family: inherit; } .a11y-btn { appearance: none; border: 1px solid var(--a11y-border); background: #ffffff; color: #111111; border-radius: 8px; padding: 8px 12px; font: inherit; line-height: 1; cursor: pointer; } .a11y-btn[aria-pressed="true"] { border-color: var(--a11y-focus); box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); } .a11y-panel { display: grid; gap: 8px; padding: 8px; background: #ffffff; border: 1px solid var(--a11y-border); border-radius: 12px; min-width: 260px; } .a11y-group { display: flex; gap: 6px; flex-wrap: wrap; } /* Схемы: классы на */ /* Обычная */ html.a11y-scheme-default { --a11y-bg: #ffffff; --a11y-fg: #111111; --a11y-link: #0a58ca; --a11y-link-visited: #6f42c1; } /* Сепия: комфорт для длительного чтения */ html.a11y-scheme-sepia { --a11y-bg: #f4ecd8; --a11y-fg: #2e2a24; --a11y-link: #22577a; --a11y-link-visited: #6b3fa0; } /* Темная (prefers-color-scheme учитывается дополнительно JS-ом) */ html.a11y-scheme-dark { --a11y-bg: #0f1113; --a11y-fg: #e6e6e6; --a11y-link: #7aa2ff; --a11y-link-visited: #c792ea; } /* Высокий контраст (WCAG контраст ≥ 7:1 для текста) */ html.a11y-contrast { --a11y-bg: #000000; --a11y-fg: #ffffff; --a11y-link: #00ffff; --a11y-link-visited: #ff00ff; --a11y-border: #ffffff; --a11y-focus: #ffff00; } /* Поддержка изображений и инверсия в высоком контрасте — опционально Лучше НЕ инвертировать контент клиента. Ниже мягкое затемнение медиа. */ html.a11y-contrast img, html.a11y-contrast video, html.a11y-contrast iframe { filter: none; } /* Защита от слома верстки при масштабировании: ограничим максимальные ширины, чтобы текст не выползал */ img, video, iframe { max-width: 100%; height: auto; } /* Минимальная высота кликабельных целей (WCAG 2.5.5 target size AA рекомендации) */ btn, .iconbtn, a.a11y-btn { min-height: 44px; } /* Контейнер панельной кнопки */ #a11y-toggle { font-weight: 700; } /* Слои поверх интерфейса сайта */ .a11y-toolbar, .a11y-panel { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Глаз + панель: позиционируем как дропдаун */ .header__icon--eye { position: relative; } /* Панель должна позиционироваться от глазика */ .header__icon--eye + .a11y-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10000; background: var(--a11y-bg); color: var(--a11y-fg); width: max(260px, 24rem); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } /* Кнопка-глаз — доступный размер клика */ #a11y-toggle { min-height: 44px; min-width: 44px; } .a11y-inline { position: relative; display: inline-flex; align-items: center; } .a11y-inline > .a11y-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10000; width: max(260px, 24rem); background: var(--a11y-bg); color: var(--a11y-fg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .a11y-panel[hidden] { display: none !important; } /* Горизонтальная верхняя панель VI */ .a11y-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10050; background: var(--a11y-bg); color: var(--a11y-fg); border-bottom: 1px solid var(--a11y-border); } .a11y-topbar__row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap; } .a11y-topbar__group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .a11y-topbar__close { margin-left: auto; appearance: none; border: 1px solid var(--a11y-border); background: transparent; color: inherit; border-radius: 8px; padding: 6px 10px; line-height: 1; cursor: pointer; min-height: 36px; } /* Чтобы контент не заезжал под панель */ html.a11y-topbar-open body { padding-top: var(--a11y-topbar-h, 48px); } /* Кнопки панели (берут базовые стили из a11y.css) */ .a11y-topbar .a11y-btn[aria-pressed="true"] { border-color: var(--a11y-focus); box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); } /* На всякий случай, если в проекте кто-то переопределил [hidden] */ .a11y-panel[hidden] { display: none !important; } /* Глобальное включение режима VI для всего сайта */ html.a11y-active { /* базовые переменные уже заданы в :root и классах a11y-scheme-*, a11y-contrast */ } html.a11y-active, html.a11y-active body { background-color: var(--a11y-bg) !important; color: var(--a11y-fg) !important; } /* Цвета ссылок по всему сайту */ html.a11y-active a { color: var(--a11y-link) !important; } html.a11y-active a:visited { color: var(--a11y-link-visited) !important; } /* Поддержка масштаба, если где-то задано font-size в px */ html.a11y-active body { font-size: calc(1rem * var(--a11y-font-scale)) !important; } /* Заставляем основные блоки наследовать тему, а не фиксировать свои цвета */ html.a11y-active header, html.a11y-active footer, html.a11y-active .nav, html.a11y-active .menu, html.a11y-active .hero, html.a11y-active .section, html.a11y-active .container, html.a11y-active .card, html.a11y-active .widget { background-color: inherit !important; color: inherit !important; } /* Не даём верхней панели потеряться под фиксированными шапками */ html.a11y-topbar-open body { padding-top: var(--a11y-topbar-h, 48px); } /* На случай, если где-то переопределён [hidden] */ .a11y-panel[hidden] { display: none !important; } /* === VI: глобально усиливаем масштаб для контента === */ /* База: тело сайта масштабируется от var(--a11y-font-scale) */ html.a11y-active body { font-size: calc(1rem * var(--a11y-font-scale)) !important; line-height: 1.6; } /* Обычный текст должен наследовать размер */ html.a11y-active :where(p, li, a, span, small, strong, em, figcaption, time, address, label) { font-size: 1em !important; } /* Заголовки — относительные от базового (сохраняют иерархию) */ html.a11y-active h1 { font-size: 2em !important; } html.a11y-active h2 { font-size: 1.75em !important; } html.a11y-active h3 { font-size: 1.5em !important; } html.a11y-active h4 { font-size: 1.25em !important; } html.a11y-active h5 { font-size: 1.125em !important; } html.a11y-active h6 { font-size: 1em !important; } /* Крошки, кнопки, меню — тоже пусть наследуют (чтобы не выпадали из масштаба) */ html.a11y-active .breadcrumbs, html.a11y-active .breadcrumbs * { font-size: 1em !important; } html.a11y-active button, html.a11y-active .btn, html.a11y-active .button, html.a11y-active .nav, html.a11y-active .menu { font-size: 1em !important; } /* === VI: целевые фиксы для блока новостей (ваша верстка) === */ html.a11y-active .newsgrid, html.a11y-active .newsgrid__list, html.a11y-active .newscard, html.a11y-active .newscard * { font-size: inherit !important; } /* Если заголовок карточки задан в px — переведём в em */ html.a11y-active .newscard__title { font-size: 1.125em !important; /* ~18px от базового 16px */ line-height: 1.3 !important; } html.a11y-active .newscard__desc, html.a11y-active .newscard__meta { font-size: 1em !important; line-height: 1.5 !important; } /* Иногда превью / дата в новостях заданы очень мелко в px */ html.a11y-active .newscard time, html.a11y-active .newscard .badge, html.a11y-active .newscard .tag { font-size: 0.875em !important; /* ~14px */ } /* На всякий случай — обнуляем «упрямые» inline-стили с font-size:px */ html.a11y-active [style*="font-size"] { font-size: inherit !important; } /* Если есть особые зоны, которые не надо трогать — помечай .no-a11y */ html.a11y-active .no-a11y { all: revert; } /* === VI: новости и афиша — принудительное наследование размера === */ /* Корневые контейнеры деталей и списков (частые классы Bitrix/вашей верстки) */ html.a11y-active .news-detail, html.a11y-active .news-detail *, html.a11y-active .news-list, html.a11y-active .news-list *, html.a11y-active .newsgrid, html.a11y-active .newsgrid *, html.a11y-active .newscard, html.a11y-active .newscard *, html.a11y-active .events, html.a11y-active .events *, html.a11y-active .events-list, html.a11y-active .events-list *, html.a11y-active .event-card, html.a11y-active .event-card *, /* Частые имена шаблонов деталей Bitrix */ html.a11y-active .bx-newsdetail, html.a11y-active .bx-newsdetail *, html.a11y-active .bx-newslist, html.a11y-active .bx-newslist *, /* Текстовые контейнеры из редактора */ html.a11y-active .detail-text, html.a11y-active .detail-text *, html.a11y-active .article, html.a11y-active .article *, html.a11y-active .typography, html.a11y-active .typography *, html.a11y-active .content, html.a11y-active .content *, html.a11y-active .text, html.a11y-active .text *, html.a11y-active .wysiwyg, html.a11y-active .wysiwyg * { font-size: inherit !important; } /* Корням этих блоков задаём именно 1em — чтобы сбить px у родителя */ html.a11y-active .news-detail, html.a11y-active .news-list, html.a11y-active .newsgrid, html.a11y-active .newscard, html.a11y-active .events, html.a11y-active .events-list, html.a11y-active .event-card, html.a11y-active .bx-newsdetail, html.a11y-active .bx-newslist, html.a11y-active .detail-text, html.a11y-active .article, html.a11y-active .typography, html.a11y-active .content, html.a11y-active .text, html.a11y-active .wysiwyg { font-size: 1em !important; } /* Заголовки внутри новостей/афиши — относительные, чтобы тоже росли */ html.a11y-active .news-detail h1, html.a11y-active .events h1 { font-size: 2em !important; } html.a11y-active .news-detail h2, html.a11y-active .events h2 { font-size: 1.75em !important; } html.a11y-active .news-detail h3, html.a11y-active .events h3 { font-size: 1.5em !important; } html.a11y-active .news-detail h4, html.a11y-active .events h4 { font-size: 1.25em !important; } /* Метки/дата/подписи часто слишком мелкие — поднимем до читаемого минимума */ html.a11y-active .newscard__meta, html.a11y-active .newscard time, html.a11y-active .event-card__meta, html.a11y-active .event-card time { font-size: 0.9375em !important; /* ~15px от базового 16px */ line-height: 1.5 !important; } /* Жёсткие inline-стили из редактора: сбиваем на наследование */ html.a11y-active .news-detail [style*="font-size"], html.a11y-active .events [style*="font-size"] { font-size: inherit !important; } /* Поверх всего, чтобы ничто не перекрывало клики */ .a11y-topbar { z-index: 2147483000; /* выше любых локальных оверлеев */ } /* В высоком контрасте никогда не глушим клики поверх панели */ html.a11y-contrast .a11y-topbar, html.a11y-contrast .a11y-topbar * { pointer-events: auto; } /* Если на сайте есть глобальные псевдо-оверлеи на body — обнулим их в контрасте */ html.a11y-contrast body::before, html.a11y-contrast body::after { content: none !important; display: none !important; pointer-events: none !important; }