1 / 59

Animation

This text explores the challenges faced by users with visual impairments when accessing the web and provides strategies for making websites more accessible.

desilvaj
Télécharger la présentation

Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Animation • Animated GIF • Javascript • Java • Vector animation: Flash, SVG • Shockwave • 3D

  2. Raster vs Vector • Vector: items drawn with lines • Smooth • Scaled very well • Cannot be filled with multiple colors • Raster: pixel based • 3D shading

  3. Raster vs. Vector Raster

  4. Raster vs. Vector Vector

  5. Informing the User • Provide information to user • Inform of potential load/play times • Required plugins

  6. Multimedia Information

  7. 3D for the Web • Use of 3D very limited (still) • Commonly used for product views • Very computational intensive • VRML • Shockwave

  8. Web 3D Formats

  9. Controls

  10. 3D and Performance 3D files require: • Large amounts of memory • Large amounts of bandwidth

  11. Level of Detail

  12. Successive Refinement

  13. Mpeg-4 • Future standard: Combines: • Audio • Video • Vector Graphics • 3D Graphics

  14. MPEG-4

  15. Human Representation • Means to represent virtual humans • Called avatars • Used to interact with user Typically used in online games representing: • Other users • Non-player charactures

  16. HANIM

  17. Poser

  18. Accessibility • Web should be usable by everyone This includes users with: • Vision impairments • Hearing impairments • Mobility impairments

  19. Statistics • 8 million people with visual impairments • 20 million deaf or hard-of hearing • 250,000 with spinal cord injuries • 500,000 with cerebral palsy • 330,000 with MS • More that half US population over 65 has some type of impairment

  20. Issues involving Vision • Web very visually oriented • Significant challenges • Severity ranges from total blindness to low vision • Color blindness • Visual Stimuli

  21. Information Delivery • Information display on traditional monitor not available to users with visual impairments Two assistive technologies: • Screen Readers • Refreshable Braille displays

  22. Screen readers Reads text component of web screen Includes: • Links • Menus • Dialog Boxes • Error Messages

  23. Screen Readers • Several vendors offer screen readers • Prices range from $300 to $1000 • Page must be reformatted to support screen readers • HTML “lang” attribute controls language page will be read in

  24. Refreshable Braille Display • For people who are deaf as well as blind screen readers do not work. • Translates text of page into Braille • Single line of Braille text • Prices range from $4500 to $14,500

  25. Grade II Braille

  26. Refreshable Braille Display

  27. Reformatting Text • For screen readers to work text of page must be formatted to support linear delivery • Tabular data • Label for Elements • Skip navigation • Alt Tags for images

  28. Tabular Data

  29. Markup Strategy for Tables • <table border="1"> • <thead> • <tr> • <th id="c1"> Course </th> • <th id="c2"> Time </th> • <th id="c3"> Day </th> • <th id="c4"> Prerequisiste </th> • <th id="c5"> Instructor </th> • <tr> • </thead> • <tbody> • <tr> • <td headers="c1">211</td> • <td headers="c2"> 11:30 pm -1:00 pm</td> • <td headers="c3">MW</td> • <td headers="c4">None</td> • <td headers="c5">McDonald</td> • </tr> • <tr> • <td headers="c1">211</td> • <td headers="c2"> 10:30am - 12:00 pm</td> • <td headers="c3">TR</td> • <td headers="c4">None</td> • <td headers="c5">Luecking</td> • </tr> <tr> <td headers="c1">212</td> <td headers="c2">5:45 pm &nbsp;- 9:00 pm</td> <td headers="c3">M</td> <td headers="c4">211</td> <td headers="c5">Carter</td> </tr> <tr> <td headers="c1">212</td> <td headers="c2">11:30 pm &nbsp;- 1:00pm</td> <td headers="c3">TR</td> <td headers="c4">211</td> <td headers="c5">Chan</td> </tr> </tbody> </table>

  30. Label Elements of Forms • <form action="Billing Info" method="post"> • <fieldset> <legend class-"TitleLarge"><b>Billing Information</b></legend><p> • <label for="firstname">First name (required):</label> • <input id="firstname" type="text" tabindex="1"></p><p> • <label for="lastname">Last name(required): </label> • <input id="lastname" type="text" tabindex="2"></p> • </fieldset> • </form>

  31. Skip Navigation

  32. Normal Page

  33. Alt Tags(None)

  34. Alt Tags (Descriptive)

  35. Other Vision Issues • Screen Magnifiers • Color Blindness: • 8% male population • 0.5% Female population • Most common red/green • Photo Sensitive Epilepsy

  36. Color Blindness This is an Ishihara plate commonly used to check for red/green color blindness

  37. Color Blindness This is what a red/green color-blind person might see. Note that the digit (3) is practically invisible.

  38. Mobility Impairments • Conditions with affect use of keyboard and mouse • Might be difficult, Might be impossible • Predictive typing • Speech recognition • Alternative input technology

  39. Hearing Impairments Few more issues: • Captioned media • Open or Closed captioning • American Sign Language

  40. Web Accessibility Initiative • Promote usability for people with disabilities • Goal of Universal Access • Set of guidelines which address 2 themes: • Graceful Translation • Make content understandable and navigable

  41. Web Accessibility Initiative Guidelines

  42. Globalization • Web is growing all over world • Number of Non English speaking users rapidly increasing • Usability issues involve use of language and culture • This processes is called globalization

  43. Global User Population

  44. Internationalization • Internationalization single design used world wide • Simpler text • Unambiguous display of number, currency, dates, and times • Isolate and remove culturally specific language

  45. Localization • Added cultural context • Translation of web page into local language • Relevant content

  46. Text and Translation • Translation: human or automatic? • Attention to writing style • Expression of dates, times • Express currency in local terms • Label units of measurements

  47. Languages Can Expand Labels

  48. Page Layout • Unicode for character support • Color issues • Icon issues (including flags) • Text Alignment (left vs. right)

  49. International User Testing • International and local sites need user testing • More involved than traditional • Test success of translation • International Inspection as alternative • Difficulties dues to language gap

  50. Personalization • Strategy for gaining competitive advantage • Added service for a user • Speeds task completion (I-Click) • Can require login • Cookies • Dynamic

More Related