 Okay We have the last one Talk for today So we will start in a few minutes in five minutes almost at least For something you are ready by the laptop. You're okay Okay, yeah When perfect and I'll meet a okay You're welcome So the last called of the last told that will start in a few minutes is about when Perf HTML meet a 11 Epsi accessibility, okay Thank you very very useful Okay Thanks Doesn't work I see some change in here, but okay Okay It's stranger these things but probably change some things. Yeah Okay, this guy's want to enter Okay Okay, please take seat. We will start very very soon with the last talk for today Let me know if no another Are you ready? Okay, so welcome for the last talk for today Is it talk that talk about the accessibility? Yeah, cool Can everyone hear me okay at the back? Cool. So thank you all for staying Till now it's been a marathon day. I should have brought snacks for myself. I mean also for you Has anyone here watched the movie when Harry Matt Sally? Okay, so this talk is not gonna be about that. I was trying to be clever and like rhyme But then I was explaining like my sister who's a doctor. So I assume she's clever She asked me like what the talk is gonna be about and I was like so it's title like when perfect email met Ali kind of like when Harry met Sally and she didn't get it. So I thought I would be bad. So I Wanted to skip this but I didn't so I'm just gonna say Hi and My name is Eva I'm originally from Slovenia I live in China anyone else Slovenian here seriously Wow, that is really cool. So yeah, so I'm from Slovenia. I lived in China for a few years I was doing a Mandarin Chinese translating then I moved to the UK and I work There now as a web developer. I'm also proud owner. I mean owner is stretching it because you can't ever own cats I live together with two Chinese cats. So they're Chinese you can't tell but they are and a Mexican dog and I Join was in a very recently. So in December of last year. So it's two months ago I joined as an intern because you know, they say why not it's never too late for a career change and Today I want to talk to you about this really cool project called Perf HTML I know you must be thinking like amazing name. We must marketing branded now, but it's It's really a cool tool So it's it's Amazon's get-go profiler and its main job is to analyze the web performance It's a really really complex tool. So I remember the first time I saw it It was not a magic moment. I was I was like, okay Where do I start because despite its name Perf is not perfect. It's actually a little bit broken Especially from the accessibility standpoint. So I was trying to demo how it doesn't work But because it doesn't work. It's really hard to demo But here you can see like just one of the issues was when I was Trying to navigate with a keyboard like you got this hideous But an overlay display and this is just one of the things that I fixed So I hopefully make Perf HTML a little bit better. So this talk is going to be more like a practical over you like how I tackled accessibility issues and I Will first start with what Perf HTML is how many of you here if you raise your hands have ever used Perf HTML It's okay. Okay. How many of you that is not my team Okay, so okay, okay a couple of people. Okay, so just just a brief, you know overview so I don't lose you so perfect email is To start using it you need to start the get-go profiler Which looks like this and then you can head on to any Website whatever you want and you can take snapshot of the of activity. So this is cnn.com a couple days ago And what I did was I loaded it. I started a profiler I hit refresh and I got this profile. So that is the snapshot of activity of what happens when you hit reload so Like the layout the graphics and JavaScript all the good stuff But when you look at it is quite it's quite complex So if I just briefly explain it like the first half of the page is the timeline on the left-hand side You have the thread names and on the bottom you have the different panels So you have Coltry flame graph stack chart and so on and all of these are just different ways of displaying the information that the profiler collected. So that's either by Samples so by default you take like a proof like one millisecond you take a snapshot or by markers and typically when when you take a profile you start by Okay, depends on what you you're looking into but you start by zooming in so you would look for the The red bars here for example So that just means that some amount of work is being done or even that something was stuck So you would zoom in on that and then you'll get a colorful graph like this So all the yellow stuff is JavaScript and all the purple stuff is layouts and all the green stuff is graphics and On the bottom you can see like the running time and self-time and with the profile it tries to be helpful So by default it throws you into oh look this function has a really long self time You might try to start there. So that is what an engineer might do. So this is a tool that is extensively used by Firefox engineers and To make Firefox faster and so My project was to make it more usable and more accessible because we planned to kind of like make these are really a Tool that every web developer could use in the future to analyze their websites and their apps and So I Approach this project from accessibility standpoint So when accessibility is a really long word and in computing you're always trying to be efficient So another term for it is a 11 y or Ali So you take the first letters a take the last letter y and then you count all the letters It's 11 and that's how you get a 11 y. So today I want to just start with a case for accessibility because I'm sure you know that Disabilities in various shapes and forms affects a huge number of people so roughly 15 percent which amounts to a billion people which is a lot and If you design inclusively you will not only help people that have disabilities I Believe that you will help everyone because you will make you will benefit everyone and you will provide a better experience for every user of your application and so these are just a couple of most common Accessibility issues I won't go into too much detail because I think it's more interesting to kind of give you the use cases and How what we used in our project so things like color contrast and Missing all attributes and readability error messages consistency and area so Some people think that area is like this magic Pill that you can so you can just like stuff your app with area attributes and suddenly your app is going to be Super accessible It's not just area so area if you've done things right your app Will already be like 90% there if you use semantic HTML if you use the right CSS if you put Element in the correct order if you make focusable elements focusable and then on top of that you just add area which Will help assistive technology so they will enhance the experience for people that use screen readers for example So because time is precious and I only had three months to to work on this I started with like a strategic approach of auditing the app so Yes, you can do also lots of things with automated testing, but the best way to test your app for Accessibility issues is with manual testing. So what I did was I started using it which is the keyboard with a screen reader and I didn't get really far because it was quite difficult and luckily our Projects that lives on k-hop. We already have quite organized Kind of like and labeled issues. So there's also an accessibility issue. So I just started like filing all the things that I found were problematic and Then the plan right so I find out all these issues but then we try to think about what would be the thing that would be most impactful and One thing would be that color and color contrast maybe designing a dark thing But the other thing that we found that was really problematic was we did not support keyboard use at all so we thought by Working on keyboard navigation. We would not only help screen readers But also the you know the power users so people that use the app every day and just they're just trying to be more effective and faster so I Focus specifically on keyboard navigation and semantic HTML and managing focus. Okay, so the good stuff the actual Kind of like issues and how I solve them. So the first thing that I did was that Buttons kind of overlapping. So what happened here was we had like five buttons That were displaying at different times But if you were tabbing if you were using tab to go through them They would suddenly just go one on top of each other and there was no way of interacting with them and to check that here I'm using on the right-hand side the Firefox accessibility inspector, which is like a really cool tool and it's just been released a couple months ago and So here you can see that So in the accessibility inspector, you will get to see what a screen reader what the type of information at a screen reader will get So here there's like five buttons. So we have share and permalink and Upload error and share with URLs and we also have a progress bar. So one on top like all five of them on top of each other So here what I did was like instead of having all of them there We I saw I I rendered them conditionally like as we are using react and So the next bit would be so we had all these tabs That you could click on and you would select ranges, but you couldn't do anything with a keyboard So a good rule of thumb is is that if you can click on something to interact with it You should be able to do the same thing with a keyboard So we have all these different Threat names or network Compositor web extensions and they're just like completely inaccessible So and the other issue was that they were actually Inside of an h1 tag. So which is a no-no. So as you know like one One pay web page would only have one h1 tag as other otherwise, which has been confusing so instead I wrap this into a button and By by using a button, which is a native html element you get all this really cool free stuff So you get the role of a button you get an on click and on key down event listeners as well and So yeah, just like a quick caution. So if you have a tendency to custom design your checkboxes and buttons Make sure that you don't just give it, you know, okay This is this is a div that I call my button and I just give it an on click event and problem solved No, so in order to provide a properly functional button, you can have to give it a roll On click on key down and a tab Index so by a tab index you'll be able to access The button in the tab sequence Cool. So next thing was focus management So as I was going like through the page like suddenly like I found myself in uncharted water So like I like just the tab would disappear. I wouldn't know where I was it was very difficult to debug and I found this really cool function that uses the JavaScript native event listeners so focus in and by doing that if you then just console log it as You tap through your app you will get like all the information about oh focus. I'm an input. Yes Good focus again input or a class. So this is like it's really good for debugging Where your focus is and just a side note like sometimes when we tackle Accessibility issues we try to do too much. So you you're like, okay I will now make everything tabbable. So you'll be able to go to every heading and everything like that but again, if Something is not interactive. Don't put it in your tab index like don't don't put it in the tab sequence So another thing is a focus indicator. So Firefox has this really tame default like dashed Outline for when an element is selected So instead of doing that, we were being bolder and we went with the photon button more prominent styling and again different browsers style their outlines differently and And that's why as you know, especially if you're working design, maybe we have a tendency. Okay, just remove the outline It's ugly. I don't like how it shows in in Chrome or in Firefox. So When you remove an outline like here, make sure to test it properly in all different browsers or Go use a box shadow like so we're using a box shadow instead of using the outline just to have that consistent look Another thing was just using the keyboard but then just being stuck in this keyboard trap so I would open a panel and that panel would forever be opened, which is not a good user experience and So make sure that whenever you have models or panels that you always provide a Keydown on key down event. So we added it here to the window action. So anytime anywhere a panel is open You could always close it with an escape key So yeah, another thing is so we have really good documentation. We also have video tutorials and Actually, the number one accessibility issue is the lack of captioning. So When I was like too frustrated with a code and everything I also worked on the captioning So all of our video content is has the nice captioning. So that's Greg explaining how Perf HTML works. So if also if you want to learn more about how it actually works I really recommend that you check out the series and the sublatives Okay, and lastly is on the area. So Originally so on the left-hand side when you were tabbing through the different buttons You will get to load a profile from a URL and if you were if you were on a screen reader It would just say button load a profile from a URL and you will have no idea that there's like any other content afterwards So what I did here is I added an area expanded attribute So now when you tap to the loader profile from a URL, you would say button collapsed I'm like, oh, okay collapse. So you click on it and said button expanded. Okay. So that makes sense Okay, so that's kind of the scope of why I was able to do in the two months And now it's like I'm just gonna quickly show you how It looks like so this is the the demo of Hopefully the working So We start the top. So there is a quite prominent focus indicator I'm just using a tab key to to go and select. I'm gonna load a profile from a file so the profile opens I'm tabbing and Now there's the panel. I close it with an escape key. I tap-tap tab again I'm going down through everything that it can be interacted with we can use this Prominent focus indicator. I can open a sidebar and I can close it and there's the radio buttons and checkboxes So, yeah, that is kind of not the finished project yet, but it's definitely miles from Where it was two months ago. So now at least it's navigable. It's Sorry, it's navigable and it's like a beginning of Hopefully a longer project because there's like a ton of things that still need to be fixed. Okay, so let me just go back Oh, this got okay, just this kind of mixed up But just to know about the area attributes are really really cool as CSS electors as well So sometimes you want to really really make sure okay. I only want to style this when the button is expanded so before Here it doesn't have this blue thing, but when it's expanded it's blue and you can like really Make sure that you're styling the right thing by using the You know the area Attributes here. Okay. So just a couple of tools that I use because we always like new tools So that's there's the gecko profiler web extension There's the accessibility inspector. So it lives in Firefox DevTools if you haven't checked it out yet You should It's not enabled by default. You have to enable it because it has a little bit of an overhead But it's really really good way to start like checking what gets added to the DOM because you know, sometimes you'll be surprised There's also the WAI area authoring practices with design patterns So don't reinvent the wheel check that you are actually adding the right attributes And so that's a good way to do it. And then there's also the all-deep-at-goody web developer at add-on That by Chris Pedderick that is really cool for like checking which which images are missing all attributes Maybe your elements are in the wrong order. So that's like really good one. We also have a slack Channel accessibility. So if you ever have any questions about How to Anything about accessibility you can find is there. There's also Twitter. So sometimes we were trying to be Like we didn't know we thought like in theory. This sounds like a good solution But we weren't sure so in those cases Twitter was really helpful because we were able to reach out to actual users and get good advice And also, of course, there's my team that were sometimes quite critical but always constructive and Yeah, again, this is a bit weird. Okay, so just to recap When you design your Pages or apps make sure to check what gets added to the dome Again accessibility inspector will help you with that use native HTML elements I know we try to get fancy and design our custom checkboxes and things like that Enable keyboard navigation. So that way you can capture power users But also people that are not able to use a mouse or trackpads or people that are using assistive devices Make sure that your elements are in correct dumb order If the outline is not prominent enough, which by default often isn't make sure to custom style your focus Indicators and also, of course, make sure you test it cross brother cross browsers and also, of course, there's area and so last thing just before I finish prefer everyone so if You haven't checked it out yet. Perfect is a really cool project and We are very friendly and welcoming community. We also if you're new to open source, that's that's fine we have good first issues and Our team is always happy to kind of like coach you through the process of maybe contributing like push pushing your first contribution to open source project We live on slack. So look for us at Firefox DevTools on Perth channel and Obviously search for issues label accessibility Not not just in our project but also in GitHub if you just check accessibility You can start fixing the web and make it a little bit less broken today And so the slides are on my GitHub. That's at the blue. That's me And I also run a nonprofit called girls code MK MK stands for Milton Keynes So it's a nonprofit that teaches women and girls. So actually Connie is here She's our youngest member And she traveled she surprised me and that she's here Yeah, so if you have any questions about girls code again, you can ask Connie Cool. Thank you Yes in the beginning you showed that Components weren't accessible. Did you have some training for your colleagues so that they don't write more inaccessible components? Or where you just hunting what's broken and try to fix it, right? So there is Okay, so our project also we're trying to implement automated testing and you can catch a lot of things like that But you will never be able to fix everything if you don't manually test So I would suggest that you try not to use your mouse while you use your project and you was like you will spot it Immediately and you can also use for on macOS. You have voiceover. You have screen readers like NBDA They're free and so just by using that like it will blow your mind like it's so hard If you don't have the right attribute like if you don't have area there If you have a div that's supposed to be a button, but it doesn't give you a roll of a button You will never know that you're supposed to click it and like so manual testing. I think is a way to go in short So these last few years I've been interested a lot in semantic web. So basically RDFA and Jason Erdion song You see more and more UI elements been also implemented or sorry described using Jason Erdion For example, you can indicate to Google for example that An input is a search bar things like that I wondered if you knew if there were also plans to have Accessibility features that are directly implemented in semantic web that would basically Allow somebody to have kind of the double use between. Oh, if it's already in structured data Then you can also use it for the purpose of Accessibility The thing is when you use a native HTML element or for example, if you use an input and And you say it's I don't know a text area the Accessibility tree will already know what it is so inputs buttons select If you use these elements, you will get the accessibility functionality for free and The only thing that you need to do is then by enhancing that with area attributes So and I think this is kind of where we are at the moment. So everyone is like very hot and accessibility