7/14/2010 1 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Universal Design and YOUR Website LISA SPITZ lisa@lisaspitz-design.com 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. Introduction AboutMe: –B.A.Graphic Design&Psychology,Regis College,WestonMA–M.Des.InteractionDesign,CarnegieMellonUniversity,PittsburghPA–DesignConsultantforIHCDsite:http://humancentereddesign.org/ –DesignConsultantforASIsite:http://accessingsafety.org/ –CurrentPosition:DirectorofDesign,CAST,WakefieldMA2UniversalDesignandYOURWebsite 7/14/2010 3 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Agenda  Who Benefits?  Why is it Important?  Universal Design, Accessibility, and Usability  Assessing Your Website  Determining Severity  Planning Next Steps  Working with Designers and Developers  Resources  Questions and Discussion Universal Design and YOUR Website 3 7/14/2010 4 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Who Benefits? Universal Design and YOUR Website 4 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. WhoBenefits? Scenario1:Asurvivorwhoisblindandher6-year-olddaughterwererecentlyinadomesticviolenceincidentintheirWaltham,MAapartment.Thehusband,wasjailed.Hewillsoonbereleased.Themotherisscaredfortheirlives. Sheisusingherhomecomputer(withherownscreenreadersoftware)tolookupDomesticViolenceSheltersinhercity. Shewantstotalktosomeone,andgetadvice. SheGoogles:“domesticviolenceshelter,WalthamMA” http://www.reachma.org/ What’sworking?What’snotworking? 5UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. WhoBenefits? Scenario2:Anewvideoonmen’sroleinendingviolenceagainstwomenoncollegecampuseswasjustreleased.AgroupofDeafstudentswanttoshowthevideoaspartoftheircollegecampusesactivitiesforSexualAssaultAwarenessMonth. http://www.youtube.com/user/pmcgann737#p/u/11/bxJ7u78GrbY What’sworking?What’snotworking? 6UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. WhoBenefits? Scenario3:Ateenagerwhohashadonelegandpartialpartsofherarmamputatedhasneverreceivedsexualityeducation.Anoldermanwhohasbeentalkingtoherinrecentweekshasbeenreallynice.Whenhebeginstotouchhersexually,sheisconfusedanddoesn'tknowwhattodo. Shegoestoherlocaldisabilityrightsadvocacywebsiteforinformationonviolenceandabuse http://www.draginc.com/ What’sworking?What’snotworking? 7UniversalDesignandYOURWebsite 7/14/2010 8 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Why Is it Important? Universal Design and YOUR Website 8 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. WhyIsItImportant? NewWHOdefinitionofdisability–“Disabilityoccurs intheinteractionbetweenaperson,his orherfunctionalability,andtheenvironment.” –“Oneis moreorless disabledbasedontheintersectionbetweenherself,herfunctionalabilities,andthemanytypes ofenvironments withwhichsheinteracts.” –“Moreover,theexperienceofdisabilitycanbeminimizedbydesigningenvironments toaccommodatevaryingfunctionalabilities andprovidingindividualizedsolutions whenneeded.” –Source:http://www.accessingsafety.org9UniversalDesignandYOURWebsite 7/14/2010 10 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Why Is It Important?  Potential website visitors include… Universal Design and YOUR Website 10 owrIflitin“umhpdneiintvcrtaoictdioe“iuonirvaenaelassldl”” Blindnes LowVision DLiseaabrniliitniges DPihsyabsiiclitayl DeHafe/aHrainrdgof CoMHneedanitlttioahlns 7/14/2010 11 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Why Is It Important?  If you only consider individuals in the middle, you miss everyone else. Universal Design and YOUR Website 11 owrIflitin“umhpdneiintvcrtaoictdioe“iuonirvaenaelassldl”” Blindnes LowVision DLiseaabrniliitniges DPihsyabsiiclitayl DeHafe/aHrainrdgof CoMHneedanitlttioahlns 7/14/2010 12 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Why Is It Important?  But if you focus on the outskirts, you include everyone! Universal Design and YOUR Website 12 owrIflitin“umhpdneiintvcrtaoictdioe“iuonirvaenaelassldl”” Blindnes LowVision DLiseaabrniliitniges DPihsyabsiiclitayl DeHafe/aHrainrdgof CoMHneedanitlttioahlns 7/14/2010 13 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Why Is It Important?  Even those with situational limitations (a temporary loss of functional ability) Universal Design and YOUR Website 13 7/14/2010 14 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Universal Design, Accessibility, and Usability of Websites Universal Design and YOUR Website 14 7/14/2010 15 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Universal Design, Accessibility, and Usability Universally Designed Websites = Best Practices Human Centered Usable Accessible Universal Design and YOUR Website 15 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. UniversalDesign,Accessibility,andUsability Webaccessibility… –“…Means thatpeoplewithdisabilities canperceive,understand, navigate,andinteractwiththeWeb,andthattheycancontributetotheWeb.Webaccessibilityalsobenefits others,includingolderpeoplewithchangingabilities duetoaging.” –Source:http://www.w3.org/WAI/intro/accessibility16UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. UniversalDesign,Accessibility,andUsability Accessibilityproblems… –“…Decreaseaccess toawebsitebypeoplewithdisabilities.Whenapersonwithadisabilityis atadisadvantagerelativetoapersonwithoutadisability,itis anaccessibilityissue.” –Source:ShawnLawtonHenry, http://www.uiaccess.com/accessucd/ut_report.html17UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. UniversalDesign,Accessibility,andUsability WebContentAccessibilityGuidelines–Guidelines forcreating=access. –DevelopedbytheWebContentAccessibilityGuidelines WorkingGroup(WCAGWG),whichis partoftheWorldWideWebConsortium(W3C)WebAccessibilityInitiative(WAI) –Recognizedas industrystandardforaccessibility–See:http://www.w3.org/TR/WCAG20/ 18UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. UniversalDesign,Accessibility,andUsability AccessibilityGuidelinesStemfromLegislation–Legislation=Minimumrequirements–i.e.Section255oftheTelecommunications Act–i.e.RehabilitationAct,Section504–i.e.RehabilitationActAmendments of1998,Section508–i.e.Americans withDisabilities Act(ADA) –See:http://www.w3.org/WAI/Policy/#US19UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. UniversalDesign,Accessibility,andUsability Usability–Usabilitymeans thatthe“peoplewhousetheproductcandosoquicklyandeasilytoaccomplishtheirowntasks” –This definitionrests onfourpoints: 1.Usabilitymeansfocusingonusers; 2.Peopleuseproductstobeproductive; 3.Usersarebusypeopletryingtoaccomplishtasks;and4.Usersdecidewhenaproductiseasytouse. –Source:Janice(Ginny)RedishandJosephDumas,APracticalGuidetoUsability Testing,1999,p420UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. UniversalDesign,Accessibility,andUsability UsabilitygoesbeyondAccessibility. –“Usabilityproblems impactallusers equally,regardless ofability;thatis,apersonwithadisabilityis notdisadvantagedtoagreaterextentbyusabilityissues thanapersonwithoutadisability.” Source:ShawnLawtonHenry,http://www.uiaccess.com/accessucd/ut_report.html AwebsitecanbeAccessible,butnotUsable21UniversalDesignandYOURWebsite 7/14/2010 22 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Universal Design, Accessibility, and Usability Universal Design Usability Accessibility Legislation Universal Design and YOUR Website 22 7/14/2010 23 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website Universal Design and YOUR Website 23 7/14/2010 24 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Goal = Flexibility  Meet the needs of most people in most situations Universal Design and YOUR Website 24 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite HowdoIdothat? –ManualEvaluationTechniques Askquestions:Who,When,Where,Why,What,How RolePlaying–Semi-Automatedevaluationtools WebAccessibilityEvaluationTool(WAVE) Colorblindfilter Add-onsforFirefox25UniversalDesignandYOURWebsite 7/14/2010 26 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Ask Questions Universal Design and YOUR Website 26 7/14/2010 27 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Who, When, Where, Why, What, How – Website audiences – Context of use  Purpose = develop a “user-centered” mindset Universal Design and YOUR Website 27 7/14/2010 28 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Who is my audience? – Individuals with disabilities… – Individuals who were recent victims of violence, sexual assault, or stalking… Universal Design and YOUR Website 28 7/14/2010 29 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  When are they accessing my site? – What just happened? – What else is going on around them? Universal Design and YOUR Website 29 7/14/2010 30 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Where are they when viewing my site? – Is it “safe”? – Is there information on how to “ESCAPE” or clear digital “footprints”? Universal Design and YOUR Website 30 http://accessingsafety.org/ Do 7/14/2010 31 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Why are they coming to my site? – What are their immediate needs? – Is there information on how to get help? Universal Design and YOUR Website 31 http://nyscasa.org http://www.newbegin.org/ Do 7/14/2010 32 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  What do you hope people will do as a result of visiting your website? – Is that message being clearly and consistently communicated? – Is the information presented in a way that enables people to take the next step? Universal Design and YOUR Website 32 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite Howdoestheexperienceofusingyourwebsiteaddresstheircurrentneeds? –Is thesiteorganizedinawaythatmakes sense? –Canpeoplefindwhattheyarelookingfor? –Ifyouresizethebrowserwindow,does thewebsitestillwork withoutrequiringhorizontalscrolling? 33UniversalDesignandYOURWebsite 7/14/2010 34 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Role Playing Universal Design and YOUR Website 34 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite Assesstheexperienceofusingyoursiteforindividualswith: –Blindness–LowVision–Deaf/HardofHearing–PhysicalDisability–LearningDisability/MentalHealthCondition Purpose=identifypotentialusabilityoraccessibilityissues35UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite Blindness–Ifpossible,listentoyourwebsitewithascreenreader–Verifies thatthewebpagemakes senseauditorally–UsetheTabkeytonavigatepages–Verifies thatkeyboardusers cannavigatethroughalllinks andformcontrols onapageandthatlinks clearlyindicatewhattheyleadto36UniversalDesignandYOURWebsite 7/14/2010 37 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Blindness – Read instructions – Verifies that instructions do not rely on shape, size, color, or visual location Universal Design and YOUR Website 37 7/14/2010 38 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Low Vision – Increase font sizes 200-300% – Verifies that font sizes are scalable without a loss in usability Universal Design and YOUR Website 38 Do http://www.accessingsafety.org 7/14/2010 39 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Low Vision – Increase font sizes 200-300% – Verifies that font sizes are scalable without a loss in usability Universal Design and YOUR Website 39 Don’t http://kyasap.brinkster.net/ 7/14/2010 40 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Low Vision – Lower the contrast on your computer – Helps identify areas where contrast between foreground & background colors is insufficient Universal Design and YOUR Website 40 Don’t http://www.lafasa.org/Resource.cfm 7/14/2010 41 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Deaf / Hard of Hearing – Turn off the sound – Verifies that audio content is available through text equivalents for individuals who are Deaf or hard-of-hearing Universal Design and YOUR Website 41 Don’t Don’t http://www.haven-oakland.org/ 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite PhysicalDisability–UsetheTabkeytonavigatepages–Verifies thatkeyboardusers cannavigatethroughalllinks andformcontrols onapageandthatlinks clearlyindicatewhattheyleadto–Lookfora“SkiptoContent” linkatthetopofthepage–Ensures thatindividuals usingatabkeycanskiprepeatingblocks ofcontenttoquicklyjumptothemaincontentarea42UniversalDesignandYOURWebsite 7/14/2010 43 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  “Skip to Content” link … Universal Design and YOUR Website 43 Jumps to here, visually and aurally http://accessingsafety.org/ Do 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite LearningDisability/ MentalHealthCondition–Readcontentonselectedpages–Verifies thattextis clearandsimpletotheextentappropriateforEnglishLanguageLearners orthosewithcognitiveorlearningdisabilities (6-9thgradereadinglevel) 44UniversalDesignandYOURWebsite 7/14/2010 45 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Take a step back and squint at the website – see if content is grouped in logical chunks Universal Design and YOUR Website 45 http://www.ourgoodwill.org/ Do 7/14/2010 46 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Logical chunks.. Universal Design and YOUR Website 46 Don’t www.belladesoto.us 7/14/2010 47 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Look for multiple ways of navigating through the website Universal Design and YOUR Website 47 http://accessingsafety.org/ Do 7/14/2010 48 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Check that navigation appears in the same location on all pages Universal Design and YOUR Website 48 http://www.newbegin.org/ Do 7/14/2010 49 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Check that your current location on the website is clearly marked Universal Design and YOUR Website 49 Do http://www.haven-oakland.org 7/14/2010 50 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Current location…. Universal Design and YOUR Website 50 Don’t http://www.dhh.louisiana.gov/contacts.asp 7/14/2010 51 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Assessing Your Website  Learning Disability / Mental Health Condition – Look for consistent font styles and easy to read line lengths Universal Design and YOUR Website 51 http://www.vibs.org/hotline_and_advocacy.html Do 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. AssessingYourWebsite LearningDisability/ MentalHealthCondition–Readlinks toseeiftheymakesenseoutofcontext “aGuidetoUnderstandingAccessibility” “GetHelp” “ClickHeretogethelp” –Links thatgotothesamelocationshouldhavethesamename repeat“AbouttheCenter”ifitalwaysgoesto“AbouttheCenter” use“AbouttheCenter”and“AbouttheOrganization” iftheybothgoto“AbouttheCenter” –Links thatgotodifferentlocations shouldhavedifferentnames52UniversalDesignandYOURWebsiteDontDoDoDontDo 7/14/2010 53 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. WAVE Tool Universal Design and YOUR Website 53 7/14/2010 54 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  WAVE (Web Accessibility Evaluation Tool) – http://wave.webaim.org Universal Design and YOUR Website 54 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. HowtoAssessYourSite Purpose=identifypotentialaccessibilityissues PROS:Goodforcheckingoverallaccessibility(reading& navigationorder,tables,images,forms,multimedia,etc) CONS:Notgoodforcheckingusability(doestheALTtextonimagesmakesense?) 55UniversalDesignandYOURWebsite 7/14/2010 56 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  WAVE – “Errors, Features, and Alerts” View – Checks for overall accessibility errors, alerts, and features Universal Design and YOUR Website 56 7/14/2010 57 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  WAVE – “Icons Key” – Quick reference for icons Universal Design and YOUR Website 57 7/14/2010 58 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Images – No Alt text Universal Design and YOUR Website 58 7/14/2010 59 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Images – Questionable Alt text Universal Design and YOUR Website 59 7/14/2010 60 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Images – Unhelpful Alt text Universal Design and YOUR Website 60 7/14/2010 61 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Images – Null Alt text for decorative images Universal Design and YOUR Website 61 7/14/2010 62 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Images – Redundant Alt text Universal Design and YOUR Website 62 7/14/2010 63 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Images – Image Map without alt text Universal Design and YOUR Website 63 7/14/2010 64 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Problematic links Universal Design and YOUR Website 64 7/14/2010 65 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Links to PDF, Word, or other documents Universal Design and YOUR Website 65 7/14/2010 66 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Links to popup windows Universal Design and YOUR Website 66 7/14/2010 67 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Form fields without labels Universal Design and YOUR Website 67 7/14/2010 68 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Form fields with labels (on the same page!) Universal Design and YOUR Website 68 7/14/2010 69 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  WAVE – “Outline” View – Are headings labeled? Is there a clear hierarchy? Universal Design and YOUR Website 69 7/14/2010 70 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Incorrectly ordered headings Universal Design and YOUR Website 70 7/14/2010 71 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Incorrectly ordered headings Universal Design and YOUR Website 71 7/14/2010 72 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  No heading structure Universal Design and YOUR Website 72 7/14/2010 73 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Incomplete heading structure Universal Design and YOUR Website 73 7/14/2010 74 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  WAVE – “Structure/Order” View – Is the tab and screen reader order logical? Universal Design and YOUR Website 74 7/14/2010 75 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Reading and navigation out of order Universal Design and YOUR Website 75 7/14/2010 76 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Forms or Tables out of order Universal Design and YOUR Website 76 Transcript: http://www.webaim.org/techniques/forms/media/ja ws_hpr.htm#forms_bad_straight JAWS, reading the form straight through. 7/14/2010 77 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Colorblind Filter Universal Design and YOUR Website 77 7/14/2010 78 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Colorblind Web Page Filter – http://colorfilter.wickline.org/ Universal Design and YOUR Website 78 7/14/2010 79 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Purpose = identify potential color issues  PROS: See what your site looks like in various scenarios  CONS: Can be slow. Difficult to see the big picture Universal Design and YOUR Website 79 7/14/2010 80 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Not enough contrast for individuals who are colorblind Universal Design and YOUR Website 80 7/14/2010 81 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Add-ons for Firefox Universal Design and YOUR Website 81 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. HowtoAssessYourSite Add-onsforFirefox–FangsScreenReaderEmulator1.0.7–Renders atextversionofawebpagesimilartohowandindividualusingascreenreaderwouldhearit. –NoColor0.2.8–Removes colorandbackgroundimages fromthewebpage. –WCAGContrastchecker1.1.02–Checks thecombinationofcolors toseeifitis appropriateforvisualperception. 82UniversalDesignandYOURWebsite 7/14/2010 83 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. How to Assess Your Site  Additional Tools… – VoiceOver (free screenreader for the Mac) http://www.apple.com/accessibility/voiceover/ – NVDA (free screenreader for the PC) http://www.nvda-project.org/ Universal Design and YOUR Website 83 7/14/2010 84 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Determining Severity Universal Design and YOUR Website 84 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. DeterminingSeverity Severity1–Issues,whichresultincontentorfunctionalitythatis completelyinaccessibleforsomeindividuals. Severity2–Issues inwhichcontentorfunctionalitymaybedifficultforsomeindividuals,mayrequireadditionaltime,effort,orcognitiveloadtouse,ormaypotentiallyfailforsomeindividuals becauseitis notincompliancewithstandards. Severity3–Items forwhichtherearenosignificantaccessibilityissues,butarecommendationforincreasingaccessibilityorusabilityofthecontentorfunctionalitycanbeprovided. 85UniversalDesignandYOURWebsite 7/14/2010 86 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps Universal Design and YOUR Website 86 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. PlanningNextSteps Decidewhichitemsyouwilladdressfirst–Planningonredesigningyourwebsite? AddressSeverity1,2,and3items–Justenoughresources forrefiningyourwebsite? TrytoaddressallSeverity1andasmanySeverity2itemspossible Notsurewhatyouaredoingwithyourwebsite?... 87UniversalDesignandYOURWebsite 7/14/2010 88 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps Redesign  PROS – Start from scratch – Build accessibility into templates – Create a new look and feel and a more universally designed website  CONS – Costly – Potentially several rounds of revisions to “get it right” Universal Design and YOUR Website 88 7/14/2010 89 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps Refine  PROS – Can address “low hanging fruit” quickly – Good for minor accessibility issues, where overall design is still in good shape  CONS – Difficult to make site-wide improvements – Bigger problems will remain big problems Universal Design and YOUR Website 89 7/14/2010 90 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Working with Designers and Developers Universal Design and YOUR Website 90 7/14/2010 91 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Where to find a designer or developer – Word of mouth – LinkedIn – Craigslist – Local SIG CHI group? - http://www.sigchi.org/connect/local-sigs Universal Design and YOUR Website 91 7/14/2010 92 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Using the “right” keywords – Universal Design, Accessibility, Usability – Web Content Accessibility Guidelines (WCAG 2.0), Section 508 – Assistive technologies: screenreaders, screen magnifiers, etc  Sometimes misleading keywords – User-centered Universal Design and YOUR Website 92 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. PlanningNextSteps Settingpriorities–Ifredesigning: Tellthemyouarehopingtocreateavisuallypleasinganduniversallydesignedwebsite.ThataccessibilityisofUTMOSTconsideration. Besurethattheirestimateincludestimeforrevisionstothedesignandtothefunctionalprototype. –Ifrefining: Sendyourlistofissuestoadesigner/developerandaskthemtoassesswhatitwouldcosttoaddressPriority1,2,and3itemsseparately. Choosewhatyoucandowithinyourbudget. Besurethattheirestimateincludestimeforrevisions. 93UniversalDesignandYOURWebsite 7/14/2010 94 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Assessing design deliverables – Site Map – Is there a sitemap? Does everything have a “home”? Is there room for future growth? Universal Design and YOUR Website 94 7/14/2010 95 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Assessing design deliverables - Wireframes – Do wireframes depict a clear and simple hierarchy? Universal Design and YOUR Website 95 1 – logo + main navigation 2 – secondary navigation 3 – content 4 – related links 7/14/2010 96 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Assessing design deliverables – Wireframes – Is content organized in logical chunks? Universal Design and YOUR Website 96 1 – logo + main navigation 2 – secondary navigation 4 – related links 7/14/2010 97 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Assessing design deliverables – Design comps – Manual Evaluation Techniques  Ask questions: Who, When, Where, Why, What, How  Role Playing Universal Design and YOUR Website 97 7/14/2010 98 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Assessing design deliverables – Design – Are images and dynamic/moving content free of critical information? Universal Design and YOUR Website 98 http://www.rainbowservicesdv.org/ 7/14/2010 99 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Assessing design deliverables – Design – Will videos or audio clips have alternate representations? Universal Design and YOUR Website 99 http://www.deafcan.org/ DBTAC-NewEnglandADACenter 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. PlanningNextSteps Assessingaprototype–ManualEvaluationTechniques Askquestions:Who,When,Where,Why,What,How RolePlaying–Semi-Automatedevaluationtools WebAccessibilityEvaluationTool(WAVE) Colorblindfilter Add-onsforFirefox100UniversalDesignandYOURWebsite 7/14/2010 101 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Planning Next Steps  Planning for revisions – Don’t be afraid to ask for changes – You need to be happy with the end result – The more attention to detail = the greater success! Universal Design and YOUR Website 101 7/14/2010 102 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Resources Universal Design and YOUR Website 102 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. Resources–Section508&Accessibility Section508:Forweb-basedintranetandinternetinformationandapplications http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web WebContentAccessibilityGuidelines(WCAG)Overview: http://www.w3.org/WAI/intro/wcag.php WebContentAccessibilityGuidelines(WCAG)2.0: http://www.w3.org/TR/WCAG20/ WebAIM'sWCAG2.0Checklist: http://www.webaim.org/standards/wcag/checklist103UniversalDesignandYOURWebsite 7/14/2010 Theimagecannotbedisplayed.Yourcomputermaynothaveenoughmemorytoopentheimage,ortheimagemayhavebeencorrupted.Restartyourcomputer,andthenopenthefileagain.Iftheredxstillappears,youmayhavetodeletetheimageandtheninsertitagain. Resources–WebsiteEvaluation DigitalBook:JustAsk:IntegratingAccessibility ThroughoutDesign: http://www.uiaccess.com/JustAsk/ HowPeoplewithDisabilitiesUsetheWeb: http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Screeningtechniques: http://www.uiaccess.com/accessucd/screening.html Completelistofevaluationtools: http://www.w3.org/WAI/ER/tools/complete104UniversalDesignandYOURWebsite 7/14/2010 105 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Resources - Screenreaders  VoiceOver (free screenreader for the Mac) http://www.apple.com/accessibility/voiceover/  NVDA (free screenreader for the PC) http://www.nvda-project.org/ Universal Design and YOUR Website 105 7/14/2010 106 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Questions and Discussion Universal Design and YOUR Website 106 7/14/2010 107 The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again. Thank You! Universal Design and YOUR Website 107 LISA SPITZ lisa@lisaspitz-design.com