Web accessibility workshop 3


Published on

Workshop on Web Accessibility on spring semester in Tallinn University

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Specially designed for computer users with disabilities, wishing to use the BigKeys Keyboards. Made from high grade crystal-clear acrylic, models are available for the BigKeys Plus and BigKeys LX. In particular, users with motor skills difficulties or upper limb disorder will find the BigKeysKeyguard very helpful in aiming their finger at the right key, and giving some support to the hand. The polished rounded holes guide the finger to the correct keys and provide support while the correct key is located.
  • The Forte portable word processor was designed by teachers to build keyboarding skills, develop writing skills and ultimately, develop digital fluency.  In order for students to accelerate their writing skills, they must first master the keyboard, then they must have quick and easy access to digital writing tools. The more often students write digitally, the better and more fluent their writing becomes.Handwriting and spelling challenges sharply reduce the joy, the quality and the quantity of student written work.It’s a hardship that can be overcome. No student should have to struggle with a pen or pencil in order toexpress themselves on paper. The Fusion,the Forte and the Writer were designed byeducators like you, to assist and supportthe struggling writer.
  • 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. WAI ARIA Readers Demo; 6. 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. Joysticks • Joysticks — manipulated by hand, feet, chin, etc. and used to control the cursor on screen. 18 Web Accessibility Workshop Source: microsoft.com
    19. 19. Trackballs • Trackballs—movable balls on top of a base that can be used to move the cursor on screen 19 Web Accessibility Workshop Source: microsoft.com
    20. 20. 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. 20 Web Accessibility Workshop Source: microsoft.com
    21. 21. Touch Screen 21 Web Accessibility Workshop
    22. 22. 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 22 Web Accessibility Workshop
    23. 23. 3. OTHER ASSISTIVE PRODUCTS Assistive Technologies 23 Web Accessibility Workshop
    24. 24. 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 24 Web Accessibility Workshop Source: microsoft.com
    25. 25. Braille Printer 25 Web Accessibility Workshop Source: www.gizmag.com
    26. 26. 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 26 Web Accessibility Workshop Source: microsoft.com
    27. 27. WiViK Keyboard with Prediction 27 Web Accessibility Workshop
    28. 28. Link to Other On-Screen Keyboards • https://touch-base.com/documentation/ Virtual%20Keyboards.htm 28 Web Accessibility Workshop
    29. 29. 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 29 Web Accessibility Workshop Source: microsoft.com
    30. 30. Light Signaler Alert Device 30 Web Accessibility Workshop Source: freebiefrenzy2.blogspot.com
    31. 31. 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. 31 Web Accessibility Workshop Source: microsoft.com
    32. 32. 32 Single Switch Web Accessibility Workshop Image Source: spectronicsinoz.com
    33. 33. Single Switch Access to iPad Using Switch Control 33 Web Accessibility Workshop http://www.youtube.com/watch?v=TH540kuBDwo
    34. 34. 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 34 Web Accessibility Workshop Source: microsoft.com
    35. 35. Portable Word Processor 35 Web Accessibility Workshop Image source: www.writerlearning.com
    36. 36. 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 36 Web Accessibility Workshop Source: microsoft.com
    37. 37. Braille Displays 37 Web Accessibility Workshop Image: www.afb.org
    38. 38. 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 38 Web Accessibility Workshop Source: microsoft.com
    39. 39. Software Screen Magnifier 39 Web Accessibility Workshop
    40. 40. 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 40 Web Accessibility Workshop Source: microsoft.com
    41. 41. 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 41 Web Accessibility Workshop
    42. 42. 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 42 Web Accessibility Workshop Source: microsoft.com
    43. 43. Dragon Speech Recognition Software 43 Web Accessibility Workshop Video: youtube.com
    44. 44. Siri, Cortana, Voice Assistant 44 Web Accessibility Workshop Image source: mashable.com
    45. 45. 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 45 Web Accessibility Workshop Source: microsoft.com
    46. 46. Stephen Hawking Stephen Hawking is one of the most famous people using speech synthesis to communicate 46 Web Accessibility Workshop
    47. 47. Overview of a Typical TTS System 47 Web Accessibility Workshop Image source: en.wikipedia.org
    48. 48. 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 48 Web Accessibility Workshop Source: microsoft.com
    49. 49. Talking Word Processor 49 Web Accessibility Workshop http://www.enablemart.com/talking-word- processor
    50. 50. 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 equipped device. 50 Web Accessibility Workshop Source: microsoft.com
    51. 51. Telecommunications Device for the Deaf 51 Web Accessibility Workshop Image Source: en.wikipedia.org
    52. 52. 4. ASSISTIVE TECHNOLOGY IN DIFFERENT OS Overview 52 Web Accessibility Workshop
    53. 53. Windows 7 Ease of Access Center 53 Web Accessibility Workshop
    54. 54. Windows Magnifier 54 Web Accessibility Workshop
    55. 55. On-Screen Keyboard 55 Web Accessibility Workshop
    56. 56. Windows Narrator 56 Web Accessibility Workshop
    57. 57. Mac OS 57 Web Accessibility Workshop Image Source: apple.com
    58. 58. Mac OS Accessibility Preferences Display 58 Web Accessibility Workshop
    59. 59. Mac OS Accessibility Preferences Zoom 59 Web Accessibility Workshop
    60. 60. Mac OS Accessibility Preferences VoiceOver 60 Web Accessibility Workshop
    61. 61. Mac OS Accessibility Preferences Captions 61 Web Accessibility Workshop
    62. 62. Mac OS Accessibility Preferences Choice of Captions in Application 62 Web Accessibility Workshop
    63. 63. Mac OS Accessibility Preferences Keyboard 63 Web Accessibility Workshop
    64. 64. Mac OS Accessibility Preferences Mouse and Trackpad 64 Web Accessibility Workshop
    65. 65. Mac OS Accessibility Preferences Switch control (Demo and Exercise) 65 Web Accessibility Workshop
    66. 66. 66 • Open TextEdit • Enable Switch control • Write text: Hello World! :) Exercise Web Accessibility Workshop
    67. 67. Mac OS Accessibility Preferences VoiceOver 67 Web Accessibility Workshop
    68. 68. VoiceOver Demo 68 Web Accessibility Workshop
    69. 69. iOS Accessibility 69 Web Accessibility Workshop Image Source: apple.com
    70. 70. Vision 70 Web Accessibility Workshop
    71. 71. Hearing 71 Web Accessibility Workshop
    72. 72. Learning, Physical & Motor 72 Web Accessibility Workshop
    73. 73. Zoom 73 Web Accessibility Workshop
    74. 74. Invert Colors 74 Web Accessibility Workshop
    75. 75. 75 Speak Selection Web Accessibility Workshop
    76. 76. Assistive Touch 76 Web Accessibility Workshop Demo on youtube.com
    77. 77. Mobile Safari Accessibility 77 Web Accessibility Workshop
    78. 78. 5. WAI ARIA READERS DEMO 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 blog post – what was difficult for you? How long time you spent on these tasks? What developer should know about assistive technology? • Link your post in a comment to my assignment post 82 Web Accessibility Workshop