When perf-html Met A11y
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 561 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/44663 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Perfect groupMathematicsSystem callLimit of a functionComputer animationLecture/Conference
05:12
9K33 OsaInstallation artEmpennageMultiplication signFunctional (mathematics)Projective planeMobile appBitProfil (magazine)EmailElement (mathematics)AreaElectronic visual displayKeyboard shortcutAttribute grammarMoment (mathematics)ConsistencyDefault (computer science)CurveOverlay-NetzWeb 2.0Process (computing)Contrast (vision)Web-DesignerNumberAutomationCartesian coordinate systemSoftware testingCASE <Informatik>TouchscreenMathematicsGreatest elementWebsitePower (physics)Term (mathematics)Computer-assisted translationWeb pageShape (magazine)Order (biology)Coefficient of determinationThread (computing)Focus (optics)Sound effectForm (programming)InformationGraph (mathematics)Sampling (statistics)Graph coloring9K33 OsaNetwork topologySystem callNeuroinformatikError messageInheritance (object-oriented programming)WordCNNComputer animationLecture/Conference
13:42
Computer fontGoodness of fitModal logicKey (cryptography)Element (mathematics)Event horizonAttribute grammarProfil (magazine)Structural loadUniform resource locatorCuboidAcoustic shadowAreaSeries (mathematics)Web pageSoftwareSequenceProjective planeInformationPlanningSubject indexingPrice indexSelectivity (electronic)Graph coloringGroup actionWindowEscape characterCodeNumberVideoconferencingMoving averageContent (media)Mobile appFocus (optics)Division (mathematics)Order (biology)Demo (music)TouchscreenPower (physics)Social classRule of inferenceArithmetic progressionSemantics (computer science)BitoutputRange (statistics)Keyboard shortcutWeb 2.0Contrast (vision)Shared memoryExtension (kinesiology)Functional (mathematics)Online helpCartesian coordinate systemError messageData managementWater vaporDifferent (Kate Ryan album)Web browserThread (computing)Graphical user interfaceEmailRight angleType theoryDefault (computer science)FamilyThumbnailComputer fileLecture/Conference
21:54
IcosahedronExecution unitConvex hullTwitterSlide ruleMehrfachzugriffNavigationNetwork topologyTwitterWeb 2.0BitoutputKeyboard shortcutProjective planeElement (mathematics)Semantic WebPrice indexOpen sourceAreaEscape characterMedical imagingAttribute grammarSoftware testingFocus (optics)WeightOrder (biology)Process (computing)Moving averageProfil (magazine)Web browserSoftware design patternWeb-DesignerDefault (computer science)Extension (kinesiology)TouchscreenComputer fileOverhead (computing)Division (mathematics)Motion capturePower (physics)ThumbnailComputer font9K33 OsaSlide ruleFunctional (mathematics)Connectivity (graph theory)FreewareMobile appMoment (mathematics)TheoryCodeCASE <Informatik>WordGoodness of fitWave packetWeb pageData modelCuboidKey (cryptography)Differenz <Mathematik>Lecture/Conference
30:06
Lecture/ConferenceComputer animation
Transcript: English(auto-generated)
00:12
Okay We have the last one talk for today
00:22
So we will start in a few minutes in five minutes almost at least
01:02
Okay, yeah When perf H and ml meet, okay So the last call the last talk that will start in a few minutes is about when perf H e t ml meet a 11
01:20
epsilon accessibility, okay Thank you. Very very useful
02:25
Okay
04:15
I
04:24
See some change in here Okay It's stranger these things, but probably seen some things
04:42
These guys want to enter Oh, okay Okay, please take seat we will start very very soon with the last talk for today
05:20
So welcome for the last talk for today is a talk that talk about the accessibility
05:26
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
05:41
Has anyone here watched the movie when Harry met 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
06:01
So it's titled like when perf HTML met Ally 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 living in here
06:25
seriously Wow, that is really cool. So yeah, so I'm from Slovenia. I lived in China for a few years I was doing Mandarin Chinese translating then I moved to the UK and I work There now is a web developer. I'm also a proud owner
06:43
I mean owner is stretching it because you can't ever own cats. I lived together with two Chinese cats so they're Chinese you can't tell but they are and a Mexican dog and I Joined Mozilla very recently. So in December of last year, so it's two months ago
07:02
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 brand it now, but it's
07:23
It's really a cool tool so it's it's Amazon's gecko 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?
07:43
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
08:03
Trying to navigate with a keyboard like that You got this hideous button 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
08:23
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 Okay, okay, how many of you that is not my team Okay, so okay
08:41
Okay, so just just a brief, you know overview so I don't lose you so perf HTML is to Start using it. You need to store the gecko 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
09:05
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 graphics and JavaScript all the good stuff
09:21
But when you look at it, it's 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 call tree flame graph stack chart and so on and all of these are just different ways of
09:44
Displaying the information that the profiler collected so that's either by Samples, so by default you take like one millisecond you take a snapshot or by markers and typically when? When you take a profile you start by
10:01
Okay, it depends on what 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
10:20
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
10:46
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 a really a
11:05
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 we always try to be efficient
11:21
So another term for it is a 11 Y or Ali So you take the first letter so a you take the last letter Y and then you count all the letters 11 and that's how you get a 11 Y so today I want to just start with a
11:40
case for accessibility because I'm sure you know that Disabilities in various shapes and forms affect a huge number of people. So roughly 15% 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
12:05
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
12:25
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
12:44
Attributes and suddenly your app is gonna 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
13:01
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
13:23
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
13:44
Was quite difficult and luckily our Project that lives on github. 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
14:05
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 One thing would be that color and color contrast maybe designing a dark theme But the other thing that we found that was really problematic was we did not support keyboard use at all
14:25
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 they're just trying to be more effective and faster. So I Focus specifically on keyboard navigation and semantic HTML and managing focus
14:46
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
15:03
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 a really cool tool and it's just been released a couple of months ago. And
15:27
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 the screen reader will get so here there's like five buttons So we have share and permalink and upload error and share with URLs
15:42
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
16:04
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
16:21
Threads names a network and positor 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 page should only have one h1 tag as other otherwise which has been confusing
16:45
so instead I wrapped 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
17:01
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
17:27
You can have to give it a role on click on key down and a tab Index so by a tab index you'll be able to access the button in a tab sequence Cool, so next thing was focus management
17:43
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 really difficult to debug And I found this really cool function that uses the JavaScript native event listener so focusing and by doing that if you then just console log it as
18:07
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
18:21
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
18:46
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
19:04
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 work in design, maybe we have a tendency okay, just remove the outline
19:22
It's ugly. I don't like how it shows 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
19:42
Another thing was just using the keyboard, but then 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 modals or panels that you always provide
20:01
a key down on key down event So we added it here to the window actually so anytime anywhere a panel is open you can 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
20:24
When I was like too frustrated with the 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
20:41
I really recommend that you check out the series and the subtitles Okay, and lastly is on the aria 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
21:01
It would just say button load a profile from a URL and you will have no idea that there is like any other content afterwards So what I did here is I added an area expanded attribute So now when you tab to the load a profile from a URL you would say button collapsed
21:21
I'm like, oh, okay collapse. So if you click on it, it's a button expand it. Okay, so that makes sense Okay, so that's kind of the scope of what 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 demo of
21:41
hopefully the working App 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 and tabbing and Now there's the panel. I close it with an escape key. I tap tap tap again
22:05
I'm going down through everything that 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 check boxes so yeah, that is kind of Not the finished project yet, but it's definitely miles from
22:23
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. Let me just go back
22:44
Okay, just this kind of mixed up but just a note about the area attributes are really really cool as CSS selectors 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
23:00
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 starting 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
23:24
There's the accessibility inspector. So it lives in Firefox dev tools 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
23:42
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 oldie but goodie
24:02
web developer add-on That by Chris Baderick 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 slack
24:23
channel accessibility, so if you ever have any questions about how to Anything about accessibility you can find us 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
24:46
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
25:01
Pages or apps make sure to check what gets added to the DOM 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
25:20
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
25:43
Indicators and also of course make sure you tested cross browser cross browsers. And also, of course, there's Aria and so lastly just before I finish prefer everyone so if You haven't checked it out yet Perf is a really cool project and we are very friendly and welcoming community
26:04
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
26:22
so look for us at Firefox dev tools on perf channel and Obviously search for issues label accessibility Not just not just in our project but also in github if you just check Accessibility you can start fixing the web and making it a little bit less broken today And so the slides are on my github. That's Eddie blue
26:44
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 then she's here
27:02
Yeah, so if you have any questions about girls okay, you can ask Connie cool, thank you Listen Yes in the beginning you showed that
27:30
Components weren't accessible. Did you have some training for you to lead so that they don't write more Inaccessible components or where you just hunting what's broken and try to fix it, right? So
27:44
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 will like you will spot
28:04
It immediately and you can also use on Mac OS you have voiceover you have screen readers like nbda They're free And so just by using that like you will blow your mind like it's so hard if you don't have the right attribute You don't have area there if you have a diff that's supposed to be a button
28:23
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 the way to go in short
28:47
So these last few years I've been interested a lot in semantic web. So basically our DFA and JSON-LD and so on You see more and more UI elements been also implemented or sorry described using JSON-LD
29:02
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
29:24
If it's already in structured data, then you can also use it for the purpose of accessibility So the thing is when you use a native HTML element, so for example if you use an input and and you say it's I don't know text area the
29:43
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