Accessibility Enhancements in the WordPress toolbar

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

这个选项可将选定的文本对屏幕阅读器隐藏，同时使其在页面上保持可见。这可能是装饰性文本、图像，甚至是不需要朗读的重复内容。

示例： 隐藏装饰性图标或增添视觉效果但不传达有意义信息的文本。

二、Screen Reader Only Text

这个选项使选定的文本可供屏幕阅读器使用，但对视力正常的用户在视觉上隐藏。它非常适合提供增强可访问性的上下文信息。

示例： 添加隐藏文本，如“在新标签页中打开”，以帮助屏幕阅读器用户了解链接的作用。

WordPress编辑器工具栏下拉菜单，突出显示了两个可访问性选项：ARIA Hidden和Screen Reader Text。

一张WordPress块编辑器的截图，显示工具栏下拉菜单中有两个新的格式选项——ARIA Hidden和Screen Reader Text。这些选项使内容编辑器无需编写任何代码，即可控制辅助技术如何解释特定文本。

Deep Dive: How It Works

要添加这些工具，你必须在JavaScript文件中使用registerFormatType()函数注册它们。这将包括标题、标签（如span）、可选类和属性。注册后，你可以像使用粗体、斜体等一样选择文本并使用它们。

一、ARIA Hidden

此格式选项将选定的文本包裹在带有aria - hidden=”true”属性的 <span> 标签中，这会使文本对屏幕阅读器隐藏，但在浏览器中仍然可见。

示例代码片段：

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

此格式选项将选定的文本包裹在 <span> 标签中，并添加.screen - reader - only类。

该类使文本对视力正常的用户不可见，但屏幕阅读器可以完全访问。这主要用于添加上下文或特定于屏幕阅读器的文本。

示例代码片段：

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}
            />
        );
    },
});

如你所见，类名是以这种格式添加的，因此我们需要添加CSS来在视觉上隐藏它。

提示： 建议不要在编辑器视图中应用这些样式，这样文本在编辑和内容管理时仍然可见。

推荐的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

可访问性不仅仅是构建包容性网站。它还关乎确保正在进行的内容更新保持可访问性。这些格式工具使内容编辑器能够做到这一点，而无需他们了解HTML或ARIA规范。

通过将可访问性集成到WordPress编辑体验中，我们有助于弥合内容创作者与包容性设计之间的差距。

如果你想进一步解决更复杂、常见的可访问性挑战，请阅读我们最近的博客文章 When Accessibility Isn’t Easy。 

在Evolving Web，我们帮助组织将可访问性作为其数字战略的核心部分。无论你需要自定义WordPress插件、全站可访问性审计，还是支持设计包容性组件，我们的专家团队都随时提供帮助。如果你想改善网站的可访问性或解决特定挑战，请 与我们联系。我们随时提供帮助。