Today, an accessible website is no longer a feature but a necessity. While WordPress offers many tools to support accessible content creation, it still has limitations, especially when it comes to empowering content editors with fine-tuned control. 

Often, developers resort to workarounds or custom code to make content accessible. But wouldn’t it be easier if editors had simple toolbar buttons to handle common accessibility tasks?

That’s exactly what we’ve done! We’ve created a plugin that adds two accessibility-focused buttons directly in the WordPress editor toolbar. These buttons give editors more control on how their text behaves for assistive technologies while making it possible to do without writing a single word of code.

Plugin Overview

The plugin enhances the WordPress editor by adding two formatting options:

ARIA Hidden

This option hides selected text from the screen reader while keeping it visually available on the page. This could be decorative texts, images or even repeated content that doesn’t need to be read aloud.

Example: Hiding decorative icons or text that adds visual flair but doesn't convey meaningful information.

Screen Reader Only Text

This option makes selected text available to screen readers but visually hides it from sighted users. It’s ideal for providing context that enhances accessibility.

Example: Adding hidden text like “opens in a new tab” to help screen reader users understand what a link does.

Deep Dive: How It Works

To add these tools, you have to register them using registerFormatType() function in your JavaScript file. This would include the title, a tag(like span), optional class & attributes. Once registered, you can use them by selecting text just like bold, italics, etc.

ARIA Hidden

This formatting option wraps the selected text in a <span> tag with aria-hidden=”true” attribute which hides the text from screen readers while remaining visible in browsers.

Example code snippet: 

registerFormatType('custom/aria-hidden', {
    title: __('ARIA Hidden', 'text-domain'),
    tagName: 'span',
    className: 'has-aria-hidden',
    edit({ isActive, value, onChange }) {
        return (
            <RichTextToolbarButton
                icon="hidden"
                title={__('ARIA Hidden', 'text-domain')}
                onClick={() => {
                    onChange(
                        toggleFormat(value, {
                            type: 'custom/aria-hidden',
                            attributes: { 'aria-hidden': 'true' },
                        })
                    );
                }}
                isActive={isActive}
            />
        );
    },
});

Screen reader only text

This formatting option wraps the selected text in a <span> tag and adds a .screen-reader-only class.

The class makes the text invisible to sighted users but fully accessible to screen readers. This is mainly for adding context/screen-reader specific text.

Example code snippet:

registerFormatType('custom/screen-reader-text', {
    title: __('Screen Reader Text', 'text-domain'),
    tagName: 'span',
    className: 'screen-reader-only',
    edit({ isActive, value, onChange }) {
        return (
            <RichTextToolbarButton
                icon="visibility"
                title={__('Screen Reader Text', 'text-domain')}
                onClick={() => {
                    onChange(
                        toggleFormat(value, {
                            type: 'custom/screen-reader-text',
                        })
                    );
                }}
                isActive={isActive}
            />
        );
    },
});

As you can see, the className is added in this format so we need to add CSS that will hide it visually.

Tip: It’s recommended not to apply these styles in the editor view, so the text remains visible for easier editing and content management

Recommended CSS:

/* Text only for screen readers (excluding in editor). */
body:not(.wp-admin) .screen-reader-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

Final thoughts

Accessibility isn’t just about building inclusive websites. It’s also about ensuring that ongoing content updates remain accessible. These formatting tools empower content editors to do just that, without requiring them to know HTML or ARIA specifications.

By integrating accessibility into the WordPress editing experience, we help bridge the gap between content creators and inclusive design.

If you’re looking to go further and address more complex, common accessibility challenges, read our recent blog post When Accessibility Isn’t Easy. 

At Evolving Web, we help organizations make accessibility a core part of their digital strategy. Whether you need a custom WordPress plugin, a site-wide accessibility audit, or support designing inclusive components, our team of experts is here to help. If you're looking to improve your website's accessibility or tackle a specific challenge, get in touch with us. We’re here to help.