Phaser 3 Accessibility

Phaser 3
1

Hi all,

I saw an old post asking PhotonStorm about Phaser 3 games being accessible, and he responded noting he had made accessible games before here.

I am looking to make Phaser games that have

  1. Clickable items that can have alternative input keyboard support
  2. Screen reader support (aria labels?)
  3. Subtitles

I have a rough estimation on how to accomplish these tasks, but I was wondering if anyone has experience with these problems and could point me to some resources!

2

You could look at PIXI’s approach.

3

Does Phaser 3 use PIXI’s renderer still? I thought that was for CE / 2.

4

It does not. He was talking about using PIXI I believe.

5

For anyone interested, I started working on some basic accessibility features in my library here.

6

hey @cmr , that GH repo is 404. Are you still working on a11y Phaser? If so, would love to see how what techniques you are using. Much appreciated

1 Like
7

Link was pointing to a folder that doesn’t exist anymore, sorry about that!! Haven’t added to it in a while, but you can see in the “acc” folder where I started!

library

1 Like
8

Here’s the general approach:

  • Use an html layer above your canvas for your UI
  • For in-game elements (player, enemies etc.) that need to be keyboard / screen reader accessible, overlay the sprite with an in invisible DOMElement: Phaser 3 API Documentation - Class: DOMElement. This is “Pixi’s approach”
    This is how I’m doing it in my current game and it works great.
1 Like
9

Awesome, thank you @kittykatattack and @cmr , might ping you directly with some q’s :wink:

1 Like