Accessibility with Rob Dodson - HTTP203

Key Takeaways

you were sat at your desk and then a a a real engineer stood behind you and held your hands the scene from Ghost now yeah is there a special pair of gloves that has of two you put you put the gloves on they put their hands in top and like Rob this counts as you doing it this is you look look you're writing C++ look at you go look at you [Music] go I don't know how you feel about existential crisis but who are you and why so I'm hi I'm Rob Dodson I'm a uh developer Advocate on the Chrome team and uh why I uh mainly work on accessibility and uh trying to sort of teach developers how to build accessible applications make sure it's part of their their daily habit when they're doing their work I think you're the first one who just glosses all the why and just turns into a job description I like we've gotten very weird it's Dev training right I yeah I just reverted back to my training and it just sort of kicked in I imagined I was on a stage and it was going badly and I just started saying my job title we just activated you there that well bring you bring me back to humanity so you've been doing an enge rotation recently it's so what's that like you stand in the spot and spin around but with the computer with the othere yeah other people it's like a spinning class yeah yeah uh so what I've been doing uh the previous quarter was um actually working on chromium so working in C++ um like Dreadful it was uh cuz I didn't know C++ when I started so I learned enough C++ to be bad at it and then I started shipping code in the browser which was and having other people review your code until you were Yeah so basically the way that works it's like I put up a patch and someone goes it's horrible and then I'm like they're like down there move it over there and I'm like here and they're like there and I'm like here and they're like yes the funny thing was it wasn't even an engineer I knew it was an engineer from a different browser who was just just so annoyed by my bad code that they just showed up from like from like another continent and were like stop like do it this way and that's that's a long way to run like so so another continent they're they Des they see your code and they stand up and go no but from from where from Oslo from Oslo that's a long run that's impressive yeah yeah but but but it was really cool I got to learn a lot about how Chrome actually works under the hood so that was really interesting um I'd actually encourage like anyone who um is really interested in the browser like you can learn enough C++ to kind of get in there and the nice thing is um this is a tip I got from another person on the team if the code around you is written well you can kind of like figure it out you can kind of like muddle along and so that's the case right I I got in there and I found something that was similar to what I wanted to do and kind of just like copy paste yeah yeah let's say it it's copy paste but I find the same with web standards actually like I kind of I sometimes like I'll submit a patch and the feedback would be like why on Earth have you written like like this and I was like well I copy and pasted it from two two lines that way like well it's wrong well I mean how can I help being wrong in this situation you're like I'm new and so like uh so yeah uh I was very wrong pretty much all the time um but it was pretty gratifying like getting something behind a flag in Chrome I mean you you know the owner of a flag in Chrome right that's the thing yeah the experimental web platform features Flags which kind of like a bucket like everything goes in there but uh but yeah I'm like the owner of like a pseudo class in CSS now that's cool so what have you actually been implementing so it's a a CSS pseudo class called Focus visible and the way it works is it matches when Focus matches and then using kind of like a internalistic in the browser we determined that it would be useful for the user to see some sort of focus indicator so so typically that means like depending on if they're using a mouse versus a keyboard to navigate the page if you're using a mouse depending on the control maybe you don't need to see one of like if you're clicking on a button or something like that right I've had that problem before and I feel like I've been like making things not accessible because I don't want when the user clicks with a mouse it to it to have that same Focus style you end up like doing weird hacks like oh if it was a if there's a mouse down add a class somewhere or something that will hide the focus Styles or something so it's now I think I can I can start do star Focus visible Focus ring and then uh outline well there's no I mean you just just use outline oh outline right for your focus indicator yeah that's outline but isn't the focus focus visible used to be called Focus ring actually named it yeah so can I do because by default the outline is like kind of blurred right it fades out yeah can I do that uh yeah so uh someone was telling me if you just do outline Auto it should revert to that but that actual sort of the blue thing that you see there is in the user agent stylesheet um you can literally it's kind of cool if you just open up what is it cs. chromium.org and type in html. CSS like that is the user that's like all the Styles in the browser is that file and it's like that's the kind of thing that I I kind of got to discover on the ination you can just go in there and you be like I can just change this if I want like I you will see interesting units like the qem the quirky em yeah yeah weird stuff that you just like yeah so like when you're saying it's htics based I how how did you get that through a standard so that's actually we're still working on that that was some of the feedback that we got which was like we want to know more about the conformance for this thing um so we're working on a patch right now to really like explain when we think it's beneficial um and so typically it's like you know for for anything kind of like where you know the user is going to be providing some keyboard input like a like a text field or something like that you probably always want to show it then whereas for something where the only action is literally like click a thing like a a button or like a slider knob or something you maybe don't want it in those cases so it kind of depends on the intent of the interaction and everything yeah but in the end it's going to be left to the UI to UA to decide what yeah ultimately like so there'll be some conformance criteria that we're going to kind of recommend um and hopefully everyone would follow that um because yeah you would want it to be consistent because otherwise it ends up with just yet another kind of broken Focus experience yeah that makes sense so you're speaking about accessibility right iio is is that Focus ring or you covering other stuff as well yeah so I'm going to talk about um what's new in Dev tools so there's some cool accessibility stuff that we've added there uh talk about Focus visible and then the other thing we're going to talk about in the second half uh Dominic Mone who is an engineer on the blink team is GNA come up and talk about accessibility object model which is the infamous a yes or a depending on how you depending on the camp that you fall in so so yeah that's actually a way to just create your own virtual accessibility tree um listen for accessity let's let's stop there because what even is an accessibility tree oh okay yeah so that's actually a good question so this is something I didn't really understand for a long time I was like how does the browser make a screen reader say the things that it says and it was always just kind of a mystery me um but basically it's like you've got your HTML which is a tree right right that gets turned into Dom which developers are familiar with that um but then the browser does this one extra step where it takes the Dom and it sort of prunes out all the parts that are not semantically interesting so if You' got a bunch of divs just for like positioning things on screen it just sort of throws those away it builds this sparse tree of just the semantic goodies and that's the accessibility tree and that's what actually gets handed off to assist of technology so so if I do something like uh ARA hit then that's that's my instruction to say don't put this in the accessibility tree you're pruning out a whole chunk of the Dom from the accessibility tree I mean it kind of sounds similar coming from CSS like display block display non removes something from the rendering tree which you also have it also removes it from the accessibility tree yeah it's so many trees yes so we're actually getting access to this tree is that yeah well you'll be able to do there's kind of a few things um you'll be able to listen to certain events that previously were only available through accessibility technology the other thing you can do is you can actually just kind of like create virtual branches of the tree if you want to think of it that way um that's probably really R for like for example canvas right indeed yes canvas if you're building like webg maybe some kind of like SVG that's hard to make accessible um or maybe even just like a regular Dom component like for the longest time it's been really really difficult in some situations where you have something and it's almost like a in canvas it's almost like a black box yeah with dom it could be just a really elaborate thing for something presentational but now you can just hook in there and you can just say you know what I know better exactly you're like I know this is all weird and elaborate but here's the actual thing I want to be represented in the accessibility tree is that like a pure JavaScript API or are we going to be markup as well or uh it'll be pure JavaScript um at least initially um but yeah yeah so it'll be uh all JavaScript so one one of the struggles I think with accessibility is getting developers to care about it um and I felt like performance is in that bucket as well it's one of those sort of it's slightly difficult to get budget for for that even though I would say you know well accessibility there's a lot of people who get real value from it and with performance as well with with performance I feel like amp has done a really good job of kind of taking that to businesses and saying performance the default right yeah is it what what can we do for accessibility to achieve the same yeah so it's tough because accessibility um some of the things because the area is like really broad some of the things fall into like user experience and design so color contrast and stuff like that people tend to kind of like pick that up and and incorporate it into their design process a little bit better you get into other areas though like screen reader support and Arya and a lot of people are like well that's not my problem right it's sort of out of sight out of mind if it's not something that's directly affecting the developer they kind of just don't care about it so I think what has been really successful for a lot of teams has been um doing a more like inclusive design approach so making sure that you're bringing in people who may have disabilities or impairments into the design phase into the product testing phase um and you know even like also making sure that those people that like you're employing the fols on your team even that Engineers on your team like might have disabilities and things like that because if it doesn't work for literally the engineer on the team like it's not going to ship right pretty much and so we need to just like I think in general do a better job of like including more people in our in our design practice um and as a result hopefully it just becomes something that everyone just does as part of their kind of their daily habit well thank you so much for joining us for good luck with your talk yeah and something I was you can't do that you can't set me up and then look at me and just like and you go finish this and Tada I think I think I totally messed you up by saying thank you for having me that's fine it's fine do you want to try that again no no we're just going to leave this this is this ending all right yep all right well uh we're going to keep dragging out like the the final Lords of the Rings so many endings like a long fist bump or something when is when is your talk it's soon right so we're just going to go straight this this ending is going to last straight into right okay that's good that's good all right all right all right all right cool