Accessibility Fundamentals with Rob Dodson

[Music] hi how's it going my name is Dr Dotson I am a developer advocate here at the Google's I work with the chrome team and my primary focus these days is on web accessibility which is a topic that I've been working on for maybe about two years now but I still feel like a kind of a newbie because there's always so much to learn in this space but I want what I wanted to do today was just sort of cover a little bit of the fundamentals and you know give you a taste of some of stuff that I work on everyday so first like what is accessibility right let's define the term so when we're talking about accessibility from an engineering perspective oftentimes what people mean when they say that is that we're talking about giving users with disabilities or impairments alternative ways to access our content and there's a number of reasons why we need to prioritize this work as engineers so in many instances you may have clients who are in the education space or the government space or really like possibly any business space who might actually request that as part of your contract like anything you're gonna build for them they want to make sure that content is accessible so for instance if you're building something for a school right and they're gonna ask all of their students to use it you need to make sure that you know if a student has like a vision impairment or something like that they have equal access to that content I can still get their education in some countries that's also mandated by law so in the United States we have the Americans with Disabilities Act we have section 508 C of the Rehabilitation Act these things require different organizations to make sure that the things that they're building give equal access to everybody there are similar laws in the UK and in Israel and kind of in other places around the world so it's also something you've got to be mindful of as you're building stuff but the real reason why I like to work on accessibility is because I feel like when you focus on accessibility especially at the beginning of your project you just end up building better stuff so if you're building components it means you spend more time thinking about okay well house is gonna operate for a keyboard how is going to operate with a screen reader you know for design how is someone going to be able to use this application if they're in perhaps not an ideal and right if they're outside that's a very sunny day like I gotta make sure you've got enough contrast on the screen so that benefits folks who are using things in different contexts it also benefits folks who might have like a low vision impairment there's a lot of reasons why we want to incorporate it into our process so what I'm going to do today is not talk about the entire space because it's quite broad but I wanted to talk about one particular aspect which I find very fascinating which is screen reader access so how do you take a website or a widget on your website and make sure that it's content gets conveyed properly to someone who perhaps can't even see the screen and perhaps is using a screen reader to access the page when we're talking about screen reader access there's this notion that is helpful to have in your head of affordances and an affordance is really anything that like affords a person an opportunity to take an action with something sort of like the quintessential example of affordances is a teapot so a teapot right they don't come with instruction manuals because you kind of don't need an instruction manual right you you see that it's got this handle and it's got this spout and you can kind of infer what those things are telling you about the object right I can pick this thing up by the handle something's probably going to come out of that spout right it's got this little lid on the top and I can kind of tell about just the physical design of it that I can pick that thing up and do things with it door handle right it's another good example so the trick here is when we are building websites and web applications we often try and take these affordances and add them to our designs so that they're like visual aspects so for instance a button we try to make a button on our website look kind of like a three-dimensional button we're trying to convey to someone that there's this visual affordances says hey you can click on this thing just like other buttons that you've seen in real life right we don't give everybody an instruction manual the trick is if someone is non sighted how do we convey the same visual affordances to that user right we can't rely on CSS we can't rely on styling or anything like that so we have to have an alternative way of conveying those affordances so that's really our goal when we're thinking about screen reader access we're think about aspect of web design how do we convey these affordances to our users how do we give them these alternatives and when I first got into this space I was like well I don't know like I've seen this these these Aria attributes in HTML before so I guess I go to stack overflow and I at Google how do I do this and then I like copy these Aria things and I paste them in the page and that's like how it works right and about a year ago a member of Chrome's accessibility team sat me down and was like I want to explain to you how chrome like actually like under the hood talks to a screen reader like what is happening at that level how does Chrome figure out what to say to someone who's using a screen reader and for me this was like pretty mind-expanding and I feel like it's it's kind of a missing piece from a lot of developer education most of us don't like working on accessibility because it just feels arkeen we don't quite understand how it works and so we're just like I don't want to deal with that but once you understand what's going on under the hood it's like pretty empowering and then you get really into working on it so that's one of the things I want to talk about today just what's going on under the hood in chrome when we're using a screen reader so start off we're building website right we start with HTML right and from that I think maybe some of you are familiar with the fact that our HTML it gets parsed by the browser and gets turned in this thing called the Dom or the document object model which is just a collection of JavaScript objects let's sort of correspond with those HTML tags that we wrote and then from this our Dom gets combined with CSS and eventually we draw something to the screen right we get our graphical user interface we get our website what I think most developers don't know in which I didn't know is that this is not the end of the process and the other thing that chrome does is it takes the DOM and it creates another tree called the accessibility tree and this is also full of nodes that correspond pretty much with what's in the DOM but we do things like we edit out stuff that is not semantically interesting so for instance if you have a bunch of divs and all they do is like position things on-screen we're like yeah we don't really need those so we kind of prune those out but if you have buttons or texts or anything like that we're like oh yeah definitely need that that's important let's keep that in this tree and so we take that accessibility tree and when someone turns on a screen reader we basically are giving them that's that tree and that's what they're navigating that's what they're moving around inside and they can do interesting things right they can use the screen reader to send an action back through the system they can say hey I want to click on this thing or I want to move to the next node in this tree and under the hood that's that's the conversation that's going on between chrome and a screen reader that's all it's happening so to put this in slightly more concrete terms here's some HTML that I've written over on the right there I've gotten my accessibility tree you can actually play around and like Chrome's flags and get it to like show you the accessibility tree some times which is pretty neat we'll talk about that a little bit more in a sec but you can see that this tree is obviously not the same size like we've kind of we've parsed out some of it so the HTML tag the head tag the title tag we kind of like convinced all of that into that first element there and the only thing that we've gotten that element is the fact that it's got this web area role and it's got a name which is corresponding to the title of our page what's really interesting is you look at this label and this input here and you look at IDE node two and three and if you check those out you can actually see that there's sort of a relationship going on between those two nodes there the the text field this id3 element has this labeled by IDs field that points at that label element so that's how we label our text fields and things like that so that's really what we're doing under the hood in chrome we're just sort of building the sparsh tree and handing that off to assistive technology just kind of cool so for any chunk of HTML any component anything like that that you're creating you can expect there to be a few properties to that node in the accessibility tree so in this case I've got like a select like a drop-down element that's got a little corresponding label for a seat type like I'm buying a seat on an airplane right so for the select node there's a few properties there's gonna be a role property that will be announced by the screen reader to tell the user what kind of control they're interacting with in the moment so in this case the Select element has a roll of combo box because that kind of comes from the operating system it'll have a name and that usually comes from a label of some kind so you'll land on this thing it will say preferred seat type combo box okay cool I know I'm on this control and for picking a seat type some controls have States not all of them do but some do so for instance the check box could be checked or unchecked in this case our drop-down is in a collapsed state and then some controls have values right again not all of them do but in this case since we maybe pick the aisle seat or something like that the value would be aisle seat okay so we just have a node or sorry a tree of nodes with this kind of semantic information inside of it what's really cool is as of Chrome 64 you can actually now go in and inspect the accessibility tree so the same way that you inspect elements and you you know look at their CSS properties and you toggle those and play around with those my teammate Alice Boxhall worked on this new inspector which is also in the elements panel and so in this case you can kind of see it up there on the top I've got a select element that I'm inspecting over in my elements pane and on the far side there I can actually see that there's the accessibility tree I can see the combo box I can see all these interesting computed properties about it like its name and where it derives its label from its state etc so this is a really really helpful tool for anytime you're trying to like debug a widget you're sort of like playing around in your screen reader and you're like why is this thing not saying what I think it should be saying you now actually have a way to go in and inspect what's happening under the hood what chrome is handing off to that assistive technology so um native HTML elements built-in elements button select you know input things like that all of these elements have built-in implicit semantics when I was first learning HTML people are always like you got to use semantic hTML you really need to write semantic hTML and I was like I don't really understand why that matters like who cares like if I have like a h1 or just a div with some text that I make real big like it just looks the same so like who cares this is why it's important because these elements have these built-in semantics that get announced by the screen reader so anybody who's non-sighted right this is just telling them yo you're on a text field type some stuff right there are also elements which act as landmarks these are really cool so these elements you can think of them as like hotspots on the page kind of and anyone using a screen reader can quickly jump to these areas of the page so they can sort of like navigate around like a power user how many of you use them or have ever used them a few you okay so you know how like when you're using them you mean like hit you just fly around the page right like I kind of think of landmark elements like that so imagine if you had like a really busy navigation full of like links and anchors and every single time someone comes to your site they have to like tab through every single one of those things that would that would suck right but if you have a main element they can just hit a button and just like jump right to that main element in fact most folks report when they are on an unfamiliar website they typically start off by navigating by header in their screenreader so this is one of the reasons why we're always saying like hey h1 through h6 they're very important and like don't skip levels like use them in sequential order and just style them to be different sizes if you need them to be different sizes because that's how someone using a screen reader forms like a mental outline of your page and that's how they're going to quickly get around so here's an example of a site this is web aim which is a really really good resource for learning accessibility and what I wanted to show here was just this like cool power user feature in voiceover which is the screen reader that just comes for free on the Mac this is a thing called the web rotor and you can think of it if you ever use your IDE and you hit like command shift P and you get that like uber menu that shows you like all the options like this is kind of like that but for screen readers so I want to show you some different ways that we can navigate so for instance I can go here this box is what my screen reader is actually announcing and I can go by like banner navigation search main and can see this black rectangle indicating where screenreader focus is I can go by like articles I can go by this thing called window spots which I have no idea what that is links headings right there we go so I can navigate by headings in different ways there are keyboard shortcuts that let me just navigate by heading or there's like an uber menu that I can use to like kind of see all of that stuff so I just think this is really neat and it helps you you know it when you're first learning a screenreader kind of figure out okay cool I see how people get around the document that way okay so built-in elements semantic elements they have rich semantics which is good that's why we encourage you to use them generic elements have generic semantics so for instance a div is a generic grouping element like in the HTML spec like a div is just for like grouping things right so when we use generic elements to do stuff like act as a button we're sort of messing up the semantics then and so even though I've styled this thing to look like a button even though it has the right visual affordances for a sighted user for a non sighted user when they land on this control is just gonna say sign up group and that doesn't imply that this is something you can take action on right I can't a group do I click on a group I don't think so it just sounds like it's some text and so there's a very very good chance the user might just keep on moving that they may never click this button and that's a really big problem if for instance this is your create a new account button or like add thing to your shopping cart button or anything like that right so you wanna make sure that any time you're building a control that you're giving it the right semantics and the easiest way to do that is usually just to use the right HTML element so this is like one just tip I try and tell everybody like don't make your life hard don't make your don't make it so you have to do extra work just to like ship your application use the right element for the job if you're building a button use the button element don't use a div or anything like that you're gonna end up after you know product review and everything having to add back in all of these semantics after people start filing bugs on your thing that it doesn't work with screen readers right so use the right element it'll make your life a lot easier now sometimes you're in a situation where there's no existing element for what you're trying to build right we don't have a tabs element in HTML we don't have a carousel element or you know a expandable tree widget element we don't have that stuff and so there are times when you do have to go off-road and you do have to build your own custom controls and so it's only in these scenarios that we then turn to this thing called Aria or why Aria which stands for the web accessibility initiative accessible rich internet applications specification which is a mouthful but basically all this does is it just lets you add semantics to a control so you could take a div and you could make it announced as something else essentially the one really important thing to understand about aria is that all it does is change semantics it just changes what a screen reader is going to announce to user it does not add like cool new behavior so for instance if you put Aria on something it's not like suddenly it's you know you can you can navigate it perfectly with a keyboard it doesn't correspond perfectly to up/down arrow keys or anything like that right you still have to do the additional work of adding that in JavaScript the only thing Aria does is changes what a screen reader is going to announce when it lands on a control so it's useful but again you don't want to use it unless you absolutely have to you because it's a lot of extra work versus using a native control I like to say that you know it lets you fill in gaps missing pieces in that accessibility tree so I want to show you or actually before we do that yeah so this is our diagram right that we did before so Aria is just operating right in here right before Chrome is gonna hand the thing off the accessibility tree to assistive technology we can go and we can say actually that was a button not a div so yeah how do you learn it I think like myself most developers the way that I learned it was again like Stack Overflow and stuff I'd be like someone would file a bug they'd be like this button doesn't work as a screen reader Google how do you make a button work with a screen reader and then copy and paste some code so eventually I got serious about this I was like okay I want to learn Aria so there's two ways to learn Aria I think the first way is the way that I first attempted it which is you just go and you try and read the Aria specification it comes with this very helpful diagram I would not recommend this way yeah I mean it's actually like fascinating that someone took the time to like do this but uh but no this is the hard way to do it the other way which I do recommend the easy way is there's this magical document and I knew this document does not look magical this document looks boring it's the classic like w3c blue on white text thing that like you you sometimes wander into from a google search and you're just like didn't mean to be there and like you'd leave immediately but this is this is not like other w3c Docs okay so this one is written like like for folks to actually read this is the Aria authoring practices guide and the way it is laid out is on one side it just lists common UI patterns so accordion tabs dialog combo box etc right autocomplete stuff that you may be attempting to build in the moment so you go you find the pattern for the thing that you're trying to build so in this case let's say I'm building a custom checkbox again you should not do that because there's a native checkbox let's say you were you can go click the checkbox field and then it'll just tell you like what to do it's like okay your element it must have a role of checkbox it's gotta have an accessible label with Aria label by it must have Aria checked set to true unless it is unchecked and set it to false right and they even have little JavaScript examples that are written in just vanilla JavaScript that you can look at even if you go further down it'll tell you like the keyboard lis expected keyboarding behavior so it's like when someone presses spacebar that is when it is checked or unchecked you know etc super useful right this is how I recommend people learn Aria just sort of like if you happen to be building a custom widget go here implement the stuff and kind of just like you do that a few times and eventually you sort of learn the attributes you're like oh yeah are you checked I don't what are you check does okay so let's do like an example and we're gonna use those fancy new dev tools this is this is gonna be video I'm not I'm not gonna live code this thing so I would I'd fail if I did but what we're gonna do here is we're gonna we're gonna build a check box and I've already got my little check box up there that have started and then I've got a little bit of markup here so you can see I'm using a div to build this check box again do that but I am and then I've got this accessibility tree inspector thing over here on the far side okay so let's like let's see what happens so we click on this thing and it behaves like a checkbox and we might think oh my job is done right I even added keyboard support so you can tab to it and hit spacebar and stuff and it totally works and I feel like oh yeah my job is done let's turn on a screen reader now and look at it so you're gonna see this little black rectangle here this is what my screen reader is saying and my screen reader when I land on this control it just says group that's it that's all it says someone's going through my site they're trying to I don't know check off when they were to do is or something and it says group okay well that's useless now remember though we go to the re authoring practices guide and the first thing it told us was you got to have a role of checkbox you got to have Aria checked true and false okay I I can do this alright so I'm gonna go back here and I'm going to just select my element the elements panel and I'm just gonna edit it and keep an eye on what happens to our tree over here so I'm gonna edit it I'm gonna add an attribute I'm gonna add a role attribute of checkbox and right away it starts updating so now we have a computed role of checkbox right it even inferred that checked was false which is kind of cool even though it's actually checked so we'll set Aria checked equal to true because it's actually checked right now all right so now it says checkbox checked let's try with a screen reader so we go to voiceover we focus it and it says check checkbox rad okay this is like this is gonna happen all right the next thing we want to do though is give it a label right because right now someone's navigating around the screen and something just says check checkbox it's like we'll check checkbox for what like again keep in mind if a user is not cited even if the next thing they hear is like you know sign up or whatever this checkbox is for they don't visually know how far that thing is on the screen from that text that they're reading right it could be something far away it could be like not actually visually related so we need to make sure that every control has like a good relationship with its label so someone understands what that control is actually for so labels helping user understand the purpose about control right there's a few different ways that we can label things you're already probably familiar with one of the most common ones which actually isn't this yet but alt text on images right give an image an alt text you describe like the alternative content that's that's a label right that gets announced by a screen reader as the alternative for that the other one that most developers are familiar with is the label element right so you can wrap an element in a label like a native like form and put or something like that you can also associate a label with a control by using the ID of that control so you can use the labels for attribute and you can point it at the ID for a control so in this case I've got a label element I've got some text inside of it that says first name and then I've got an input field and if someone was to land on someone's to actually focus that input field with their screenreader it'll say first name edit text like real quick like that so they're like oh cool okay I know what this edit text is for it's for my first name the limitation with label is that it only works with certain form elements so like input I think button maybe select yeah probably select but if you're building like a custom widget if you're building like a custom thing out of a div are you using like a web component or something like that label is going to do you no good unfortunately so then we start to check out our friend Aria again so in Arielle and we've got about two ways that we can label things the first is Aria label this is an attribute you just put it on an element and it acts as like a text alternative for that element I think probably like the best use case for this is you know when you're on like a responsive website and you've got that like hamburger menu button that even though we never really explained how those things worked we just sort of assumed everyone like got it after some point okay so like if someone's using a screen reader we got to tell them yo that's the menu right and so giving it an aria label we give that button a text alternative because usually we don't write any text on screen around those things so it's a really really good time to just put an aria label on it so that way someone lands on that button with a screen reader it says main menu button they're like oh cool I know what clicking that will do the other option is Aria labeled by so Aria label by lets you point at another element and say hey the text from that other element that provides my labeling so Aria label by is pretty interesting because you can point at multiple elements and say actually my label comes from that and from that and from that you can build like a compound label so you just space separate the IDs in the attribute so in this case I have this heading men's outerwear and I have a button underneath called SHOP NOW and so I point at the label or I pointed the ID for men's outerwear and then this interesting thing you can do is you can actually point even at yourself and like use your own text content so I'm pointing at the header I'm pointing at the text content from my button and the total thing that it says is men's outerwear shop now button cool all right that works so yeah so for that checkbox that I was building I'm probably gonna put some text on screen next to this thing that tells you know a sighted user what the check box is for and so that's a good opportunity for me to use are you labeled by to associate that so I'm just gonna go in and actually edit this as HTML I'll just add another div with some text in here that says like sign up or something like that you know maybe I'm trying to get him to sign up for my newsletter so I say sign up I have to give my div an ID much of Aria works with IDs which I know mmm a lot of web developers like no but like that's just the way Aria is and then I can give that other element an aria-label bye and I can point at the ID for my div and now if you look in my inspector over here I can see ah yes the name is coming from that labeling element and I can use my screen reader and focus it I can see now it says sign up check check box great so I went from my McDivitt which only had visual affordances to this semantically rich control now anyone can use it so we talked about a tiny tiny tiny fraction of web accessibility but one that I think is most confusing for developers and so I just really wanted to share it with y'all today we do have other resources that are available on this topic so you can learn more about it because it is big and very interesting I do a youtube series that comes out every two weeks that we are currently on hiatus because I'm on a engineering rotation but I'll start again next quarter so we view this every two weeks their five minute videos we just talked about like accessibility topics stuff that I think is interesting or cool showing off like new dev tools and stuff like that like that's what we're doing so hopefully fun stuff myself my teammate Alice Boxhall we also put together a course on web accessibility that is available on Udacity do the course do the certification right trying to get you ready for that and then we also have a text version essentially of that course up on developers.google.com/live or you there Gately slash 11y fundamentals um oh yeah anytime you see a 11y that stands for accessibility it's just accessibility is hard to spell so everyone does a 11 letters in between why so that's what that means that's why everyone does that so yeah I think that's just about it review the many thing we're trying to do anytime we're building custom controls anything we're building anything for the web is making sure that we are offering the right affordances to our users so whichever way they're accessing that content they have the best richest experience possible ideally do this using native elements but if you can't that's when you reach for something like Aria and expose those semantics to your user and yeah that's it thank you [Applause] [Music]

Channel: SFHTML5

Views: 59,518

Keywords:

Id: z8xUCzToff8

Length: 28min 15sec (1695 seconds)

Published: Fri Feb 23 2018