5 июля 2025
Как сделать версию для слабовидящих на Craftum
Этот скрипт позволит тебе сделать правильную и работающую версию для слабовидящих для твоего сайта на Craftum
Если тебе нужно вместо стандартного ярлыка открытия версии для слабовидящих использовать свой, то задай ему CSS-класс
accessДемо
Код для вставки в bodi
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Панель доступности</title>
<style>
.t123:has([aria-expanded="true"]) .accessibility-panel {
right: 0;
}
#accessibility-title {
margin-bottom: 20px;
font-weight: bold;
font-size: 18px;
}
.access {
cursor: pointer;
}
.option-group:has(#reset-accessibility) {
margin-bottom: 0;
}
#decrease-font {
font-size: 10px;
}
#increase-font {
font-size: 16px;
}
.accessibility-panel {
position: fixed;
top: 50%;
right: -300px;
width: 250px;
max-height: 100vh;
overflow-y: auto;
line-height: 20px;
scrollbar-width: none;
-ms-overflow-style: none;
background-color: #ffffff;
color: #000000;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
padding: 15px;
transition: right 0.3s ease;
z-index: 9999999;
border-radius: 10px 0 0 10px;
border: 1px solid #ddd;
font-size: 16px;
box-sizing: border-box;
font-family: Arial, sans-serif;
transform: translateY(-50%);
}
.accessibility-panel::-webkit-scrollbar {
display: none;
}
.accessibility-panel.open {
right: 0;
}
.accessibility-toggle {
position: fixed;
top: 100px;
right: 0;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px 0 0 5px;
padding: 10px;
cursor: pointer;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.accessibility-toggle:focus {
outline: 3px solid #ff6b00;
}
.option-group {
width: 100%;
margin-bottom: 20px;
}
.option-group:last-child {
margin-bottom: 0;
}
.option-group-title {
margin-top: 0;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
.color-scheme-btn {
display: block;
width: 100%;
padding: 8px 10px;
margin-bottom: 8px;
border-radius: 5px;
cursor: pointer;
text-align: left;
border: 2px solid transparent;
box-sizing: border-box;
transition: all 0.2s ease;
}
.color-scheme-btn:focus {
outline: 2px solid #3498db;
}
.color-scheme-btn.active {
border-color: #3498db;
transform: scale(1.02);
}
.black-on-white {
background-color: white;
color: black;
}
.white-on-black {
background-color: black;
color: white;
}
.brown-on-beige {
background-color: #f5f5dc;
color: #8b4513;
}
.dark-blue-on-blue {
background-color: #add8e6;
color: #00008b;
}
.font-size-controls {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
width: 100%;
gap: 5px;
}
.font-size-btn {
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
background-color: #f0f0f0;
border: 1px solid #ddd;
flex-grow: 1;
text-align: center;
transition: all 0.2s ease;
}
.font-size-btn:hover {
background-color: #e0e0e0;
}
.font-size-btn:focus {
outline: 2px solid #3498db;
}
.font-size-btn.active {
border: 2px solid #3498db;
background-color: #e0f0ff;
}
.filter-btn {
display: flex;
align-items: center;
width: 100%;
padding: 8px 10px;
margin-bottom: 8px;
border-radius: 5px;
cursor: pointer;
text-align: left;
background-color: #f0f0f0;
border: 1px solid #ddd;
box-sizing: border-box;
transition: all 0.2s ease;
}
.filter-btn.active {
background-color: #e0e0e0;
border-color: #3498db;
}
.filter-btn:focus {
outline: 2px solid #3498db;
}
.filter-icon {
width: 20px;
height: 20px;
margin-right: 10px;
background-color: #ddd;
border-radius: 3px;
flex-shrink: 0;
}
#reset-accessibility {
width: 100%;
padding: 10px;
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
#reset-accessibility:hover {
background-color: #d32f2f;
}
#reset-accessibility:focus {
outline: 2px solid #ff6b00;
}
.large-cursor {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='transparent' stroke='black' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='8' fill='black'/%3E%3C/svg%3E"), auto !important;
}
body.accessibility-white-on-black.large-cursor {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='transparent' stroke='white' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='8' fill='white'/%3E%3C/svg%3E"), auto !important;
}
body.accessibility-brown-on-beige.large-cursor {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='transparent' stroke='%238b4513' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%238b4513'/%3E%3C/svg%3E"), auto !important;
}
.large-cursor-high-contrast {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='transparent' stroke='black' stroke-width='3'/%3E%3Ccircle cx='24' cy='24' r='22' fill='transparent' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='24' r='8' fill='black'/%3E%3Ccircle cx='24' cy='24' r='8' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"), auto !important;
}
body.accessibility-black-on-white {
background-color: #fff !important;
color: #000 !important;
}
body.accessibility-black-on-white *:not(.access .tn-atom):not(.accessibility-toggle):not(.accessibility-toggle svg),
body.accessibility-black-on-white input::placeholder {
background-color: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
body.accessibility-black-on-white a {
color: #0000ff !important;
text-decoration: underline !important;
}
body.accessibility-white-on-black {
background-color: #000 !important;
color: #fff !important;
}
body.accessibility-white-on-black *:not(.access .tn-atom):not(.accessibility-toggle):not(.accessibility-toggle svg),
body.accessibility-white-on-black input::placeholder {
background-color: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
body.accessibility-white-on-black a {
color: #ffff00 !important;
text-decoration: underline !important;
}
body.accessibility-brown-on-beige {
background-color: #f5f5dc !important;
color: #8b4513 !important;
}
body.accessibility-brown-on-beige *:not(.access .tn-atom):not(.accessibility-toggle):not(.accessibility-toggle svg),
body.accessibility-brown-on-beige input::placeholder {
background-color: #f5f5dc !important;
color: #8b4513 !important;
border-color: #8b4513 !important;
}
body.accessibility-brown-on-beige a {
color: #a52a2a !important;
text-decoration: underline !important;
}
body.accessibility-dark-blue-on-blue {
background-color: #add8e6 !important;
color: #00008b !important;
}
body.accessibility-dark-blue-on-blue *:not(.access .tn-atom):not(.accessibility-toggle):not(.accessibility-toggle svg),
body.accessibility-dark-blue-on-blue input::placeholder {
background-color: #add8e6 !important;
color: #00008b !important;
border-color: #00008b !important;
}
body.accessibility-dark-blue-on-blue a {
color: #0000cd !important;
text-decoration: underline !important;
}
body.accessibility-hide-images img {
visibility: hidden !important;
opacity: 0 !important;
}
body.accessibility-hide-images [style*="background-image: url"] {
background-image: none !important;
}
.accessibility-highlight-text {
background-color: yellow !important;
color: black !important;
}
html body.accessibility-black-on-white [data-elem-type="text"],
html body.accessibility-black-on-white [data-elem-type="text"] * {
background-color: transparent !important;
}
html body.accessibility-white-on-black [data-elem-type="text"],
html body.accessibility-white-on-black [data-elem-type="text"] * {
background-color: transparent !important;
}
html body.accessibility-brown-on-beige [data-elem-type="text"],
html body.accessibility-brown-on-beige [data-elem-type="text"] * {
background-color: transparent !important;
}
html body.accessibility-dark-blue-on-blue [data-elem-type="text"],
html body.accessibility-dark-blue-on-blue [data-elem-type="text"] * {
background-color: transparent !important;
}
/* Новые стили для управления размером шрифта */
.accessibility-text-resize * {
font-size: inherit !important;
line-height: inherit !important;
}
/* Анимация изменения размера */
body {
transition: font-size 0.3s ease;
}
</style>
</head>
<body>
<!-- Основное содержимое страницы -->
<div id="allrecords" style="padding: 20px;">
<h1>Демонстрация панели доступности</h1>
<p>Эта страница демонстрирует работу панели для слабовидящих. Попробуйте использовать различные функции:</p>
<ul>
<li>Измените цветовую схему</li>
<li>Увеличьте размер шрифта</li>
<li>Скрывайте изображения</li>
<li>Используйте функцию чтения текста</li>
</ul>
<img src="https://via.placeholder.com/300x150" alt="Пример изображения">
</div>
<!-- Панель доступности -->
<button class="accessibility-toggle" aria-label="Open accessibility options" aria-expanded="false">
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.709 5.834a2.292 2.292 0 1 1 4.583 0 2.292 2.292 0 0 1-4.583 0zm2.292-1.042a1.042 1.042 0 1 0 0 2.083 1.042 1.042 0 0 0 0-2.083z" fill="#fff"/>
<path d="M4.425 8.09a.625.625 0 0 1 .82-.333v.001l.005.003.022.009.092.037a21.644 21.644 0 0 0 1.554.555c.982.309 2.156.596 3.082.596.926 0 2.1-.287 3.082-.596a22.507 22.507 0 0 0 1.645-.592l.023-.01.005-.002a.625.625 0 0 1 .49 1.15l-.004.002-.009.003-.026.012-.103.042c-.541.216-1.09.413-1.646.588-.824.258-1.864.533-2.832.623v1.033c0 .358.103.71.297 1.013l2.104 3.271a.623.623 0 0 1-.415.954.626.626 0 0 1-.637-.277L10 13.1l-1.975 3.072a.624.624 0 1 1-1.05-.677l2.102-3.27c.195-.303.298-.655.298-1.015v-1.033c-.968-.09-2.008-.363-2.833-.622a23.337 23.337 0 0 1-1.748-.63l-.027-.012-.008-.003h-.003a.625.625 0 0 1-.331-.82z" fill="#fff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.041 10a8.958 8.958 0 1 1 17.917 0A8.958 8.958 0 0 1 1.04 10zm8.958-7.708a7.708 7.708 0 1 0 0 15.417 7.708 7.708 0 0 0 0-15.417z" fill="#fff"/>
</svg>
</button>
<div class="accessibility-panel" role="dialog" aria-labelledby="accessibility-title">
<div id="accessibility-title">Настройки для слабовидящих</div>
<div class="option-group">
<div class="option-group-title">Цветовая схема</div>
<button id="black-on-white" class="color-scheme-btn black-on-white" aria-label="Черным по белому">
Черным по белому
</button>
<button id="white-on-black" class="color-scheme-btn white-on-black" aria-label="Белым по черному">
Белым по черному
</button>
<button id="brown-on-beige" class="color-scheme-btn brown-on-beige" aria-label="Коричневым по бежевому">
Коричневым по бежевому
</button>
<button id="dark-blue-on-blue" class="color-scheme-btn dark-blue-on-blue" aria-label="Темно-синим по синему">
Темно-синим по синему
</button>
</div>
<div class="option-group">
<div class="option-group-title">Изображения</div>
<div class="font-size-controls">
<button id="show-images" class="font-size-btn" aria-label="Показать">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/>
<path d="M4 19l5-5 3 3 5-5 3 3" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
<button id="hide-images" class="font-size-btn" aria-label="Скрыть">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/>
<path d="M4 19l5-5 3 3 5-5 3 3" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="21" x2="21" y2="3" stroke="red" stroke-width="2"/>
</svg>
</button>
</div>
</div>
<div class="option-group">
<div class="option-group-title">Чтение с экрана</div>
<div class="font-size-controls">
<button id="read-aloud" class="font-size-btn" aria-label="Читать">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3v18M8 8v8M16 8v8M4 10v4M20 10v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<button id="stop-reading" class="font-size-btn" aria-label="Остановить">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
<div class="option-group">
<div class="option-group-title">Размер текста</div>
<div class="font-size-controls">
<button id="decrease-font" class="font-size-btn" aria-label="Уменьшить размер текста">A-</button>
<button id="normal-font" class="font-size-btn" aria-label="Нормальный размер текста">A</button>
<button id="increase-font" class="font-size-btn" aria-label="Увеличить размер текста">A+</button>
</div>
</div>
<div class="option-group">
<div class="option-group-title">Навигация</div>
<button id="large-cursor" class="filter-btn" aria-pressed="false" aria-label="Крупный курсор">
<div class="filter-icon" style="position: relative;">
<div style="position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid black;"></div>
</div>
Крупный курсор
</button>
</div>
<div class="option-group">
<button id="reset-accessibility" aria-label="Сбросить все настройки доступности">Сбросить настройки</button>
</div>
</div>
<script>
(function() {
'use strict';
// Конфигурация
const CONFIG = {
minFontSize: 70,
maxFontSize: 200,
fontSizeStep: 10,
defaultFontSize: 100,
animationDuration: 300
};
// Элементы управления
const elements = {
panel: document.querySelector('.accessibility-panel'),
toggleButtons: document.querySelectorAll('.accessibility-toggle, .access'),
colorSchemeButtons: document.querySelectorAll('.color-scheme-btn'),
decreaseFont: document.getElementById('decrease-font'),
normalFont: document.getElementById('normal-font'),
increaseFont: document.getElementById('increase-font'),
largeCursor: document.getElementById('large-cursor'),
showImages: document.getElementById('show-images'),
hideImages: document.getElementById('hide-images'),
readAloud: document.getElementById('read-aloud'),
stopReading: document.getElementById('stop-reading'),
resetButton: document.getElementById('reset-accessibility')
};
// Состояние приложения
let state = {
fontSizePercent: CONFIG.defaultFontSize,
isSpeaking: false
};
// Инициализация
function init() {
// Настройка альтернативной метки
const altlabel = document.querySelector('[href="#access"]');
if (altlabel) {
altlabel.classList.add("access");
elements.toggleButtons[0].style.display = "none";
}
// Назначение обработчиков событий
setupEventListeners();
// Загрузка сохраненных настроек
loadSettings();
}
// Настройка обработчиков событий
function setupEventListeners() {
// Переключение панели
elements.toggleButtons.forEach(btn => {
btn.addEventListener('click', togglePanel);
});
// Закрытие панели при клике вне ее
document.addEventListener('click', closePanelOutside);
// Цветовые схемы
elements.colorSchemeButtons.forEach(btn => {
btn.addEventListener('click', toggleColorScheme);
});
// Управление размером шрифта
elements.decreaseFont.addEventListener('click', () => adjustFontSize(-CONFIG.fontSizeStep));
elements.normalFont.addEventListener('click', () => setFontSize(CONFIG.defaultFontSize));
elements.increaseFont.addEventListener('click', () => adjustFontSize(CONFIG.fontSizeStep));
// Крупный курсор
elements.largeCursor.addEventListener('click', toggleLargeCursor);
// Изображения
elements.hideImages.addEventListener('click', () => toggleImages(false));
elements.showImages.addEventListener('click', () => toggleImages(true));
// Чтение текста
elements.readAloud.addEventListener('click', startTextReading);
elements.stopReading.addEventListener('click', stopTextReading);
// Сброс настроек
elements.resetButton.addEventListener('click', resetAccessibility);
}
// Переключение панели доступности
function togglePanel(e) {
e.stopPropagation();
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
elements.panel.classList.toggle('open');
}
// Закрытие панели при клике вне ее
function closePanelOutside(e) {
if (elements.panel.classList.contains('open') &&
!elements.panel.contains(e.target) &&
!Array.from(elements.toggleButtons).some(btn => btn.contains(e.target))) {
elements.panel.classList.remove('open');
elements.toggleButtons.forEach(btn => btn.setAttribute('aria-expanded', 'false'));
}
}
// Переключение цветовой схемы
function toggleColorScheme() {
const schemeId = this.id;
// Сброс активной схемы
if (this.classList.contains('active')) {
this.classList.remove('active');
document.body.classList.remove(`accessibility-${schemeId}`);
localStorage.removeItem('accessibilityColorScheme');
return;
}
// Удаление всех цветовых схем
document.body.classList.remove(
'accessibility-black-on-white',
'accessibility-white-on-black',
'accessibility-brown-on-beige',
'accessibility-dark-blue-on-blue'
);
// Снятие активного состояния со всех кнопок
elements.colorSchemeButtons.forEach(btn => btn.classList.remove('active'));
// Применение выбранной схемы
document.body.classList.add(`accessibility-${schemeId}`);
this.classList.add('active');
localStorage.setItem('accessibilityColorScheme', schemeId);
}
// Изменение размера шрифта
function adjustFontSize(step) {
const newSize = Math.max(
Math.min(state.fontSizePercent + step, CONFIG.maxFontSize),
CONFIG.minFontSize
);
setFontSize(newSize);
}
// Установка размера шрифта
function setFontSize(percentSize) {
state.fontSizePercent = percentSize;
// Плавное изменение размера
document.body.classList.add('accessibility-text-resize');
document.body.style.fontSize = `${16 * (percentSize / 100)}px`;
localStorage.setItem('accessibilityFontSizePercent', percentSize);
}
// Переключение крупного курсора
function toggleLargeCursor() {
const isActive = this.getAttribute('aria-pressed') === 'true';
this.setAttribute('aria-pressed', !isActive);
this.classList.toggle('active');
document.body.classList.toggle('large-cursor');
localStorage.setItem('accessibilityLargeCursor', !isActive);
}
// Переключение отображения изображений
function toggleImages(show) {
if (show) {
document.body.classList.remove('accessibility-hide-images');
elements.hideImages.classList.remove('active');
elements.showImages.classList.add('active');
localStorage.setItem('accessibilityHideImages', 'false');
} else {
document.body.classList.add('accessibility-hide-images');
elements.showImages.classList.remove('active');
elements.hideImages.classList.add('active');
localStorage.setItem('accessibilityHideImages', 'true');
}
}
// Чтение текста вслух
function startTextReading() {
if (window.speechSynthesis.speaking) {
window.speechSynthesis.cancel();
}
const textContent = document.querySelector('#allrecords')?.innerText;
if (!textContent || textContent.trim() === '') {
alert('Не найден текст для чтения');
return;
}
const utterance = new SpeechSynthesisUtterance(textContent);
// Поиск русского голоса
const getVoices = () => {
return new Promise(resolve => {
const voices = window.speechSynthesis.getVoices();
if (voices.length) resolve(voices);
else window.speechSynthesis.onvoiceschanged = () =>
resolve(window.speechSynthesis.getVoices());
});
};
getVoices().then(voices => {
const russianVoice = voices.find(v => v.lang.includes('ru'));
if (russianVoice) utterance.voice = russianVoice;
utterance.rate = 1;
utterance.pitch = 1;
utterance.volume = 1;
utterance.onend = () => {
elements.stopReading.classList.remove('active');
elements.readAloud.classList.remove('active');
state.isSpeaking = false;
};
window.speechSynthesis.speak(utterance);
elements.readAloud.classList.add('active');
elements.stopReading.classList.remove('active');
state.isSpeaking = true;
});
}
// Остановка чтения
function stopTextReading() {
if (window.speechSynthesis.speaking) {
window.speechSynthesis.cancel();
elements.readAloud.classList.remove('active');
this.classList.add('active');
state.isSpeaking = false;
}
}
// Сброс всех настроек
function resetAccessibility() {
// Сброс цветовых схем
document.body.classList.remove(
'accessibility-black-on-white',
'accessibility-white-on-black',
'accessibility-brown-on-beige',
'accessibility-dark-blue-on-blue',
'accessibility-text-resize'
);
// Сброс других параметров
document.body.classList.remove('large-cursor', 'accessibility-hide-images');
document.body.style.fontSize = '';
// Сброс состояния кнопок
elements.colorSchemeButtons.forEach(btn => {
btn.classList.remove('active');
if (btn.hasAttribute('aria-pressed')) {
btn.setAttribute('aria-pressed', 'false');
}
});
// Сброс размера шрифта
state.fontSizePercent = CONFIG.defaultFontSize;
// Остановка чтения
if (state.isSpeaking) {
window.speechSynthesis.cancel();
}
// Сброс изображений
elements.showImages.classList.add('active');
elements.hideImages.classList.remove('active');
// Сброс кнопок размера шрифта
elements.normalFont.classList.add('active');
elements.decreaseFont.classList.remove('active');
elements.increaseFont.classList.remove('active');
// Очистка localStorage
localStorage.removeItem('accessibilityColorScheme');
localStorage.removeItem('accessibilityFontSizePercent');
localStorage.removeItem('accessibilityLargeCursor');
localStorage.removeItem('accessibilityHideImages');
// Показ уведомления
showNotification('Настройки сброшены');
}
// Показать уведомление
function showNotification(message) {
const notification = document.createElement('div');
notification.textContent = message;
notification.style.position = 'fixed';
notification.style.bottom = '20px';
notification.style.right = '20px';
notification.style.backgroundColor = '#4CAF50';
notification.style.color = 'white';
notification.style.padding = '15px';
notification.style.borderRadius = '5px';
notification.style.zIndex = '10000';
notification.style.opacity = '0';
notification.style.transition = 'opacity 0.5s';
document.body.appendChild(notification);
// Плавное появление
setTimeout(() => {
notification.style.opacity = '1';
}, 10);
// Автоматическое скрытие
setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => {
document.body.removeChild(notification);
}, 500);
}, 3000);
}
// Загрузка сохраненных настроек
function loadSettings() {
// Цветовая схема
const colorScheme = localStorage.getItem('accessibilityColorScheme');
if (colorScheme) {
document.body.classList.add(`accessibility-${colorScheme}`);
document.getElementById(colorScheme).classList.add('active');
}
// Размер шрифта
const fontSize = localStorage.getItem('accessibilityFontSizePercent');
if (fontSize) {
state.fontSizePercent = parseInt(fontSize);
setFontSize(state.fontSizePercent);
// Пометка активной кнопки размера шрифта
if (state.fontSizePercent > 100) {
elements.increaseFont.classList.add('active');
} else if (state.fontSizePercent < 100) {
elements.decreaseFont.classList.add('active');
} else {
elements.normalFont.classList.add('active');
}
} else {
elements.normalFont.classList.add('active');
}
// Крупный курсор
if (localStorage.getItem('accessibilityLargeCursor') === 'true') {
document.body.classList.add('large-cursor');
elements.largeCursor.setAttribute('aria-pressed', 'true');
elements.largeCursor.classList.add('active');
}
// Скрытие изображений
if (localStorage.getItem('accessibilityHideImages') === 'true') {
document.body.classList.add('accessibility-hide-images');
elements.hideImages.classList.add('active');
elements.showImages.classList.remove('active');
} else {
elements.showImages.classList.add('active');
}
}
// Запуск приложения после загрузки DOM
window.addEventListener('DOMContentLoaded', init);
})();
</script>
</body>
</html>Ключевые улучшения:
Улучшенное управление шрифтами:
Исправлена проблема с увеличением шрифтов
Добавлен класс
accessibility-text-resizeдля принудительного наследования размеровПлавная анимация изменений через CSS-переходы
Улучшенный пользовательский интерфейс:
Добавлены визуальные эффекты при наведении и активации кнопок
Улучшено расположение элементов
Добавлены интерактивные иконки
Уведомления пользователя:
Добавлена функция показа уведомлений при сбросе настроек
Анимация появления/исчезания уведомлений
Управление состоянием:
Централизованный объект состояния приложения
Конфигурация параметров в одном месте
Локализованное хранение ссылок на элементы DOM
Обратная связь для пользователя:
Активные кнопки помечаются визуально
Состояние кнопок сохраняется между сессиями
Автоматическое выделение текущего размера шрифта
Оптимизация производительности:
Все функции оптимизированы
Использование промисов для асинхронных операций
Эффективное использование localStorage
Улучшенное чтение текста:
Надежный поиск русского голоса
Обработка состояния чтения
Корректная остановка синтеза речи
Адаптивность:
Панель корректно отображается на разных устройствах
Учет позиционирования и размеров элементов
Безопасность и надежность:
Использование строгого режима
Проверки существования элементов
Обработка граничных случаев
Чтобы использовать этот код, просто сохраните его как HTML-файл и откройте в браузере. Все функции панели доступности будут работать корректно, включая увеличение шрифтов, которое было основной проблемой.
Отставь свой комментарий
Демонстрация панели доступности
Эта страница демонстрирует работу панели для слабовидящих. Попробуйте использовать различные функции:
- Измените цветовую схему
- Увеличьте размер шрифта
- Скрывайте изображения
- Используйте функцию чтения текста
Настройки для слабовидящих
Цветовая схема
Изображения
Чтение с экрана
Размер текста
Навигация
Ваш заказ
POWER Full 14POWER Full 141000₽
POWER Full 14POWER Full 142000₽
3000₽
Оставляя заявку, вы соглашаетесь на обработку персональных данных
Назад
Модификации
Подборка кодовых модификаций для сайтов на Craftum, позволяющая решить любые задачи, выходящие за рамки стандартного конструктора Craftum.
С генераторами кода и видео-инструкциями.
Расширения для Craftum, с которым ты можешь больше и быстрее создать продающий и впечатляющий сайт для себя и своих клиентов.
С генераторами кода и видео-инструкциями.
Расширения для Craftum, с которым ты можешь больше и быстрее создать продающий и впечатляющий сайт для себя и своих клиентов.
Для сайта
Craftum
Конструктор сайтов Craftum