Improving the Accessibility and Usability of Complex Web Applications

Transcription

1 Media #WWDC14 Improving the Accessibility and Usability of Complex Web Applications Session 516 Jesse Bunch Productivity Engineering 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2

3

4

5

6

7

8

9

10 What You Will Learn

11 What You Will Learn Accessibility fundamentals

12 What You Will Learn Accessibility fundamentals Latest research and statistics

13 What You Will Learn Accessibility fundamentals Latest research and statistics Accessibility standards

14 What You Will Learn Accessibility fundamentals Latest research and statistics Accessibility standards ARIA and focus management

15 What You Will Learn Accessibility fundamentals Latest research and statistics Accessibility standards ARIA and focus management Common issues and solutions

16

17

18

19

20

21 Accessibility

22 Accessibility Supports real people with real needs by providing an alternate interaction model, like a keyboard or switch

23 Universal Design Design so thoughtful that it works for everyone

24

25 ALIGNED PERFECTLY FOR AN INCREDIBLE SWING

26

27

28

29

30

31

32

33

34

35

36

37 Here s Why

38 285 Million Visually impaired, worldwide World Health Organization, 2013

39 40 Million Completely blind, worldwide World Health Organization, 2013

40 Accessibility Standards

41 Web Content Accessibility Guidelines WCAG

42 Basic Principles

43

44 Perceivable Operable Understandable Robust

45 Perceivable

46 Perceivable

47 Operable

48 Understandable

49 Understandable

50 Understandable

51 Understandable

52 Understandable

53 Robust

54 Robust

55 Robust

56 Robust

57 Here s How

58 Use Semantic Markup

59 Semantic Markup

60 Semantic Markup Uses <div>

61 Semantic Markup Uses <div> Uses semantic headings

62 Semantic Markup <div style= font-size: 18px; > </div> All About Widgets

63 Semantic Markup <div style= font-size: 18px; > </div> All About Widgets

64 Semantic Markup <div style= font-size: 18px; > </div> All About Widgets

65 Semantic Markup <div style= font-size: 18px; > </div> All About Widgets <h1>all About Widgets</h1>

66 Semantic Markup <div style= font-size: 18px; > </div> All About Widgets <h1>all About Widgets</h1>

67 Semantic Markup <div style= font-size: 18px; > </div> All About Widgets <h1>all About Widgets</h1>

68 Use Standard Controls

69 Controls Custom slider

70 Controls Custom slider <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div>

71 Controls Custom slider <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);

72 Controls Custom slider <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup); // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave); el.addeventlistener( touchcancel, handletouchcancel);

73 <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave); el.addeventlistener( touchcancel, handletouchcancel);

74 <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave); el.addeventlistener( touchcancel, handletouchcancel);

75 <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave); el.addeventlistener( touchcancel, handletouchcancel); // Keyboard el.addeventlistener( focus, handlefocus); el.addeventlistener( blur, handleblur); el.addeventlistener( keydown, handlekeydown);

76 <div class= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave); el.addeventlistener( touchcancel, handletouchcancel); // Keyboard el.addeventlistener( focus, handlefocus); el.addeventlistener( blur, handleblur); el.addeventlistener( keydown, handlekeydown);

77 Controls Native slider

78 Controls Native slider <input type= range min= 0 max= 100 value= 1 >

79 Controls Native slider <input type= range min= 0 max= 100 value= 1 > Browser Handles Mouse events Touch events Keyboard events Tracking state Style updates for focus and blur Notifying observers Accessibility

80 Controls Native slider <input type= range min= 0 max= 100 value= 1 > Browser Handles Mouse events Touch events Keyboard events Tracking state Style updates for focus and blur Notifying observers Accessibility

81 Controls Custom slider <div> <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave);

82 Controls Custom slider <div> <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave);

83 ARIA Accessible Rich Internet Applications

84 ARIA Custom slider <div> <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave);

85 ARIA Custom slider <div role= slider > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave);

86 ARIA Custom slider <div role= slider aria-valuemin= 0 aria-valuemax= 100 > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave);

87 ARIA Custom slider <div role= slider aria-valuemin= 0 aria-valuemax= 100 aria-valuenow= 50 > <div class= left-label >... </div> <div class= slider-handle >... </div> <div class= right-label >... </div> </div> // Mouse el.addeventlistener( mousedown, handlemousedown); el.addeventlistener( mousemove, handlemousemove); el.addeventlistener( mouseup, handlemouseup);! // Touch el.addeventlistener( touchstart, handletouchstart); el.addeventlistener( touchmove, handletouchmove); el.addeventlistener( touchend, handletouchend); el.addeventlistener( touchleave, handletouchleave);

88 ARIA Retrofitting old content

89 ARIA Retrofitting old content <div style= font-size: 18px > </div> All About Widgets

90 ARIA Retrofitting old content <div style= font-size: 18px role= heading aria-level= 1 > </div> All About Widgets

91 ARIA Implicit roles // Implicitly gets role= heading and aria-level= 1 <h1>all About Widgets</h1>!

92 ARIA Implicit roles // Implicitly gets role= heading and aria-level= 1 <h1>all About Widgets</h1>! // Effectively the same as a <div> tag <h1 role= presentation >All About Widgets</h1>!

93 Focus Management

94 Focus Management tabindex

95 Focus Management tabindex tabindex= 0 Focusable with JavaScript, in default tab order tabindex= -1 Focusable with JavaScript, not in default tab order No tabindex Not focusable with JavaScript, not in default tab order* * Except for native controls and links

96 Focus Management tabindex tabindex= 0 Focusable with JavaScript, in default tab order tabindex= -1 Focusable with JavaScript, not in default tab order No tabindex Not focusable with JavaScript, not in default tab order* * Except for native controls and links

97 Focus Management tabindex tabindex= 0 Focusable with JavaScript, in default tab order tabindex= -1 Focusable with JavaScript, not in default tab order No tabindex Not focusable with JavaScript, not in default tab order* * Except for native controls and links

98 Focus Management tabindex tabindex= 0 Focusable with JavaScript, in default tab order tabindex= -1 Focusable with JavaScript, not in default tab order No tabindex Not focusable with JavaScript, not in default tab order* * Except for native controls and links

99

100

101

102

103

104

105 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0 tabindex= 0

106 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

107 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

108 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

109 tabindex= -1 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

110 tabindex= -1 tabindex= -1 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

111 tabindex= -1 tabindex= -1 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

112 tabindex= -1 tabindex= -1 tabindex= 0 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1 tabindex= -1

113

114 Perceivable Operable Understandable Robust

115 Demo

116

117 Summary

118 Summary Perceivable, operable, understandable, robust

119 Summary Perceivable, operable, understandable, robust Use standard controls and semantic markup

120 Summary Perceivable, operable, understandable, robust Use standard controls and semantic markup Use ARIA to fill the gaps

121 Summary Perceivable, operable, understandable, robust Use standard controls and semantic markup Use ARIA to fill the gaps Make sure controls are keyboard accessible

122 More Information Jake Behrens App Frameworks Evangelist Web Content Accessibility Guidelines ARIA Documentation Combining Web Accessibility and Automation on ios Apple Developer Forums

123 Related Sessions Accessibility on OS X Russian Hill Tuesday 2:00 PM Accessibility on ios Russian Hill Tuesday 3:15 PM Web Inspector and Modern JavaScript Russian Hill Thursday 10:15 AM

124