Slide 1How we got hereLate 1990s - Early 2000sLate 2000sThe first crossroads20102010What about Universal Design?Seven Principles of Universal DesignUniversal Design in technologyProfessionalismThe tools of the tradeHow UD applies to HTMLHTML vs. XHTMLHTML5 tricks and trapsProgressive enhancementReading orderFontsLayout tablesData tablesFormsCustomizing for different device classesARIAVideoSlide 25© 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 here1990sHTML 2.0<img alt><table summary>Accessibility guidelinesBuilding around semanticsWCAG 1.0 released in 19992© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Late 1990s - Early 2000s3© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Late 2000s4© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.The first crossroadsDesigning for mobile“One Web”5© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.20106© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.20107© 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 Mace8© 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 use9© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Universal Design in technologyUniversal design = accepting entropyIf there are 3 types of screen, why shouldn’t 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 targetsARIAVideo13© 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 <video>Obsolete attributes@longdesc@summaryDrag and drophttp://html5accessibility.com15© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Progressive enhancementTest capabilities before using themFallback possibilitiesImagesNon-standard browser featuresSVG -> VMLFlash16© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Reading orderTabindex as last resort…except in FlashAccesskey… never17© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.FontsAssure good color contrastColour Contrast AnalyserFont foundries (Typekit, etc.)ReadabilityChoice of fontsSpacing18© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Layout tablesThe complete list of when layout tables are acceptable:In HTML emailThe old problem, which is usually blown out of proportionAccessibility to screen-reader users *The new problemDesigning for multiple screensDemo19© 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 QueriesDemo22© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.ARIAJuicy Studio Accessibility ToolbarLandmark rolesAT supportLabelsRolesaria-flowtoLive regionsDemo23© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.VideoCodecsH.264FLVWebMBitratesAdaptive bitrate deliveryCaptioning and description24© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe
or
We will never post anything without your permission.
Don't have an account? Sign up