Pretty and Accessible Bringing Beauty Simplicity and Usability

Pretty and Accessible Bringing Beauty, Simplicity, and Usability to Accessible Products Rachel Comerford | Amy Salmon

Who We Are Rachel Comerford Senior Director of Content Standards and Accessibility Macmillan Learning Email: rachel. comerford@macmillan. com Twitter: @rallyfora 11 y Amy Salmon Senior Accessibility Consultant Tech For All, Inc. Email: asalmon@tfaconsulting. com Twitter: @asalmonamy

Understand Context to Build Effective Learning Experiences We Must: ● Understand the learning goal ● Understand our users ● Understand what’s already solved In Order to: ● Help students learn effectively ● Follow principles of universal design ● Make an experience that is delightful to perceive and use

Understand the Roles* *https: //www. w 3. org/community/wai-engage/wiki/Accessibility_Responsibility_Breakdown

Understand the Learning Goal

“Make this graph accessible”

Discover the learning goal Learning Goal 1 Identify the elements of a graph and determine what is missing Learning Goal 2 Explain the elements and impact of a typical business cycle

Le Chatelier’s Pool Help students understand how the addition or removal of reactants or products affects an equilibrium. Given two connected containers the fluid levels within the containers will always seek equilibrium

Bomb Calorimeter Help students understand that different fuels have different energy capacities.

Understand Users’ Needs

Personas, a tool for understanding ● ● ● Based in research with real people Why are they here working with your system? What drives them? What do they need or want to do in the system? What information or capabilities do they need in order to do those things? What means of communicating that information or providing those capabilities works for them?

Halee Bryant Performer ● School comes naturally, always has ● Highly performance driven ● Rigorous structure Wants ● Clear view of what’s coming weeks ahead ● Easy way to review grades and mastery of course concepts Uses ● Screen reader to perceive visual content ● Keyboard to navigate To meet her needs provide ● Quick view of full semester ● Easy access to grades and mastery data ● Text or audio alternatives for images, videos, graphs, color coding ● Logical reading order and meaningful sequence of content ● Accessible navigation, content, and interactions

Joaquin Diaz Striver ● Doesn’t shy from challenges ● High self-standards ● Proactive to avoid falling behind Wants ● Clear indication of what to do next ● Easy way to review grades and mastery of course concepts Uses ● Mobile device to do course work, often in public spaces where audio isn’t allowed To meet his needs provide ● Quick access to task list ● Easy access to grades and mastery data ● Ensure content is responsively designed ● Transcript or closed captions for audio and audio/visual content ● A way to stop or pause audio or video

Suki Mc. Fadden Passionate ● Puts in effort when passionate; minimal if not interested ● Moderate structure ● Generally reactive Wants ● Reminders of assigned content as it comes due ● Easy way to review mastery of course concepts Uses ● Text alternatives to audio content To meet her needs provide ● Clear reminders of upcoming due dates ● Easy access to mastery data ● Transcript or closed captions for audio and audio/visual content

Shared (multiple) benefits Addressing the needs of one persona addresses or helps the needs of another ● ● Closed captions on videos Color contrast ratio Curb cuts Responsive design

Understand What’s Already Solved

HTML 5 ● ● Navigation Headings Lists Asides

HTML 5 has many needs covered ● ● ● Sections Groups Graphics Media Controls These are tested and meet standards of universal design without requiring additional code.

Design language/system ● A system of components, interaction patterns, visual patterns ● Rules for their use and revision ● Library shared by design & engineering ● Built using existing standards like HTML 5 ● Evaluated with a diverse user population

Sliders ● ● Single slider pattern that all designers use across ML products Single slider component that engineers use across ML products Consistency for users Time savings for design and engineering

Le Chatlier’s Pool (demo)

Bomb Calorimeter (demo)

Putting it together To create effective learning experiences that are usable, even delightful for all our users we must ● Understand the learning goal ● Understand our users and their needs ● Understand what’s already solved Apply that knowledge as we build

Questions