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

© 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

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

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

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

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

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

© 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

© 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

© 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

© 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

© 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

© 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

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. HTML5 tricks and traps  IE 6  Canvas accessibility  Captioning in  Obsolete attributes  Drag and drop 

© 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

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

© 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

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

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Data tables  th  col, colgroup 20

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

© 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

© 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

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

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