scottmcdonnell / pixi-accessibility

Allow pixi items to be accessed using tab and read by screen readers. Now working for IOS Voiceover & Android Talkback.

#update

Now tested in:

• IOS VoiceOver for IOS 9
• Android TalkBack
• Kindle VoiceView for FireHD 6

Check it out in action here on desktop with tabbing and mobile with screenreader enabled:

DEMO

pixi-accessibility

A plugin that adds accessibility to Pixi.js

Note: This modules requires v3.0.9 (or higher) of pixi.js.

The Accessibility plugin adds the ability to tab and and have content read by screen readers. This is very important as it can possibly help people with disabilities access pixi content.

Much like interaction any DisplayObject can be made accessible. This manager will map the events as if the mouse was being used, minimizing the efferot required to implement.

Usage

I have made this as easy as possible to use in the hope that all those awesome pixi sites and games can become usable by people without the ability to use the mouse or see content.

// Create a sprite as usual..
var mySprite = PIXI.Sprite.fromImage('myImage.png');

// Make sprite interactive..
mySprite.interactive = true;

// Make it accessible..
mySprite.accessible = true;
// The description of the button for the screen reader
mySprite.accessibleTitle = 'Hello Button';

mySprite.click = function(){

  alert("Hello")

}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}

animate();

Building

You normally don't need to build this module, you can just download a release from the releases page.

However, if you are developing on the project or want a bleeding edge build then you will need to have node and gulp setup on your machine.

Then you can install dependencies and build:

npm i && npm run build

That will output the built distributables to ./bin.

Your support helps us make Pixi.js even better. Make your pledge on Patreon and we'll love you forever!