Accessibility Options Footer Template

Demonstrate your commitment to inclusive design with a footer that puts accessibility controls front and center.

This template is designed for websites that prioritize accessibility (a11y). It provides users with easy-to-find controls to adjust the site's appearance, such as toggling a high-contrast mode or increasing the text size, alongside a clear link to your full Accessibility Statement.

Screenshot of a footer with buttons for high-contrast mode and text resizing.

Get Source Code Preview

About this Accessibility Footer Template

An accessible website benefits everyone. This footer template goes beyond standard compliance by providing user-facing controls that empower visitors to tailor the site to their needs. The design is clean, clear, and uses universally understood icons for its functionality. It serves as both a practical tool and a public statement about your brand's commitment to inclusivity.

Features

User-Facing Controls: Includes buttons for toggling a high-contrast theme and a larger text size.
Active State Feedback: Buttons provide clear visual and ARIA feedback (using aria-pressed) to indicate which modes are active.
Fully Scalable Text: All text on the page, including the footer, scales when the "Text Size" option is toggled.
JavaScript-Powered: Comes with simple, commented JavaScript to show how the toggling functionality can be achieved.
Clean & Unobtrusive: The design is simple and doesn't overwhelm the main footer navigation.

Code Breakdown

The JavaScript toggles a class on the body which changes its base font-size. The footer's font-size is set using the em unit (e.g., 0.9em), which makes it relative to the body's font size. This ensures that when the body text gets larger, the footer text scales proportionally with it.

The accessibility control buttons are standard button elements. The script toggles an is-active class and the aria-pressed attribute on the button itself, providing essential state feedback to all users.

Code

Here's the full code for the footer template:

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

View Output