无障碍

¥Accessibility

PixiJS 通过基于 DOM 的叠加系统内置了无障碍支持，该系统集成了屏幕阅读器、键盘导航和其他辅助技术。它使用 <div> 叠加层向屏幕阅读器描述视觉元素

¥PixiJS includes built-in accessibility support through a DOM-based overlay system that integrates with screen readers, keyboard navigation, and other assistive technologies. It uses <div> overlays to describe visual elements to screen readers

信息

可访问性是可选的，以减少包大小，必须明确启用。

¥Accessibility is opt-in to reduce bundle size and must be explicitly enabled.

import 'pixi.js/accessibility';
import { Container } from 'pixi.js';

const button = new Container();
button.accessible = true;

工作原理

¥How It Works

PixiJS 将 DOM <div> 元素放置在画布上，并与可访问对象的边界对齐。这些元素：

¥PixiJS places DOM <div> elements over your canvas, aligned to the bounds of accessible objects. These elements:

可以通过键盘接收焦点 (tabIndex)

¥Can receive focus via keyboard (tabIndex)
向屏幕阅读器发布 accessibleTitle 或 accessibleHint

¥Announce accessibleTitle or accessibleHint to screen readers
将 click、mouseover、mouseout 事件作为 Pixi 指针事件发送

¥Dispatch click, mouseover, mouseout events as Pixi pointer events
在适当的情况下使用 aria-live 和 aria-label

¥Use aria-live and aria-label where appropriate

启用系统

¥Enabling the System

要启用辅助功能，必须在创建渲染器之前导入该模块：

¥To enable accessibility, you must import the module before creating your renderer:

import 'pixi.js/accessibility';

PixiJS 会自动将 AccessibilitySystem 安装到你的渲染器上。你可以配置其激活方式和时间。

¥PixiJS automatically installs the AccessibilitySystem onto your renderer. You can configure how and when it's activated.

配置选项

¥Configuration Options

你可以通过向 Application 构造函数传递选项来自定义无障碍系统的激活时间和方式：

¥You can customize when and how the accessibility system activates by passing options to the Application constructor:

const app = new Application({
    accessibilityOptions: {
        enabledByDefault: true, // Enable on startup
        activateOnTab: false, // Disable auto-activation via tab
        deactivateOnMouseMove: false, // Keep system active with mouse use
        debug: true, // Show div overlays for debugging
    },
});

或者以编程方式启用/禁用系统：

¥Or programmatically enable/disable the system:

app.renderer.accessibility.setAccessibilityEnabled(true);

创建可访问对象

¥Creating Accessible Objects

要将显示对象标记为可访问并将其添加到可访问性系统，请将 accessible 属性设置为 true。这将创建一个屏幕阅读器可以与之交互的 <div> 叠加层。

¥To mark a display object as accessible and add it to the accessibility system, set the accessible property to true. This will create a <div> overlay that screen readers can interact with.

const button = new Container();
button.accessible = true;

app.stage.addChild(button);

可访问容器的属性

¥Properties for Accessible Containers

你可以设置可访问容器的多个属性来自定义其行为：

¥There are several properties you can set on accessible containers to customize their behavior:

属性	描述
`accessible`	启用对象的可访问性
`accessibleTitle`	设置屏幕阅读器的 `title`
`accessibleHint`	设置 `aria-label`
`accessibleText`	div 的替代内部文本
`accessibleType`	用于阴影元素的标签名称（`'button'`、`'div'` 等）
`accessiblePointerEvents`	CSS `pointer-events` 值（`'auto'`、`'none'` 等）
`tabIndex`	允许通过键盘导航获得焦点
`accessibleChildren`	此容器的子元素是否可访问

API 参考

¥API Reference

工作原理​

启用系统​

配置选项​

创建可访问对象​

可访问容器的属性​

API 参考​