Merging Ajax and Accessibility

Transcription

1 Merging Ajax and Accessibility Mark Meeker Architect, Orbitz Worldwide The Ajax Experience San Francisco - July 27, 2007 Merging Ajax and Accessibility - 1

2 Mark Meeker Architect, UI Engineering Orbitz Wordwide orbitz.com cheaptickets.com ebookers.com traveport.com Merging Ajax and Accessibility - 2

3 Orbitz is Hiring! UI Engineers Java Developers Information Architects Designers Merging Ajax and Accessibility - 3

4 Then Mostly static pages Full page refreshes Used standard (X)HTML forms Checklist mentality for compliance Merging Ajax and Accessibility - 4

5 Now Filters - Transitions - Auto Complete - Calendar Picker - Collapse - Drag and Drop - Lightbox Forms - Fade - Auto Update - Hover - Module Tabs - Ratings Widget - Sliders - Micro-content popup - Auto Fill - Expand - Inline Validation - Zoom - Navigation - Auto Refresh - Carrousel Merging Ajax and Accessibility - 5

6 Now Highly interactive model Manipulating content on the fly Non-user initiated updates New kinds of controls/widgets Usability tests for compliance Merging Ajax and Accessibility - 6

7 Merging Ajax and Accessibility - 7

8 Ajax is here to stay Merging Ajax and Accessibility - 8

9 Accessibility is here to stay Merging Ajax and Accessibility - 9

10 Merging Ajax and Accessibility -10

11 Can you do both? Merging Ajax and Accessibility -11

12 Making sites accessible Merging Ajax and Accessibility -12

13 Keeping sites accessible Merging Ajax and Accessibility -13

14 Keeping Sites Accessible Don t make things worse Have to start somewhere Merging Ajax and Accessibility -14

15 Can t Bolt Ajax on at the End New interactions require more considerations Not just client-side Moved towards building applications Merging Ajax and Accessibility -15

16 Can I get a side of accessibility? Menu: Hot Doug s, Chicago, IL Merging Ajax and Accessibility -16

17 Train Teams Get buy-in De-bunk accessibility myths More to AT than just screen readers Educate on correct approach Empower to be champions of accessibility Applies across the organization Merging Ajax and Accessibility -17

18 Entire Life-cycle Wireframe Reviews Design Implementation Testing Merging Ajax and Accessibility -18

19 Wireframe Reviews Exposes concerns to others On-going education Iterative improvements Merging Ajax and Accessibility -19

20 Testing Do user testing with AT at testing interfaces Test with AT to validate decisions YUI Theater - Introduction to Screen Readers Merging Ajax and Accessibility -20

21 Ajax versus Accessibility Merging Ajax and Accessibility -21

22 Hurdles 1. Supporting no-script Merging Ajax and Accessibility -22

23 WCAG Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Merging Ajax and Accessibility -23

24 Long Tail Universality Multiple Devices Graded Browser Support Merging Ajax and Accessibility -24

25 Progressive Enhancement Structure Presentation Behavior Merging Ajax and Accessibility -25

26 Progressive Enhancement Content is king! Semantic markup to supply meaning Serve base content to everyone Add presentation and behavior to enhance experience Merging Ajax and Accessibility -26

27 Structure Presentation Behavior XHTML CSS JavaScript Merging Ajax and Accessibility -27

28 Progressive Enhancement Benefits Separation of layers Phased development Cleaner code Easier to validate and unit test Improved re-use of styles and behaviors Merging Ajax and Accessibility -28

29

30

31

32

33 Hurdles 1. Supporting no-script 2. Avoiding separate but equal Merging Ajax and Accessibility -33

34 WCAG Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Merging Ajax and Accessibility -34

35 Separate but Equal? Filters - Transitions - Auto Complete - Calendar Picker - Collapse - Drag and Drop - Lightbox Forms - Fade - Auto Update - Hover - Module Tabs - Ratings Widget - Sliders - Micro-content popup - Auto Fill - Expand - Auto Refresh - Zoom - Navigation - Inline Login - Carrousel Merging Ajax and Accessibility -35

36 Merging Ajax and Accessibility -36

37 Hijax Merging Ajax and Accessibility -37

38 Hijax Term coined by Jeremy Keith Bulletproof Ajax ( Pull in portion of page via Ajax when XHR is supported Re-use same portion when a full page refresh is required Merging Ajax and Accessibility -38

39 Hijax Benefits Modular development Improved re-use of server-side code Don t Repeat Yourself (DRY principal) Merging Ajax and Accessibility -39

40

41

42

43

44 XHR Hijax Merging Ajax and Accessibility -44

45

46

47

48 Hurdles 1. Supporting no-script 2. Avoiding separate but equal 3. Balancing the interface Merging Ajax and Accessibility -48

49 Balancing the Interface Redundant inputs Keyboard navigation Flow of the page Setting focus Merging Ajax and Accessibility -49

50 Balancing the Interface Benefits Improved awareness of accessibility Greater concern for usability in general Introduction of UI pattern library Helps interface evolve quicker End goal of making it usable Merging Ajax and Accessibility -50

51 Redundant Interfaces Merging Ajax and Accessibility -51

52 Slider to choose a max price Current price? Very visual Merging Ajax and Accessibility -52

53 Move one unit? Merging Ajax and Accessibility -53

54 Setting exact price? Merging Ajax and Accessibility -54

55 Merging Ajax and Accessibility -55

56 Redundant Interfaces Multiple options Consider how the user will interact Forced to identify use cases Merging Ajax and Accessibility -56

57 Keyboard Navigation Merging Ajax and Accessibility -57

58

59 Keyboard Navigation Consider keyboard input for controls Seek out CLI based developers for feedback Merging Ajax and Accessibility -59

60 Flow of the Page Merging Ajax and Accessibility -60

61 Merging Ajax and Accessibility -61

62 Merging Ajax and Accessibility -62

63 Flow of the Page Linear page flow Lead the user towards the updates Consider the viewport of the browser Insert into existing elements Avoid inserting at the document level Merging Ajax and Accessibility -63

64 Setting Focus Merging Ajax and Accessibility -64

65

66 Merging Ajax and Accessibility -66

67 Setting Focus Use with caution Better to lead with jump links and headings Merging Ajax and Accessibility -67

68 Hurdles 1. Supporting no-script 2. Avoiding separate but equal 3. Balancing the interface 4. Stretching the browser Merging Ajax and Accessibility -68

69 Stretching the Browser Bringing desktop applications to the browser <div> can be a button <span> can be a slider Need a better API Leverage accessibility support in the OS Merging Ajax and Accessibility -69

70 WAI-ARIA W3C s Accessible Rich Internet Applications Expands UI controls to hook into desktop API Supported with FF 1.5 Support in frameworks Merging Ajax and Accessibility -70

71 Roles Identifies the what Mark-up controls with well-defined semantic meaning controls: sliders, trees, alerts, dialogs structure: navigation, toolbars, tabs Live Regions Merging Ajax and Accessibility -71

72 States Gives meaning to Roles Checked, expanded, disabled Calls out various levels and nesting in a tree control Type of update of a live region Merging Ajax and Accessibility -72

73 ARIA Benefits Shared API Can be baked into frameworks Clean, standard mark-up Merging Ajax and Accessibility -73

74 Merging Ajax and Accessibility -74

75 <span tabindex="0" role="role:slider" aaa:valuenow="400" aaa:valuemin="100" aaa:valuemax="550" id="price-slider" title="total cost slider" /> Merging Ajax and Accessibility -75

76 The person who removes a mountain begins by carrying away small stones. Build on a solid foundation. Focus on usability. Improvements benefit everyone. Merging Ajax and Accessibility -76

77 Photo Credits Merging Ajax and Accessibility -77

78 Slides and Contact or Merging Ajax and Accessibility -78