So, hello. Like he said, my name is Cassidy Williams. 0:00 There's only two S's in my name, but that's okay. 0:02 You can say Casssidy Williams. 0:04 And so I'm gonna be talking with you about accessibility in the browser today. 0:06 So like he said, I'm a software engineer and developer of Evangelist at Venmo. 0:10 And it's very fun. 0:15 I'm normally a front end dev, 0:16 and I'm on the back end team now and so, experimenting with new things. 0:17 So let's get started. 0:23 So, the internet is great and I think all of us know that. 0:24 And to illustrate that, let's look at this cool website. 0:27 It's nooooooooooooooo.com and you can press this button. 0:31 Oh no, volume. 0:36 >> [NOISE]. 0:38 >> Oh, that's so great. 0:43 So it's super great. 0:45 But it's great if you can see the screen, and 0:47 if you can use the mouse to actually click that no button. 0:50 And if you can hear the audio that actually plays when you click that button. 0:53 So if you have no disabilities of any kind. 0:58 The web has so 1:02 much potential for everybody, including people with disabilities. 1:03 Most studies find that about a fifth of the population actually has some 1:08 kind of disability. 1:11 But we aren't really accounting for them. 1:13 Very few businesses, very few people out there actually write web applications that 1:15 support people who use assisted technologies. 1:19 So what we're going to talk about today are is the semantic 1:25 web the WAI-ARIA specification and accessibility checklists for 1:28 your projects, and then any questions you might have. 1:31 So, the semantic web, it's kind of one of those buzz words like synergy. 1:37 Semantics is the science of meaning. 1:43 It's assigning states and rolls and 1:46 properties to user interface and content elements. 1:49 And so, two kind of things about it that I'm going to talk about it are just new 1:54 HTML5 tags and then the role attribute in particular. 1:59 So, HTML5 semantic tags are probably some of the easiest things you can add to 2:03 your web applications and your web sites to make them more accessible. 2:07 I won't talk about this part too long cuz there's a lot to get to but, 2:12 basically with the magic of CSS today, anything can look like anything. 2:15 A link can look like button, a list can be a control interface. 2:19 Whole pieces of artwork can be done in a single div. 2:23 I don't know if you've ever seen a.singlediv.com, but it has all these 2:26 pieces of artwork that are done just in one div, and it's just the magic of CSS. 2:30 There's so many opportunities with it, and it's great, 2:36 but let's actually look at a.singlediv.com with a screen reaver, reader. 2:39 So let's go over here. 2:44 [INAUDIBLE] That. 2:45 Oops, okay. 2:48 So this is a singlediv.com. 2:50 Whoa, these are all a single div, that's so cool. 2:52 If you do command F5 you can turn on a screen. 2:54 >> Voice over on Chrome. 2:58 A single div window. 2:59 A single div HTML content. 3:01 >> Okay. 3:02 >> Visited link, Lynn Fisher. 3:03 Link, tweet. 3:05 Leading HTML content. 3:07 Back button. 3:08 >> So, I don't know if you caught that but there's the link to Lynn Fisher, 3:09 who made it, there's- 3:13 >> You are currently on a button inside of the toolbar. 3:14 >> Stop. >> To click, voice-over off. 3:16 >> So, [LAUGH] sorry about that. 3:19 So it said, oh there's a link to Lynn Fisher. 3:21 Okay and then if you hit tab, 3:25 because that's how you often navigate through a page if you need to. 3:26 There's a link to Lynn Fisher, there's a link to tweet, and 3:30 then it said end of HTML document hit the back button, and that was it. 3:32 There's so much content on this page, but a screen reader couldn't see any of it. 3:37 It just saw that there were two links on the page. 3:41 And, I mean, I don't wanna, you know, take a jab at Lynn Fisher. 3:43 Like how dare you make single div art. 3:48 But it, it would be great if you were able to say put like a fig caption or, 3:50 or some other caption tag that is in HTML5. 3:56 So that way, even if it was just someone who said oh, cool, 3:59 there's a single div that has a cupcake in it. 4:03 The, it would just make things so much easier for people who are just 4:05 browsing the internet but can't actually use it the way most people do. 4:09 So that's important, if she had a nav tag, so that way she would know how to 4:16 navigate the website, a fig caption, something like that. 4:20 Mm okay. 4:23 So, sorry Lynn Fisher. 4:25 And then the next thing we'll talk about is the role attribute. 4:28 And what it does, it provides a programmatically determinable relationship 4:32 between specific content and 4:36 that's a big part of accessibility, just that word relationship. 4:38 Because everything should be able to flow together and be relatable to each other. 4:42 So let's just say I have this cat named Lola who's been up to no good. 4:46 She's dressed up for Halloween. 4:50 I don't have a cat but I can dream. 4:51 So we have an image tag, we have that handy alt attribute and 4:53 then we have a paragraph saying Lola has been up to no good. 4:58 And clearly, oh, this is a caption for this cat. 5:01 This is so great. 5:05 But if we were going through this with a screen reader, or some kind of 5:07 assistive technology, we don't know that these two are related at all. 5:11 They are completely separate tags. 5:14 So, what we can do is use the roll attribute. 5:16 And so we can put, it looks the exactly the same to all of us, but 5:20 what it does it puts all of this into a group. 5:24 And then actually makes this one whole thing with an image and 5:26 then a caption and it's all related to each other. 5:30 And so when someone's actually going through there's an accessibility tree and 5:33 it has all of these different nodes that are related to each other in some way 5:38 based on all these these accessible attributes and states and properties. 5:42 And so all of these are now in one node on a tree, and so 5:46 someone who's going through the page with an assistive technology can see oh, 5:50 Lola has been up to no good, that's related to this cat. 5:56 It looks the same to, to us, but for 6:00 someone with a screen reader, it makes the world of a difference. 6:02 So again just to emphasize, 6:06 adding a role will not make an element act or look differently for anyone. 6:09 It doesn't change the behaviors, 6:15 the states, or the properties of the host element in anyway. 6:16 It just changes that accessibility tree. 6:20 And so it doesn't harm anyone, it just helps some people. 6:22 Which, why, why not do it, then? 6:26 So let's get into this WAI-ARIA specification. 6:29 I'm not sure if that's how you pronounce it, that's just what I say. 6:33 So it's W3C's accessible rich internet applications spec. 6:37 So it's, it's just this whole specification to add to 6:42 your web applications to make them more accessible. 6:46 It defines oh, it defines all, all kinds of different properties 6:50 and states and just things to make your web applications flow a bit better. 6:56 So there's a contract model with the browser's accessibility APIs. 7:01 And this is also on the W3 website. 7:06 I just made it like, prettier and big so 7:08 you guys can see it without too much hassle. 7:10 But so there's the user agent, which everybody knows it's, it's the browser DOM 7:13 which has all of the data and the UI, all of the divs and tags and everything. 7:18 And then there's JavaScript which is kind of a controller for the web application. 7:23 It produces the widgets on the page it's all very event driven. 7:28 And then there's the accessibility API that works directly with that. 7:33 And so it has that role that we just talked about which 7:37 handles widget types and 7:40 navigation, throughout the page and then it has different states and properties. 7:41 And the different states and properties which are a part of the specification 7:45 defines relationships and values and just live regions on the page. 7:49 And then assistive technologies work with both of those and it's, it's all working 7:53 together to make a seamless application for someone who is using those pages. 7:58 So before we dive too deep into it, there's four rules, for ARIA use and it's 8:04 not like absolutely you must do this, but it's like parlay, there good guidelines. 8:09 If you look at the W3C website there's actually five rules, but 8:15 one of them is not as relevant, so we will just talk about four of them. 8:19 So first, if you can use a native HTML element or 8:23 attribute, then do so, because it's built in. 8:26 You don't need to repurpose it and add an area role or 8:30 anything like that, just use the original. 8:34 There are exceptions to the rule. 8:38 For example, if there's design constraints with that particular element 8:39 you don't wanna change everything around that just because the element has to 8:43 be styled as required. 8:49 But besides that, generally keep it as native as possible, 8:50 because almost all HTML elements natively have some sort of accessibility support. 8:55 And it's usually for 9:01 custom controls that you do have to worry about adding these rules. 9:02 For the second rule don't change the native semantics, unless you really, 9:06 really have to because again, it's, it's great if it's built in. 9:11 And so, for an example, if you have a heading and you want it to be a button. 9:16 For, for whatever reason. 9:20 Just use a button tag and the h1 tag rather than adding a roll to the h1 tag. 9:21 Because it'll just keep it seamless between both, expect for 9:28 between accessible users and standard users. 9:33 That doesn't add any changes here. 9:37 Then the third rule, all area controls should be usable with the keyboard, 9:41 because not everybody can click a mouse or touch a screen or anything like that. 9:46 If you make a widget where a user can click or drag or scroll or 9:50 swipe or slide or some other thing that sounds like a song. 9:55 It should be, you should be able to navigate with the keyboard, 10:01 just because that's how a lot of assistive technologies work. 10:05 And then, the fourth rule, all interactive elements must have an accessible name and 10:11 that kind of like that relationship word that I was talking about before, 10:15 you should be able to have a name that relates everything together. 10:18 And, so, for example, we have an input with a label. 10:22 We've mentioned that I like Taco Bell, I really like tacos. 10:26 So we have this label and 10:28 an input and, like, to a standard user it's a label for that input. 10:30 It makes sense. 10:35 But, we don't know the relationship if you're using some sort of assisted 10:36 technology, so just label for taco, and then that, the input has the ID taco. 10:41 It makes it much easier for someone who is using assistive technology and 10:45 doesn't know the relationship between the different elements on the page, and 10:49 it just works again with that accessibility tree. 10:53 Okay. 10:58 Let's go through some examples. 10:59 There's so 11:01 many different roles in properties and states that come with this specification. 11:02 I could talk about it all day, but I know you guys want lunch. 11:06 And so, I, I'll, I'll just, I'll just cover a few. 11:10 And so, this one, it's a pretty standard and simple one, describedby and 11:14 it specifies some sort of hyperlink to content that describes an object. 11:19 And so, if we go back to my dream cat, Lola if you have your image and 11:24 then you have a div that describes Lola. 11:29 And this, this div could be anywhere. 11:33 It could be very far down the page it could be on a different page entirely. 11:35 You want the description to be available for it, but 11:39 you wanna build that relationship. 11:42 So you can add this describedby right there, and then just link to that ID, 11:45 and you can link that, it's just like an href and an anchor tag. 11:50 You can link it to a different website that might describe like very 11:55 in-depth Lola's costume and grumpy face. 11:59 Or you could just link it to another div on the page, and 12:02 again, it builds the relationship between the different elements. 12:04 So that way someone who's using assistive technology can see that relationship and 12:07 understand it. 12:13 Okay. 12:14 And there's a great example from University of Illinois that I'm gonna use 12:14 next because the, they, they did a really great job with it. 12:18 Before I open it up it uses two different roles throughout this page. 12:21 It uses application, which covers the entire like module of the application, and 12:27 it has buttons in the application. 12:32 And it's going to be a tool, a toolbar for a text editing area. 12:33 And for the states and 12:37 properties it has controls, so it has different sets of controls. 12:39 It has pressed for the buttons and then it has labelledby so 12:43 labels for each of the buttons. 12:47 And so, let me go to that page right here. 12:50 Okay, cool. 12:53 Let's see if we can do that, there we go. 12:55 So, this is, this is the page. 12:58 It's pretty simple. 13:00 Now what I'm going to do is I'm going to turn my screen reader again. 13:02 Hopefully it's not to loud. 13:04 >> Voiceover over on Chrome, overview example, Toolbar Example one. 13:06 Window. 13:09 >> Okay. >> Link, overview list to our 13:09 visited link, font larger, toggle button. 13:11 >> So the label on this button is font larger, toggle up. 13:14 >> You are currently on a toggle button. 13:18 >> Shh. >> Inside of a toolbar item palette. 13:19 Choose. >> And 13:21 so what you can do is move around just with the keyboard on this page and 13:21 then press the space bar and it just works with this application. 13:26 >> Font smaller. >> Which is great. 13:29 >> Toggle italic. 13:30 Selected toggle cold, toggle button. 13:31 >> And, it's a lot of of talking I'll try to shut him up a little. 13:32 But then you, again, you can use all these different controls. 13:36 You can actually type in here and everything is, is keyboard editable and 13:40 this entire page is just a great application of that for 13:44 moving around the different controls. 13:47 And again the screen reader was able to say exactly what everything is. 13:49 And so it was able to define the labels, this is toggle up, this is toggle down. 13:53 For font size, this is italics, this is bold. 13:57 And if I were to inspect element, 14:01 I'm not going to because screen resolution is weird. 14:03 You could see it's really just adding those little values. 14:05 For areas described by or area the this is a control area. 14:08 And you can tab in between all these different roles and 14:14 it just flows very seamlessly with the page. 14:17 Okay let's go back. 14:20 cool. 14:23 So, let's talk about your projects. 14:25 There's a sort of accessibility checklist that you 14:27 should cover whenever you're making your applications. 14:30 Oh, I left that screen-writer on. 14:33 [LAUGH] Sorry. 14:35 Ooh. 14:37 Okay. 14:39 Shut up please. 14:40 Okay, cool. 14:41 So, accessibility checklist. 14:42 So, visibility, use, when you're making things visible and invisible on the page, 14:44 use the visibility and display properties or the hidden attribute. 14:52 Don't use things like z-index or 14:56 opacity or placement for hiding things completely or just hiding them on the fly. 14:58 Because that's not always going to work. 15:03 And someone with a screen reader might say huh, 15:05 there's like a circle that's off the page, I wonder why it's there. 15:08 Just make it, make it hidden. 15:11 It's, it's easy that way. 15:13 And also try not to override too many of 15:14 the browser's default behaviors because that's just say you override zoom. 15:17 That means someone who isn't able to zoom in on the text on your page to 15:21 read it better. 15:25 They might not be able to see everything that they want to see or 15:26 read everything that they want to read. 15:29 And so again for 15:30 design it's one of those things that you kind of have to find a happy medium for. 15:32 But try not to override too many things so everybody can use your page. 15:37 I haven't talked about this one too much. 15:42 But, Color there, 15:44 there should be a certain amount of contrast with your pages. 15:45 Which we could, there's all kinds of cool checkers on that. 15:48 This is my favorite one, where it's just a Color Contrast Check. 15:53 And, it'll say which ones are actually compliant for accessible things. 15:56 And so if I were to make this really, really red suddenly, no. 16:01 It's really bad to have green text on a red screen for people who are color blind. 16:05 And there, it's, it's nice to be able to check different colors against each 16:11 other and everything and make your applications easy to see for 16:15 as many people as possible and make in compliant with these. 16:19 Okay, let's go back. 16:22 Come back. 16:25 Okay, cool. 16:27 focus-ability. 16:29 We kind of talked about this a little bit, 16:29 but, everything on the page should be able to have focus. 16:31 You should be able to navigate the entire page, with tab or 16:34 just different arrow keys and everything and 16:37 you shouldn't have to be able to moves your mouse, use your mouse for everything. 16:39 And then if a control on your page isn't standard, it's not a button or 16:43 a link or list item or a navigation thing. 16:47 They should have an appropriate area roll attached to them, so 16:50 that way someone who is navigating your page, again, with a screen reader or 16:54 assistive technology can navigate it easily without having to say oh, 16:59 well, I guess there's nothing else on the page and that's it. 17:03 And then, State Changes, 17:07 This is another thing that you should be on your check list. 17:09 Standard controls have this taken care of pretty well, but then for 17:12 custom controls it's good to have solutions. 17:17 And so aria provides that with aria-checked, aria-pressed, et cetera, and 17:20 one thing that's important here, is being device independent. 17:25 It's really hard for someone if, using your applications if, 17:28 all you use is on key down, or on mouse down, or on mouse over. 17:32 Instead use something like on focus, or 17:36 on blur, or on submit, or something that's device independent. 17:39 And so when, whether they're using a phone or a desktop or a screen reader or 17:43 whatever different technologies that they're using. 17:47 It's again, device independent, and anybody can use it. 17:51 Kay, so there's a cool, a few developer tools, and for 17:58 some reason, the links aren't showing up, but these are all links. 18:01 And there's different things that you can use, that way you can work on 18:05 these sorts of applications, so Fang's Screen Reader Emulator, 18:09 that one was featured on Mozilla's website for actually emulating a screen reader, or 18:13 you can just use the native one on your computer. 18:18 I have used that for messing around with this presentation. 18:21 And there's, best practices thing. 18:26 For WAI-ARIA and that's just on the W3C website. 18:29 You can just look up WAI-ARIA best practices. 18:33 It's the first one that shows up. 18:36 And it talks about all of these rules a bit more in depth and 18:38 has a few more examples, showing screen readers or 18:40 pop ups of that sort of thing that show the best ways to use that. 18:42 There's that color contrast checker that I just showed you. 18:47 I'm going to be posting all of this on the internet so 18:50 if you don't want, if you want to just take a picture I can show you later. 18:53 But that color contrast checker just having some sort of 18:56 contrast checker just so that way you don't use funky colors and 18:59 make people not be able to see what you've made those are really great. 19:03 And then there's a lot of testing services. 19:07 Mozilla recommended this, Tanaguru's Automated Testing Service but there's 19:10 a bunch of accessibility testing services out there where they'll just go through 19:15 your applications and say, oh, these are some of the changes you can make or we can 19:19 automate this for you and actually help you build more accessible applications. 19:23 And then there's always html5accessibility.com which has 19:27 a bunch more rules and ideas and help for getting there. 19:33 So again accessibility, it helps some users and it doesn't harm any. 19:38 So there's really no harm in actually doing it. 19:44 And it's good to make the web accessible for everyone. 19:47 Thank you. 19:50 [APPLAUSE] 19:52