I would like a way to create buttons and text that can be accessed by screen readers when exporting to HTML5.
The games i create have to pass AA WCAG accessibility requirements. However, because GDevelop currently exports everything to the canvas, none of the sprites nor text objects get picked up by the browser. I was faking the tab functionality before, but I couldn’t fake the voiceover part. Then i realized that PixiJS does have some built in accessibility features.
I’ll explain below how I have made buttons and text accessible in GDevelop but it is super “hacky” and has a chance of breaking every time there’s a new version. The code I use should definitely not be implemented, but I really want the functionality to be. Doing this makes button-sprites become actual buttons in the browser with their own html-button tag and attributes.
So Here’s how I do buttons:
-
I make sure every button has these object variables.
-
I use an event like this to trigger when the enter/return button is pressed
-
I then add this code to this to the _updatePIXISprite() method in the spriteruntimeobject-pixi-renderer.js file
var accessibleButton = this._object._variables._variables.items.accessibleButton._bool;
if (accessibleButton) {
this._sprite.interactive = true;
this._sprite.buttonMode = true;
this._sprite.accessible = true;
this._sprite.accessibleTitle = this._object._variables._variables.items.buttonTitle._str;
this._sprite.accessibleHint = this._object._variables._variables.items.buttonAriaLabel._str;
this._sprite.tabIndex = this._object._variables._variables.items.tabIndex._value;
this._sprite.click = function(e) {
var customCanvas = document.getElementsByTagName('canvas');
customCanvas[0].focus();
if (typeof customIndex !== 'undefined') {
customIndex = this.tabIndex; //update customIndex defined in global scope from customIndex.js
}
}
}
For Text this is what I do
- I make sure that text that needs to be accessible has the following object variables
- I add the following code to the updateAngle() method in the bbtextruntimeobject-pixi-renderer.js file
if (this._object._variables._variables.items.hasOwnProperty('accessibleText')) {
var accessibleText = this._object._variables._variables.items.accessibleText._bool;
if (accessibleText === true) {
this._pixiObject.interactive = true;
this._pixiObject.buttonMode = false;
this._pixiObject.accessible = true;
this._pixiObject.accessibleType = 'text';
this._pixiObject.accessibleHint = this._object._variables._variables.items.textAriaLabel._str;
this._pixiObject.accessibleTitle = this._object._variables._variables.items.textTitle._str;
this._pixiObject.tabIndex = this._object._variables._variables.items.tabIndex._value;
}
}
And to tie everything together:
- create a file called customIndex.js that has the following line of code:
var customIndex = -1;
-
add the above mentioned javascript filed to the index.html
<script src="customIndex.js" crossorigin="anonymous"></script>
-
create a global variable in GDevelop called “customIndex” and have that constantly sync with the customIndex variable from our customIndex.js file.
The final result is elements that sit on top of the canvas that can be seen by the browser and therefore can be seen by accessibility functions and programs as well.