New version page

Geek to Geek: Universal Design

Upgrade to remove ads

This preview shows page 1-2-24-25 out of 25 pages.

Save
View Full Document
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience

Upgrade to remove ads
Unformatted text preview:

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 here1990sHTML 2.0<img alt><table summary>Accessibility guidelinesBuilding around semanticsWCAG 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 crossroadsDesigning 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 DesignEquitable useFlexibility in useSimple and intuitivePerceptible informationTolerance for errorLow physical effortSize and space for approach and use9© 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 selves10© 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 situation11© 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Content12© 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Video13© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.HTML vs. XHTMLXHTMLHTML5 pros and consDesigning for UD with HTML514© 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.com15© 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Flash16© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Reading orderTabindex as last resort…except in FlashAccesskey… never17© 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Spacing18© 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 @headers20© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Formslabelaltfieldset and legendSubmit eventsValidationHTML521© 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Demo23© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.VideoCodecsH.264FLVWebMBitratesAdaptive bitrate deliveryCaptioning and description24© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe


Download Geek to Geek: Universal Design
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Geek to Geek: Universal Design and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Geek to Geek: Universal Design 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?