Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Accessibility Workshop


Published on

Published in: Design, Technology
  • Be the first to comment

Web Accessibility Workshop

  1. 1. Web Accessibility Workshop Erasmus IP: FORTE project Valencia, Spain 03/04/2009
  2. 2. <ul><li>Web accessibility means access to the Web by everyone , </li></ul><ul><li>regardless of disability. </li></ul>What is web accesibility?
  3. 3. <ul><li>Web sites and applications </li></ul><ul><li>that people with disabilities can perceive, understand, navigate, and interact with; </li></ul><ul><li>Web browsers and media players </li></ul><ul><li>that can be used effectively by people with disabilities, and </li></ul><ul><li>that work well with assistive technologies that some people with disabilities use to access the Web; </li></ul><ul><li>Web authoring tools, and evolving Web technologies </li></ul><ul><li>that support production of accessible Web content and Web sites, and that can be used effectively by people with disabilities. </li></ul>Web accessibility involves:
  4. 4. <ul><li>The Web has become a key resource for: </li></ul><ul><li>news, information, commerce, entertainment, classroom education, distance learning, job searching, workplace interaction, civic participation, government services. </li></ul><ul><li>It is displacing traditional sources of information and interaction: </li></ul><ul><li>schools, libraries, print materials, </li></ul><ul><li>discourse of the workplace; </li></ul><ul><li>some of the traditional resources were accessible; some not -> A NEW WAY </li></ul>Web accessibility is a social issue: Dadfa
  5. 5. An open door to knowledge <ul><li>An accessible Web means unprecedented access to information for people with disabilities. </li></ul>
  6. 6. <ul><li>At least 10% of the population in most countries has disabilities ; </li></ul><ul><li>visual, auditory, physical, speech, cognitive, and neurological disabilities can all affect access to the Web </li></ul><ul><li>Average age of population in many countries is increasing ; </li></ul><ul><li>aging sometimes results in combinations of accessibility issues; </li></ul><ul><li>vision & hearing changes, changes in dexterity & memory. </li></ul><ul><li>Few organizations can afford to deliberately miss this market sector . </li></ul>Web accessibility is a marketplace issue
  7. 7. Web accessibility is, sometimes, a must <ul><li>A number of governments require accessibility of specific kinds of Web sites. </li></ul><ul><ul><li>often required for government Web sites first;  </li></ul></ul><ul><ul><li>sometimes for educational or commercial sites; </li></ul></ul><ul><ul><li>provinces, states, municipalities may have requirements; </li></ul></ul><ul><ul><li>corporations and non-governmental organizations sometimes set own requirements. </li></ul></ul>
  8. 8. <ul><li>The World Wide Web Consortium ( W3C ) </li></ul><ul><ul><li>is an international, vendor-neutral consortium, with over 400 members </li></ul></ul><ul><ul><li>it promotes evolution and interoperability of the Web </li></ul></ul><ul><li>and has a strong focus on the universality of the Web. </li></ul><ul><li>W3C operates from three host sites: </li></ul><ul><ul><li>MIT for North America, ERCIM (European Research Consortium for Informatics and Mathematics) for Europe, Keio University for Asia; </li></ul></ul><ul><ul><li>has outreach offices in sixteen countries </li></ul></ul><ul><ul><li>and has five &quot;domains&quot;: </li></ul></ul><ul><li>Architecture, Interaction, Technology and Society, Ubiquitous Web,  Web Accessibility Initiative . </li></ul>W3C Plays Leading Role in Development of Web Technologies
  9. 9. <ul><li>The Web Accessibility Initiative (WAI): </li></ul><ul><ul><li>coordinates with all the other domains of the W3C; </li></ul></ul><ul><ul><li>operates internationally in all three host sites of W3C. </li></ul></ul><ul><li>WAI is sponsored by a variety of government and industry supporters of accessibility: </li></ul><ul><ul><li>Government: </li></ul></ul><ul><ul><ul><li>U.S. Department of Education  </li></ul></ul></ul><ul><ul><ul><li>European Commission's Information Society Technologies Programme </li></ul></ul></ul><ul><ul><ul><li>Canada's Assistive Devices Industry Office. </li></ul></ul></ul><ul><ul><li>Industry: </li></ul></ul><ul><li>CA, Fundación ONCE, HP, IBM; Microsoft Corporation; SAP, Verizon Foundation, Wells Fargo. </li></ul>W3C Hosts the Web Accessibility Initiative (WAI)
  10. 10. Disabilities and their relation to accessibility issues on the Web <ul><li>There are four major categories of disability types: </li></ul><ul><ul><li>Visual </li></ul></ul><ul><ul><li>Hearing </li></ul></ul><ul><ul><li>Motor </li></ul></ul><ul><ul><li>Cognitive </li></ul></ul>
  11. 11. W3C Accessibility principles <ul><li>Focusing more on principles rather than techniques, makes easier for web developers keeping accessibility basics. </li></ul><ul><ul><li>Perceivable: </li></ul></ul><ul><ul><li>Operable ( Keyboard accessibility, time controls, etc…) </li></ul></ul><ul><ul><li>Understandable </li></ul></ul><ul><ul><li>Robust ( different operating systems, different browsers, and different versions of browsers…) </li></ul></ul>
  12. 12. Visual disabilities (Ia) <ul><li>Blindness </li></ul><ul><li>Key Web accessibility principles (KWAP) for users who are blind are: </li></ul><ul><li>Perceivable: because they cannot perceive (see) visual information such as graphics, layout, or color-based cues </li></ul><ul><li>Operable: because they usually depend on a keyboard to operate (navigate) web content functionality, rather than a mouse </li></ul><ul><li>Understandable: because they cannot understand content that is presented in an illogical linear order, or which contains extraneous text not meant to be read word for word or character by character (such as long Web addresses), etc. </li></ul><ul><li>Robust: because the assistive technologies used by the blind are not always capable of accessing a broad range of technologies, especially if those technologies are new (Flash, Lightsilver…) </li></ul>
  13. 13. Visual disabilities (Ia) <ul><li>Blindness </li></ul>CHALLENGES SOLUTIONS Users generally do not use a mouse Don't write scripts that require mouse usage. Supply keyboard alternatives. Images, photos, graphics are unusable Provide text descriptions, in alt text and, if necessary, longer explanations (either on the same page or with a link to another page). Users often listen to the web pages using a screen reader Allow for users to skip over navigational menus, long lists of items, ASCII art, and other things that might be difficult or tedious to listen to. Users often jump from link to link using the “Tab” key Make sure that links make sense out of context (&quot;click here&quot; is problematic). It may be difficult for users to tell where they are when listening to table cell contents Make sure that tables—especially those with merged cells—make sense when read row by row from left to right. Complex tables and graphs that are usually interpreted visually are unusable Provide summaries and/or text descriptions. Colors are unusable Do not rely on color alone to convey meaning
  14. 14. Visual disabilities (Ib) <ul><li>Low vision </li></ul><ul><li>KWAP for people with low vision is: </li></ul><ul><li>Perceivable: because they cannot perceive (see) content that is small, does not enlarge well, or which does not have sufficient contrast </li></ul>
  15. 15. Visual disabilities (Ib) <ul><li>Low vision </li></ul><ul><li>Types of low vision: </li></ul><ul><li>1) Macular degeneration : problems on the center of the sight </li></ul>
  16. 16. Visual disabilities (Ib) <ul><li>Low vision </li></ul><ul><li>Types of low vision: </li></ul><ul><li>2) Glaucoma : loss of peripheral vision and a blurry central area of vision. </li></ul>
  17. 17. Visual disabilities (Ib) <ul><li>Low vision </li></ul><ul><li>Types of low vision: </li></ul><ul><li>3) Diabetic Retinopathy : dark patches in the field of vision where the leaks of retinal blood vessels occur. </li></ul>
  18. 18. Visual disabilities (Ib) <ul><li>Low vision </li></ul><ul><li>Types of low vision: </li></ul><ul><li>4) Cataract : blurred or hazy effect, especially in bright light. </li></ul>
  19. 19. Visual disabilities (Ib) <ul><li>Low vision </li></ul>CHALLENGES SOLUTIONS Text in graphics does not enlarge without special software, and looks pixilated when enlarged Limit or eliminate text within graphics Users may set their own font and background colors Allow them to do so by using as much real text as possible, rather than text within graphics. Screen magnifiers reduce the usable window size To reduce that amount of horizontal scrolling, use relative rather than absolute units (e.g. use percentages for table widths instead of pixels)
  20. 20. Magnified graphical text
  21. 21. Visual disabilities (Ic) <ul><li>Color-blindness </li></ul><ul><li>KWAP for people with low vision is: </li></ul><ul><li>Perceivable: because they cannot perceive (see) the difference between certain color combinations </li></ul>
  22. 22. London underground <ul><li>· We need to supplement the color-dependent method of distinguishing between routes. </li></ul>
  23. 23. Visual disabilities (Ic) <ul><li>Color-blindness </li></ul>CHALLENGES SOLUTIONS Reds and greens are often indistinguishable This is not normally a problem except in cases where the colors convey important information. Under these circumstances you will need to either change the graphic or provide an additional means of obtaining the same information. Oftentimes the most appropriate way to do this is to provide an explanation in the text itself. Other colors may be indistinguishable Same as above.
  24. 24. Auditory disabilities (II) <ul><li>Hearing loss </li></ul><ul><li>Key Web accessibility principles (KWAP) for users with auditory disabilities is : </li></ul><ul><li>Perceivable: because they cannot perceive (hear) auditory content </li></ul>CHALLENGES SOLUTIONS Audio is unusable · Provide transcripts for audio clips. · Provide synchronous captioning and transcripts for video clips
  25. 25. Motor disabilities (III) <ul><li>Involves: </li></ul><ul><ul><li>Traumatic injuries </li></ul></ul><ul><ul><ul><li>Spinal cord injury or loss or damage of limb(s) </li></ul></ul></ul><ul><ul><li>Diseases or congenital conditions </li></ul></ul><ul><ul><ul><li>Parkinson’s desease </li></ul></ul></ul><ul><ul><ul><li>Cerebral palsy </li></ul></ul></ul><ul><ul><ul><li>Muscular distrophy </li></ul></ul></ul><ul><ul><ul><li>Spina bifida </li></ul></ul></ul>
  26. 26. Motor disabilities (III) <ul><li>The KWAP for users with motor disabilities is: </li></ul><ul><li>· Operable: because not everyone can use a mouse, click on small links, or operate dynamic elements effectively </li></ul>
  27. 27. Motor disabilities (III) CHALLENGES SOLUTIONS Users may not be able to use the mouse. Make sure that all functions are available from the keyboard (try tabbing from link to link). Users may not be able to control the mouse or the keyboard well. Make sure that your pages are error-tolerant (e.g. ask &quot;are you sure you want to delete this file?&quot;), do not create small links or moving links. Users may be using voice-activated software. Voice-activated software can replicate mouse movement, but not as efficiently as it can replicate keyboard functionality, so make sure that all functions are available from the keyboard. Users may become fatigued when using &quot;puff-and-sip&quot; or similar adaptive technologies. Provide a method for skipping over long lists of links or other lengthy content.
  28. 28. Cognitive disabilities (IV) <ul><li>KWAP for users with cognitive disabilities is: </li></ul><ul><li>· Understandable : because they have difficulties with memory, dislexia, attention, etc… </li></ul>
  29. 29. Cognitive disabilities (IVa) <ul><li>· Accommodating Memory Deficits </li></ul><ul><li>Design tips: </li></ul><ul><li>· Reminders of the overall context of a web site. (i.e. “Step 2 of 4”). </li></ul><ul><li>· Keep processes (i.e. buying) as simple an brief as possible </li></ul>
  30. 30. Cognitive disabilities (IVb) <ul><li>· Accommodating Problem-Solving Deficits </li></ul><ul><li>Some individuals have a exagerated tendency to accidentally click on the wrong link, misspell a word, or commit some kind of error on the web. </li></ul><ul><li>Design Tips: </li></ul><ul><ul><li>Error messages should be as explanatory as possible </li></ul></ul><ul><ul><li>Users should be warned when actions can cause potentially serious consequences, such as deleting a file </li></ul></ul><ul><ul><li>Search features should suggest alternate spellings to users if the original spelling seems suspicious or if it returns no results </li></ul></ul><ul><ul><li>All functionality should be as predictable as possible. </li></ul></ul>
  31. 31. Cognitive disabilities (IVc) <ul><li>· Accommodating Attention Deficits </li></ul><ul><li>Design tips: </li></ul><ul><ul><li>Focus the attention of users: visual cues to highlight important points or sections of the content </li></ul></ul><ul><ul><li>Use headings to draw attention to the important points and outline of the content </li></ul></ul><ul><ul><li>Avoid background noises or images that distract. Use them instead to focus the users attention. </li></ul></ul>
  32. 32. Cognitive disabilities (IVc) <ul><li>· Accommodating Reading, Linguistic, and Verbal Comprehension Deficits </li></ul><ul><li>Design tips: </li></ul><ul><ul><li>Suplemental media : illustrations, icons, video and audio have the potential to greatly enhance the accessibility of web content for people with cognitive disabilities. </li></ul></ul><ul><ul><li>Document organization and structure : the more structured your document is, the easier it will be to understand (headings, bulleted lists, indent sub-items in a hierarchical list, short paragraphs, etc…) </li></ul></ul>
  33. 33. Example: dislexia <ul><li> Tob eornot obe </li></ul>
  34. 34. Example: dislexia <ul><li>With suplemental media: </li></ul><ul><li> Tob eornot obe </li></ul>
  35. 35. The main actors… THE USERS <ul><li>Let’s listen to them… </li></ul><ul><li>Video </li></ul><ul><li>Transcription </li></ul>
  36. 36. And finally…. the practical side. <ul><li>· Activity 1: Web voice navigator experience. </li></ul><ul><li>· Activity 2: Tourism web accesibility evaluation. </li></ul>
  37. 37. Thanks for your attention <ul><li>Please, keep accessibility </li></ul><ul><li>always in mind. </li></ul>