Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


orient the user

  • progress indicator
  • consistent structure
  • describe the scene
  • identify the actors and interactive parts
  • give meaningful and predictable landmarks for the user.

Player Choices

  • Use simple terminology and define any terms if necessary.
  • Make it clear what the outcome would be. For example: A choice called "I'm out of here" perhaps should be relabelled as "I'm out of here (quit game)".
  • If possible, make choices forgiving or give opportunity for users to correct or change their choices.


  • Instructions should be clear and concise. Buttons should have labels.
  • Make help readily available.
  • Avoid really dense content and interactions. Group using <section> elements with proper <h1> headings.

Visual Perception

  • Do not rely on colour to convey meaning. If this is unavoidable, provide a text label or text descriptions.
  • Avoid using transition / animation effects on content that is critical to the outcomes of the game. These effects may be missed or misunderstood.

Non-Visual Perception

Generally, make sure visuals have text equivalents.

  • Provide text descriptions for important visuals: images should have alt-text and longer text descriptions if necessary. Use aria-describedby or longdesc as required. See:
  • Content contained in the background (using background CSS property), :before or :after elements are ignored by screen readers. Do not put important content within these elements. Use standard elements like <image>, <div>, <figure>, etc. as needed.

Keyboard / Keypad / Single-switch Interaction

  • Tab order should be consistent with existing user experiences. i.e. top to bottom, left to right.
  • Interactables should have:
    • a keyboard equivalent
    • focus styling so the user knows when they can interact with the item
  • You want to get your users into the experience as quickly as possible:
    • avoid loading navigation, link to home, about, etc up front - the user will need to tab through all of this to get to the interesting parts.
    • consider adding a skip link:
  • Tab order should properly "cycle around" when tabbing through. Watch for focus traps or hidden elements which may break the game for users.



Interactive games can provide rich learning experiences for students - but for some, these games are not accessible. Designing an educational game which can be enjoyed by a broad spectrum of users can be a challenge.

The Floe Project has been collaborating with content partners to create more inclusive and accessible interactive content. This has resulted in a more accessible version of the PhET simulation John Travoltage, innovations in multi-modal access and descriptions, and sonification of STEM interactives.

The knowledge gained from this collaboration has helped contribute new content to the Floe Inclusive Learning Design Handbook.


John Travoltage with multi-modal access

Image Added

Current Work

Faraday's Law

Image Added