geek to geek: universal design
DESCRIPTION
Geek to Geek: Universal Design. Matt May | @ mattmay | Accessibility Evangelist. How we got here. 1990s HTML 2.0 < img alt> Accessibility guidelines Building around semantics WCAG 1.0 released in 1999. Late 1990s - Early 2000s. Late 2000s. The first crossroads. - PowerPoint PPT PresentationTRANSCRIPT
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Matt May | @mattmay | Accessibility EvangelistGeek to Geek: Universal Design
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
How we got here
1990s HTML 2.0
<img alt> <table summary>
Accessibility guidelines Building around semantics WCAG 1.0 released in 1999
2
© 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
6
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2010
7
© 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 4th? 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 <video> Obsolete attributes
@longdesc @summary
Drag and drop
http://html5accessibility.com
15
© 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 email
The old problem, which is usually blown out of proportion Accessibility to screen-reader users *
The new problem Designing for multiple screens
Demo19
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Data tables
th col, colgroup and @scope @id and @headers
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
Demo22
© 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.