# Accessibility Quick Check in the Admin Bar

> Adds an "A11y check" item to the admin bar on the front of the site. Clicking it outlines images without alt text, empty links and buttons, unlabeled fields and skipped headings on the current page and shows a count.

- Type: PHP
- Runs: Frontend only
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: admin-bar, audit, wcag
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-admin-bar-quick-check/

## Code

```php
add_action( 'admin_bar_menu', function ( $bar ) {
    if ( is_admin() || ! current_user_can( 'edit_posts' ) ) {
        return;
    }

    $bar->add_node( array(
        'id'    => 'wpide-a11y-check',
        'title' => 'A11y check',
        'href'  => '#wpide-a11y-check',
    ) );
}, 90 );

add_action( 'wp_footer', function () {
    if ( ! is_admin_bar_showing() || ! current_user_can( 'edit_posts' ) ) {
        return;
    }
    ?>
<style>.wpide-a11y-flag{outline:3px solid #d63638!important;outline-offset:2px;}.wpide-a11y-flag-warn{outline:3px dashed #dba617!important;outline-offset:2px;}</style>
<script>
(function () {
    var link = document.querySelector('#wp-admin-bar-wpide-a11y-check > a');
    if (!link) { return; }
    link.addEventListener('click', function (event) {
        event.preventDefault();
        var problems = [];
        function flag(el, msg, warn) { el.classList.add(warn ? 'wpide-a11y-flag-warn' : 'wpide-a11y-flag'); el.title = msg; problems.push(msg); }
        var scope = document.body;
        scope.querySelectorAll('img:not([alt])').forEach(function (el) { flag(el, 'Image without alt attribute'); });
        scope.querySelectorAll('a[href], button').forEach(function (el) {
            if (el.closest('#wpadminbar')) { return; }
            var name = (el.textContent || '').trim() || el.getAttribute('aria-label') || el.getAttribute('title') || (el.querySelector('img[alt]:not([alt=""])') ? 'img' : '');
            if (!name) { flag(el, 'Link or button without an accessible name'); }
        });
        scope.querySelectorAll('input:not([type=hidden]):not([type=submit]):not([type=button]), select, textarea').forEach(function (el) {
            if (el.closest('#wpadminbar')) { return; }
            var labelled = el.getAttribute('aria-label') || el.getAttribute('aria-labelledby') || el.closest('label') || (el.id && document.querySelector('label[for="' + CSS.escape(el.id) + '"]'));
            if (!labelled) { flag(el, 'Form field without a label'); }
        });
        var last = 0;
        scope.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function (el) {
            if (el.closest('#wpadminbar')) { return; }
            var level = parseInt(el.tagName.substring(1), 10);
            if (last && level > last + 1) { flag(el, 'Heading skips from H' + last + ' to H' + level, true); }
            last = level;
        });
        if (document.querySelectorAll('h1').length !== 1) { problems.push('Page has ' + document.querySelectorAll('h1').length + ' H1 headings'); }
        if (!document.documentElement.getAttribute('lang')) { problems.push('The html element has no lang attribute'); }
        var unique = {};
        problems.forEach(function (p) { unique[p] = (unique[p] || 0) + 1; });
        var summary = Object.keys(unique).map(function (p) { return unique[p] + ' x ' + p; }).join('\n');
        window.alert(problems.length ? 'Found ' + problems.length + ' possible problem(s), outlined on the page:\n\n' + summary : 'No common problems found on this page.');
    });
})();
</script>
    <?php
}, 99 );
```

## Notes

Only users who can edit posts see the button; it is a quick check, not a replacement for a full audit tool.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Accessibility Quick Check in the Admin Bar" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/