Hello? Oh yeah.
Okay! All right! We're ready to go! Accessibility means a lot of things. Sometimes it means a user cannot see or hear. Sometimes it means a user does not speak your language. And with that, we're actually going to have a talk that is live translated. We have Felipe and Anna, and they're going to be talking about accessibility and JavaScript. Side by side.
Yeah. People think that this is like... Sometimes people think that other people are going to solve this problem, but we're here to encourage you to take this on yourself. Just be like... Take On Me, accessibility. Get ready for this. All the way from Brazil, Felipe de Albuquerque. Please applaud!
Hello, everybody here. Today I... I don't speak English fluently, but I bring in this amazing topic, and I have my wife too. She's my boss at the work at home. She's my manager of my life. And we stay here to talk to you about this incredible...
Topic.
Accessibility in JS. We'll start now. First of all, I... Just to say thank you for the JS conference organization, and CESAR, and all my sponsors, and so... Thank you all for coming. It's our pleasure to be here. Okay? Let's get started now.
Oh yeah.
Keep going.
Who here never listens to any joke about JavaScript? Along the years, I working with JavaScript, I listen to many lies about JavaScript. And today, I stand here for talk to you, and try to clean these bad reputation. Because JavaScript is a good guy. Not bad guy. Because I'm still here. With all my family. And this amazing placing. Because JavaScript... Any other things, but I... I keep going.
Yeah.
Because now meeting the... Too short. 30 minutes.
Keep going.
On the agenda for today... Why I stay here for talk about accessibility. Why should I invest in a little... Why? Around the world, according to the UN, have... 6,000...
650 million
650 million people have some kind of special needs. And in my country, it's 45 million. It mean...
Represents almost a quarter...
23% of the population. For me, it sounds... Great opportunity at business. In another... Thinking out the box, can be exclude for the great minds.
Minds.
Sorry, people. It's... English is not my maternal language.
Native. Yeah.
But... A strongly...
All of you should already... They know.
I think the...
It's okay.
I think if anybody...
If nobody matter about him. A lot of things that we would have lost. You can also think about Beethoven. Most of the songs that he has written... And then once he couldn't hear anything, then that's when he wrote his most beautiful songs.
Another means...
And can we imagine if people didn't care about songs written by people that could not hear at all? That did not happen. So Beethoven turned out to be one of the most famous composers of all time.
We need to think out the box. And sometimes I try to talk about accessibility for another guys, another develops guy, and anybody... No matter, because it can be a tough... Into a... Anybody don't know about accessibility's effect.
Most people don't really know what accessibility is all about.
What is accessibility? It's nothing to do, because it's not accessible -- many guys try to make the application accessible, but...
It has nothing to do with this image, at all.
(laughing)
And I... I just to say for you... Anything is accessible that cannot be improved.
Yeah, that's what's written over there.
Accessibility... Because we at times thinking about the...
(speaking Portuguese)
It's our new project to try to change. Because it... We need to see it another way. Because those peoples are able and active and independent and engaged. Many disability people are engaged in...
(speaking Portuguese)
Yeah, just think about Stephen Hawking and that's it.
And many other people. But who needs accessibility? We always... Fought about accessibility. And blind people -- but it's not one. Not just one. But it's all time... We thought about... It's necessary to think about temporary disability.
Um... When you get injured, and then maybe any of you guys here could be in that situation. And perhaps need some kind of... Accessible feature.
All that is about the interaction design. Because the most important technology is not technology.
Keep going.
But it's people. Innovations are made for people.
(speaking Portuguese)
Innovation is made from people to people.
And another one... It's colorblind people. Many levels... Colors... Somebody...
Who can't see the right colors.
And people for different ages and countries, and...
Yeah, kids, for instance. So, for example, our kids -- when they didn't know how to write, they would just touch the speech button on the search place, in the application, and they would scream out the name of the...
(imitating kid)
Yeah, Let It Go! Frozen! Perfectly worked. Oh, thank god. I don't need to write it now.
We need to think about the peoples -- don't listen, don't written. Hearing. How do you say...
So yeah, don't forget about people who can't listen. Can't hear. Because -- always remember that they might need subtitles, or even the transcriptions that they have here.
(speaking Portuguese)
I have just said that, baby. Sorry. Yeah.
People can feel... Essential things about the documentation. It's the most important, because we need to know about the documentation, but it's...
(speaking Portuguese)
Even though it's extremely rich...
Very rich...
Some people might get scared, because it's an alphabet soup.
Many... But today we're focusing... Focusing... On the accessibility, because we too need our applications. And this Y-ARIA. It's the most important.
Because all of the JavaScript --
I will be talking along this presentation. I just... To help the WCAG...
It's divided into four basic principles.
Yes. The perceivable...
Perceivable.
Understandable.
Operable. And robust. Perceivable is distinguishable information. We need to provide alternative texts, in the application -- adaptable. Adaptable... Is actually... Is many... Talk about responsive web design. And other things. Operable -- the application needs... Navigate for keyboard, because some people don't... Can... Can use an application with the mouse.
The mouse.
And to...(speaking Portuguese)
There are people who can even wear gadgets on their heads, and use them to access their applications.
But normally, those people use that... The tab or enter...
Yeah. That seems strange, but some people still like to use the keyboard to navigate their websites.
Most important of that --
The third point.
Is because...
What do you want to say?
(speaking Portuguese)
These may cause seizures. So you need to be careful about the colors you use. If it's blinking too much.
Yeah.
(speaking Portuguese)
Some people develop some applications, some games or something really interactive... With lights blinking all the time, to emphasize something. But there's a recommendation that says that you cannot blink more than three times per second. Because that can provoke seizures. And also the color combination -- because if there's a red light blinking too much... People can also... It can cause also... Seizures. This is the most extreme case.
Never play a game in a long time, enough that...
Get a little bit dizzy. You may get a little bit dizzy.
Because that stimulate light...
Yeah. Keep going.
That's okay. Understandable. This is very understandable. Because WCAG is -- no application could be... Legible.
Predictable, and has its input -- you're going to explain a little bit more in future. This one I can tell that it's kind of -- the God of software development. Because this is what everybody wants. Is that your application works in every single device. Yeah. Every resolution. In all browsers. Platforms. Everywhere.
That's very difficult. But can be possible.
And that requires a lot of effort, right?
We can do it.
Yes, we can.
User agents -- do you know them? Because user agents -- this guy can be a user agent. Normally blind people use this guy, but this guy can be inaccessible, because this guy is... Very...
Expensive.
Is many expense. Because this guy is very training. Very...
It requires a lot of training. So in Brazil, for instance, it can cost you like $60,000 Brazilian reals. What would be $20,000 US. So that's not accessible at all.
But normally... With...
We are used to... To interact with browser.
Never has a problem with how long the software development...
In using browsers.
The different browsers.
(speaking Portuguese)
Our big... Something... That we're really scared about some time ago. The reality is changing. A little bit better. But we still face a lot of problems, when developing with browsers.
Understand the engine of the browser is very difficult, but...
(speaking Portuguese)
Yeah. Sometimes we cannot sleep at night. Just thinking about the solution to resolve this problem.
But normally we usually... The text-to-speech...
Application.
I bring to you...
Yeah, you can see the disc.
Because to know how old that is.
Left, top. So you can see how old this is. Technology.
It's really... The application, in transforming in voice. And... Our researches about the most of...
Most used screen readers.
Thank you, baby. Thank you, sweetie. And in other ways...
I brought this here. This slide is more specifically, because... Some people ask Felipe, why are you worrying about accessibility? In mobile applications? Why would a blind person use it in their mobile device? Right? And I would like to answer to those people... That the same way that we use it, they can also use it. It's a change in the mindset. Right?
It's a human...
It's a human right. Basic human right.
Yeah.
(speaking Portuguese)
And in this slide, I brought to you... To show you what we would need to do to make it compatible with...
To connect with -- now our user agent. We have to do more. Because we have to teach now a browser, now a user agent...
(speaking Portuguese)
'til they can actually speak. We need to teach the user agents how to speak. This is not actually very difficult. So if you can observe this code I've written, it's a very extremely basic html. But it is... The kickoff point. A starting point. Some people make some basic mistakes when they're writing their code. They don't care, or they forget to set up the correct doc type, or even the language. It can screw everything up. If you do not set it up in the way that the screen reader can use it, the screen reader will try to read your text in a language which is different from the one you had set. So it's going to screw everything up.
The types... The title. Is the first thing the browser choose to say, to read the page. And other means. How various entry JavaScript and accessibility -- I need to have for Minnesota University... I read in the paper of them... Say... I sum up that... And four principal barriers, my vision about all the saying the... To read about the... About that. And the first one is... The browsers don't support JavaScript or have disability...
Disabled JavaScript.
It's a big lie. But it's... Today, it's a big lie. A long time ago, it's a many... It's a...
Half truth. But today you can see that 97% of the browsers support JavaScript.
Standing here today for say to you, and my Grandma use JavaScript, and she don't know about it mean.
That's right. This is not fair with JavaScript. To blame JavaScript.
And... For another 2%... We need to...
We need to... Give them some alternative. So that they don't... Okay. It's a little bit difficult... It's...
Yeah, anybody use.
Not even Microsoft wants to give support to it.
But yes...
Nightmare.
A long time ago.
Thank God I don't need to worry about it anymore.
Another code is Microsoft dev -- is... We have to think out the box in a novel approach, because...
To think... About what? How can I say that?
(speaking Portuguese)
About the identify browsers.
Oh, how to identify browsers. So you would write different code, depending on the browser that you would be using. But instead of that, Microsoft has designed a code that would detect the features compatibility instead of browsers.
Another here is... Lack of knowledge of the ARIA. ARIA... ARIA for Mozilla devs...
This is what they talk about.
ARIA is between accessibility...
Between accessibility and JS. What connect accessibility and JS. If it did not exist, JavaScript could not work with accessibility at all.
That's the work flow. How it's working. User agents...
Interact.
Interact. With the assistive technology. Able for standard of ARIA. One of my heroes, who did the JQuery.
I have already earned a lot of money from JQuery, thanks to him.
JQuery is a top technology. Another amazing... Like the (inaudible). Today in our life is a very... Easy. But the guys for me... A big honor of the amazing frameworks. This is the language --
Just forgot to mention what he said on the previous slide. It's already implemented. So it's not a dream. Right?
This is the rules of ARIA. Thank you. ARIA is able... To say... The browsing and other user agents -- technology for the piece of the code, HTML5 is the most semantic, but this is able really semantic to for... Almost... All the engines. Rich internet application with AJAX. AJAX of the old time -- but... Five minutes? Oh, no! It's amazing. We know about the AJAX, I think, so... Or somebody used... Don't know about that. This is my hero too. ARIA live is the only way for interactive application, rich applications, to...
(speaking Portuguese)
The only thing that can really enable... Because the big problem is that the browsers cannot... Understand when some contents are updated on the web page.
It's very simple, but it's the most important. It's the only way for...
Let's keep going.
To make rich internet applications. And other rules. And another. And another time I stay here... Along the event, I can talk to you about that. Example... It's very, very, very easy. But it's necessary. Difficult or impossible navigation with keyboard... It's a big problem we have, because in application, don't enable navigate to keyboard. About the links -- we can...
Avoid using titles.
Names. Generic names. Because... The names...
(speaking Portuguese)
Because when a screen reader is going to read it, the user will not understand it appropriately. So you had better choose a long description. To help it out.
About the navigation -- is mainly important for applications, because...
The other big problem about it is that people can navigate through tab, but can never reach the contents. So you can raise the skip navigation method. So you can also use this with CSS, to outline... Okay. To kind of highlight the place where people are navigating through the keyboard. So this approach of skipping the navigation... Is extremely efficient, but you need to focus the... You need to set the focus correctly in the JavaScript as well. Because if you cannot set the focus, when you're going to navigate it, the focus... Go back to or change to a different place. It can mess everything around. This is another example. That is very cool for you to understand when you're learning accessibility. Two minutes.
(speaking Portuguese)
To think about mobile. And then they see that it does not work. Because some applications, some mobile applications, do not consider clicking the events click events. You can use the touch screen, or even the keyboard. This is another approach, to show the menu. To open the menu using the keyboard. And finally, what would be the great (inaudible) of the accessible applications? So here I brought to you the champions. There were some contests in Brazil. So those were the winners. And you can see that they have that kind of menu at the top. The right top. Or the left top. From where you can control the contrast, the font size, or skip to the content. So those are really basic things that your website or your application should consider. And so here I brought you an example of how to control the font size, increase or decrease it, how to set the contrast right. So I wrote a sample of this code, and it's already on Github for you to contribute if you want. It's called side-by-side JS. And the creator of the web says we always need to care about the standards. Need to be compatible with them. And the message I really brought to you today is that the most important thing after all is that we need to know about interactive design. And I'm sorry that I could not... I did not have the time to talk about what? Can you repeat that?
That's all. Thank you.
Okay. So... We hope you guys enjoyed it. And... If you want to know more about that matter, that topic, you can just look for us after this.
I... To be here... All event.
Yeah, we're going to be here 'til Saturday.
So yeah.
(speaking Portuguese)
Make yourself at home.
Thank you.
It'll be a pleasure to get to know you. Thank you very much.