| <!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> |
