Module 4 - BUILD

Implementing a digital escape game

5. Ensuring accessibility and usability

5.1 Readability

  1. Put instructions in a solid box (don’t place text directly on busy images).
  2. Keep instructions short: one action or one goal per sentence.
  3. Avoid italics, underlining or justified text. Use bold and align to the left.
  4. Ensure that all text uses 1.4 to 1.5 line spacing.
  5. Use clear, sans-serif fonts (such as Arial, Century Gothic, Open Dys).
  6. Use adequate font size: at least 18 pt for body text, 24 pt for headings and buttons. Don’t go below 16 pt if your game is played on phones.
  7. Avoid long paragraphs and use bullet points whenever possible.


Tips & tricks: If you must add longer text, reveal it only when needed (with a “Read more” tooltip button).

5.2 Colour and contrast

  1. Avoid light text or objects on a light or busy background. Prefer darker colours for elements in the foreground.
  2. Verify that the colours, especially between key elements, are properly contrasted (use tools such as WebAIM Contrast Checker). Aim for at least 4.5:1 contrast for normal text and 3:1 for large text.
  3. Avoid red/green only signals (which pose a risk for colour-blindness).
  4. Use symbols along with text, not colour alone, for key clues or puzzle elements. For example: “Unlocked ✓” or “Try again ✗”.

 

5.3 Audio and visual alternatives

  1. Avoid irrelevant sound effects or animations; only keep relevant and useful elements (they should not be necessary to solve puzzles).
  2. Enable the “Zoom” option in the “Preferences” settings to allow players with visual impairments to take a closer look at key elements.
  3. If you add audio narration, also add the transcript as text.
  4. If you add a video or visual clue, also write the key information in text.

5.4 Cognitive overload

Beginner-safe design rules

  • One main objective per screen
  • 3–7 clickable elements maximum on beginner screens
  • Provide a visible “What should I do?” instruction at all times

Helpful structure

  • “Your task” box to identify the instructions easily.
  • “Clues found” box to confirm the right steps and clarify the process.
  • “Hint” button to provide adequate guidance in case of difficulty

 

5.5 Device compatibility

  1. Preview on a laptop, a phone and a tablet to ensure the functions, sizing and interactions are adequate on all potential devices.
  2. Check:
    • Are buttons large enough for touch?
    • Can you read text without zooming?
    • Do pop-ups fit on screen?
  3. If mobile use is common, simplify:
    • Fewer tiny hotspots
    • Fewer drag-and-drop tasks
    • Larger text and buttons

Activity: True/False questions

Decide whether the statements are true or false.

Watch the video

In this video, you will find a summary of Part 5 of this Module.

Click here to access Part 6 of this Module.