|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Accessibility Widget</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3b82f6', |
|
|
secondary: '#1e40af', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc', |
|
|
highcontrast: { |
|
|
text: '#000000', |
|
|
bg: '#FFFFFF', |
|
|
accent: '#FF0000' |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
dyslexic: ['OpenDyslexic', 'Comic Sans MS', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
|
|
|
.dyslexic-font { |
|
|
font-family: 'Comic Sans MS', sans-serif !important; |
|
|
} |
|
|
|
|
|
.high-contrast { |
|
|
background-color: #FFFFFF !important; |
|
|
color: #000000 !important; |
|
|
border-color: #000000 !important; |
|
|
} |
|
|
|
|
|
.high-contrast * { |
|
|
background-color: #FFFFFF !important; |
|
|
color: #000000 !important; |
|
|
border-color: #000000 !important; |
|
|
} |
|
|
|
|
|
.high-contrast-accent { |
|
|
color: #FF0000 !important; |
|
|
} |
|
|
|
|
|
.large-cursor * { |
|
|
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23000'/%3E%3C/svg%3E") 16 16, pointer !important; |
|
|
} |
|
|
|
|
|
.reduced-motion * { |
|
|
transition: none !important; |
|
|
animation: none !important; |
|
|
} |
|
|
|
|
|
.highlight-text p, .highlight-text a { |
|
|
background-color: rgba(255, 255, 0, 0.3) !important; |
|
|
padding: 2px 4px !important; |
|
|
border-radius: 2px !important; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.accessibility-panel { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
:focus-visible { |
|
|
outline: 3px solid #3b82f6 !important; |
|
|
outline-offset: 2px !important; |
|
|
} |
|
|
|
|
|
.high-contrast :focus-visible { |
|
|
outline: 3px solid #FF0000 !important; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-900 min-h-screen transition-colors duration-300"> |
|
|
|
|
|
<a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:bg-white focus:text-black focus:px-4 focus:py-2 focus:z-50 focus:rounded focus:font-bold"> |
|
|
Skip to content |
|
|
</a> |
|
|
|
|
|
|
|
|
<main id="main-content" class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-3xl font-bold mb-6">Website Content</h1> |
|
|
<article class="prose max-w-none"> |
|
|
<p class="mb-4">This is a demonstration of the accessibility widget functionality. The widget provides various tools to make the website more accessible to all users.</p> |
|
|
|
|
|
<h2 class="text-2xl font-semibold mt-6 mb-4">About Accessibility</h2> |
|
|
<p class="mb-4">Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:</p> |
|
|
<ul class="list-disc pl-6 mb-4"> |
|
|
<li class="mb-2">Perceive, understand, navigate, and interact with the web</li> |
|
|
<li class="mb-2">Contribute to the web</li> |
|
|
<li class="mb-2">Have equal access and equal opportunity to information</li> |
|
|
</ul> |
|
|
|
|
|
<h2 class="text-2xl font-semibold mt-6 mb-4">Why It Matters</h2> |
|
|
<p class="mb-4">Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.</p> |
|
|
|
|
|
<p class="mb-4">Try out the accessibility widget by clicking the button in the bottom right corner of the screen. You can adjust text size, contrast, and other settings to suit your needs.</p> |
|
|
|
|
|
<h3 class="text-xl font-semibold mt-6 mb-4">Sample Interactive Elements</h3> |
|
|
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded mr-4 mb-4 transition-colors"> |
|
|
Example Button |
|
|
</button> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 underline mr-4 mb-4 inline-block">Example Link</a> |
|
|
<input type="text" placeholder="Example input" class="border px-3 py-2 rounded mb-4"> |
|
|
</article> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-40"> |
|
|
|
|
|
<button id="accessibility-toggle" |
|
|
aria-label="Open accessibility panel" |
|
|
aria-expanded="false" |
|
|
class="bg-blue-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 pulse-animation transition-all"> |
|
|
<i class="fas fa-universal-access text-2xl"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="accessibility-panel" |
|
|
role="dialog" |
|
|
aria-labelledby="accessibility-panel-title" |
|
|
aria-modal="true" |
|
|
class="accessibility-panel hidden bg-white rounded-lg shadow-xl w-80 max-h-[90vh] overflow-y-auto absolute bottom-20 right-0 border border-gray-200"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 id="accessibility-panel-title" class="text-xl font-bold">Accessibility Settings</h2> |
|
|
<button id="close-panel" aria-label="Close accessibility panel" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<section> |
|
|
<h3 class="font-semibold mb-2">Text Size</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<button id="decrease-text" aria-label="Decrease text size" class="bg-gray-200 hover:bg-gray-300 rounded-full w-8 h-8 flex items-center justify-center"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<div class="flex-1 bg-gray-100 rounded-full h-2"> |
|
|
<div id="text-size-indicator" class="bg-blue-500 h-2 rounded-full w-1/2"></div> |
|
|
</div> |
|
|
<button id="increase-text" aria-label="Increase text size" class="bg-gray-200 hover:bg-gray-300 rounded-full w-8 h-8 flex items-center justify-center"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h3 class="font-semibold mb-2">Font Style</h3> |
|
|
<button id="toggle-dyslexic" aria-pressed="false" class="flex items-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded"> |
|
|
<i class="fas fa-font"></i> |
|
|
<span>Dyslexia-Friendly Font</span> |
|
|
<span id="dyslexic-status" class="ml-auto text-sm text-gray-500">Off</span> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h3 class="font-semibold mb-2">Color & Contrast</h3> |
|
|
<div class="space-y-2"> |
|
|
<button id="toggle-contrast" aria-pressed="false" class="w-full flex items-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded"> |
|
|
<i class="fas fa-adjust"></i> |
|
|
<span>High Contrast Mode</span> |
|
|
<span id="contrast-status" class="ml-auto text-sm text-gray-500">Off</span> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h3 class="font-semibold mb-2">Visual Aids</h3> |
|
|
<div class="space-y-2"> |
|
|
<button id="toggle-cursor" aria-pressed="false" class="w-full flex items-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded"> |
|
|
<i class="fas fa-mouse-pointer"></i> |
|
|
<span>Large Cursor</span> |
|
|
<span id="cursor-status" class="ml-auto text-sm text-gray-500">Off</span> |
|
|
</button> |
|
|
<button id="toggle-highlight" aria-pressed="false" class="w-full flex items-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded"> |
|
|
<i class="fas fa-highlighter"></i> |
|
|
<span>Text Highlighting</span> |
|
|
<span id="highlight-status" class="ml-auto text-sm text-gray-500">Off</span> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h3 class="font-semibold mb-2">Motion</h3> |
|
|
<button id="toggle-motion" aria-pressed="false" class="w-full flex items-center space-x-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded"> |
|
|
<i class="fas fa-running"></i> |
|
|
<span>Reduce Motion</span> |
|
|
<span id="motion-status" class="ml-auto text-sm text-gray-500">Off</span> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<h3 class="font-semibold mb-2">Screen Reader</h3> |
|
|
<button id="screen-reader-helper" class="w-full flex items-center space-x-2 px-3 py-2 bg-blue-100 hover:bg-blue-200 rounded text-blue-800"> |
|
|
<i class="fas fa-assistive-listening-systems"></i> |
|
|
<span>Read Important Content</span> |
|
|
</button> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="pt-2 border-t border-gray-200"> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="reset-settings" class="flex-1 px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded"> |
|
|
Reset Settings |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="aria-live-region" aria-live="polite" class="sr-only"></div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const toggleBtn = document.getElementById('accessibility-toggle'); |
|
|
const panel = document.getElementById('accessibility-panel'); |
|
|
const closeBtn = document.getElementById('close-panel'); |
|
|
const increaseTextBtn = document.getElementById('increase-text'); |
|
|
const decreaseTextBtn = document.getElementById('decrease-text'); |
|
|
const textSizeIndicator = document.getElementById('text-size-indicator'); |
|
|
const toggleDyslexicBtn = document.getElementById('toggle-dyslexic'); |
|
|
const dyslexicStatus = document.getElementById('dyslexic-status'); |
|
|
const toggleContrastBtn = document.getElementById('toggle-contrast'); |
|
|
const contrastStatus = document.getElementById('contrast-status'); |
|
|
const toggleCursorBtn = document.getElementById('toggle-cursor'); |
|
|
const cursorStatus = document.getElementById('cursor-status'); |
|
|
const toggleHighlightBtn = document.getElementById('toggle-highlight'); |
|
|
const highlightStatus = document.getElementById('highlight-status'); |
|
|
const toggleMotionBtn = document.getElementById('toggle-motion'); |
|
|
const motionStatus = document.getElementById('motion-status'); |
|
|
const screenReaderHelper = document.getElementById('screen-reader-helper'); |
|
|
const resetBtn = document.getElementById('reset-settings'); |
|
|
const ariaLiveRegion = document.getElementById('aria-live-region'); |
|
|
|
|
|
|
|
|
let textSize = 1; |
|
|
let isDyslexicFont = false; |
|
|
let isHighContrast = false; |
|
|
let isLargeCursor = false; |
|
|
let isHighlightText = false; |
|
|
let isReducedMotion = false; |
|
|
let isPanelOpen = false; |
|
|
|
|
|
|
|
|
function loadSettings() { |
|
|
|
|
|
const savedTextSize = localStorage.getItem('accessibilityTextSize'); |
|
|
if (savedTextSize) { |
|
|
textSize = parseFloat(savedTextSize); |
|
|
updateTextSize(); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('accessibilityDyslexicFont') === 'true') { |
|
|
isDyslexicFont = true; |
|
|
document.documentElement.classList.add('dyslexic-font'); |
|
|
dyslexicStatus.textContent = 'On'; |
|
|
toggleDyslexicBtn.setAttribute('aria-pressed', 'true'); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('accessibilityHighContrast') === 'true') { |
|
|
isHighContrast = true; |
|
|
document.documentElement.classList.add('high-contrast'); |
|
|
contrastStatus.textContent = 'On'; |
|
|
toggleContrastBtn.setAttribute('aria-pressed', 'true'); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('accessibilityLargeCursor') === 'true') { |
|
|
isLargeCursor = true; |
|
|
document.documentElement.classList.add('large-cursor'); |
|
|
cursorStatus.textContent = 'On'; |
|
|
toggleCursorBtn.setAttribute('aria-pressed', 'true'); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('accessibilityHighlightText') === 'true') { |
|
|
isHighlightText = true; |
|
|
document.documentElement.classList.add('highlight-text'); |
|
|
highlightStatus.textContent = 'On'; |
|
|
toggleHighlightBtn.setAttribute('aria-pressed', 'true'); |
|
|
} |
|
|
|
|
|
|
|
|
if (localStorage.getItem('accessibilityReducedMotion') === 'true') { |
|
|
isReducedMotion = true; |
|
|
document.documentElement.classList.add('reduced-motion'); |
|
|
motionStatus.textContent = 'On'; |
|
|
toggleMotionBtn.setAttribute('aria-pressed', 'true'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateTextSize() { |
|
|
document.documentElement.style.fontSize = `${textSize * 100}%`; |
|
|
const percentage = ((textSize - 0.8) / 0.8) * 100; |
|
|
textSizeIndicator.style.width = `${percentage}%`; |
|
|
localStorage.setItem('accessibilityTextSize', textSize.toString()); |
|
|
} |
|
|
|
|
|
|
|
|
function togglePanel() { |
|
|
isPanelOpen = !isPanelOpen; |
|
|
if (isPanelOpen) { |
|
|
panel.classList.remove('hidden'); |
|
|
toggleBtn.setAttribute('aria-expanded', 'true'); |
|
|
toggleBtn.classList.remove('pulse-animation'); |
|
|
|
|
|
setTimeout(() => closeBtn.focus(), 100); |
|
|
} else { |
|
|
panel.classList.add('hidden'); |
|
|
toggleBtn.setAttribute('aria-expanded', 'false'); |
|
|
toggleBtn.classList.add('pulse-animation'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function announce(message) { |
|
|
ariaLiveRegion.textContent = message; |
|
|
|
|
|
setTimeout(() => { |
|
|
ariaLiveRegion.textContent = ''; |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
toggleBtn.addEventListener('click', togglePanel); |
|
|
|
|
|
closeBtn.addEventListener('click', togglePanel); |
|
|
|
|
|
|
|
|
increaseTextBtn.addEventListener('click', () => { |
|
|
if (textSize < 1.6) { |
|
|
textSize += 0.1; |
|
|
textSize = Math.round(textSize * 10) / 10; |
|
|
updateTextSize(); |
|
|
announce(`Text size increased to ${Math.round(textSize * 100)}%`); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
decreaseTextBtn.addEventListener('click', () => { |
|
|
if (textSize > 0.8) { |
|
|
textSize -= 0.1; |
|
|
textSize = Math.round(textSize * 10) / 10; |
|
|
updateTextSize(); |
|
|
announce(`Text size decreased to ${Math.round(textSize * 100)}%`); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
toggleDyslexicBtn.addEventListener('click', () => { |
|
|
isDyslexicFont = !isDyslexicFont; |
|
|
if (isDyslexicFont) { |
|
|
document.documentElement.classList.add('dyslexic-font'); |
|
|
dyslexicStatus.textContent = 'On'; |
|
|
toggleDyslexicBtn.setAttribute('aria-pressed', 'true'); |
|
|
localStorage.setItem('accessibilityDyslexicFont', 'true'); |
|
|
announce('Dyslexia-friendly font enabled'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('dyslexic-font'); |
|
|
dyslexicStatus.textContent = 'Off'; |
|
|
toggleDyslexicBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityDyslexicFont', 'false'); |
|
|
announce('Dyslexia-friendly font disabled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
toggleContrastBtn.addEventListener('click', () => { |
|
|
isHighContrast = !isHighContrast; |
|
|
if (isHighContrast) { |
|
|
document.documentElement.classList.add('high-contrast'); |
|
|
contrastStatus.textContent = 'On'; |
|
|
toggleContrastBtn.setAttribute('aria-pressed', 'true'); |
|
|
localStorage.setItem('accessibilityHighContrast', 'true'); |
|
|
announce('High contrast mode enabled'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('high-contrast'); |
|
|
contrastStatus.textContent = 'Off'; |
|
|
toggleContrastBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityHighContrast', 'false'); |
|
|
announce('High contrast mode disabled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
toggleCursorBtn.addEventListener('click', () => { |
|
|
isLargeCursor = !isLargeCursor; |
|
|
if (isLargeCursor) { |
|
|
document.documentElement.classList.add('large-cursor'); |
|
|
cursorStatus.textContent = 'On'; |
|
|
toggleCursorBtn.setAttribute('aria-pressed', 'true'); |
|
|
localStorage.setItem('accessibilityLargeCursor', 'true'); |
|
|
announce('Large cursor enabled'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('large-cursor'); |
|
|
cursorStatus.textContent = 'Off'; |
|
|
toggleCursorBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityLargeCursor', 'false'); |
|
|
announce('Large cursor disabled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
toggleHighlightBtn.addEventListener('click', () => { |
|
|
isHighlightText = !isHighlightText; |
|
|
if (isHighlightText) { |
|
|
document.documentElement.classList.add('highlight-text'); |
|
|
highlightStatus.textContent = 'On'; |
|
|
toggleHighlightBtn.setAttribute('aria-pressed', 'true'); |
|
|
localStorage.setItem('accessibilityHighlightText', 'true'); |
|
|
announce('Text highlighting enabled'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('highlight-text'); |
|
|
highlightStatus.textContent = 'Off'; |
|
|
toggleHighlightBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityHighlightText', 'false'); |
|
|
announce('Text highlighting disabled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
toggleMotionBtn.addEventListener('click', () => { |
|
|
isReducedMotion = !isReducedMotion; |
|
|
if (isReducedMotion) { |
|
|
document.documentElement.classList.add('reduced-motion'); |
|
|
motionStatus.textContent = 'On'; |
|
|
toggleMotionBtn.setAttribute('aria-pressed', 'true'); |
|
|
localStorage.setItem('accessibilityReducedMotion', 'true'); |
|
|
announce('Reduced motion enabled'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('reduced-motion'); |
|
|
motionStatus.textContent = 'Off'; |
|
|
toggleMotionBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityReducedMotion', 'false'); |
|
|
announce('Reduced motion disabled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
screenReaderHelper.addEventListener('click', () => { |
|
|
const importantContent = document.querySelector('main').textContent.substring(0, 200) + '...'; |
|
|
announce(`Important content: ${importantContent}`); |
|
|
}); |
|
|
|
|
|
|
|
|
resetBtn.addEventListener('click', () => { |
|
|
|
|
|
textSize = 1; |
|
|
updateTextSize(); |
|
|
|
|
|
|
|
|
if (isDyslexicFont) { |
|
|
document.documentElement.classList.remove('dyslexic-font'); |
|
|
dyslexicStatus.textContent = 'Off'; |
|
|
toggleDyslexicBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityDyslexicFont', 'false'); |
|
|
isDyslexicFont = false; |
|
|
} |
|
|
|
|
|
|
|
|
if (isHighContrast) { |
|
|
document.documentElement.classList.remove('high-contrast'); |
|
|
contrastStatus.textContent = 'Off'; |
|
|
toggleContrastBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityHighContrast', 'false'); |
|
|
isHighContrast = false; |
|
|
} |
|
|
|
|
|
|
|
|
if (isLargeCursor) { |
|
|
document.documentElement.classList.remove('large-cursor'); |
|
|
cursorStatus.textContent = 'Off'; |
|
|
toggleCursorBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityLargeCursor', 'false'); |
|
|
isLargeCursor = false; |
|
|
} |
|
|
|
|
|
|
|
|
if (isHighlightText) { |
|
|
document.documentElement.classList.remove('highlight-text'); |
|
|
highlightStatus.textContent = 'Off'; |
|
|
toggleHighlightBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityHighlightText', 'false'); |
|
|
isHighlightText = false; |
|
|
} |
|
|
|
|
|
|
|
|
if (isReducedMotion) { |
|
|
document.documentElement.classList.remove('reduced-motion'); |
|
|
motionStatus.textContent = 'Off'; |
|
|
toggleMotionBtn.setAttribute('aria-pressed', 'false'); |
|
|
localStorage.setItem('accessibilityReducedMotion', 'false'); |
|
|
isReducedMotion = false; |
|
|
} |
|
|
|
|
|
announce('All accessibility settings have been reset to default'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
|
|
|
if (e.altKey && e.key.toLowerCase() === 'a') { |
|
|
e.preventDefault(); |
|
|
togglePanel(); |
|
|
} |
|
|
|
|
|
|
|
|
if (isPanelOpen && e.key === 'Tab') { |
|
|
const focusableElements = panel.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); |
|
|
const firstElement = focusableElements[0]; |
|
|
const lastElement = focusableElements[focusableElements.length - 1]; |
|
|
|
|
|
if (e.shiftKey) { |
|
|
if (document.activeElement === firstElement) { |
|
|
lastElement.focus(); |
|
|
e.preventDefault(); |
|
|
} |
|
|
} else { |
|
|
if (document.activeElement === lastElement) { |
|
|
firstElement.focus(); |
|
|
e.preventDefault(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (isPanelOpen && e.key === 'Escape') { |
|
|
togglePanel(); |
|
|
toggleBtn.focus(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (isPanelOpen && !panel.contains(e.target) && e.target !== toggleBtn) { |
|
|
togglePanel(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
loadSettings(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ham3dco/ham3d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
