Placeholder Image

字幕列表 影片播放

  • Thank you very much, everyone.

  • Good morning, Budapest.

  • How's everyone doing doing that?

  • So, before we get started, I will give you a little bit background.

  • I guess I will not.

  • So I will not do so good.

  • It's pulled it.

  • But I'm My name is Maurice De Palma.

  • I was born and raised in the beautiful country of Costa Rica and I've been leaving for the past 13 years in Hamburg, Germany.

  • Not because of the lovely weather, Eddie.

  • It is an amazing city.

  • Don't get me wrong.

  • Um, I work.

  • It's the product engineer at Caen Astrada.

  • And you will see me also where?

  • In multiple hats as the co founder.

  • Off what?

  • Like ocean where we crafts room.

  • We're out off ocean recovered fishing nets.

  • I have to warn you, though, this presentation is gonna be filled with personal anecdotes.

  • So be ready.

  • And the first story?

  • It's about how I gave my very first conference talk.

  • It was to the CSS computer past two years ago, and I just have found out that baby yesterday said on the CSS Come.

  • He did his first stop to here four years ago.

  • So today this is a very special humbling moment for me.

  • And I'm so happy to share it with you.

  • If you have ever held that talk before the first time, it is a very exciting, never nerve wracking experience.

  • And as you can imagine, I was super super nervous.

  • I thought I was gonna die, especially because all these amazing people, then some off the speakers.

  • You have followed your in your career, and I can't forget how, um, Dennis Mission off came to me and gave me some really comporting words.

  • And I think I had just to stare.

  • If I look in my face, probably.

  • But I did my best then and I think the presentation came or right by my point here is this is a very special conference, and I am very, very excited to be here and share this presentation with you if you have your own ideas, if you won your voice to be heard, this is the best platform to do it.

  • So submit your ideas and you will never regret it.

  • And for that reason, I want to thank the organizer's for having me.

  • I want to thank you for being part of this amazing community and I hope that we can use next two days to get inspired, to meet each other, to learn you things.

  • And for that I hope, let's give it up for that.

  • The Web can be an amazing place, a place where we can collaborate where we can learn where we can be creative.

  • And it has an inherent open nature.

  • Tow it.

  • Information is accessible to everyone and for me was especially important because I'm a self taught front and developer.

  • Now, by race off hands, how many of you are self taught developers?

  • That's a lot of us.

  • And now imagine this information would be on Lee accessible to a certain amount of people that you were not invited to be part of it.

  • And this is actually what we're doing every single day when we're not thinking about accessibility and the applications will building.

  • Today we want to invite and empower people through emergent Web technologies, and I love being a friend developer.

  • I love my craft and working with the latest technologies, um, learning about new paradigms and bringing projects to wife, and I think we share the same passion.

  • But what I have learnt in later years is that my work should serve a higher purpose, that just my own gratification.

  • And I know Web accessibility.

  • It's not an easy endeavor, especially if you're working on large scale projects with a lot of decision makers can become a real challenge.

  • You get to hear stuff like accessibility.

  • It's not important for us.

  • It's not relevant for our target market, and this kind of comments are frustrating.

  • And yet it is still our responsibility to remove these barriers to teach people and try to promote an implement accessibility.

  • We, as developers, have a collective responsibility for the collector for the applications were building today, even if we're aware of it or not, think about it for a second.

  • Most of us have seen hundreds.

  • Thousands of websites have gone through a ton of user flows, and we have this toolbox full with buzzwords.

  • And my point here is it doesn't matter how badly designed the user interface this we still make our way out.

  • But this is not how the rest of the world it's interacting with the applications with Bill not at all.

  • We are working in a bubble trapped in our own bias and like you mentioned a lot of personal anecdotes, but don't worry.

  • We have some technical stuff, too.

  • Um, there were two events in my life that made me realize about the importance of accessibility.

  • So I had to learn the hard way.

  • And the 1st 1 was a painful one.

  • Her family health issue.

  • My uncle in law, he was found on the floor, dehydrated and an unconscious, and he was probably on the floor for a couple of dates.

  • So today we're very happy that he's back home.

  • But you have to consider that he's an elderly person leaving by himself.

  • So before the accident, he completely relied on the Web to get pretty much everything done.

  • He will buy his groceries online.

  • Pastries would be ordered for family coffee dates.

  • He will take care of his bills and finances.

  • And, um, unfortunately, after the person after his hospital relief, Hugh, he was diagnosed with a with poor vision and memory loss.

  • And after he released, he called me and he said modestly, I think my computer is broken.

  • You know that when computers were broken, family are calling.

  • It's normal stuff, and it's I'm trying to order some groceries and I think my computer is programmed.

  • So I went over there to see what was the problem.

  • And so his computer was working just fine.

  • And I asked him, Can you please show me the problem?

  • And this is the moment that I realized and I will never forget.

  • He couldn't recognize, and after cart button he couldn't recognize or differentiate between copy text or input fields.

  • He could not get through the side at all.

  • And I was very sad because I realized that I swept Developer was not being responsible enough with the applications I was building until that moment.

  • But we can actually make better use off the current accessibility tools to help people like my uncle in law get things done online.

  • We can even go third her further and think about all these Web AP eyes that we can use to our advantage to actually make the wet a more open place.

  • But what I have observed among us developer, sometimes it's that accessibility is perceived as just a checklist, a list of things given by the Web content, accessibility guidelines for us to implement, and it reminds me a lot to the same attitude we have for front and developer for olders front and development for all their browsers.

  • You know, when you have been working on a project and the time has come for you to check it in an older Internet explorer, I think about it for a second.

  • And my conclusion to that is that we as humans, we tend to avoid things that we don't understand.

  • And that's our nature, and I think that's why accessibility is being perceived that way.

  • But what if we start considering accessibility, a succour concern off our application?

  • Now let me give you an example.

  • In Europe alone, there are 34.4 million people.

  • I mean, let me correct that auto with disabling hearing impairments, a disabling hearing impairment.

  • It is one that is greater than 35 decibels and every single day with denied death and hard of hearing, people access door our personal and professional lives.

  • And during my research, I found this app called Eva that I would like to show you, and I think the team challenge this notion with their work and let me show you what they're doing.

  • I am dead good.

  • Monday's too many people don't get time.

  • People talk so fast, it could be pretty over too much.

  • Going on.

  • Eva is awesome to see what people say with one tap.

  • I invite people and they join me with their phones aboutthe change at work.

  • Follow what the teacher says in class.

  • I don't understand people who never got to look out.

  • Hey, Bob will transcribe about anything.

  • Well, almost everything.

  • Um, that for me was very inspiring.

  • I'm not related to them.

  • I don't even know the team.

  • But I think that's a really good example off.

  • When you recognize exclusion and you be and you become empathetic toe towards people with death and hearing impairments, then they were able to come up with a meaningful solution.

  • Maybe it's not the best one, but it is a good start, and that's why we're here talking about it today because we can do this kind of things on the Web native way and I mentioned to events.

  • This is the last one, I promise.

  • And the 2nd 1 I had a sport injury, so I dislocated my arm.

  • I couldn't move my arm for a couple of weeks, and that was really frost trading in a way because I couldn't interact with my environment.

  • So this becomes a disability.

  • Um, yet I was feeling super fit, and I wanted to work.

  • And this is how I discovered the Mac dictation keyboard tool.

  • Now, how many off you?

  • Are you familiar with the dictation tool?

  • A few of them.

  • Do you like it?

  • Yes.

  • Mixed emotions.

  • Well, I love it.

  • I recognize that there is so much potential in the Web speech, a p I.

  • It allows to control Web applications through voice, and we can open through that, for example, our applications to a lot of other people.

  • We can be inclusive towards people with vision impairment.

  • We can be inclusive towards people with literacy problems, or maybe with a with the disability with, um, with a permanent disability, if you have heard of it before.

  • It has been around since 2014 and it has been baking native food into the Web, and we will be covering how to include voice in a Damon and the small application I wrote for this example and considering accessibility and inclusion.

  • That's the core concerns off the application and what this little toy application Dawes is it pretty much It's JavaScript application and gets all of my Spotify playlists so I can navigate through them plate tracks or or manage my devices through the Connect Web, a p I from Spotify, which is pretty neat and to include it.

  • The speech recognition service works pretty much.

  • I have a very funky looking microphone that you will see soon.

  • It receives sound through your devices microphone, and it checks it against the list of provided grammars.

  • And that's basically what we need to get that running now.

  • A word of caution is that the speech recognition involves a server based recognition engine, meaning that audio will be sent to Web service for processing.

  • So this is important to half in mind because, um, it would only work if we're online.

  • And for that reason I have a hot spot open because maybe our wife I might not be.

  • That's good.

  • So this is the initial configuration.

  • Very straightforward.

  • We just instant Macon instance off the speech recognition controller.

  • We configure the max alternatives, and the interesting thing about it, per default is actually one.

  • But the interesting thing about it, it letters define how many words or just one word or the list an area off words for the service to give us back for us to work with that.

  • So it gives us a lot of flexibility with that kind of stuff we can do.

  • We have five property interim results which will give us the the results that are not final yet.

  • Now, like a managed OK, lack property is really important.

  • So, um, if you don't define a length property, it will use the the HD male tak attributes as default or as a last e four would be the user agent language settings and the same edition.

  • Grammar is gonna be one of the most important aspects off this implementation.

  • And the speech grammar list represents, um, an object off grammars and you princes and patterns for the service to understand.

  • So looking back to that instance e ation function, you will see that we will pass those you Terrence's, which means spoken words necessary for the recognition I am using our ex Js observable Sze.

  • We will not cover them in detail, but it helps me a lot with a lot of data streams that we're handling.

  • And the difference is that instead off receiving them all at once.

  • We can receive them over time.

  • So it is very useful for this for this purpose, and we will subscribe to it and pass to the apt from string method, the grammars and a confidence score.

  • Right now it's aesthetically one.

  • But as you can imagine, the the can we can tell by every search how important is thes search for us and at the end will pass it to the speech recognition itself.

  • Excuse me, gets very hot up here.

  • So I mentioned grammars are super important, and for that we need to take a look at an LP.

  • And NLP, or Natural language Processing is the field that focuses in the interaction between human language and computers.

  • So what it basically does is computers try to understand, process and derive meaning from human language.

  • And this is basically what the the Web speech recognition is all about.

  • It's an abstraction that takes all that complexity away for us.

  • In order to include speech recognition into our application, there is stolen underlying problem and human language.

  • It's ambiguous.

  • A word can have many meanings, and this is what makes natural language processing so hard to get right now.

  • I'm telling you from experience the German Alexa and me we have the worst relationship ever.

  • Like I talked to her, she don't understands pretty much anything, even though I think I can talk a German.

  • English is better.

  • But I realized my mother tongue is Spanish is the best.

  • And if we're talking about accessibility, it's not gonna be useful for us.

  • If the application don't understand our intentions and for the stem of application, I thought Alexis intent.

  • It would be a really good source of inspiration for tackling.

  • To some extent the problem.

  • Often biggest language, meaning you saw in the APP We can go through the playlist.

  • So there are many ways that I can express my intention.

  • I could say, showed the playlist go to play list.

  • We can even go further and consider what if the service this, our actual responses I got from the service before it says okay list.

  • So instead of frustrating the user, I can already consider these cases and trigger that related command to it.

  • So this is a very basics example of how something like that looks.

  • It's not even that clean because I'm mixing languages like you can do it way better, but it works.

  • So basically, or the intentions for me to navigate to the play list, it will trigger one action.

  • We will it trade over this intense samples and we will register to a command factory.

  • And with this command factory DOS it administrates it managed.

  • It matches the commands with intense.

  • We go over it one more time.

  • And we have this gullible intent that we will need later when we received the results.

  • And I have a little Damon for you.

  • And, um, I heard from Raul yesterday.

  • Loved that.

  • He said, Let's hope the demon guts make this possible and I hope that too.

  • So basically, check that I have this, uh, funny looking microphone, but it will make it better and slow.

  • Ding.

  • Let's see what's going on here.

  • So it's working fine.

  • Like I said, Internet.

  • It's a very slow I'm, you know, with the hot spot, but we'll give it a try.

  • So we would say something like Show playlist, Goto playlist.

  • So we'll go to the playlist.

  • That's a very basic example.

  • Then you will see.

  • Don't judge me for my pale A list.

  • Uh, so this is basically all of my Spotify playlist.

  • They have dawn until now, and we can check this one Riding the lightning go to writing the lightning so it goes actually way faster.

  • But like I said, then it's pretty slow.

  • And these are all the tracks, so I could say something like, Let's try something hard, like Piece Bloods and Boogie All right, play Peace Blossom Boogie Cave in a mark.

  • What's going on?

  • Ah, the FBI wants to give the right response.

  • So one more time, I'll let me try something first.

  • Is this working?

  • Yeah, this is working, so I'll go back and we tried one more time.

  • Play peace blossom bookie.

  • So the response came, and now we're playing.

  • It's pretty fun if you like the beach rock music can recognize that, and and before we get done, there's one more thing I want to show you, because this is not just for English, so you have to correct me.

  • If I'm wrong, I think it is the B C P 47 pack.

  • I might even got it right this time that you can use so basically any language supported by this attack can be used as a recognition engine.

  • And I was asking in Norway because I didn't knew in Norway.

  • There's apparently like for dialects or Norwegian.

  • Well, they all of them work.

  • And I would like to show you how can we do something like languages, huh?

  • And we would try it in Spanish.

  • And now you have to excuse me, That's not really empathetic for me.

  • Um, but I was talked Spanish for a second.

  • I just for the example.

  • And we would do something like you see, the 2nd 1 feeble a tropical.

  • And what I love about it is I don't even have to create a new instance.

  • So it deny Mickley changes just by changing the right property.

  • And we can try a 2nd 1 Taka masala Yang.

  • That's wrong, Takayama salivating.

  • And that's wrong again One more time.

  • DACA salary in DACA Miss Holly being however you so Thank you.

  • So we have three minutes.

  • I have to hurry up.

  • Um right.

  • So I had a full back in case it didn't work, so we can skip that.

  • And so we cover the basics and there are some methods that are very useful.

  • I just want to give you the whole overview off.

  • What you need to get this thing running.

  • We have three methods to start.

  • Method triggers the speech recognition engine.

  • And this case was kind of, um, year because I have to press the mic button.

  • There is for sure better, um, way to trigger that.

  • But that was our case.

  • The start method.

  • There are the stop and aboard method which basically tells the service stopped recognizing and give me or give me not the process results.

  • Until then, we have some events, too.

  • We have on error that could be very useful if we have a good error strategy going on because it's really granular.

  • The lettuce, No wide.

  • The service didn't work, and pretty much this is that we saw we will get It is the speech recognition result, which is within the second area, which is the speech recognition alternative.

  • And it will give us the list of works and a confidence score with filter those events and give them to the command factory that we saw already.

  • And it will match those commands with the results and before we wrap it up, Um I hope you have.

  • I had an idea off how all the things you can do this is just a very little example, but but I hope that you understand there are so many Web AP eyes, and we can use them in creative ways to actually give more possibilities people to interact with our applications.

  • Now you might be wondering Browsers report.

  • It looks horrible.

  • As you see, it is still an experimental AP I I was surprised that it is coming an edge, but there are a lot of third party JavaScript AP eyes that you can use instead for a production project.

  • There is natural language processing from Watson.

  • There is speech to text, so there's a bunch of libraries or engines that you can use for that so it shouldn't stop you from China.

  • And, ah, this mall project this on.

  • Get up.

  • You can try it out.

  • You can play with that.

  • You can break it.

  • You're more than welcome to do that.

  • And if you have any questions, I will be hanging out the next two days and you can ask anything you would like and that being said, thank you very much.

Thank you very much, everyone.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

可訪問性與最新的Web API。我們不能只是相處嗎? 由Mauricio Palma | 布達佩斯2019年JSConf。 (Accessibility vs latest Web APIs. Can’t we just get along? by Mauricio Palma | JSConf Budapest 2019)

  • 2 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字