1 / 25

Geek to Geek: Universal Design

Geek to Geek: Universal Design. Matt May | @ mattmay | Accessibility Evangelist. How we got here. 1990s HTML 2.0 < img alt> <table summary> Accessibility guidelines Building around semantics WCAG 1.0 released in 1999. Late 1990s - Early 2000s. Late 2000s. The first crossroads.

fayola
Download Presentation

Geek to Geek: Universal Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Geek to Geek: Universal Design Matt May | @mattmay | Accessibility Evangelist

  2. How we got here • 1990s • HTML 2.0 • <img alt> • <table summary> • Accessibility guidelines • Building around semantics • WCAG 1.0 released in 1999

  3. Late 1990s - Early 2000s

  4. Late 2000s

  5. The first crossroads • Designing for mobile • “One Web”

  6. 2010

  7. 2010

  8. 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

  9. 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

  10. Universal Design in technology • Universal design = accepting entropy • If there are 3 types of screen, why shouldn’t we expect a 4th? • Designing for our future selves

  11. Professionalism • Rules vs. education • Evolving knowledge of problems • Designing for compatibility • Designing for use • Designing for situation

  12. The tools of the trade • People • Needs and abilities • Permanent, temporary and situational disabilities • Technology • CPU • Bandwidth • Display • Browser and OS • Languages • Content

  13. 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

  14. HTML vs. XHTML • XHTML • HTML5 pros and cons • Designing for UD with HTML5

  15. HTML5 tricks and traps • IE 6 • Canvas accessibility • Captioning in <video> • Obsolete attributes • @longdesc • @summary • Drag and drop • http://html5accessibility.com

  16. Progressive enhancement • Test capabilities before using them • Fallback possibilities • Images • Non-standard browser features • SVG -> VML • Flash

  17. Reading order • Tabindex as last resort • …except in Flash • Accesskey… never

  18. Fonts • Assure good color contrast • Colour Contrast Analyser • Font foundries (Typekit, etc.) • Readability • Choice of fonts • Spacing

  19. 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

  20. Data tables • th • col, colgroup and @scope • @id and @headers

  21. Forms • label • alt • fieldset and legend • Submit events • Validation • HTML5

  22. 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

  23. ARIA • Juicy Studio Accessibility Toolbar • Landmark roles • AT support • Labels • Roles • aria-flowto • Live regions • Demo

  24. Video • Codecs • H.264 • FLV • WebM • Bitrates • Adaptive bitratedelivery • Captioning and description

More Related