geek to geek: universal design

Download Geek to Geek: Universal Design

Post on 24-Feb-2016

54 views

Category:

Documents

0 download

Embed Size (px)

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

Is Universal Design Still Possible?

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

2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.How we got here1990sHTML 2.0

Accessibility guidelinesBuilding around semanticsWCAG 1.0 released in 1999

2 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.@alt was _not_ exclusively 2Late 1990s - Early 2000s3

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

4 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.The first crossroadsDesigning for mobileOne Web5 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 DesignEquitable useFlexibility in useSimple and intuitivePerceptible informationTolerance for errorLow physical effortSize and space for approach and use

9 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Universal Design in technologyUniversal design = accepting entropyIf there are 3 types of screen, why shouldnt we expect a 4th?Designing for our future selves10 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ProfessionalismRules vs. educationEvolving knowledge of problemsDesigning for compatibilityDesigning for useDesigning for situation11 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.The tools of the tradePeopleNeeds and abilitiesPermanent, temporary and situational disabilitiesTechnologyCPUBandwidthDisplayBrowser and OSLanguagesContent12 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.How UD applies to HTMLHTML vs. XHTMLStructure vs. presentationReading orderLayout tables -> CSSData tables -> semanticsFormsCustomizing for different device classesSize of click targetsARIAVideo

13 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.HTML vs. XHTMLXHTMLHTML5 pros and consDesigning for UD with HTML514 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.HTML5 tricks and trapsIE 6Canvas accessibilityCaptioning in Obsolete attributes@longdesc@summaryDrag and drop

http://html5accessibility.com

15 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.15Progressive enhancementTest capabilities before using themFallback possibilitiesImagesNon-standard browser featuresSVG -> VMLFlash16 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Reading orderTabindex as last resortexcept in FlashAccesskey never

17 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FontsAssure good color contrastColour Contrast AnalyserFont foundries (Typekit, etc.)ReadabilityChoice of fontsSpacing

18 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Layout tablesThe complete list of when layout tables are acceptable:In HTML email

The old problem, which is usually blown out of proportionAccessibility to screen-reader users *The new problemDesigning for multiple screensDemo

19 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Data tablesthcol, colgroup and @scope@id and @headers20 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Formslabelaltfieldset and legendSubmit eventsValidationHTML521 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Customizing for different device classesHow mobile devices handle resizingAdjusting the size of click targetsUsing new HTML5 input typessearchtimeurlnumberDesigning with fluid layoutsCSS Media Queries

Demo22 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ARIAJuicy Studio Accessibility ToolbarLandmark rolesAT supportLabelsRolesaria-flowtoLive regions

Demo

23 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.VideoCodecsH.264FLVWebMBitratesAdaptive bitrate deliveryCaptioning and description24 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.25