WordPress 的可访问性工具函数。
安装
安装模块
npm install @wordpress/a11y --save
此包假设您的代码将在 ES2015+ 环境中运行。如果您使用的环境对这些语言特性和 API 的支持有限或完全不支持，您应该在代码中包含 @wordpress/babel-preset-default 随附的 polyfill。
API
prefersReducedMotion
用户是否已要求操作系统减少动画效果。
这是 @wordpress/compose 中 useReducedMotion 钩子的对应函数，用于在 React 外部运行的代码（如区块查看脚本）。它仅读取一次偏好设置；需要对其变化做出反应的调用者应自行监听媒体查询。
用法
import { prefersReducedMotion } from '@wordpress/a11y';
if ( ! prefersReducedMotion() ) {
video.play();
}
返回值
boolean: 是否偏好减少动画效果。
setup
创建实时区域。
speak
允许您使用 ARIA 实时区域轻松向屏幕阅读器动态宣布界面更新。此模块受 wp-a11y.js 中的 speak 函数启发。
用法
import { speak } from '@wordpress/a11y';
// 对于不应打断屏幕阅读器当前播报内容的礼貌消息。
speak( '您要发送到 ARIA 实时区域的消息' );
// 对于应打断屏幕阅读器当前播报内容的强硬消息。
speak( '您要发送到 ARIA 实时区域的消息', 'assertive' );
参数
- message
string: 将由辅助技术宣布的消息。 - ariaLive
['polite' | 'assertive']: aria-live 的礼貌级别；默认值：‘polite’。
背景
为了提供上下文，我将引用 WordPress.org 上的这篇文章，作者为 @joedolson:
为什么。
在现代 Web 开发中，使用 JavaScript 更新屏幕的特定区域是很常见的。基于现代 JavaScript 的用户界面中使用 AJAX 响应，使 Web 开发人员能够创建类似于桌面应用程序的美丽界面，而无需重新加载或刷新页面。
JavaScript 可以为大多数用户带来极佳的可操作性改进——但当内容动态更新时，它有可能引入可访问性问题。这是您可以采取的解决该问题的步骤之一。
是什么。
当页面的某一部分通过 JavaScript 更新时，更新通常会通过动画和鲜艳的颜色高亮显示，并且很容易看到。但是，如果您无法看到屏幕，除非更新的区域被标记为 ARIA 实时区域，否则您不知道已经发生了这种情况。
如果未标记，屏幕阅读器将不会收到通知。但如果 ARIA 实时区域太大，也可能导致所有区域内容在更新后被全部播报出来。您希望为用户提供简单、简洁的消息。
怎么做。
这就是
wp.a11y.speak()的设计目的。它是一个简单的工具，创建一个并追加一个 ARIA 实时通知区域到元素中，开发者可以在其中发送文本消息。辅助技术将自动宣布此区域中的任何文本更改。此 ARIA 实时区域具有“status”的 ARIA 角色，因此它具有隐式的 polite aria-live 值和隐式的 true aria-atomic 值。这意味着辅助技术将通知用户更新，但通常不会中断当前任务，且更新优先级较低。如果您正在创建具有更高优先级更新的应用程序（例如，通知其当前会话即将过期），那么您将希望创建一个具有 assertive aria-live 值的自定义方法。
浏览器支持
请参阅 https://make.wordpress.org/core/handbook/best-practices/browser-support/
为此包做出贡献
这是 Gutenberg 项目的一个独立包。该项目组织为 monorepo。它由多个自包含的软件包组成，每个包都有特定的用途。此 monorepo 中的包发布到 npm，并被 WordPress 以及其他软件项目使用。
要了解有关为此包或整个 Gutenberg 做出贡献的更多信息，请阅读项目的main 贡献者指南。