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.
Crossing the streams
CSUN 2016
Every molecule in your body exploding at the
speed of light?
Vibration API
W3C Recommendation (2015)
What?
• Enables simple haptic feedback for webapps
Why?
• Email alert notifications
• Game effects
• RTC incoming call notifications
Where?
• Chrome on Android
• Chrome, Firefox and Opera on desktop
How?
• Patterns of on/off pulses
• Each pulse is described in milliseconds
• Patterns are a combination of pulses/pauses
Single pulse
window.navigator.vibrate(100);
window.navigator([100]);
Pulse patterns
window.navigator.vibrate([200, 100, 200]);
Cancelling pulses
window.navigator.vibrate(0);
window.navigator.vibrate([0]);
Vibration API demo
Ljwatson.github.io/playground/vibrate/vibrate.html
Check for API support
if ("vibrate" in navigator) {
//Do something.
} else {
alert("This browser does not support the Vibr...
Vibrate once
var vibrateOnce = function(e) {
window.navigator.vibrate(500);
vibrateVisualiser(500);
};
Vibrate twice
var vibrateTwice = function(e) {
window.navigator.vibrate([500, 500, 500]);
vibrateVisualiser([500, 500, 500...
Vibrate more
var vibrateMore = function(e) {
window.navigator.vibrate([500, 500, 500, 500, 500]);
vibrateVisualiser([500, ...
Add event listeners
document.getElementById("v1").addEventListener("click", vibrateOnce);
document.getElementById("v2").ad...
Vibration API in action
Web Speech API
W3CCG proposal (2012)
What?
• Enables speech input and output for webapps
Why?
• Ask calendar for today's appointments
• Get help with complex interfaces
• Hands-free recipe books
How?
• SpeechSynthesis and SpeechRecognition interfaces
• Methods for controlling and manipulating speech output/input
SpeechSynthesis interface
Where?
• Chrome, Opera and Safari on desktop
• Chrome and Safari on mobile
SpeechSynthesis demo
http://ljwatson.github.io/playground/speech/speak.html
Check for API support
if (window.SpeechSynthesisUtterance === undefined) {
alert("This browser does not support the Web Sp...
Create speech object
var utterance = new SpeechSynthesisUtterance();
utterance.text = "Tequila";
Speak utterance
window.speechSynthesis.speak(utterance);
SpeechSynthesis in action
SpeechSynthesis voices demo
http://ljwatson.github.io/playground/speech/getvoices.html
Get voices
var tts = speechSynthesis.getVoices();
Display voices
var voices = document.getElementById("voices");
for (var i = 0; i < tts.length; i++) {
voices.innerHTML += ...
Select voice
var selectedVoice = voices.selectedIndex;
var utterance = new SpeechSynthesisUtterance();
utterance.text = vo...
Assign voice to speech object
utterance.voice = tts[selectedVoice];
window.speechSynthesis.speak(utterance);
SpeechSynthesis voices in action
SpeechRecognition interface
Where
• Chrome and Opera on the desktop
• Chrome on Android
SpeechRecognition demo
google.com/intl/en/chrome/demos/speech.html
SpeechRecognition in action
CSS Speech module
W3C Candidate Recommendation (2012)
What?
• Enables aural presentation of content
Why?
• Speak news headlines in a different voice
• Raise volume for important email notifications
• Speak terms and condit...
Where?
• Safari with VoiceOver on iOS
How?
• Use CSS to enable/disable speech
• Control volume, pitch and rate
Speak property
• Determines whether content is presented aurally
speak: auto;
• Values
auto, normal, none
Voice-volume property
• Determines volume of voice output
voice-volume: medium;
• Values:
silent, x-soft, soft, medium, lo...
Voice-rate property
• Determines speaking rate
voice-rate: normal;
• Values:
normal, x-slow, slow, medium, fast, x-fast
Voice-pitch property
• Determines the baseline voice pitch
voice-pitch: medium;
• Values:
x-low, low, medium, high, x-high
Voice-range property
• Determines the variability in the baseline voice pitch
voice-range: medium;
• Values:
x-low, low, m...
Voice-stress property
• Determines voice emphasis (a combination of pitch, volume and rate
changes)
voice-stress: normal;
...
CSS Speech demo
http://ljwatson.github.io/playground/speech/speak.html
CSS Speech in action
Thank you
Ljwatson.github.io/playground
Upcoming SlideShare
Loading in …5
×

Crossing the Streams: Using mainstream APIs for accessible UX (2016)

919 views

Published on

Using the Vibration API, Web Speech API and CSS Speech module to cross the streams between mainstream and assistive technology for more accessible UX.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Crossing the Streams: Using mainstream APIs for accessible UX (2016)

  1. 1. Crossing the streams CSUN 2016
  2. 2. Every molecule in your body exploding at the speed of light?
  3. 3. Vibration API W3C Recommendation (2015)
  4. 4. What? • Enables simple haptic feedback for webapps
  5. 5. Why? • Email alert notifications • Game effects • RTC incoming call notifications
  6. 6. Where? • Chrome on Android • Chrome, Firefox and Opera on desktop
  7. 7. How? • Patterns of on/off pulses • Each pulse is described in milliseconds • Patterns are a combination of pulses/pauses
  8. 8. Single pulse window.navigator.vibrate(100); window.navigator([100]);
  9. 9. Pulse patterns window.navigator.vibrate([200, 100, 200]);
  10. 10. Cancelling pulses window.navigator.vibrate(0); window.navigator.vibrate([0]);
  11. 11. Vibration API demo Ljwatson.github.io/playground/vibrate/vibrate.html
  12. 12. Check for API support if ("vibrate" in navigator) { //Do something. } else { alert("This browser does not support the Vibration API"); }
  13. 13. Vibrate once var vibrateOnce = function(e) { window.navigator.vibrate(500); vibrateVisualiser(500); };
  14. 14. Vibrate twice var vibrateTwice = function(e) { window.navigator.vibrate([500, 500, 500]); vibrateVisualiser([500, 500, 500]); };
  15. 15. Vibrate more var vibrateMore = function(e) { window.navigator.vibrate([500, 500, 500, 500, 500]); vibrateVisualiser([500, 500, 500, 500, 500]); };
  16. 16. Add event listeners document.getElementById("v1").addEventListener("click", vibrateOnce); document.getElementById("v2").addEventListener("click", vibrateTwice); document.getElementById("v3").addEventListener("click", vibrateMore);
  17. 17. Vibration API in action
  18. 18. Web Speech API W3CCG proposal (2012)
  19. 19. What? • Enables speech input and output for webapps
  20. 20. Why? • Ask calendar for today's appointments • Get help with complex interfaces • Hands-free recipe books
  21. 21. How? • SpeechSynthesis and SpeechRecognition interfaces • Methods for controlling and manipulating speech output/input
  22. 22. SpeechSynthesis interface
  23. 23. Where? • Chrome, Opera and Safari on desktop • Chrome and Safari on mobile
  24. 24. SpeechSynthesis demo http://ljwatson.github.io/playground/speech/speak.html
  25. 25. Check for API support if (window.SpeechSynthesisUtterance === undefined) { alert("This browser does not support the Web Speech API"); } else { //Do something. }
  26. 26. Create speech object var utterance = new SpeechSynthesisUtterance(); utterance.text = "Tequila";
  27. 27. Speak utterance window.speechSynthesis.speak(utterance);
  28. 28. SpeechSynthesis in action
  29. 29. SpeechSynthesis voices demo http://ljwatson.github.io/playground/speech/getvoices.html
  30. 30. Get voices var tts = speechSynthesis.getVoices();
  31. 31. Display voices var voices = document.getElementById("voices"); for (var i = 0; i < tts.length; i++) { voices.innerHTML += '<option value="' + tts[i].name + '">' + tts[i].name + '</option>'; }
  32. 32. Select voice var selectedVoice = voices.selectedIndex; var utterance = new SpeechSynthesisUtterance(); utterance.text = voices[selectedVoice].text;
  33. 33. Assign voice to speech object utterance.voice = tts[selectedVoice]; window.speechSynthesis.speak(utterance);
  34. 34. SpeechSynthesis voices in action
  35. 35. SpeechRecognition interface
  36. 36. Where • Chrome and Opera on the desktop • Chrome on Android
  37. 37. SpeechRecognition demo google.com/intl/en/chrome/demos/speech.html
  38. 38. SpeechRecognition in action
  39. 39. CSS Speech module W3C Candidate Recommendation (2012)
  40. 40. What? • Enables aural presentation of content
  41. 41. Why? • Speak news headlines in a different voice • Raise volume for important email notifications • Speak terms and conditions more quickly
  42. 42. Where? • Safari with VoiceOver on iOS
  43. 43. How? • Use CSS to enable/disable speech • Control volume, pitch and rate
  44. 44. Speak property • Determines whether content is presented aurally speak: auto; • Values auto, normal, none
  45. 45. Voice-volume property • Determines volume of voice output voice-volume: medium; • Values: silent, x-soft, soft, medium, loud, x-loud
  46. 46. Voice-rate property • Determines speaking rate voice-rate: normal; • Values: normal, x-slow, slow, medium, fast, x-fast
  47. 47. Voice-pitch property • Determines the baseline voice pitch voice-pitch: medium; • Values: x-low, low, medium, high, x-high
  48. 48. Voice-range property • Determines the variability in the baseline voice pitch voice-range: medium; • Values: x-low, low, medium, high, x-high
  49. 49. Voice-stress property • Determines voice emphasis (a combination of pitch, volume and rate changes) voice-stress: normal; • Values: normal, strong, none, moderate, reduced
  50. 50. CSS Speech demo http://ljwatson.github.io/playground/speech/speak.html
  51. 51. CSS Speech in action
  52. 52. Thank you Ljwatson.github.io/playground

×