# Accessibility Toolbar With Text Size, Contrast and Link Highlighting

> Adds a small floating accessibility button that opens a panel with larger text, high contrast, highlighted links, a readable font and a reset option. Choices are remembered on the visitor's device.

- Type: Universal
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: toolbar, contrast, font-size
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-floating-toolbar/

## Code

```php
<div class="wpide-a11y-bar">
    <button type="button" class="wpide-a11y-open" aria-expanded="false" aria-controls="wpide-a11y-panel">Accessibility options</button>
    <div id="wpide-a11y-panel" class="wpide-a11y-panel" hidden>
        <button type="button" data-a11y="big" aria-pressed="false">Larger text</button>
        <button type="button" data-a11y="contrast" aria-pressed="false">High contrast</button>
        <button type="button" data-a11y="links" aria-pressed="false">Highlight links</button>
        <button type="button" data-a11y="font" aria-pressed="false">Readable font</button>
        <button type="button" data-a11y="reset">Reset</button>
    </div>
</div>
<style>
.wpide-a11y-bar{position:fixed;right:12px;bottom:12px;z-index:99991;font:15px/1.4 system-ui,sans-serif;}
.wpide-a11y-bar button{display:block;width:100%;margin:0 0 6px;padding:10px 14px;border:2px solid #fff;border-radius:6px;background:#1d2327;color:#fff;text-align:left;cursor:pointer;min-height:44px;}
.wpide-a11y-bar button[aria-pressed="true"]{background:#2271b1;}
.wpide-a11y-bar button:focus-visible{outline:3px solid #f0b849;outline-offset:2px;}
.wpide-a11y-panel{margin-bottom:6px;}
html.wpide-a11y-big{font-size:125%!important;}
html.wpide-a11y-contrast body,html.wpide-a11y-contrast body *:not(.wpide-a11y-bar *){background-color:#000!important;color:#fff!important;border-color:#fff!important;}
html.wpide-a11y-contrast a:not(.wpide-a11y-bar *){color:#ff0!important;}
html.wpide-a11y-links a:not(.wpide-a11y-bar *){text-decoration:underline!important;outline:2px dashed currentColor;outline-offset:2px;}
html.wpide-a11y-font body *:not(.wpide-a11y-bar *){font-family:Verdana,Tahoma,sans-serif!important;letter-spacing:.03em;}
</style>
<script>
(function () {
    var root = document.documentElement, key = 'wpideA11y', state = {};
    var open = document.querySelector('.wpide-a11y-open'), panel = document.getElementById('wpide-a11y-panel');
    if (!open || !panel) { return; }
    try { state = JSON.parse(localStorage.getItem(key) || '{}') || {}; } catch (e) { state = {}; }
    function render() {
        ['big', 'contrast', 'links', 'font'].forEach(function (k) {
            root.classList.toggle('wpide-a11y-' + k, !!state[k]);
            var b = panel.querySelector('[data-a11y="' + k + '"]');
            if (b) { b.setAttribute('aria-pressed', state[k] ? 'true' : 'false'); }
        });
        try { localStorage.setItem(key, JSON.stringify(state)); } catch (e) {}
    }
    open.addEventListener('click', function () {
        var expanded = open.getAttribute('aria-expanded') === 'true';
        open.setAttribute('aria-expanded', expanded ? 'false' : 'true');
        panel.hidden = expanded;
    });
    panel.addEventListener('click', function (e) {
        var b = e.target.closest('[data-a11y]');
        if (!b) { return; }
        var k = b.getAttribute('data-a11y');
        if (k === 'reset') { state = {}; } else { state[k] = !state[k]; }
        render();
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !panel.hidden) { panel.hidden = true; open.setAttribute('aria-expanded', 'false'); open.focus(); }
    });
    render();
})();
</script>
```

## Notes

A toolbar helps some visitors but does not replace fixing accessibility problems in the theme itself.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Accessibility Toolbar With Text Size, Contrast and Link Highlighting" in its snippet library and add it in one click; or create a new Universal snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/