G

由于画布通常呈现为一个“黑盒”，其中的内容无法被文本化进而被 Screen Reader 朗读。当然这只是无障碍中涉及一个功能，针对不同类型的障碍人士，还可以提供例如文本提取、键盘导航等功能。

在图表领域做的最好的是 https://www.highcharts.com/blog/accessibility/ 其中有大量实践值得借鉴。

安装方式

创建插件并在渲染器中注册：

import { Plugin as PluginA11y } from '@antv/g-plugin-a11y';
renderer.registerPlugin(new PluginA11y());

特性

提取文本

在一些渲染器（例如 g-canvas / g-webgl / g-canvaskit）中，当文本被绘制后便无法使用浏览器自带的搜索功能（Command + F）定位匹配，同样对于 SEO 也不友好。

在该示例中，我们开启 enableExtractingText 后便可以使用以上功能：

const plugin = new Plugin({
    enableExtractingText: true,
});
canvasRenderer.registerPlugin(plugin);

在实现中我们在画布容器内添加了 DOM 元素，用于与画布中的可见文本实时同步：

<div
    id="g-a11y-text-extractor-mask"
    style="position: absolute; inset: 0px; z-index: 99; pointer-events: none; user-select: none; overflow: hidden;"
>
    <div
        id="g-a11y-text-extractor-text-94"
        style="line-height: 1; position: absolute; white-space: pre; word-break: keep-all; color: transparent !important; transform-origin: 0px 0px; transform: translate(0px, 0px) translate(-50%, -100%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 320, 350, 0, 1); font-size: 10px; font-family: sans-serif;"
    >
        Humidity
    </div>
</div>

有以下注意事项：

使用 g-svg 渲染时，由于 SVG 天然支持 <foreignObject>，不会添加上述 DOM 内容
由于浏览器有最小字号的限制（Chrome 中为 12px），因此太小的文本会有不一致的渲染效果

使用 Tab 键进行导航，并朗读其中的文本内容。

https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes

[WIP] 键盘导航

适时减少动画

我们提供了动画功能，但一些有认知障碍的用户，会因为动画内容而感到恶心或分心。

CSS 媒体查询提供了 prefers-reduced-motion，可以帮助我们检测用户是否开启了浏览器 / 系统的 “减少动画” 功能，此时可以响应用户需求，尽可能减少场景中的动画。

.animation {
    animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
    .animation {
        animation: none;
    }
}

除了通过 CSS 进行媒体查询，JS 也有对应的 API： https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia：

const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
mql.matches;

g-plugin-a11y

安装方式

特性

提取文本

[WIP] Screen Reader

[WIP] 键盘导航

适时减少动画