A11y Implementation

[terracoda]

This issue helps tracks the big picture progress of the description design, description implementation, and implementation of alternative input. Sound and adaptive features are incorporated only at a high-level here, though could be added as we move forward and learn more.

A11y Features

Checked features are being worked on for this sim

• Alternative Input - (done)
  • Mobile A11y included
• Interactive Description
  • Syan roughly sketched out rough state descriptions early 2018
  • @Matthew-Moore240 started July 2019 to complete the design
  • Interactive Description Design Complete: April 7, 2020 (except hot key for Pause/Play)
• Sonification - (Started: ??) (Completed: March 31, 2020)
• Zoom/Magnify feature included
• Dev Test Complete (Started May 12, 2020, Completed: May 28, 2020)
• RC Test, July 9th, 2020 QA#513
  • https://phet-dev.colorado.edu/html/molecules-and-light/1.5.0-rc.2/phet/molecules-and-light_all_phet.html
• RC Spot Check, August 4th, 2020 QA#520
  • https://phet-dev.colorado.edu/html/molecules-and-light/1.5.0-rc.3/phet/molecules-and-light_all_phet.html
• Published, August 12, 2020

A11y Design

• Multimodal Features folder created in PhET Sim Design folder. Sub-folders (Description and Sound) created as needed. A11y Design Main design doc created in Description sub-folder (Date: )
• Link to MAL Interactive Description Design Doc
• This is not a multi-screen sim! (Multi-screen sims may need to additional links for each screen)

A11y Design Prep

• Main Sim Design reviewed for learning goals
• Teaching materials reviewed
• Reviewed model properties with Main Developer or A11y Developer
• Identify visual enhancements that deviate from model (e.g. "hollywooding")

Parallel DOM (PDOM)

Checked items have PDOM structures identified & determined

• Dynamic objects that warrant their own name and description in the Play Area
• All interactive objects and their PhET types (e.g., sliders, buttons, etc.)
• New interaction types (i.e., new a11y types) in this sims, or check:
  • Tricky buttons
    • On/Off switch for light source (new design pattern) Representation of photon emitter button in PDOM #296 - used multiple techniques to scaffold the Light Source button: aria-role="switch" with aria-checked to created an on-off switch experience for AT users, context responses to communicate photons are on/off, and context responses to scaffold interaction when the sim is paused.
    • Play/Pause button for playing and pausing the sim (used context responses to scaffold interaction with Step Forward button, and to indicate when Light Source is off.)
    • Step Forward button (a tricky button) - resolved with help text, context responses, and custom shortcut keys

State Descriptions

Checked items drafted & ready for implementation

Static State Descriptions

• Static screen summary
• Initial sim-specific interaction hint (place in own paragraph)
• Headings for objects/groups in Play Area
• Labels for interactive elements
• Heading outline & Focus Order
• Help text for interactive elements
• Description for Light Spectrum Diagram - final check Light Spectrum final check #340

Dynamic State Descriptions

Checked items completed in design document

• PDOM section of Design Doc contains 1 clear example of each dynamic description
• More examples and possible edge cases have been explored for:
  • Dynamic screen summary (i.e., brief state-of-the-sim)
  • Dynamic states for identified dynamic objects (can add list to this issue)
• Dynamic parameters (scales and approximate ranges) for dynamic objects ready
  • Special case parameters or phrases identified (dynamic screen summary, dynamic states)

Responsive Descriptions

Checked items drafted & ready for implementation

Object Responses

This sim has no sliders, only buttons and radio buttons. There is no aria-valuetext in this sim. Object responses are communicated natively via labels and states.

Context Responses

Molecule Excitation/Vibration Responses

• Different modes of exploration verified
  • Responses at normal speed
  • Responses on slow motion
  • Responses for Step Forward

UI Context Responses

Checked items ready for implementation

• Context responses for items in Control Area (Sim Speed radios, Pause/Play buttons, Step Forward button)
• Common code responses (e.g., Reset All, Mute Sound) verified

Description Design Testing

• n/a

A11y Implementation

Checked items verified by designer

State Descriptions

Static State Descriptions (Screen Summary)

• H1 for sim title
• Tab order correct
• Sim Regions & H2 Headings (Play Area, Control Area, Sim Resources)
• Static part of screen summary
  • Iterations based on design changes verified.
• Initial sim-specific interaction hint provided in own paragraph
• Keyboard Shortcuts interaction hint (PART OF COMMON CODE)

Static State Descriptions (Play Area)

• Sim-specific H3's for sim objects (or none for this sim)
• Interactions are accessible (i.e., have accessible names, keyboard accessible)
• Help text for interactive objects

Static Descriptions (Control Area)

• Sim-specific H3 & H4 for Timing Controls & Sim Speeds
• Interactions are accessible (i.e., names, keyboard accessible)
• Help text for Timing Controls (Sim Speeds & Pause/Play, Step Forward)
• Reset All button & reset response

Sim Resources (Sim Resources)

• Keyboard Shortcuts dialog completed
  • Keyboard Shortcuts dialog accessible
  • Keyboard Shortcuts button added
• Mute Sound button (added when sound is added to main sim repo)

Dynamic State Descriptions

Add or remove details as needed
Dynamic Screen Summary

• Phrases work with all parameters
• Capitalization verified
• Punctuation verified
• Edge cases verified (Phase 4 of break apart - Review of molecule dynamic description #323)
• Photon passes response for non-reactive pairs - Add "photon passes through" context response to slow motion #333 - considered after final design interviews

Play Area Object Descriptions

• no aria-valuetext in this sim

Responsive Descriptions

Object Responses

Light Source

• interaction change to on/off switch - (no longer any aria-valuetext)
• Reasonable communication of on/off states verified in all AT
  • VoiceOver & Safari - works perfectly with focus and state changes
  • NVDA & Firefox
  • JAWS & Chrome

Complex Context Responses (often aria-live regions)

Name Context Responses and details as needed

UI Context Responses

• Pause/Play button responses, verified
• Custom global Shortcut Key for Pause/Play investigated & reviewed (see Hot keys for play/pause/step scenery-phet#571).
• Custom Keyboard Shortcuts added for Timing Controls. In early interview a Shortcut key for Pause/Play was suggested. In final interviews a shortcut for Step Forward was suggested. These shortcuts add a lot of usability to the Timing Controls widget.
  • Consider Step Forward hotkey? #336 - Pause/Play (Alt + K) & Step Forward bigger steps (Alt + L)
  • Update Keyboard Shorcuts dialog with Step Forward hot key #338 - Updates to Keyboard Shortcuts dialog to include Alt + L
  • Once all is verified and implemented, create issue for new design pattern for Timing Controls
    • Document A11y design pattern for TimeControlNode scenery-phet#610

Other A11y ToDo's

Make a website issues to update URL to working prototype on the website's Accessible Sims page

• Once there is a working prototype
• At Dev Testing
• At RC Testing
• At publication

Other Features & Items (e.g., Mobile A11y features?)

• Nothing too difficult in this sim, just buttons and radio buttons

Check Credits

• Verified additions to Team: Wanda Diaz Merced, Brett Fiedler, Matthew Moore, Taliesin Smith, Brianna Tomlinson, Syan Zhou
• Verified Sound Design: Ashton Morris, Mike Winters

Once Evaluation begins

• Ensure interviews are recorded to this sim's interview spreadsheet

During QA or just after publication

• Clean and polish up A11y design doc
• List out main design challenges (if any and if necessary)
• List out lessons learned from this sim (e.g., found focus issues for iOS)
• Create issues to document new A11y Design Patterns (i.e., on/off switch, timing controls) - what repos?
• Suggest improvements to THIS issue template
  • Add a new section, "Create Issues to Document New Design Patterns"
    • New Design Patterns for this sim are posted in the following issues:
      • On/Off switch: Document A11y design pattern for On/Off Switch  sun#603
      • Timing Controls: Document A11y design pattern for TimeControlNode scenery-phet#610

Housekeeping notes (e.g., significant changes to Checklist (optional)
Items to check as March 11

• create issue re changes to PDOM due to slider/button change - Adjust/Update State Descriptions (PDOM) affected by interaction change to Light Source #302
• check off items above and note where descriptions need to be reviewed (e.g., the wording of all the responses for normal, slow, and step forward)
• change and create issue to update content of keyboard shortcut dialog - Keyboard Help Dialog - needs updating based on ineraction changes #303
• create issue to review light spectrum dialog content - Light Spectrum dialog - content create/review #304

See #180 as the previous issue tracking descriptions (pre checklist).
Assigning to designer @Matthew-phet to bring this list up to date.

[terracoda]

Posted by @BLFiedler in duplicate issue #294

#270 Sound Features Video for MAL issue Linked here.

[terracoda]

@jessegreenberg, in phetsims/chipper#954 (comment), @zepumph commented that the issue (phetsims/chipper#954) was no longer blocking and people needing sha's for should talk to @chrisklus to get the they need.

I am marking that issue as done for the MAL check list. Hopefully, you can put the sim in RC now :-)