IBM Accessibility Build Accessible Experiences Using Carbon with

Introductions Tom Brunet Head of Accessibility Technology & Innovation IBM Accessibility thbrunet@us. ibm. com D. A. Kahn Frontend developer, Web Accessibility Advocate IBM Cloud and Cognitive Software DA. Anguiano@ibm. com Brent Shiver Software Engineer IBM Accessibility bnshiver@us. ibm. com IBM Accessibility / May 2019 / © 2019 IBM Corporation 2

IBM’s Commitment to Accessibility Philanthropic / AT IBM Accessibility / May 2019 / ©

Enterprise Design Thinking It’s a proven way to come to better solutions, faster. 2 x faster to market The Loop: Observe, Reflect, Make 300% return on investment 75% Hills, Playbacks, Sponsor Users increased team efficiency IBM Accessibility / May 2019 / © 2019 IBM Corporation 4

Focus on user outcomes Shift the conversation Build empathy, not sympathy • From features to outcomes • Understand the user’s context, • Evaluate issues based on user impact Differentiate between users and clients • Think past the first user you think of not just task Understand user role • How do they interact with the team? Measure user outcomes • Is measurement biased? IBM Accessibility / May 2019 / © 2019 IBM Corporation 5

Designing an accessible experience Design: • Who are our users? What are they trying to accomplish? • How do they do the task today? How would they like to do that task? • How can all of our users accomplish the task in a delightful way? Design spec / Blueprint: Define the visuals, the semantics, and the behavior • What widgets make up the page? • What roles and states underlie the design? • What palette is used? • Spacing, fonts, sizes, etc • What happens in response to events? IBM Accessibility / May 2019 / © 2019 IBM Corporation 6

Basic Example (from WAI-ARIA practices) IBM Accessibility / May 2019 / © 2019 IBM

Implementation… IBM Accessibility / May 2019 / © 2019 IBM Corporation 8

Vanilla JS HTML defines a scaffold. Java. Script used to initialize and change states. After Java. Script executes, HTML may look completely different - elements can be added, removed, or completely changed. Cascade of errors – an error in one state change results in ill-defined following state change IBM Accessibility / May 2019 / © 2019 IBM Corporation <div role="radiogroup" aria-labelledby="gdesc 1"> <h 3>Pizza Crust</h 3> <div role="radio" aria-checked="false” tabindex="0">Regular crust</div> <div role="radio" aria-checked="false” tabindex="-1">Deep dish</div> <div role="radio" aria-checked="false" tabindex="-1">Thin crust</div> 9

Vanilla JS Complex state management Single mode change requires multiple UI state changes: • All radio buttons set aria-checked to false and tabindex=-1 • Current item sets aria-checked = ‘true’, tabindex=0 function set. Radio. Button(node, state) { var image = get. Image(node); if (state == 'true’) { node. set. Attribute('aria-checked', 'true’) node. tab. Index = 0; node. focus() } else { node. set. Attribute('aria-checked', 'false’) node. tab. Index = -1; } • Set focus on root node } IBM Accessibility / May 2019 / © 2019 IBM Corporation 10

Angular Created by a Google engineer Full-featured MVC framework Two-way binding: • DOM changes mapped to model changes • Angular detects model change • Determines UI dependent on model change • Re-creates affected parts of the DOM Benefits: • Separation of data from UI • Variables defined directly in HTML IBM Accessibility / May 2019 / © 2019 IBM Corporation 11

Angular Components defined with templates – HTML with angular control statements embedded IBM Accessibility

Angular Control statements IBM Accessibility / May 2019 / © 2019 IBM Corporation 13

Angular State change simplified – modify the model and the UI updates IBM Accessibility

Angular Accessibility Notes There is a difference between Angular UI toolkits and Angular. Be sure to assess the UI toolkit Single Page Apps: • Dynamically loading content – use aria-live appropriately Angular 2+ may not recognize ARIA attributes directly, use attr. : • Don’t forget unique page titles – need to watch for route changes and update the title (hook router similar to focus) • [attr. aria-checked]="selected === 0" For a single page app, be careful to assess focus after navigations • router. events. pipe(filter(event => event instanceof Navigation. End)). subscribe(() => { document. get. Elements. By. Tag. Name('h 1')[0]. focus(); }); IBM Accessibility / May 2019 / © 2019 IBM Corporation 15

React Created by a Facebook engineer Introduces JSX, a mix of Java. Script and HTML: const element = <h 1>Hello, {name}</h 1>; One-way binding: • UI event changes the model • Virtual DOM re-created from model • Computes diff vs actual DOM • Applies minimum change Benefits: • Every DOM matches a defined state (fresh DOM) • DOM changes trigger rendering – minimizing these helps performance IBM Accessibility / May 2019 / © 2019 IBM Corporation 16

React Rendered state defined in script – component’s render method. JSX allows HTML to be mixed with script. React modifies DOM to generate fresh from script IBM Accessibility / May 2019 / © 2019 IBM Corporation 17

React State change simplified – modify the model and the UI updates IBM Accessibility

React Accessibility Notes reactjs. org/docs/accessibility. html There is a difference between React UI toolkits and Angular. Be sure to assess the UI toolkit Focus: • Create a ref: this. text. Input = React. create. Ref(); … <input type="text" ref={this. text. Input} /> • Focus: this. text. Input. current. focus(); Injection <div>’s can break HTML semantics • Use <Fragment> or <> to wrap User html. For=“input. Id” instead of for=“input. Id” to label form controls Consider where focus goes after page change events. Dynamically loading content – use aria-live appropriately IBM Accessibility / May 2019 / © 2019 IBM Corporation 19

Carbon www. carbondesignsystem. com • Open source component library • Default themes based on IBM Design Language ibm. com/design/language • Components for Java. Script, React, Angular, Vue ibm. biz/carbon-component-status • Track known accessibility issues: ibm. biz/carbon-project-a 11 y IBM Accessibility / May 2019 / © 2019 IBM Corporation 20

Carbon based on IBM Design Language • Provides a specification of basic design concepts (e. g. , color, typography, layout, etc) • Considers accessibility throughout the specification • Color palette easily checked for color contrast IBM Accessibility / May 2019 / © 2019 IBM Corporation 21