 So we're going to continue exploring A11i with Johanna who's going to talk about being ready for it or not. So welcome Johanna. Thanks so much. Do you hear me well with this? All good? Good. I really want to start with a basic question. If there are people in the room that don't know, let's go the other way. Who in the room knows about what A11i means? Okay. I'm glad. I chose this not to put on the spot the ones that don't, it's really not a problem. Literally yesterday one of my colleagues working in tech asked me what's that test about and I was like, did you even like try to Google it first before asking, paid job, I mean. I like this, whoa, this is fast. I like this title. It's not a bug. Definitely a feature because probably, you know, the developers tend to have this reply when the case says, oh, I found a bug and they are just nice enough that it's not a bug. It's just a feature. And I really want for you all to treat accessibility, which that stands for A11i, accessibility to the accessibility like something that has to come like a feature implemented by the default and not a bug. Definitely not an enhancement. And I'll mention that more in the talk. Who am I and why I'm here? My name is Yonah Kiran. I tend to reply also to Luana, Yonah, any other kind of version of my name. Slightly, I embrace more Luana because it has an Hawaiian tent of feeling and who doesn't like Hawaii is such tropical, not raining like this, warm or more. I'm a project management at this point, a former creating lead, quality assurance and I lead four projects as a contractor for Mozilla in Cluj, Romania. Yes, there's the heart of Transylvania. I took my blood in the morning. I'm not going to buy it. I have, literally I have to change the slide. I have almost 10 years. Next month I'll make 10 years since when I started volunteering with Mozilla. And I do other volunteer with European Commission, especially you want to mention because we are in Brussels. Code Week, it's an initiative to teach more people to be literate in digital skills. Not everyone has to learn how to code, but everyone has to understand how the computers work because wanted or not, we are going to have more of those coming in the future. And I work for devices with more than 10 years. Not happy about that, but we'll see. Sarah Handel had a really nice quote that I posted right there. At the course of our lives, we traffic between relative independence and dependence. And I really agree with this because even if we are considered lucky and we have pretty much everything we need daily, we do face situations in which all of our good sides or everything that are considered perks of living in a nice European city maybe will definitely go under even when you go on with the metro or you travel for something else. Or you have colleagues that you work for from different countries. And it doesn't matter if at a certain point we are used to everything good, we have to also be prepared for something changing. In this world, there are 1 billion people having a certain disability, it means 50% of the entire world and it's not a joke. And more than 2 million people have a very significant disability. What I mean here is that I will be the first to accept. I have no disability visible, I have no disability on paper, but I do have issues when I tend to write and I'll read and I'll show an example. Even if I'm tested, my name is the blind one translated but I see well, officially. But some people tend to miss the part that is slightly on the screen, we display things differently and they do not test it for accessibility issues. Welcome. I'll ask you if any of you sees the arrow on the screen from the start. Good. Can you tell me what it is? Yes. So around here, I had this talk before and somebody told me that literally they didn't see it even when I showed it. So this is a column, it's a line where the column have titles that you can barely see it. This was from a page of conference that has tickets more than 1.k euros for the conference. And they expect people to go and buy it, right? I wasn't able to see what I'm buying for. And again, it was a well-paid conference, was nothing made by a developer trying to do a project for himself. We expect to see and I'm not going to even mention, their reply was, can you tell us more? We don't understand what you mean. And I literally wrote the guy, Ronan, I don't understand what the columns are. I need to use inspect and change the behind color to understand what you're selling to me. And it's about money and you won't attend this to your conference, right? And again, officially I have no disability, no vision in person, no problem in my eyes. But we never know these ones, right? So yeah, we kind of realized that some issues are around there. But how could we fix it? A nice quote from Wright says that we can't fly without motors, but not without knowledge and skills. If you don't know how to control the motors, we probably end up in a not a good position. So let's talk about what doesn't mean accessibility in form of disabilities. Welcome. The visual one that I mentioned to you now, it can be from complete blinders or color blinders for poor vision. In our case, it was just a not nice color choosing and probably was compared with a poor vision from my side on the screen that I chose to have. And also flashing elements will definitely cause trouble to some people. You probably know there are many mentioned till now and try to avoid them as possible. Physical disabilities. People that cannot use their mouse or cannot use their hands, so they either have to use voice or tabs to go forward through a page. Cognitive disabilities. These are like learning difficulties or poor memory. You're not able to understand the font was written on a page or you have dyslexia. And it's very hard for you to understand if the text is very narrowed or mixed and is not addressing your condition. And we go back to literacy disability. I mentioned this before. I really think it's important for people to learn how to navigate the internet, how to navigate a page in the browser. You have issues when you don't understand what the box is, what's a button doing, some problem like this. That's more addressing web literacy. And hearing. Here, of course, you hear very well, if you hear well, you're very low. And if you have a song or your web is trying to communicate something, most of the people will not be able to hear it. But you're here because we really believe that the web, at least Mozilla stands for this. The web is for everyone and it's our job to make it available for them. And more and more, we tend to use automatic things. We tend to use devices. And even if you're not talking about smartphones, you want to go to pay maybe at a marketplace. You can go now and choose to pay by yourself without any interaction with a human. Or if you want to go and buy a ticket for the bus, not very friendly here in Brussels, just saying I was not able, you definitely need to have some skills in reading those things and need to approach more accessibility. How many of you tried to buy something online and the button is too small for your cute little fingers? Yes. How many of us zoomed like this to see something there? Because they're not, yes. Again, I'm called the blind one, so I take all this on me. What else is perfect in the room? I'm not. I was mentioning that we need to do this and you're asking, okay, Anna, it's nice, but why? Literally the first thing that I wanted to put on the page is because of the people. Again, like I mentioned before, the audible part, it's literally if someone is whispering to you and you don't understand, you cannot do anything else. Also like you want to try more things, you're going on the countries, you're really limited. It was literally an example here. This is not my laptop. Unfortunately, this is it. And I wanted to borrow one of my colleagues. It was all in German. I knew everything in the browser, even in German, because I'm used to it. But if somebody else would try to use it, not having a knowledge of the browser nor the language was not that easy for them. And I also wanted to show you some examples because you probably see like, oh, if I don't have any disability, I'm 100% safe on this side. A real life example would be the wheelchair ramps. Any institutions from the state or government should have the ramps for disabilities or the sidewalk. When you go down from a sidewalk, cross a street and go up, they should have those little ramps. How many of you use those with bikes? Don't be ashamed, like we all do. If you don't have bike lanes, how many of you saw moms with babies in strollers using them? Do they have disabilities? Do you think a cute mom with a little baby has a disability? It's not. I'm seeing you. It is not. So things like this, even I, when I run, I don't want to go from like this to this and have an impact. I tend to use the ramps more and more. So again, situation where you don't consider to be disabled, but you use things that are addressed to disabled people. Regulation. Everyone here is like, they don't even ask for that, Johanna. What are you talking about? Nobody cares. Well, unfortunately, I'm sad to say that these are the countries that adopted the VCAG. The green ones, you'll see it here, are still at version one, but they have it. The pink, they are recommended, and the red ones, which is pretty intense, have adopted the 2.0. My colleague had a talk really before this, and he mentioned more about what this regulation implies and how you should implement it as a developer. So if you're saying your country is not, maybe you're from Africa, which is not a betting, and I'm good, but definitely you're going to step in and join us in this or Russia, but I don't know. I'm not going to talk to Russia, I'm neighbors with them almost, so I'm friends. Or Greenland. If you want to go there, join me. I want to go too. Let's see, maybe we can implement the terms there. So pretty much all the countries adopted in a way, this kind of regulation, so there is no excuse. Users. I literally had a talk yesterday, or somebody earlier at the talk mentioned, how can I see if somebody is using the voiceover on my page? How could I know how many users are disabled? OK, I think there are many tricks on telemetry that you can implement, and they might tell you if something is click or not. But it doesn't even matter at this point. Because one of the oldest examples in the world with data sets comes from the World War II when the industry was so blooming, and they wanted to build everything the next day and beat our competitors. And they decided to look at the place to put more metal or make them harder to get a bullet on the sites that are more affected. So what did they do? They looked at each plane that came back from the world and saw where had bullets in. And they realized, like, oh, in the wings, we can fix that. Here we can fix that. Oh, the tail. We can even take it off. I'm kidding. But they didn't see the big problems. These were the place that returned to the base. Those who got the most affected did not ever return. So those were the problematic ones. This one with issues here can be fixed. They are coming back. Those with issues are mentioned or harder than this never came back, unfortunately. So when you're looking at a database of users, be careful what you're testing. You might be on the wrong side. And I hope that no money, honey, no return of investment. Common people. You can enhance your brand, do more for the world, and definitely having a good page will bring you only good sites. And money comes after. If you see how many shopping are done with pages that have accessibility embedded or people that address new people, new users, new markets, I mean, the amount of money that they do, I think it's considerable. And one thing that I think is very important, and I mentioned from the beginning, is not doing favors to anyone. It's literally doing your job. Because the flexibility is not enhancements to add. It's not something that is nice to have, or maybe a bug, certain tester put it and bother you. It's something that we should be having by default. You should drive innovation at anything on the web, and improve the best practices. This was part of the show to wake you up. What I mean by improving practices, if we would have stayed at the wheel made of wood, I don't think we would have had these nice cars that you see around here with the air wheels and everything. So even if it's a good practice at the moment, we should always strive to improve it and make it more accessible to all. So the second part, what I mentioned that is nice to know, but you have to learn, and nobody has time, I know. But I'm here to show you a trick that the browser can do, and those are the accessibility audits. I mentioned in the early talk, I reply to a question. I really recommend Stephans talk. Stephans, yeah, he's here, we'll see you later. Work on accessibility, he's part of the accessibility club in Berlin, and he did mention to this to me in a session when I asked him, Stephans, let's talk about money. How much time slash money you are wasting by implementing the accessibility issue? He was like, what are you talking about? It's like anything else I learned, like a new class, like a new framework that I adopt. I have to study it once, which I did it for his case a long time ago. And now I just take it with myself in all other projects. And I realize that exactly that is, because come on, everyone, each of you from here who develops a page tries new stuff and then adopts them without thinking like, oh, this takes me five minutes, that's like 50 cents. Maybe much. So I think it's just a case of positioning ourself, and that's my case today to you. How can you do this easier, DevTools audits? I'm gonna mention some of them in the talk. Color contrast, it's short case also. Pattern and colors, be careful there, people might tend to not see different patterns in your page or typography. What strikes me here is that indeed, some people cannot understand the scripts or like very calligraphic fonts is very hard for them. And unfortunately for, well, unfortunately it's not correctly used. Fortunately and unfortunately, Comic Sans, which all of us hate, or at least is a meme to hate Comic Sans, is the best one to address dyslexia. This was a study and most people really had an improved experience on the web while using Comic Sans. If there is any designer in the room, I'm apologizing for mentioning this. Animations, they are super cool, right? But not everyone can handle them. They provoke strokes or also for normal people, I mean sometimes they're like, what if I'm looking, I don't understand. So try not to put so many on your page. Most of the people will not understand all of them. Semanting here, I'll show you an example later. And please add the input for all of the things you have. If people want to parse your page, they should know where they are. They should be able to hear what they are parsing while they are opening different tabs or buttons on your page. Okay, Dev to Audits, this is the cutest part because we go back to my favorite browser, which is, be careful Firefox or nightly for Firefox. And another question earlier in the talk and I literally addressed it now was asking which framework is the best. It really doesn't even matter which framework you choose at the end of the day. It's everything about in the browser and you can use it. I have to admit, unfortunately, that also other browsers have some things, not only Firefox, but I recommend Firefox. Oh, it's easier. And I'm gonna open the Aria, three inspector in a second. And that's what made with Mozilla Accessibility Team, which literally includes people with disability, visual or hearing ones and physical ones. And being there in the DevTools, we can run the simulation. Let's see if that works. This is the talk. I already opened the F12, the accessibility panel. I'm gonna just turn on the features and moved one of the pages we use for, and I have to open it again, of course, for the examples here. And as I mentioned, it's just simple simulation. It's already embedded in the browser and you can choose to check for all these three. Of course, all of them, but I'm gonna take them one by one so you see the difference big. So here if we parse from the first thing, it will tell us that we don't have a good color contrast. The standard goes to triple A and here we are definitely not on the good side. If we are gonna go in the inspector, wait for me, it's life coding, so it never works from the beginning. We can either change the background here with something more darker, or it's not there, wait. And voila, let's run again. Yes, let's run contrast. I should load, right? Okay, so we fixed that one, very simple. I know you'll say like black on white is not, this is the minimum I can do like instantly. Of course, your designers or five more minutes from your side will choose a better. There is a tool online which will give you parents of colors, all mentioned in links in the talk. Or if you want, you can change the color of the text here. The second one is, you see, you will say that keyboard, like parsing with a keyboard on your page will not bring any value back because you're not defined that. And you'll see like, oh, how she knows that? I don't, but there is a link to learn more. So after you get all this audit, you can go and learn more about it and see if it literally makes an impact or not, if you can do it from the beginning or you just have this. This is the best part and it's pretty much implemented in the second part of last year. There is, what's a tool, web hints.io probably saw it. I think it was at Fosman last year too with Q stickers of a whale. It literally gives you at any point in your page, hints about how can you improve it better and make it more accessible. Again, I know it's 2020, nobody has time to learn everything, but these little tricks online help us do a better job. Something that it's literally fresh and hot in DevTool is also this simulator, which again, we'll find the same issues. Even if the color contracts is okay, which I would have to say, I think it's not the best. Let's see. It's the same issue with the keyboard behind it. I'm sorry, I was looking now. And let's run the simulation now. All issues this time. Yeah, it's fine. But if we look at only contrast, I'll show you on the slides. I will say that it's minimal but not triple eight, which is the regulation recommended. I have this tab open in case of the internet not working because you have to prepare for everything. DevTool. Okay. Again, what I showed you is just simple on F12, opening the accessibility panel and you can do the simulation mentioned. This is what I did before, again, in case of no internet and you can see even in the element of field input, we had the focus issue and also not a label for it. Again, when they will pass the website and they will get to the textbook, where you definitely want them to enter something, they could not read what's behind the label behind it. And you can see here again, learn more for each one and all of the issues they found on the page are mentioning the type of the error and also a link to learn more for them. What I changed the background and after that I changed the color of it to have a showcase then again, just a simple change of color in the file, in aspect. Okay, here. This was what I mentioned with more and if you see here, they will show that it's a AA, which is okay, but you can learn more, again, above the standard that I mentioned with the links there. Other tools that help you learn this one, the first one, and I guess you all know about this term, manual testing. There is no such thing like manual testing. Everything you do, it's a testing, but I would recommend you to just try to keep your eyes closed and try to navigate your page first. Yeah, this was a hard one for me. And after that, of course, there are tools online like Jaws for Microsoft or Orca, VoiceOver for Mac OS to help you use the page in blind mode or reduced visibility mode. Lighthouse is a tool from Google, not happy about it, but it's a good one. You can do the whole simulation of your page in Lighthouse and one of their features to give you more details about the accessibility status of your project. Wave is also doing a screening for everything that's included and also totally will give you details about how to implement it best. I mentioned web hints till now. They will only give you hints of what to change, but that's already incorporated in the developer tool that we have. And why was mentioning that I'm the first person with problems here? I have at work three different operating systems, a laptop and two machines, and I have two screens for the machine and I always find these color impairments between them. I know a normal person would change the monitor settings to have them correctly, but of course, I kept it because I wanted to find bugs and I was just moving from one screen to another to see the differences in color and I realized it's an accessibility issues. And of course, devices and why devices and others. I mentioned earlier that Stefan does a really cool work on that and he has a really resourceful page with links to understanding why, different technical implementation, what tools are the best and opinions from both administrative person or just developers. And as I mentioned now, five of developer tool and I've linked there a page for the community and how you can contribute more. I mentioned the talk earlier, held by Gabriela. He did show tips and tricks to create a better accessibility front end pages. And from 12.15, we have more on the developer tools, the new profiler. And it's not by Gabriela, it's by Nazim, sorry for my mistake, but you'll find it in the schedule. And if one thing is, one thing I wanted to leave for this room with is that we should definitely be the leaders and of course I had to put a focus because they are really cute, especially this one. Don't be the ship, be the leading fox in your work. And because we are at a open, a free and open conference, we should definitely keep the all information open from everyone and we should not block their access. Thank you very much. You see the slides at the bit.ly link and a very thoughtful quote from Tim Berners-Lee from V3C. And now round four questions. Thank you. So questions. I see you, I see you, I'm kidding. Have a good day. Hi, thank you very much for your talk. I'm from France and we have our national. Can you speak a bit louder? Sure. I'm from France and we have national guidelines inspired by the WCAG, it's the RGAA. And I had a formation a couple of years ago and the teacher told us like 40% only of the criteria of this official document and accessibility can be automated. Like they can be automated criteria. So at the time, I understood that it was the case we need human analysis on websites for accessibility. Do you think it's still the case? And just a second question, quickly, quickly. Do you think that the multitude of tools around accessibility is a bad thing? Or a good thing? The what? There are many browser extensions, tools around accessibility and it feels to me that efforts are split around many projects and I'm not sure it's the best. What are your thoughts about this? So first to address the automated part, of course there are extensions to change your code and to improve it. I showed a few of them. Also on their side of the users, there are many tools to read the screen, to change the color contrast. I'm always laughing because the library that I use back in Romania has this color-blind version of the website and they literally implemented turning everything in black background and yellow as a right. Like again, we are 2020, having a page black with written in yellow, it kills my eyes. I'm like downgrading my vision. So that's a bad side of it. So indeed some of the tools can automate this but it's not in perfect way. And I agree with you when you say that there are too many and I agree that this is bringing a bad impact because like everything, having more devices on Android for example, makes it even harder to have a good page for all of the hardware. All of the screens, all of the manufacturers, everything. Exactly the same with the tools. Having them so many and these parts and not all of them address all of the issues on accessibility. And if you choose one that addresses less of the issues, you'll have again a less accessible page. So I think it's a bad thing. I don't think we're gonna end up having just one standard in tooling but definitely some of them differentiate. And I will go with browser tools because again, you don't need anything to add. They are literally right there for you. And we are moving forward to more web internet I would say my opinion. Any more questions? Yes. And that's gonna be the last because we need to switch speakers afterwards. They will call a better version of me. Changing speakers. Are there any accessibility user groups where interested developers could join and where developers exchange maybe visual impact could help checking pages? Which one would you recommend? Yeah, there are these accessibility clubs. I'm not sure if they have literally all the big cities meetups but literally search for accessibility clubs and they do have this. And it's a big conference on accessibility in Berlin in November. Maybe this year will be another city. At least even in Krush we addressed it in all the frontend meetups like JS Hero. So yeah, definitely. I can even search for you later if you wanna have a specific one. But first of all, so we'll go to Stefan's blog and he is part of the group making this web more accessible. Thank you very much, Joanna. Thank you. Thank you.