Skip to main content

无障碍

🌐 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

info

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

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）
  • 向屏幕阅读器宣布 accessibleTitle 或 accessibleHint
  • 将 click、mouseover、mouseout 事件作为 Pixi 指针事件分发
  • 在适当的地方使用 aria-live 和 aria-label

启用系统​

🌐 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
accessibleTextdiv 的替代内部文本
accessibleType用于 shadow 元素的标签名称（'button'、'div' 等）
accessiblePointerEventsCSS pointer-events 值（'auto'、'none' 等）
tabIndex允许键盘导航时获取焦点
accessibleChildren该容器的子元素是否可访问

API 参考​

🌐 API Reference