1. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Matt May | @mattmay | Accessibility Evangelist Geek to Geek: Universal Design

2. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. How we got here  1990s  HTML 2.0   Accessibility guidelines  Building around semantics  WCAG 1.0 released in 1999 2

3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Late 1990s - Early 2000s 3

4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Late 2000s 4

5. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. The first crossroads  Designing for mobile  “One Web” 5

6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2010 6

7. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2010 7

8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. What about Universal Design?  “The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” Ron Mace 8

9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Seven Principles of Universal Design  Equitable use  Flexibility in use  Simple and intuitive  Perceptible information  Tolerance for error  Low physical effort  Size and space for approach and use 9

10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Universal Design in technology  Universal design = accepting entropy  If there are 3 types of screen, why shouldn’t we expect a 4 th ?  Designing for our future selves 10

11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Professionalism  Rules vs. education  Evolving knowledge of problems  Designing for compatibility  Designing for use  Designing for situation 11

12. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. The tools of the trade  People  Needs and abilities  Permanent, temporary and situational disabilities  Technology  CPU  Bandwidth  Display  Browser and OS  Languages  Content 12

13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. How UD applies to HTML  HTML vs. XHTML  Structure vs. presentation  Reading order  Layout tables -> CSS  Data tables -> semantics  Forms  Customizing for different device classes  Size of click targets  ARIA  Video 13

14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. HTML vs. XHTML  XHTML  HTML5 pros and cons  Designing for UD with HTML5 14

15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. HTML5 tricks and traps  IE 6  Canvas accessibility  Captioning in  Obsolete attributes  @longdesc  @summary  Drag and drop  http://html5accessibility.com http://html5accessibility.com 15

16. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Progressive enhancement  Test capabilities before using them  Fallback possibilities  Images  Non-standard browser features  SVG -> VML  Flash 16

17. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Reading order  Tabindex as last resort  …except in Flash  Accesskey… never 17

18. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Fonts  Assure good color contrast  Colour Contrast Analyser  Font foundries (Typekit, etc.)  Readability  Choice of fonts  Spacing 18

19. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Layout tables  The complete list of when layout tables are acceptable:  In HTML email  The old problem, which is usually blown out of proportion  Accessibility to screen-reader users *  The new problem  Designing for multiple screens  Demo 19

20. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Data tables  th  col, colgroup and @scope  @id and @headers 20

21. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Forms  label  alt  fieldset and legend  Submit events  Validation  HTML5 21

22. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Customizing for different device classes  How mobile devices handle resizing  Adjusting the size of click targets  Using new HTML5 input types  search  time  url  number  Designing with fluid layouts  CSS Media Queries  Demo 22

23. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ARIA  Juicy Studio Accessibility Toolbar  Landmark roles  AT support  Labels  Roles  aria-flowto  Live regions  Demo 23

24. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Video  Codecs  H.264  FLV  WebM  Bitrates  Adaptive bitrate delivery  Captioning and description 24

25. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.