Versions Compared

Old Version 35

changes.mady.by.user Jonathan Hung

Saved on

compared with

New Version Current

changes.mady.by.user Jonathan Hung

Saved on

Key

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

Introduction

Excerpt
The Floe Project assisted Lumen Learning by performing an analysis of some of the interactive assessments and learning tools within their platform. Floe provided Lumen short-term and long-term recommendations to help improve accessibility and inclusion. From this partnership, Floe created the "(Inclusive) Web Games and Simulations" entry in the Inclusive Learning Design Handbook as a resource to help other organizations.


The following is an analysis of the 'Utility Simulation'

...

. The findings below are not exhaustive - rather it provides examples of the kinds of issues to be aware of. Where appropriate, recommendations, resources, and possible solutions are given.

Also see Inclusivity and Accessibility of Interactive Web Games and Simulations for additional resources and guidance on creating accessible and inclusive interactive content.

...

Charts

Water vs. Food line Chart

  • The chart is a background image and lacks alt-text

Recommendation:

  • Make the chart an image and use <figure> element as suggested here:  http://www.w3.org/WAI/tutorials/images/complex/
  • Give a good text description on screen and as alt text
  • Add a "Show Data Table" / "Hide Data Table" button to provide a text alternative. See below for an example.


Excerpt page from the Design Sketch showing accessibility changes.

 

Marginal Utility Chart showing apples and berries:

 

  • The chart is a background image. Background images are not accessible to screen readers

  • Ideally this should be an HTML table: http://webaim.org/techniques/tables/

  • Using <del>...</del> or <strike>...</strike> (deprecated) is not recommended here as it would create a jolted, confusing experience for screen reader users:

Recommendation:

  • Break into two charts: Apples and Berries.

  • Delete column "Apples from Tree" and make a row headers instead.

  • When an apple / berry has been eaten, change the text in the row header to convey this new state.
 Marginal Utility
Apple Tree 1 - Eaten20
Apple Tree 219


Excerpt page from the Design Sketch showing accessibility changes.

...