Session 3 in DTI, HCI curricula

1. Web Accessibility Workshop
Session Three
Vladimir Tomberg, PhD
Tallinn University

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. 1. PRESENTATION OF HOMEWORK
Please be prepared to share your experience!
3
Web Accessibility
Workshop

4. 2. ALTERNATIVE INPUT DEVICES
Assistive Technologies
4
Web Accessibility
Workshop

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. Alternative Layout Keyboards
6
Web Accessibility
Workshop
Source: mayer-johnson.com

7. Big Keys Keyboard
7
Web Accessibility
Workshop
Source: try-it.ie

8. Big Keys Keyboards with Key-Guards
8
Web Accessibility
Workshop
Source: click2go.ie

9. One-Handed Keyboards
9
Web Accessibility
Workshop
Source: enablemart.com

10. One Hand “Half Keyboard”
10
Web Accessibility
Workshop
Source: infogrip.com

11. One Hand Keyboard
11
Web Accessibility
Workshop
Source: infogrip.com

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. Foot Pedal
13
Web Accessibility
Workshop
Source: kinesis-ergo.com

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. Eye Movements Tracking Device
15
Web Accessibility
Workshop
Source: abletech.ca

16. Head Movement based Cursor
Control
16
Web Accessibility
Workshop
Source: naturalpoint.com

17. Control of Wheelchairs
with Brain Waves
17
Web Accessibility
Workshop
Source: asiabiomed.wordpress.com

18. Typing a Text at On-Screen Keyboard
with Brain Waves
18
Web Accessibility
Workshop

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. 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. 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. Touch Screen
22
Web Accessibility
Workshop

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. 3. OTHER ASSISTIVE PRODUCTS
Assistive Technologies
24
Web Accessibility
Workshop

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. Braille Printer
26
Web Accessibility
Workshop
Source: www.gizmag.com

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. WiViK Keyboard with Prediction
28
Web Accessibility
Workshop

29. Link to Other On-Screen Keyboards
• https://touch-base.com/documentation/
Virtual%20Keyboards.htm
29
Web Accessibility
Workshop

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. Light Signaler Alert Device
31
Web Accessibility
Workshop
Source: freebiefrenzy2.blogspot.com

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
Single Switch
Web Accessibility
Workshop
Image Source: spectronicsinoz.com

34. Single Switch Access to iPad
Using Switch Control
34
Web Accessibility
Workshop
http://www.youtube.com/watch?v=TH540kuBDwo

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. Portable Word Processor
36
Web Accessibility
Workshop
Image source: www.writerlearning.com

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. Braille Displays
38
Web Accessibility
Workshop
Image: www.afb.org

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. Software Screen Magnifier
40
Web Accessibility
Workshop

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. 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. 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. Dragon Speech Recognition Software
44
Web Accessibility
Workshop
Video: youtube.com

45. Siri, Cortana, Voice Assistant
45
Web Accessibility
Workshop
Image source: mashable.com

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. Stephen Hawking
Stephen Hawking is one of
the most famous people
using speech synthesis to
communicate
47
Web Accessibility
Workshop

48. Overview of a Typical TTS System
48
Web Accessibility
Workshop
Image source: en.wikipedia.org

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. Talking Word Processor
50
Web Accessibility
Workshop
http://www.enablemart.com/talking-word-
processor

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. Telecommunications Device
for the Deaf
52
Web Accessibility
Workshop
Image Source: en.wikipedia.org

53. 4. ASSISTIVE TECHNOLOGY IN
DIFFERENT OS
Overview
53
Web Accessibility
Workshop

54. Windows 7 Ease of Access Center
54
Web Accessibility
Workshop

55. Windows Magnifier
55
Web Accessibility
Workshop

56. On-Screen Keyboard
56
Web Accessibility
Workshop

57. Windows Narrator
57
Web Accessibility
Workshop

58. Mac OS
58
Web Accessibility
Workshop
Image Source: apple.com

59. Mac OS Accessibility Preferences
Display
59
Web Accessibility
Workshop

60. Mac OS Accessibility Preferences
Zoom
60
Web Accessibility
Workshop

61. Mac OS Accessibility Preferences
VoiceOver
61
Web Accessibility
Workshop

62. Mac OS Accessibility Preferences
Captions
62
Web Accessibility
Workshop

63. Mac OS Accessibility Preferences
Choice of Captions in Application
63
Web Accessibility
Workshop

64. Mac OS Accessibility Preferences
Keyboard
64
Web Accessibility
Workshop

65. Mac OS Accessibility Preferences
Mouse and Trackpad
65
Web Accessibility
Workshop

66. Mac OS Accessibility Preferences
Switch control (Demo and Exercise)
66
Web Accessibility
Workshop

67. 67
• Open TextEdit
• Enable Switch control
• Write text: Hello World! :)
Exercise
Web Accessibility
Workshop

68. Mac OS Accessibility Preferences
VoiceOver
68
Web Accessibility
Workshop

69. VoiceOver Demo
69
Web Accessibility
Workshop

70. iOS Accessibility
70
Web Accessibility
Workshop
Image Source: apple.com

71. Vision
71
Web Accessibility
Workshop

72. Hearing
72
Web Accessibility
Workshop

73. Learning, Physical & Motor
73
Web Accessibility
Workshop

74. Zoom
74
Web Accessibility
Workshop

75. Invert Colors
75
Web Accessibility
Workshop

76. 76
Speak Selection
Web Accessibility
Workshop

77. Assistive Touch
77
Web Accessibility
Workshop
Demo on youtube.com

78. Mobile Safari Accessibility
78
Web Accessibility
Workshop

79. 6. HOMEWORK ASSIGNMENT 3
79
Web Accessibility
Workshop

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. 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. 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