нечего тебе сказать · доклад про a11y?!26. Это не весело! Я...

Мне нечего тебе сказать!Алексей Охрименко (IPONWEB)

�1

Алексей ОхрименкоTwitter: @Ai_boy

!2

IPONWEB (RTB)

!3

!4

https://meetup.tinkoff.ru

Telegram: https://t.me/angular_ru

Facebook: https://www.facebook.com/groups/1818344448397380/

VK: https://vk.com/club149556741

Twitter: https://twitter.com/AngularMoscow

Meetup: https://www.meetup.com/AngularMoscow/

Angular RU - Github Максим Иванов

Angular Piter Telegram Катерина Павленко, Александр Коротаев, Александр Духовняк

Angular Piter Meetup - Call For Speekers

!8

Давай на «ты»?

!9

Некоторые из существующих способов коммуникации с сайтами

!10

Мышь

!11

!12

Тач

!13

!14

Тач и стилус

!15

Тач и стилусPointer Events

!16

Pointer Events vs Touch Events Роман Дворнов

!17

!18

Джойстик

!19

!20

Клавиатура

!21

!22

Клавиатура + скринридер

!23

Людоедский интерфейс Вадим Макеев

Accessibility Testing with a Screen Reader Сергей Кригер

!24

A11ycasts Роба Додсона

!25

Ну зачем? Еще один доклад про a11y?

!26

Это не весело! Я пришел за весельем!

!27

Об этом говорят только девелоперы

!28

Это не приносит 💵

!29

A11y это сложно

!30

Что если?

!31

WebSpeech API

!32

WebSpeech API - это не стандартный способ улучшения A11y

!33

WebSpeech API

!34

WebSpeech API

SpeechSynthesis

!35

WebSpeech API

SpeechSynthesis

SpeechRecognition

!36

!37

!38

SpeechSynthesis

!39

SpeechSynthesis

SpeechSynthesisVoice

SpeechSynthesisUtterance

!40

SpeechSynthesis

SpeechSynthesisVoice

SpeechSynthesisUtterance

!41

SpeechSynthesis

if ('speechSynthesis' in window) { const phrase = new SpeechSynthesisUtterance('Hello world'); speechSynthesis.speak(phrase); }

!42

SpeechSynthesis

if ('speechSynthesis' in window) { const phrase = new SpeechSynthesisUtterance('Hello world'); speechSynthesis.speak(phrase); }

!43

SpeechSynthesis

if ('speechSynthesis' in window) { const phrase = new SpeechSynthesisUtterance('Hello world'); speechSynthesis.speak(phrase); }

!44

DEMO SpeechSynthesis

!45

SpeechSynthesisPause, Resume, Speak, Cancel

!46

SpeechRecognition

!47

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!48

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!49

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!50

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!51

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!52

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!53

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!54

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!55

SpeechRecognitionif ('webkitSpeechRecognition' in window) { var recognition = new webkitSpeechRecognition(); recognition.onresult = (event) => { for (let i = 0; i < event.results.length; i++) { let result = event.results[i]; let resultAlternative = result[0]; console.log(resultAlternative.transcript); } } recognition.start(); // ... через некоторое время recognition.stop(); }

!56

DEMO SpeechRecognition

!57

Одна маленькая проблема

!58

NLP (Natural Language Processing)

Наука о том, как работать с языками алгоритмически

!59

20 летNLP

(Natural Language Processing)

Наука о том, как работать с языками алгоритмически

!60

Долго, муторно, много работы и исследований

!61

Пока нет готовых библиотек

!62

Речь - сложная штука

!63

Есть один “грязный трюк”

!64

Amazon Alexa Apple Siri, Google Assistant, Yandex Алиса

!65

Последовательный диалог (Intent)

!66

- Привет! (приветствие) - Привет!

- Завтра будет дождь? (запрос)

- Завтра дождя не будет

!67

- (приветствие)

- (ответное приветствие)

- (запрос) - (ответ на запрос)

!68

- Ok Google (приветствие)

- (ответное приветствие)

- Ok Google (запрос) - (ответ на запрос)

!69

commands = { list: (model) !=> {}, search: (query) !=> {}, filterTime: (time) !=> {}, goTo: (pageTile) !=> {} }

!70

SpeechGrammar

!71

SpeechGrammar

JSpeech Grammar FormatJSGF

!72

SpeechGrammar

JSpeech Grammar FormatJSGF

SunMicrosystems / Oracle

!73

SunMicrosystems / Oracle

SpeechGrammar

JSpeech Grammar FormatJSGF

!74

SunMicrosystems / Oracle

SpeechGrammar

JSpeech Grammar FormatJSGF

!75

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!76

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!77

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!78

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!79

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!80

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!81

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!82

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!83

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!84

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1;

!85

SpeechGrammarvar grammar = ` #JSGF V1.0; grammar colors; public <color> = red | green ; ` var recognition = new webkitSpeechRecognition(); var speechRecognitionList = new webkitSpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.grammars = speechRecognitionList;

!86

DEMO SpeechGrammar

!87

Лучше…

!88

SpeechRecognition

SpeechRecognition

SpeechRecognition

SpeechRecognition

Все очень плохо

!89

!90

Выхода нет?

!91

MAIN DEMO

!92

!93

Как?

!94

6 часов

!95

Google Home ~5000 руб

!96

Google HomeGoogle Assistant ~0 руб

!97

Google HomeGoogle AssistantDialogflow ~0 руб

!98

Firebase

Google HomeGoogle AssistantDialogflow

!99

Firebase

Google HomeGoogle AssistantDialogflow

Любой бэкенд

!100

Firebase

Google HomeGoogle AssistantDialogflow

Любой бэкенд~0 руб

!101

Firebase

JS-библиотека

Google HomeGoogle AssistantDialogflow

Любой бэкенд

!102

Firebase

JS-библиотека

Google HomeGoogle AssistantDialogflow

Любой бэкенд

commands = { list: (model) !=> {}, search: (query) !=> {}, filterTime: (time) !=> {}, goTo: (pageTile) !=> {} }

!103

Firebase

JS-библиотека

Сайт

Google HomeGoogle AssistantDialogflow

Любой бэкенд

!104

Firebase

JS-библиотека

Сайт

Google HomeGoogle AssistantDialogflow

Любой бэкенд

!105

Чему мы научились

!106

1) WebSpeech API - SpeechSynthesis, SpeechRecognition, SpeechGrammar

2) Google Assistant / Dialogflow / backend / small js lib

!107

Что дальше?

!108

Голосовое взаимодействие с вебсайтами станет

стандартом индустрии

!109

Взаимодействие с сайтом исключительно голосом - как вариант

(но не самый A11y)

!110

A11y - это весело и удобно для всех

!111

Сегодня ты пойдешь домой и поиграешься с

этим API ;)

!112

Мне нечего тебе сказать!

!113

!114

Алексей Охрименко

Twitter: @Ai_boy

bit.ly/2MmuahZ

!115