Since the canvas is usually presented as a "black box", the content cannot be textualized and read aloud by Screen Reader. Of course this is only one feature of accessibility, and for different types of people with different impairments, features such as text extraction, keyboard navigation, etc. can be provided.

One of the best in the area of graphics is https://www.highcharts.com/blog/accessibility/ where there is a lot of practice to be found.

Usage

Create plug-ins and register them in the renderer.

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

Features

Extracting text

In some renderers (e.g. g-canvas / g-webgl / g-canvaskit), it is not possible to use the browser's own search function (Command + F) to locate a match once the text has been drawn, which is also not SEO friendly.

In this example, we enable enableExtractingText to use the above functionality.

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

In the implementation we have added DOM elements inside the canvas container for real-time synchronization with the visible text in the canvas.

<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>

There are the following considerations.

• When rendering with g-svg, the above DOM content will not be added because SVG naturally supports <foreignObject>.
• Since browsers have a minimum font size limit (12px in Chrome), text that is too small will be rendered inconsistently

[WIP] Screen Reader

Use the Tab key to navigate and read aloud the content of the text.

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

[WIP] Keyboard Navigation

Reduce animation when appropriate

We provide the animation feature, but some users with cognitive impairments can be nauseated or distracted by animated content.

CSS media queries provide prefers-reduced-motion, which can help us detect if the user has turned on browser/system "reduced-motion" feature, which allows us to respond to the user's request to reduce the animation in the scene as much as possible.

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

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

In addition to media queries via CSS, JS also has a corresponding API: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia：

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

d-motion: reduce)'); mql.matches;