Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Web accessibility workshop 3

543 visualizaciones

Publicado el

Session 3 in DTI, HCI curricula

Publicado en: Diseño
  • Sé el primero en comentar

Web accessibility workshop 3

  1. 1. Web Accessibility Workshop Session Three Vladimir Tomberg, PhD Tallinn University
  2. 2. Today Workshop 1. Presentation of the Homework; 2. Alternative Input Devices; 3. Other Assistive Products; 4. Assistive Technology in different OS; 5. Homework Assignment 3 Web Accessibility Workshop 2
  3. 3. 1. PRESENTATION OF HOMEWORK Please be prepared to share your experience! 3 Web Accessibility Workshop
  4. 4. 2. ALTERNATIVE INPUT DEVICES Assistive Technologies 4 Web Accessibility Workshop
  5. 5. Alternative Keyboards • Featuring larger- or smaller-than-standard keys or keyboards, alternative key configurations, and keyboards for use with one hand. 5 Web Accessibility Workshop Source: microsoft.com
  6. 6. Alternative Layout Keyboards 6 Web Accessibility Workshop Source: mayer-johnson.com
  7. 7. Big Keys Keyboard 7 Web Accessibility Workshop Source: try-it.ie
  8. 8. Big Keys Keyboards with Key-Guards 8 Web Accessibility Workshop Source: click2go.ie
  9. 9. One-Handed Keyboards 9 Web Accessibility Workshop Source: enablemart.com
  10. 10. One Hand “Half Keyboard” 10 Web Accessibility Workshop Source: infogrip.com
  11. 11. One Hand Keyboard 11 Web Accessibility Workshop Source: infogrip.com
  12. 12. Foot Pedals • Foot pedals can allow to designate which key each pedal represents; • Pedal can be used instead of keys one commonly has trouble with, such as shift, ctrl or space; • Foot pedals can be purchased individually or in sets of two or three. 12 Web Accessibility Workshop
  13. 13. Foot Pedal 13 Web Accessibility Workshop Source: kinesis-ergo.com
  14. 14. Electronic Pointing Devices • Electronic pointing devices used to control the cursor on the screen without use of hands. Devices used include:  Ultrasound,  Infrared beams,  Eye movements,  Nerve signals,  Brain waves 14 Web Accessibility Workshop Source: microsoft.com
  15. 15. Eye Movements Tracking Device 15 Web Accessibility Workshop Source: abletech.ca
  16. 16. Head Movement based Cursor Control 16 Web Accessibility Workshop Source: naturalpoint.com
  17. 17. Control of Wheelchairs with Brain Waves 17 Web Accessibility Workshop Source: asiabiomed.wordpress.com
  18. 18. Typing a Text at On-Screen Keyboard with Brain Waves 18 Web Accessibility Workshop
  19. 19. Joysticks • Joysticks — manipulated by hand, feet, chin, etc. and used to control the cursor on screen. 19 Web Accessibility Workshop Source: microsoft.com
  20. 20. Trackballs • Trackballs—movable balls on top of a base that can be used to move the cursor on screen 20 Web Accessibility Workshop Source: microsoft.com
  21. 21. Touch Screens • Touch screens — allow direct selection or activation of the computer by touching the screen, making it easier to select an option directly rather than through a mouse movement or keyboard; • Touch screens are either built into the computer monitor or can be added onto a computer monitor. 21 Web Accessibility Workshop Source: microsoft.com
  22. 22. Touch Screen 22 Web Accessibility Workshop
  23. 23. Sip-and-Puff systems • Sip-and-Puff or Sip 'n' Puff (SNP) technology is a method used to send signals to a device using air pressure by "sipping" (inhaling) or "puffing" (exhaling) on a straw, tube or "wand 23 Web Accessibility Workshop
  24. 24. 3. OTHER ASSISTIVE PRODUCTS Assistive Technologies 24 Web Accessibility Workshop
  25. 25. Braille Embossers • Braille embossers transfer computer generated text into embossed Braille output; • Braille translation programs convert text scanned-in or generated via standard word processing programs into Braille, which can be printed on the embosser 25 Web Accessibility Workshop Source: microsoft.com
  26. 26. Braille Printer 26 Web Accessibility Workshop Source: www.gizmag.com
  27. 27. Keyboard Filters • Keyboard filters are typing aids such as word prediction utilities and add-on spelling checkers that reduce the required number of keystrokes; • Keyboard filters enable users to quickly access the letters they need and to avoid inadvertently selecting keys they don't want 27 Web Accessibility Workshop Source: microsoft.com
  28. 28. WiViK Keyboard with Prediction 28 Web Accessibility Workshop
  29. 29. Link to Other On-Screen Keyboards • https://touch-base.com/documentation/ Virtual%20Keyboards.htm 29 Web Accessibility Workshop
  30. 30. Light Signaler Alerts • Light signaler alerts monitor computer sounds and alert the computer user with light signals; • This is useful when a computer user can not hear computer sounds or is not directly in front of the computer screen; • As an example, a light can flash alerting the user when a new e-mail message has arrived or a computer command has completed 30 Web Accessibility Workshop Source: microsoft.com
  31. 31. Light Signaler Alert Device 31 Web Accessibility Workshop Source: freebiefrenzy2.blogspot.com
  32. 32. On-Screen Keyboards • On-screen keyboards provide an image of a standard or modified keyboard on the computer screen that allows the user to select keys with a mouse, touch screen, trackball, joystick, switch, or electronic pointing device; • On-screen keyboards often have a scanning option that highlights individual keys that can be selected by the user; • On-screen keyboards are helpful for individuals who are not able to use a standard keyboard due to dexterity or mobility difficulties. 32 Web Accessibility Workshop Source: microsoft.com
  33. 33. 33 Single Switch Web Accessibility Workshop Image Source: spectronicsinoz.com
  34. 34. Single Switch Access to iPad Using Switch Control 34 Web Accessibility Workshop http://www.youtube.com/watch?v=TH540kuBDwo
  35. 35. Reading Tools and Learning Disabilities Programs • Reading tools and learning disabilities programs include software and hardware designed to make text-based materials more accessible for people who have difficulty with reading; • Options can include scanning, reformatting, navigating, or speaking text out loud; • These programs are helpful for those who have difficulty seeing or manipulating conventional print materials; people who are developing new literacy skills or who are learning English as a foreign language; and people who comprehend better when they hear and see text highlighted simultaneously 35 Web Accessibility Workshop Source: microsoft.com
  36. 36. Portable Word Processor 36 Web Accessibility Workshop Image source: www.writerlearning.com
  37. 37. Refreshable Braille Displays • Refreshable Braille displays provide tactile output of information represented on the computer screen; • A Braille "cell" is composed of a series of dots. The pattern of the dots and various combinations of the cells are used in place of letters. • Refreshable Braille displays mechanically lift small rounded plastic or metal pins as needed to form Braille characters. The user reads the Braille letters with his or her fingers, and then, after a line is read, can refresh the display to read the next line 37 Web Accessibility Workshop Source: microsoft.com
  38. 38. Braille Displays 38 Web Accessibility Workshop Image: www.afb.org
  39. 39. Screen Enlargers • Screen enlargers, or screen magnifiers, work like a magnifying glass for the computer by enlarging a portion of the screen which can increase legibility and make it easier to see items on the computer; • Some screen enlargers allow a person to zoom in and out on a particular area of the screen 39 Web Accessibility Workshop Source: microsoft.com
  40. 40. Software Screen Magnifier 40 Web Accessibility Workshop
  41. 41. Screen Readers • Screen readers are used to verbalize, or "speak," everything on the screen including text, graphics, control buttons, and menus into a computerized voice that is spoken aloud; • In essence, a screen reader transforms a graphic user interface (GUI) into an audio interface; • Screen readers are essential for computer users who are blind 41 Web Accessibility Workshop Source: microsoft.com
  42. 42. Several Screen Readers & Text-to-Speech Applications • Balabolka link (Windows) 40$ • JAWS link (Windows) 895$ • NVDA link (Windows) Free • Kurzweil1000 and 3000 link (Windows, Mac) 995$-1395$ • Windows narrator, free with OS • Mac OS VoiceOver, free with OS • List of other resources link 42 Web Accessibility Workshop
  43. 43. Speech Recognition • Speech recognition or voice recognition programs, allow people to give commands and enter data using their voices rather than a mouse or keyboard; • Voice recognition systems use a microphone attached to the computer, which can be used to create text documents such as letters or e-mail messages, browse the Internet, and navigate among applications and menus by voice 43 Web Accessibility Workshop Source: microsoft.com
  44. 44. Dragon Speech Recognition Software 44 Web Accessibility Workshop Video: youtube.com
  45. 45. Siri, Cortana, Voice Assistant 45 Web Accessibility Workshop Image source: mashable.com
  46. 46. Text-to-Speech (TTS) • Text-to-Speech (TTS) or speech synthesizers receive information going to the screen in the form of letters, numbers, and punctuation marks, and then "speak" it out loud in a computerized voice; • Using speech synthesizers allows computer users who are blind or who have learning difficulties to hear what they are typing and also provide a spoken voice for individuals who can not communicate orally, but can communicate their thoughts through typing 46 Web Accessibility Workshop Source: microsoft.com
  47. 47. Stephen Hawking Stephen Hawking is one of the most famous people using speech synthesis to communicate 47 Web Accessibility Workshop
  48. 48. Overview of a Typical TTS System 48 Web Accessibility Workshop Image source: en.wikipedia.org
  49. 49. Talking and Large-Print Word Processors • Talking and large-print word processors are software programs that use speech synthesizers to provide auditory feedback of what is typed; • Large-print word processors allow the user to view everything in large text without added screen enlargement 49 Web Accessibility Workshop Source: microsoft.com
  50. 50. Talking Word Processor 50 Web Accessibility Workshop http://www.enablemart.com/talking-word- processor
  51. 51. TTY/TDD conversion modems • TTY/TDD (TeleTYpewriter/Telecommunications Device for the Deaf) conversion modems are connected between computers and telephones to allow an individual to type a message on a computer and send it to a TTY/TDD telephone or other Baudot code equipped device. 51 Web Accessibility Workshop Source: microsoft.com
  52. 52. Telecommunications Device for the Deaf 52 Web Accessibility Workshop Image Source: en.wikipedia.org
  53. 53. 4. ASSISTIVE TECHNOLOGY IN DIFFERENT OS Overview 53 Web Accessibility Workshop
  54. 54. Windows 7 Ease of Access Center 54 Web Accessibility Workshop
  55. 55. Windows Magnifier 55 Web Accessibility Workshop
  56. 56. On-Screen Keyboard 56 Web Accessibility Workshop
  57. 57. Windows Narrator 57 Web Accessibility Workshop
  58. 58. Mac OS 58 Web Accessibility Workshop Image Source: apple.com
  59. 59. Mac OS Accessibility Preferences Display 59 Web Accessibility Workshop
  60. 60. Mac OS Accessibility Preferences Zoom 60 Web Accessibility Workshop
  61. 61. Mac OS Accessibility Preferences VoiceOver 61 Web Accessibility Workshop
  62. 62. Mac OS Accessibility Preferences Captions 62 Web Accessibility Workshop
  63. 63. Mac OS Accessibility Preferences Choice of Captions in Application 63 Web Accessibility Workshop
  64. 64. Mac OS Accessibility Preferences Keyboard 64 Web Accessibility Workshop
  65. 65. Mac OS Accessibility Preferences Mouse and Trackpad 65 Web Accessibility Workshop
  66. 66. Mac OS Accessibility Preferences Switch control (Demo and Exercise) 66 Web Accessibility Workshop
  67. 67. 67 • Open TextEdit • Enable Switch control • Write text: Hello World! :) Exercise Web Accessibility Workshop
  68. 68. Mac OS Accessibility Preferences VoiceOver 68 Web Accessibility Workshop
  69. 69. VoiceOver Demo 69 Web Accessibility Workshop
  70. 70. iOS Accessibility 70 Web Accessibility Workshop Image Source: apple.com
  71. 71. Vision 71 Web Accessibility Workshop
  72. 72. Hearing 72 Web Accessibility Workshop
  73. 73. Learning, Physical & Motor 73 Web Accessibility Workshop
  74. 74. Zoom 74 Web Accessibility Workshop
  75. 75. Invert Colors 75 Web Accessibility Workshop
  76. 76. 76 Speak Selection Web Accessibility Workshop
  77. 77. Assistive Touch 77 Web Accessibility Workshop Demo on youtube.com
  78. 78. Mobile Safari Accessibility 78 Web Accessibility Workshop
  79. 79. 6. HOMEWORK ASSIGNMENT 3 79 Web Accessibility Workshop
  80. 80. Screen Readers Testing (a) • To better understand a goal of the task please read an article Testing with Screen Readers here: http://webaim.org/articles/screenreader_tes ting/ 80 Web Accessibility Workshop
  81. 81. Screen Readers Testing (b) • Implement the Screen Reader activity described in one of the three exercises on your choice and platform availability: • Using JAWS to Evaluate Web Accessibility (link) if you use Windows; or • Using NVDA to Evaluate Web Accessibility (link) if you use Windows; or • Using VoiceOver to Evaluate Web Accessibility (link) if you use Mac OS 81 Web Accessibility Workshop
  82. 82. Screen Readers Testing (c) • Each activity contains of a guide, tasks and three samples for Screen Reader : 1. Sample page with images; 2. Sample page with tables; 3. Sample page with forms. • NB! Links to all three samples are included into the descriptions of the activities! Please follow the links provided above! • Reflect your experience in a report – what was difficult for you? How long time you spent on these tasks? What developer should know about assistive technology? • Upload your report to Google Drive folder 82 Web Accessibility Workshop

×