Top Banner

Click here to load reader

Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Jan 27, 2015

ReportDownload

Technology

Designing and developing with accessibility in mind has numerous benefits: it makes your website usable by everyone, it makes your content inherently more search engine friendly, and it makes providing context-sensitive interfaces (e.g. mobile) even easier. In this session, Aaron Gustafson will provide you with a quick refresher on progressive enhancement and show you where the Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA) spec fits into it all. Throughout the talk, Aaron will provide numerous examples of how to weave ARIA into your projects and how to use ARIA, in concert with JavaScript, to dramatically enhance the usability of client-side widgets.

  • 1. Progressive Enhancementwith ARIAAaron Gustafson

2. We are creatingricher onlineexperiences 3. ...and the barriers which prohibit them.photo by drcorneilus 4. Accessibility is crucialAaron Gustafsonphoto by TimothyJ 5. Google is a voracious consumer of the web. And its blind.photo by Ed Yourdon 6. But accessibility isnt only aboutsupportingscreen readers. 7. What if you cant use a mouse?photo by lastquest 8. What if you dont see a change?photo by placenamehere 9. We can and must build better. photo by Guillermo 10. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Building better Every great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol. Text & HTTP 11. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Building better Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured.(x)HTMLText & HTTP 12. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Building better CSS can enhance usability through visual clues... but it can also reduce accessibility if misused.CSS(x)HTMLText & HTTP 13. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Building better JavaScript can be used to build more intuitive interfaces... but it cannot be relied on 100% of the time. JavaScript CSS(x)HTMLText & HTTP 14. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Building better WAI-ARIA extends the semantics of the document to provideARIA additional insight into the state of the interface and how to interact JavaScriptwith it. CSS(x)HTMLText & HTTP 15. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Progressive Enhancement ARIAUser Experience JavaScript CSS BASICADVANCEDBrowser Capabilities (x)HTMLText & HTTP 16. WAI-ARIA is a new(ish) tool photo by Saffanna 17. Semantics+ 18. Map OS concepts to the web photo by steve-uk 19. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010HTML 20. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010HTML 21. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/ 22. Call attention to important piecesphoto by Verity Cridland 23. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles 24. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="banner" 25. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="main" 26. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="navigation" 27. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="article" 28. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="complementary" 29. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="list" 30. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="listitem" 31. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles 32. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="form" 33. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles role="contentinfo" 34. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Structural Roles Document Structure articleheading presentation columnheader img region definition listrow directorylistitemrowheader document mathseparator groupnoteLandmarks applicationcontentinfo navigation banner formsearch complementarymain 35. Explain what something is& how it works photo by DavePress 36. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Widget Roles OK (of course OK would be better)

Something went wrong.

Something went wrong.

37. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Widget Roles alertmarqueeslider alertdialogmenuitem spinbutton button menuitemcheckbox status checkbox menuitemradiotab combobox option tabpanel dialog progressbartextbox gridcell radiotimer link radiogroup tooltip logscrollbartreeitemWidget Container Roles grid menubartree listboxtablisttreegrid menu toolbar 38. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Widget Properties aria-activedescendantaria-multiline aria-atomicaria-multiselectable aria-autocompletearia-orientation aria-controlsaria-owns aria-describedby aria-posinset aria-dropeffectaria-readonly aria-flowtoaria-relevant aria-haspopuparia-required aria-label aria-setsize aria-labelledbyaria-sort aria-level aria-valuemax aria-livearia-valuemin 39. Indicate whats going onphoto by exfordy 40. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Widget StatesB B (off) (on) 41. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Widget StatesB B (off) (on) 42. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Widget StatesB B (off) (on) 43. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Complex Widgets 44. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Complex Widgetsrole="application" 45. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Complex Widgets role="slider" aria-labelledby="label_handle_valueA" aria-valuemin="0" aria-valuemax="71" aria-valuenow="22" aria-valuetext="Apr 04" 46. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Complex Widgets role="presentation" 47. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Widget States aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow (the W3C denes this as a property) aria-valuetext (ditto) 48. Highlight living contentphoto by kevin1024 49. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Live Regions 50. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Live Regions 51. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Live Regions 140 52. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Live Regions 140 53. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Live Regions 140 characters left 54. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Notication Options off change not announcedpolite change announced after user completes her current activityassertive user agent should interrupt the users activity, but not immediatelyrude user agent should interrupt the users activity immediately 55. Manage focus with slight-of-hand photo by cfpg 56. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 tabindex helps manage focus

This div can now receive focus using a keyboards tab key. How cool is that?

This div wont be focused by a user via the tab key, but JavaScript can focus() it. Nifty, huh?

57. Piecing it all together photo by Richard Jones 58. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Lets Build a Tabbed Interface 59. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Traditional approach Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!

...
...
  • Overview
  • Ingredients
  • Directions
  • Nutrition

60. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Static HTML with no style 61. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 A little typography 62. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Typography and color 63. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Taking another look 64. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Taking another look .tabbed 65. Progressive Enhancement with ARIA!ThinkVitamin Presents... HTML & CSS August 2010 Required source Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!

... Ingredients
  • 1 (9in) unbaked deep dish pie crust
  • cup white sugar ...
Directions ...

66. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Understanding the owSplit thecontent & make Pagesome tabs JS? YesNo 67. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS August 2010 Mouse-based interaction 68. Progres