We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

When perf-html Met A11y

00:00

Formal Metadata

Title
When perf-html Met A11y
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
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
One in seven people is disabled. And accessible websites (and apps!) enable them to work on an even playing field, while also being more usable for everyone. For the past couple of months, I've been working on improving the accessibility of perf-html, Mozilla's virtuoso profiler. During this talk, I'll be sharing my journey into the world of accessibility and demonstrating how perf-html aims to make Mozilla not just more performant, but also more usable for everyone. Topics covered: Focus, keyboard navigation, semantic HTML, ARIA and Accessibility inspector <3
Perfect groupMathematicsSystem callLimit of a functionComputer animationLecture/Conference
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
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
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
Lecture/ConferenceComputer animation
Transcript: English(auto-generated)
Okay We have the last one talk for today
So we will start in a few minutes in five minutes almost at least
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
epsilon accessibility, okay Thank you. Very very useful
Okay
I
See some change in here Okay It's stranger these things, but probably seen some things
These guys want to enter Oh, okay Okay, please take seat we will start very very soon with the last talk for today
So welcome for the last talk for today is a 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 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
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
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
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
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
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?
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 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
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
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
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
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
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
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
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 a 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 we always try to be efficient
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
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
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
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 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
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 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
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
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
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 a really cool tool and it's just been released a couple of 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 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
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
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
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
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 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
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
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 work in design, maybe we have a tendency okay, just remove the outline
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 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
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 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
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 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
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
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
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
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
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
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
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
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 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
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