Web Games and Simulations

Article Contents

Interactive games can provide rich learning experiences for many students - but for some, these games are an accessibility and inclusivity challenge. This guide aims at giving some practical techniques to help improve the inclusiveness and accessibility of interactive content whether retrofitting existing content or creating a new game from scratch.

Scope of this Guide: This guide deals with interactive games built using standard web technologies such as HTML5, CSS, SVG, and JavaScript. By using established web standards, the content you create has a higher chance of being understood by assistive technologies.

Orienting the User

Regardless of the modality used for interaction, a logical, predictable structure helps users focus on learning instead of getting stuck on the interaction. Consistency and predicability is important.

Help orient the user by:

Player Choices and Controls

Some people make choices easily, while others require more time before making decisions. Choices in games can be exciting for some, but stressful for others.

If presenting learners with multiple choices that affect the outcome of a game:

Other good practices are:

Communicating Events and Actions with Text and Sound

A large part of interactive content are the events that happen during and after a user performs an action. Often these occur as on-screen visuals, animations, and transitions. The following are some techniques for creating an equivalent experience for non-sighted learners:

Content Accessibility / Screen Readers

Follow a good structure and use semantic markup:

Visuals

Punctuation

Punctuation helps a screen reader know when to pause, or give proper emphasis.

Charts and Graphs

Charts and graphs are an excellent way to convey data in a meaningful way. However, charts and graphs typically favour a student who is capable of perceiving the content and can cognitively process the information.

To make charts and graphs more inclusive:

For additional resources on describing complex diagrams, see:

If using a table of data:

Poet Image Description Tool for Graphs

The Poet Image Description Tool is a web-based tool for creating image descriptions in existing DAISY and EPUB books. This tool has resources and tools to help content authors create good image descriptions following an extended NCAM guideline. There is also a math editor which transcribes math into readable format.

See: Poet Image Description Tool at http://diagramcenter.org/development/poet.html.

Cognitive

Information should be presented in a clear concise manner, and where possible starting with general statements first with more detailed information following.

For related information, see: Designing interfaces to meet the needs of users with cognitive disabilities.

Visual Perception

Keyboard / Keypad / Single-switch Interaction

Many users, not just users of screen readers, use the keyboard to interact with their computer. Some users may be using a keypad, a joystick mapped to keys, or a single-switch to navigate a virtual keyboard. A succinct keyboard interaction will help these learners focus on the content and not the mechanics of interaction.

You want to get your users into the experience as quickly as possible:

Images, Symbols, Math, Icons, and Glyphs

Make sure that symbols, math notation, and other glyphs have the desired textual output when read by a screen reader. For example: “1/2” should read as “one half” and not “one slash two”.

Unicode characters offer a few common glyphs which can be used in place of image icons. If using Unicode characters, something like the following code snippet would be helpful:

HTML:

<span aria-labelledby="left-arrow">&larr;</span>
<span id="left-arrow" class="hidden">Left arrow</span>

CSS:

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}