Accessible Interactions and Experience

IMP video player

  • Name: IMP video player

  • Field: Accessibility, Front-End Development, and Course and UX Design

origin

Let's create accessible courses for The State of Michigan and an accessible player to contain them.

Timeline

  1. Led and contributed towards the accessible remediation of dozens of flash courses for The State of Michigan
  2. Built a component to use across products that would also house the courses
Journey

Prompt

Make static courses interactive and those interactions accessible.

Strategy

Research WCAG guidelines for interactions and develop keyboard interactions including for drag and drop.

Challenges

We encountered too many bugs rending the courses in the flash player.

The default player did not allow scrubbing.

Response

Build a component for Addis Enterprises that could be used across products.

Develop an interaction for the transcript to be traversed and filtered to locate key content.

Moral

Solution

preview of the accessible video player
Preview of the accessible video player in action with controls and live transcript visible

Note: the web player component has changed since I left the organization

preview of the transcript locating keywords
With long courses, it becomes important to locate key parts of the lesson and resume last playtime. This interaction easily allows one to locate the content they are looking for in accessible closed captions

Growth

Advancing my abilities in javascript towards building an HTML5 accessible player heavy in keyboard interaction and navigatbility.

Impact

Taking a step forward with AE to build components for products and services while affording me the ability to employ accessibility knowledge in development extending beyond rapid prototyping.