Pixi becomes Accessible
Mat Groves has levelled the playing field for Pixi input access.
Wow, it really has been a long time since we last did a Pixi post! Not because we haven’t been working on it, of course, but we’ve simply had an incredibly busy summer over at Goodboy studios smashing out games and sweet Pixi content! I really wanted to tell you about the latest Pixi feature though as it makes Pixi content more appealing to all.
Pixi is now Accessible!
That’s right accessible. What am I talking about? Read on…
Some users navigate the internet using the keyboard rather than mouse or trackpad. Users with certain disabilities interact purely the keyboard or an accessibility switch and blind users rely on assistive technology such as screen readers and so on. This is where using canvas to create full content starts to come unstuck, as the canvas itself has no concept of what’s going on inside it. Basically, it’s a bit of a black box!
The browser will always see it as a single element. Meaning that content rendered in canvas is completely unreachable by assistive technology such as screen readers. Not great really as it means certain users will not be able to navigate content built using canvas.
Doing a fair chunk of work for the BBC this year, they are striving to make their games as accessible as possible. One hurdle which we both faced was that a lot of games and rich media content these days are built on top of canvas. What we needed was a way to make the content accessible to the screen readers so that all users can enjoy the content they output as much as possible.
Fortunately as Pixi imposes a structure on canvas (via Pixi’s Scenegraph) it means it could theoretically be possible to enable certain items to become ‘accessible’ if required. With that in mind we had two goals to achieve:
1: How do we enable the browser to be able to look at Pixi content in a canvas and read it the same way it can read a traditional website?
2: We wanted it to be as easy as possible for you to implement accessibility in your Pixi sites. Let’s face it, a lot of people put this at the bottom of the list of todos due to the extra work involved. It should be as easy as creating a button.
Example
Here is a classic Pixi example of a simple button:
var myButton = new PIXI.Sprite.fromImage('myButton.png');myButton.interactive = true;
myButton.buttonMode = true;myButton.click = function(){
alert("Hi Mum!");
}
Pretty standard stuff. The problem with the button we just created is that the browser cannot 'see' it, meaning assistive technology cannot get to it. Lets fix that by making accessible to everyone shall we?var myButton = new PIXI.Sprite.fromImage('myButton.png');myButton.interactive = true;
myButton.buttonMode = true;myButton.accessible = true;
myButton.accessibleTitle = 'Hi mum button';myButton.click = function(){
alert("Hi Mum!");
}All done! Once you tell Pixi that you want you container to be accessible it will take care of everything else for you. You can also set the accessibleTitle too, this property basically tells the screen reader what to say when a user highlights it not unlike an image alt tag. Check out the example below to see it in action:How it worksWhat we do is create an HTML layer that sits over the top of a Pixi renderer. Whenever a Pixi element is rendered to the canvas, a corresponding HTML button is added to the this layer. This button is mapped to the exact same position of the Pixi displayObject. The HTML buttons in this layer can be seen by the browser and because of this they can be accessed by using tab too. The mouse events of the HTML5 Layer are then mapped directly to Pixi's internal mouse events. Simple innit!It's worth noting that all of this is stuff completely hidden until the user actually starts tabbing. It is also removed if the mouse is moved. This means there is zero performance impact on Pixi as its only in use if its actually required. Winner winner, accessible dinner!Good to go!Even the most fancy or wonderful site is completely useless to someone who cannot access its controls and interact with it. Keyboard-friendly websites make these interactions possible for users who cannot use the mouse. We are hoping this new addition to Pixi will make it easy to not only make killer content but now also make it accessible to all.The new accessibility features can be found in the dev branch of Pixi here. We are still in the stages of testing it so there may be tweaks before it arrives in the next release. Have a play and please let us know what you think!Don't forget to follow me on twitter to keep up with all the other Pixi developments as they happen! And let me tell you, we have some pretty cool new features coming up!Follow @Doormat23Cheers!
