нечего тебе сказать · доклад про a11y?!26. Это не весело! Я пришел за весельем!!27. Об этом говорят ... Сайт

Мне нечего тебе сказать!Алексей Охрименко (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/

https://meetup.tinkoff.ru

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

https://github.com/Angular-RU

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

Angular Piter Meetup - Call For Speekers

https://t.me/angular_piter

https://github.com/AngularPiter/Talks/issues

!8

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

!9

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

!10

Мышь

!11

!12

Тач

!13

!14

Тач и стилус

!15

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

!16

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

!17

https://youtu.be/4o9joROJVHg

!18

Джойстик

!19

!20

Клавиатура

!21

!22

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

!23

https://en.wikipedia.org/wiki/Screen_reader

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

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

!24

https://youtu.be/ssJsjGZE2sc

https://www.youtube.com/channel/UCtPAnbDiup_1jWSDNBu_zVw/videos

https://www.youtube.com/channel/UCtPAnbDiup_1jWSDNBu_zVw/videos

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

!25

https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g

Ну зачем? Еще один доклад про 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


!43

SpeechSynthesis


!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


!49


!50


!51


!52


!53


!54


!55


!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

https://www.w3.org/TR/jsgf/

SpeechGrammar


SunMicrosystems / Oracle

!73



SpeechGrammar


!74



SpeechGrammar


!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


!77


!78


!79


!80


!81


!82


!83


!84


!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


Любой бэкенд

!100

Firebase


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

!101

Firebase

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



!102

Firebase




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

!103

Firebase


Сайт



!104

Firebase


Сайт



!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

https://bit.ly/2MmuahZ

Documents

нечего тебе сказать · доклад про a11y?!26. Это не весело! Я пришел за весельем!!27. Об этом говорят ... Сайт