geek to geek: universal design

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

Upload: fayola

Post on 24-Feb-2016

88 views

Category:

Documents


2 download

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 Presentation

TRANSCRIPT

Page 1: Geek to Geek: Universal Design

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

Matt May | @mattmay | Accessibility EvangelistGeek to Geek: Universal Design

Page 2: Geek 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

Page 3: Geek to Geek: Universal Design

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

Late 1990s - Early 2000s

3

Page 4: Geek to Geek: Universal Design

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

Late 2000s

4

Page 5: Geek to Geek: Universal Design

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

The first crossroads

Designing for mobile “One Web”

5

Page 6: Geek to Geek: Universal Design

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

2010

6

Page 7: Geek to Geek: Universal Design

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

2010

7

Page 8: Geek to Geek: Universal Design

© 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

Page 9: Geek to Geek: Universal Design

© 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

Page 10: Geek to Geek: Universal Design

© 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

Page 11: Geek to Geek: Universal Design

© 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

Page 12: Geek to Geek: Universal Design

© 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

Page 13: Geek to Geek: Universal Design

© 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

Page 14: Geek to Geek: Universal Design

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

HTML vs. XHTML

XHTML HTML5 pros and cons Designing for UD with HTML5

14

Page 15: Geek to Geek: Universal Design

© 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

Page 16: Geek to Geek: Universal Design

© 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

Page 17: Geek to Geek: Universal Design

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

Reading order

Tabindex as last resort …except in Flash

Accesskey… never

17

Page 18: Geek to Geek: Universal Design

© 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

Page 19: Geek to Geek: Universal Design

© 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

Page 20: Geek to Geek: Universal Design

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

Data tables

th col, colgroup and @scope @id and @headers

20

Page 21: Geek to Geek: Universal Design

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

Forms

label alt fieldset and legend Submit events Validation

HTML5

21

Page 22: Geek to Geek: Universal Design

© 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

Page 23: Geek to Geek: Universal Design

© 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

Page 24: Geek to Geek: Universal Design

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

Video

Codecs H.264 FLV WebM

Bitrates Adaptive bitrate delivery

Captioning and description

24

Page 25: Geek to Geek: Universal Design

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