Screen readers and games

Play this lesson

A silent menu

The studio gets an email from a player: "I am blind and play games on my phone with VoiceOver. I opened Garden Defense and my screen reader said nothing at all. Is there a way to press Play?"

The accessibility lesson covered colour, captions, controls and flashing. This lesson goes deeper for one group of players: people who are blind or have low vision, and the software many of them use to hear what is on a screen.

Screen readers

A screen reader reads out what is on the screen and lets people control a device without seeing it. Some players also use a braille display, a device with small pins that rise to form braille letters under the fingertips.

Quick check

A player using VoiceOver on an iPhone hears "Play, button". How do they press it?

  1. Double-tap
  2. Tap it once
  3. Shake the phone
Show the answer

Double-tap

With VoiceOver on, one tap only selects an item and reads it out, so people can explore the screen safely. A double-tap presses the selected item.

Why the canvas is silent

Our games draw everything with PixiJS into one <canvas>. MDN puts it plainly: a canvas is just a bitmap, a grid of coloured pixels, and it tells accessibility tools nothing about what is drawn. To a screen reader, our Play button does not exist.

Real HTML carries that information. A <button>Play</button> has a name (Play) and a role (button), and it can take keyboard focus. So web games build their menus from real HTML laid over the canvas, and keep the canvas for the action.

Names and announcements

ARIA (Accessible Rich Internet Applications) is a set of extra HTML attributes that tell assistive tools what things are. Its first rule: if a real HTML element already does the job, use that instead.

Bolt says: PixiJS can help too. After import 'pixi.js/accessibility', setting accessible = true and an accessibleTitle on a sprite puts an invisible HTML element over it for screen readers.

Bug hunt

index.html
<canvas id="game"></canvas><div id="news" aria-live="polite"></div><nav id="menu">  <button id="play">Play</button>  <button id="pause"><img src="pause.svg"></button>  <button id="settings">Settings</button></nav>

With TalkBack on, a tester hears "Play, button" and "Settings, button", but the button between them has no useful name. Which line needs fixing?

  1. Line 1
  2. Line 2
  3. Line 5
  4. Line 6
Show the answer

Line 5

Line 5 holds only a picture, so the button has no text to use as its name. Adding aria-label="Pause" to the button, or alt="Pause" to the image, gives it one. The live region on line 2 is fine: it is in the page from the start, empty.

Playing by ear

Many blind players play action games by sound. The Last of Us Part II (2020) can read on-screen text aloud, adds extra audio cues for moving and fighting, and has a button that turns the camera toward where the story goes next.

Garden Defense could do the same: each pest gets its own sound, panned left or right toward its lane, and the live region says "Beetle, lane 2". Some games also add audio description: a voice that describes important things you can only see, like a story scene.

Test with a real screen reader

Guessing is not testing. Turn on VoiceOver or TalkBack on a phone, or NVDA on a Windows laptop, and try to start a game, pause it and change the volume without looking. On an iPhone, Screen Curtain turns the display off while VoiceOver keeps working: tap three times with three fingers.

Listen for buttons with no name, things read in a strange order, and silence when something important happens. Best of all, invite blind and low-vision players to test, and act on what they tell you.

Test plan

Remy rebuilt the Garden Defense menus in HTML. What is the best way to check they work for blind players?

  1. Turn on TalkBack, cover the screen, and try to start a game and change the volume by ear
  2. Look at the menus and check the buttons are big
  3. Ask Generative AI Model Alpha whether the menu is accessible, and ship it if the answer is yes
  4. Turn the phone's brightness all the way up
Show the answer

Turn on TalkBack, cover the screen, and try to start a game and change the volume by ear

Only a real screen reader shows what a blind player hears: missing names, odd order, silence. Big buttons help, and an AI review can catch some problems, but neither replaces actually listening.

Low vision and colour

Many players have some sight. The accessibility lesson covers never using colour alone and 4.5 to 1 contrast. Three more tools:

Bolt says: Two free checklists: gameaccessibilityguidelines.com, written by studios, specialists and academics, and Microsoft's Xbox Accessibility Guidelines. Next lesson: balancing the numbers so a game feels fair, not too hard and not too boring.

Fact-checked 9 October 2026