Page Comparison

For students who are more willing to explore and experiment, this simulation works well for them. If a student is more cautious or likes to understand things before acting, this simulation is unforgiving. Many times the learner is:

• forced into advancing even though they may not be ready
• unable to go back and choose different options
• not given opportunity to review concepts

• Give more options for users to retry and review.
  
• Change wording of choices as to not make the student feel they have failed to understand.

Screen readers offer higher degree of control of navigation than just conventional keyboard interaction. This unfortunately allows a screen reader user to get into states which break the experience of the simulation:

• items which are supposed to be non-interactative and hidden are focusable by the screen reader and are read out loud
• inconsistent focus order

• Elements which are supposed to be completely hidden to users, including screen readers, should follow established techniques.
• Improving document structure through use of HTML semantic elements, and WAI-ARIA should help improve screen reader navigation and focus order.
• Focus order should go from top to bottom and left to right in most cases.
• Test with users of screen readers and keyboard users to further identify issues.

• Use W3C recommended technique for describing complex graphics.
• Background images are for cosmetic purposes only. Graphs should have appropriate use of <figure> and <img> elements.
• Graphs should have data tables (possible implementation described later in this document)
• Tables should be HTML <table> and not images.

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.

Excerpt page from the Design Sketch showing accessibility changes.