Accessibility Options Footer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accessibility Options Footer</title>
    <style>
        :root {
            /* Default Theme */
            --bg-color: #ffffff;
            --text-color: #333333;
            --link-color: #007bff;
            --footer-bg: #f8f9fa;
            --footer-text: #6c757d;
            --footer-border: #dee2e6;
            --button-active-bg: #e9ecef;
            --base-font-size: 1rem; /* 16px by default */
        }
        
        /* High Contrast Theme */
        body.high-contrast {
            --bg-color: #000000;
            --text-color: #ffffff;
            --link-color: #ffff00;
            --footer-bg: #1a1a1a;
            --footer-text: #e0e0e0;
            --footer-border: #444444;
            --button-active-bg: #333333;
        }

/* Large Text Theme */
        body.large-text {
            --base-font-size: 1.25rem; /* 20px */
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-size: var(--base-font-size);
            transition: background-color 0.3s, color 0.3s, font-size 0.3s;
        }
        
        main { flex-grow: 1; }
        a { color: var(--link-color); }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }
        .main-content { padding: 2rem 0; }

/* FOOTER STYLES START HERE */
        
        .footer-a11y {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 2.5rem 0;
            border-top: 1px solid var(--footer-border);
            font-size: 0.9em; /* Using 'em' makes it relative to the parent (body) font-size */
            transition: background-color 0.3s, color 0.3s;
        }
        .footer-a11y__grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: center;
        }
        .footer-a11y__controls h3 { margin: 0 0 1rem 0; color: var(--text-color); }
        .footer-a11y__options { display: flex; flex-wrap: wrap; gap: 1rem; }
        
        .footer-a11y__button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--bg-color); /* Corrected as per your feedback */
            color: var(--text-color);
            border: 1px solid var(--footer-border);
            padding: 0.5rem 1rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: inherit; /* Inherit the footer's scalable font size */
        }
        .footer-a11y__button.is-active {
            background-color: var(--button-active-bg);
            border-color: var(--text-color);
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
        }
        .footer-a11y__button svg { width: 18px; height: 18px; fill: currentColor; }

.footer-a11y__nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        .footer-a11y__nav a { color: var(--footer-text); }
        
        .footer-a11y__copyright {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--footer-border);
            text-align: center;
        }

@media (min-width: 768px) {
            .footer-a11y__grid { grid-template-columns: 1fr 1fr; }
            .footer-a11y__nav { justify-content: flex-end; }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Accessibility Options Footer</h1>
            <p>Use the controls in the footer to change the page's appearance.</p>
            <p><a href="#">This is a sample link.</a></p>
        </div>
    </main>

<footer class="footer-a11y" role="contentinfo">
        <div class="container">
            <div class="footer-a11y__grid">
                <div class="footer-a11y__controls">
                    <h3>Accessibility Tools</h3>
                    <div class="footer-a11y__options">
                        <button id="toggle-contrast" class="footer-a11y__button" aria-pressed="false" aria-label="Toggle High Contrast Mode">
                            <svg role="img" viewBox="0 0 24 24"><title>Contrast</title><path d="M12 22.314a10.314 10.314 0 110-20.628 10.314 10.314 0 010 20.628zM12 3.5a8.5 8.5 0 000 17V3.5z"/></svg>
                            Contrast
                        </button>
                        <button id="toggle-text-size" class="footer-a11y__button" aria-pressed="false" aria-label="Toggle Text Size">
                             <svg viewBox="0 0 24 24"><title>Text Size</title><path d="m22 6-3-4-3 4h2v4h-2l3 4 3-4h-2V6zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z"/></svg>
                            Text Size
                        </button>
                    </div>
                </div>
                <nav class="footer-a11y__nav" aria-label="Footer Navigation">
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Accessibility Statement</a></li>
                    </ul>
                </nav>
            </div>
            <div class="footer-a11y__copyright">
                <p>&copy; 2025 Your Organization. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

// Function to toggle a class on the body and update the button state
            function toggleOption(button, className) {
                body.classList.toggle(className);
                const isActive = body.classList.contains(className);
                button.classList.toggle('is-active', isActive);
                button.setAttribute('aria-pressed', isActive);
            }

// Toggle High Contrast
            if (contrastButton) {
                contrastButton.addEventListener('click', () => {
                    toggleOption(contrastButton, 'high-contrast');
                });
            }

// Toggle Large Text Size
            if (textSizeButton) {
                textSizeButton.addEventListener('click', () => {
                    toggleOption(textSizeButton, 'large-text');
                });
            }
        });
    </script>
</body>
</html>