A11y 无障碍插件

Demo

//TODO

Introduce

Eva.js accessibility plugin, used to add accessibility capabilities to game objects. The plugin automatically adds auxiliary DOM by locating the position of the game object, so that the game object can be focused, and the game has a11y.

Install

With NPM

  1. tnpm install @eva/plugin-a11y

In Browser

  1. <script src="https://unpkg.com/@eva/plugin-a11y@1.2.x/dist/EVA.plugin.a11y.min.js"></script>

Usage

First add system, and then add a11y component to the game objects.

  1. import { A11ySystem, A11y, A11yActivate } from '@eva/plugin-a11y'
  3. game.addSystem(new A11ySystem({
  4.   debug: true,
  5.   activate: A11yActivate.CHECK,
  6.   checkA11yOpen: () => {
  7.     return new Promise(resolve => {
  8.       resolve(true) // opened
  9.       resolve(false) // closed
  10.     })
  11.   }
  12. }))
  13. // add a11y
  14. gameObject.addComponent(new A11y({
  15.   hint: '按钮',
  16.   role: 'button',
  17.   "aria-value": "0"
  18.   "aira-hidden": "true"
  19. }))

The above code will automatically add an auxiliary DOM as shown in the following figure above the game object area:

image.png

Working diagram

image.png

  1. gameObject.addComponent(new A11y({ hint: 'text' }))
  2. game.scene.removeChild(gameObject)
  4. gameObject.removeComponent('A11y')

API

1、A11ySystem

游戏场景无障碍能力

参数类型说明默认值
debugbooleanWhether to turn on debugging, a red mask will appear after turning onfalse
activateA11yActivateWhether to activate accessibility, the default is to automatically activate according to the user’s system settingsCHECK

2、A11y Accessibility components, game objects give accessibility capabilities

参数类型说明默认值
hintstringWhat needs to be read-
rolestringAccessibility roles, such as role=”button”-
delaynumberDelay div inner time, in milliseconds0
aria-*stringAccessibility attributes

3、A11yActivate

参数说明
CHECKCheck the accessibility according to the incoming method
ENABLEEnable plugin accessibility
DISABLEDisable plugin accessibility

Tips

Some points to note when using:

  • Some draggable gameplay needs to be optimized according to the business
  • The auxiliary DOM node of the DragonBones animation is 1px
  • Click events will automatically trigger ‘touchstart/touchend/tip’ events on the Event component

Eva.js 无障碍插件动画

For transition animations, the barrier-free DOM layer needs to wait until the animation ends to know the position of the game object.

eva-plugin-a11y chooses this to process the transition animation.

Option1

Listen to the finish event of the animation, and add barrier-free capabilities to the game object after the animation is complete.

  1. animation.on('finish', name => {
  2.   image.addComponent(new A11y({ hint: 'What needs to be read' }))
  3. });

If there are multiple animations, you only need to listen to the finish event of the last animation.

  1. // move animation
  2. // idle animation
  3. animation.on('finish', name => {
  4.   name === 'idle' && image.addComponent(new A11y({ hint: 'What needs to be read' }))
  5. });

It is not recommended to use accessibility capabilities in Infinity’s mobile animations, such as such animations.

This type of animation is not accessible to users at all, and it is recommended to optimize it from the product level.

Option2

The construction of the barrier-free component also provides a delay parameter, and the developer can choose to render the barrier-free DOM of the game object at any time.

  1. image.addComponent(new A11y({ hint: 'What needs to be read', delay: 1000})