Duration 37:18
16+
Play
Video

What's new in web accessibility

Rob Dodson
Developer Advocate at Google
+ 1 speaker
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 10, 2018, Mountain View, USA
2018 Google I/O
Video
What's new in web accessibility
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
12.53 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Rob Dodson
Developer Advocate at Google
Dominic Mazzoni
Software Engineer at Google

Rob Dodson is a developer advocate at Google where he focuses on accessibility and web components. His mission is to fight for a better web and to help developers build great experiences. You can catch him every other week on his YouTube series A11ycasts.

View the profile

About the talk

This session will cover new additions to Chrome's DevTools which make finding and debugging accessibility issues much faster. The Accessibility Object Model, a powerful low-level API designed to give developers total control over the accessibility of their sites, will also be discussed.

Share

Welcome to what's new in web accessibility. My name is Rob Dotson. I'm a developer Advocate on the Chrome team in a minute. I will be joined by Matty Matheson Dominic. Mazzoni, who's an engineer on the Chrome team. They were going to be covering two big topic areas. The first is I want to spend some time talking about some new tools have been working on in from Deadpool 2 make testing acceptable to be a bit easier if I can have Dominic will be up here talking about new apis were working on to make building accessible components and applications use here so hot to cover his first topic

accessibility testing now, if you've ever done an accessibility audit or review of a site before, you know, that there's a lot of things you need to keep in mind as you're doing that work right? It's probably too much for any one person to keep in their heads or create checklist will create spreadsheets to make sure that we're covering all the important topic areas. We're not leaving anything out. But even going through this checklist can be sort of error-prone right if your team is shipping code really fast is a lot of manual work that has to go into the audit you might miss something

as soon as possible, you know opportunities for regression and things like that and set a really scale this work. What we want to do is figure out ways. We can automate the process of testing accessibility. So it just becomes part of every developers workflow part of their daily habit Monochrome side we do this ritual called Lighthouse. So Lighthouse runs a set of automated tests against your application for things like SEO best practices and accessibility and the coolest thing about lighthouses that it's integrated directly into Chrome devtools. So it's basically, you know, I think that

every developers going to have access to you. They don't have to go to like a special place or special special tool to get access to it. It's right there in a browser single button click and then get a high level overview of how they're doing on their site in terms of accessibility. So what I wanted to do today was actually walk you through my process for auditing a site using Lighthouse. I want to show you some of the things we've added to devtools. Do you make it easier to verify and fix some of the issues that Lighthouse brings up Sophia switch over to our demo machine? This is a site

that Dominic and I've been working on called pupperino. I think it's pretty good site. Right so it's for its for dogs and their human counterparts like a lifestyle site. So you can go through you can buy things like a sweetheart human disguise or you can write stuff to learn about the the latest and dog fashion things like that. I have done that ourselves on the back of it now and see how we're doing in terms of acceptability and I was saying that you may see if I

click on that I can open up the audits panel inside the artist panels do the lighthouse logo has a couple other things as well. So there are some drop-downs hear the first one lets us decide what kind of site emulation we want to use when we're running Lighthouse by default like White House wants to test your site and its mobile version. We can also announced that it to test the desktop version. It also by default be set to run on like 3-g with a slow down CPU to stimulate running on like lower-end mobile Hardware, but in this case because we're just testing a throttle

because I don't have to run any slower or anything like that. Now he's going to click the lighthouse button is going to present me a number of things that I could test against my page again performance and Progressive web app a lot of really cool stuff in there doing what I'm going to do. This afternoon is accessibility Suffolk run the audit and under the hood Lighthouse is running about 30 or 40 test against our site checking for a bunch of common accessibility issues. If using an open source Library called for Mayberry friends at DQ to do this, so we on the lighthouse scene we contribute

back to a score and we take it. We roll it into the stool. Once it's done. It's going to give us a report card that looks like this. So there's a lot going on in this report card. I want to walk through a piece by piece. Chocolate ShopRite, it's giving me a score of 81. Okay on this site, but there's some room for improvement. What are the other things are going to point out to me is that well Lighthouse can do some good automated testing against your site. There's some things that machine can't really check that well, and so we always recommend you go through when you do a manual audit

as well. If you're really not familiar with how to do that down at the bottom when clue dissection on like additional items that you can manually check. So we open that up and see that there are a number of things inside if your number of dropdowns each one of these links out to a dock I'll explain, you know, if you've never audited the site before for keyboard support here is how you do it. Let's look at our results that we have here. So we have three errors that we need to work on and I was going to come and go through these one by one. So the first one here says we have some elements

that have insufficient color contrast. So meaning we got some elements where the background and foreground colors. That's what you know, when when the foreground text later that background it's probably difficult for some users to read just like right here in Deadpool's if I can click on these nodes and inspect them over in from Devil's itself so I can look at it in the inspector and its role the element interview span here. So they zoom in on that. I got this article with this dog. The article topic is sticks and

how great they are grayish text on a white background and lighthouses signal to me that like, hey, this might be difficult for some users to read. The color contrast is a tricky thing, right? You know, it's somewhat subjective. What is legible to some users may not be eligible to other users. And so in order to take some of the subjectivity out of the discussion the web content accessibility guidelines defines a set of color contrast thresholds that were always trying to meet these are referred to as with tag double-a and Triple-A. I think that these thresholds is actually compute them

requires a fair amount of like Matrix math and stuff like that is not the kind of thing that's easily do in their head not the kind of thing. We can just look like look at a color necessarily and highball it. What's the kind of thing that machine is really really good at identifying for you. That's what I think. We've added to Chrome Dev tools if we go down for a little style panel here by zoom in on the styles that I'm applying for this element the color stylist defining my text color like put on that. I'll get this color palette. And it'll tell me right here what my current contrast

ratio is which in this case is 3.54. I've got a little red / to indicate that like hey something's going on there. And if this old truck down here, they'll give me some more information so I can see the double-a and Triple-A ratio sensor aiming for 4.5 and 7.0 respectively. You're the nice thing that it does is up here at the top. It's created this line instead of curved line across my entire color palette to indicate. So where the minimum color threshold is that I need to meet and so I just grabbed the Color Picker and I drag it to the other side of that line. You can

see that it's updating here. So now this double a line item has got a green check mark next to it right by dragging the further down. We see that work at AAA also has a green check mark next to it and I'm up here at our contrast ratio, which is now 15.82 checkmarks and zoom out a little bit. I feel like those tags at the top of those articles are lot easier to read now as well. IBEW Local thing we can do with our Color Picker if I scroll down a bit. If you're this article with this this afghan with some really red hair and this is like pretty hard to pick out but I've actually

got some text over the image. So this one says hair the salon by the puppies asleep if I inspect these elements, I got to look at them over in my style panel. Put on the color swatch this time. It's not identifying a contrast ratio for me. And the reason is because our text is sitting on top of a background image. So if we click our disclosure, which is here, it'll say hey, I can't just sort of like pick out the background color for you, right? There's not a CSS background color that I can identify, but it'll give me access to an eyedropper and I can just go

find some of the most representative color in my image. So whatever is sort of right behind my text and click on that and now I get my color contrast lines run in my color palette again, I can't see my contrast ratio of 2.69. So definitely need some improvement there and I got to see my tagged Double AA AAA thresholds and this case since we're going from darker to lighter text and describe the Color Picker and drag it to the other side of the threshold line. Right and I feel like that text is a lot easier to read on those helmets. So that is the new Color Picker in Chrome Dev tools to

go back and look at our audit here and see what else we can work on. The next item that Lighthouse was pointed out to me and said I have some linked but do not have discernible names. All right, let's get let's see what's happening here. So I click on this island. And again, I'll right click to scroll it interview answer. The question here is up here at the top right? I have the shopping bag icon that someone can click to like, you know, check out maybe they bought something on the site. Am I White House has said it's basically like a you know, that that element that you're using there

that might be a good enough visual affordance for a cited user to let them know if they click on this right I'll take me to the shopping cart, but you haven't provided any sort of like text or text alternative. So someone using assistive technology like a screen reader may not be able to identify what that control is for. So what's going on this element here and see if we can improve upon it now in the past if you wanted to test this kind of thing, you might need to fire up a screen reader navigate to lose control to figure out what the screen reader is even announcing its fall back

concept. One of the tools now is accessibility tab, which is down here right by our style panel and other things so I click on that don't give me a lot of interesting information about this control zoom in a bit since you got a bit better just play me a number of things first. It's telling me the computed roll for this control in the accessibility tree just in case the computed role is link right now. It's at least going to say that it's a link. We can see if there's any re-apply to it which in this case there is not. I got here the

bottom we can see it's computed name which right now is just empty quotes. And the reason is cuz we don't have any text content. We don't have any Aria have nothing on this control. So the interesting thing about this is what I really like about this panel is it kind of almost tells me how I can fix the problem, right? Cuz it's saying. You know, it's like a title attribute or text content Aria label it sort of explaining to me how to copy station worker named competition works. Singleton's control and I was a denarii illegal to it. And we'll say check out. Okay.

So now our panel has updated now or Elena has a name of checkout still got that computed role of link, right so I can see in the accessibility tree. If someone were to land it would say something like checkout link. Okay so much better experience than just tell him you want to link and not telling them where it goes. Beautiful thing about this is us how named computation works in the browser. So for instance, if I were to add perhaps a less important attribute to this like a title attribute since you have title of Life 2 I go back down to that panel. I can see that that title attribute

that I added is actually being overridden by the more important and more specific Aria label. So now you can actually understand you know, which is more important or lable or label by which one of these things is going to win if I put it on my control. The palace self. It's like pretty cool. It's pretty powerful from the other interesting things we can do with this is let's go look at it. Maybe I'm more advanced control like a star rating widget. So I want spec the star rating control here in my ailments panel over here. You can see that there is quite a lot of

markup associated with this control. So this is a custom element. It has a diamond ax in his role has Aria volume and value Max Schmeling Alexandria value taxes, and I'm at analysts. Are you have to be to myself? I may not always be confident that like it's working as I expected to you and in the past but I would have to do is go to fire up a screen reader go check it right and kind of possibly go back and forth. My dad flow. What I can do now is I can actually just use the accessibility panel down here and I can see okay.

I'm putting Aria actress on this thing. I'm adding roll to it is working as I expected to you and so I can see that. Yes, I gave it a roll slider. And yes that corresponds to is computed roll. I can scroll down and I can see all the computed values from all of this re attributes that I used so far all the sorry that I use here here. What ended up getting computed in the accessibility tree? So a lot of information there to help you out your developing won last night, cuz I think it's really neat. If I go to the parent of this control and Ann are you have to be like Maria hitting equals

true? Are you hitting equals true? Okay, and I'll go back and I inspect that star rating, which it the pain was actually going to tell me that this note is no longer exposed because Aria hidden is true on one of his ancestors. So this is actually a bug that I have encountered on a real site actually works on the IRS site a couple years ago. And when I was working on that site and I was like, it sounds like it's huge. It's pretty complicated. Someone left an aria hidden high up in the page and I spent literally an entire day turning on my screen reader trying to navigate in

figuring out like why is like half the site being skipped and it's cuz I didn't have a panel like blisters of tell me how to hate someone left an Oreo hidden somewhere. Some said I had to just like read through the HTML for most of an afternoon. I thought it was a screen reader just like they're having a super super helpful. Switch back to our audit one last thing I want to show you is are here where it says we have some rolls that are not valid invalid are your roles on a control? Put on this element and see what's going on

here. So she scroll it interview. And I zoom out of it. Okay. So what's telling me is this button down here in our in our product of the month. This add to cart button has some sort of invalid roll being applied to it. I can use my accessibility panel to inspect what's happening in the accessibility tree. So in this case, I can see that they've refused to give to build this control already a little questionable since it's button. But okay, let's do let's let's go with this role on it. And if I look in the accessibility tree, I can see that even

though they've added a roll this element computer control is generic container, which is basically the role that we use as a fallback if you're using with his divorce pan or any sort of just like grouping elements thing right at work. If I throw down a bit more I look at my res resection, maybe some y'all can pick this out the Adam Carolla, but they may be misspelled it since it a button with two T's that use one key. What song is the French spelling? I don't know if there's an extra key and fix that. Okay, and now in our family tree the element is showing

up correctly means that it's got a name, and things like that, right so I can we made Lighthouse happy. You're out there thinking like, hey, dude, like the first rule of Aria is don't use Aria. If you can avoid it just telling you is it okay if we can make this an even nicer experience maybe instead of adding this like roll two dice control. Let's get rid of the role and instead of using a div for this element, right? Okay. Now it is a bit better even write this is probably a nicer experience with across-the-board. It's probably going to work better with a keyboard even right? Cuz

you's a button element. You haven't Handler someone you know focus is the button hit the spacebar. It'll run your aunt. It's going to be a unique very cool Behavior the button elements. Have you don't get that from using a day over a span or anyting for birth control and McAllen around but I'm not actually seeing any sort of focus indicator weird. So alright no fear looks that let's inspect the element again will switch by Stiles tab. I'm not going to force a focus dial on this control to figure out what's going on and I'll go and I'll look through the styles that are being applied

when the element has focused and maybe some of y'all seen this one before so they have gone in and applied Focus outline none to the entire site will see what's up with that then click on that and inspect it in my CSF inspector and oh I what's this? What's this comment about the top? So it says no or designer says it has to stay or else it looks ugly. All right, cool. So maybe some of your had this debate before within your team? Books that life can be one of those contentious things that people butt heads about, you

know, someone using a mouse they might put on a control like a button especially like a custom button. They might not be expecting to see a focus belt line to see one. They're not sure if the control broken is it stuck did I get a break something they might file an issue against the site right on the other hand. Someone's using a keyboard to navigate your site Focus indicator for that is incredibly important. It is acting as their mouse cursor is telling them what they are about to interact with on the page, right? So you want to make sure if someone needs a focus indicator that they actually

get one. Otherwise it's as if you just hitting their Mouse pointer writing that would be super annoying. So what are the things we've been working on is a new CSS pseudo class to see if we can improve on the current state of focus styling cuz right now it seems like we're often at an impasse. So we've been working on it called Focus visible. And focus visible matches when Focus matches and the browser has decided based on a heuristic that would be beneficial for the user to see your focus indicator. So for instance, if the browser can tell if a user was just navigating with a

keyboard, it's going to say hey, you know what, they would probably benefit from seeing a post indicator in this case. So what's what's give him one? That means man if it's not going to show up if a user is using a keyboard or something like that, then we can make a really noticeable really good Focus style Rings really watered-down focus styles that just aren't actually that effective are good. So in this case, we can actually use like a pretty good once outline for pixels dashed dark orange something that should be really really noticeable and

I'll go back to my control here. And I know is I'm tapping I have a very clear Focus indicator being applied to all of my controls as I'm using the keyboard update. And then we can differentiate, you know, if someone's using a mouse, right? It's not going to play it in that case. They can be very selective about how you apply this. Now. The other important point is that as I said, this is using kind of a heuristic built into the browser which means a user could go in and do we have not done this yet. This is where we'd like to go to go in and add myself or

maybe they said some preference of the operating system level where they say. Hey look regardless of my input modality regardless of them using a mouse or keyboard or stylist or whatever. I always want to see a focus indicator because I find it very helpful for me and helps me maintain my contacts on the page so we could go in set that setting could force Focus Isabel to always match, right? There's a lot of opportunity to do cool stuff there. All right, so that about covers it for our lighthouse on it and for focusable. Can we switch back to the flights now?

So if you're interested in Focus visible, you can actually try it out today. So it is behind a flag in Chrome 67. So to go to Chrome / / flags and enable experimental web platform teachers, you can use it just as I was we also have a polyfill which is available so you can try it out on your sites today and get cross-browser support. So this is up at github.com w i e g transfer web incubation Community groups. So get WIC GA Splash Focus dash visible so different issues or do you just have feedback

on like the direction of the standard please like come leave those comments on the GitHub issue or so, I got to get up Rico like we really really want that feedback. That's why we're doing it in the WIC G this way. If you're interested in what we were talking about Deadpool's wise we have docks for that as well. So that is up at Bentley / devtools - 11 wide. So this is going to cover everything I was talking about today. There's also some some video tutorials that'll walk you through all the same things. I was talking about this afternoon as well. Talk about the future of web accessibility

AP is there any Thanks very much. Rob what I'd like to talk to you about today is the accessibility object model. This is a proposed JavaScript API that we've been working on with our friends at Apple Mozilla and others in the web standards Community. What this is is an API to allow you to modify and explore the web accessibility tree. And here's the problem. We're trying to solve if you're building a native app right now. You can build custom elements and you can even kind of

do an entire custom drawn UI and if you want to you can make that accessible using low-level primitive allow you to basically create your own it but he tree and respond to events and I kind of customized the holiest man and some Advanced ABS do that now but it hasn't been possible on the web. So the object model is going to solve 3 problem the first system fill in the gaps in Aria Aria is what we have in the lab right now, if you're building custom elements, if you're like doing custom things on the side and you didn't make them accessible and it works in many. But there's some things that

native elements can do to be accessible that you can't replicate with a custom elements. We need to solve that. The second thing is that if you're doing this custom you are like I was talking about if your investor webgl SPG, do you think Dom elements and kind of unique way? It's not always easy to make those accessible without lots of hack and what's really needed. Sometimes. It's just the right API to say, I want to write my own accessibility for that. And then finally they will let you poke at those accessibility properties from within JavaScript and test them and see how

their main computed and explore the accessibility tree from your page but hasn't previously impossible from within your own page. So that's a broad outline. But I think the best way to explain all of that is really to give you some examples of the star rating add another page and I'd like to go into a little more detail and Ivan to see how we can improve the accessibility of their back to the demo machine. So here's the star rating of Jaden Robert E showed you what the HDMI for this looks like, but the first thing I'd like to do actually is just view the

source for this page. I'm going to search for the red star and I'll stroll on this a little bit. So you can see that this is a custom element. In fact, the only thing in the H2O just as star rating and there's an aria label by so that is associated with context on the page. This is like this is the beauty of custom elements write all of the style of the behavior is encapsulated inside this tag, and that's great. But what does it look like when we inspected it? All the extra out to be attributes were sprouted. It's got a role and

Aria value now and all these other things where did this all come from what I mean, you know where it came from. I just want to make it accessible, but it's a leaky abstraction. Let's go back to the slides for a minute. So this is what we have in our HP mower. This is the API for this custom element. You just pay the star rating and you can optionally passed in a Min and Max going to current value. Everything else is supposed to work but instead it sprouted all these extra attribute. We got Arya Valium in our your

volume and I saw that this all makes sense to make it accessible but it's kind of ugly write it cut it up or down the code to Creed this custom element looks something like this for attaching Machado in the Constructor Newman. This is connected to the page was sending all these attributes on the host element. That's pretty much the way you make something accessible, but it's not very convenient and it's kind of ugly and he gets in the way of things developers want to do Summit accessibility object model you'll be able to write something like this instead we'll be able to set properties

directly on the shadow root. Now. This has like three advantages that I see the first this actually makes accessibility feel like a first-class citizen instead of just calling set out of you and wondering if you spelled incorrectly in auditing it later. You're actually setting properties director that you can go to complete these developer tools. You can directly Dino check these in your favorite IDE. And the second is that it's going to hide this leaky abstraction. So now all of these accessibility properties are encapsulated inside the custom element rather than leeks to the

embedding paid and then finally this allows the author to override for example of the author add that are labeled by to associate this label with this control with the label or if they want to change some of the properties or something like that. They can do that and not confuse the app speeds they at With the with the ones are kind of intrinsic to the custom element. So this is great. So this improves a lot of the problems of encapsulation, but it comes to customer and accessibility, but there more problems with custom elements. So what happens if we try to access the same

web page on an Android phone running TalkBack and we tap on this star Gadget. 0% zero Stars slider use volume keys to adjust use volume keys to adjust. This is a nice feature that talk back has do you land on a slider instead of needing to use gestures to try to control the value? You can just use the volume keys when you're focused on something else the volume keys go back to normal, but this is a nice feature. No previously. It hasn't been possible for a web application to interpret those keys properly because

it's not about the web application listening for the volume keys. I be the wrong solution TalkBack is the one that's listening for the volume keys and its pending an action to the running app saying hey increment or document the value of their current control. But if the web app doesn't have a way to listen for those specific events, it can't respond so that the object model add some additional types of event. So in the code for the star rating Gadget, we've got like some event listeners now like a key down listener some I listen to the left and right arrow key is in order to change the value

of that and next to that we can add a couple of extra event listener accessible Anchorman an acceptable document and this allows us to listen for those specific events that the native slider was already handling and now we can build a custom slider that does the same type of thing. Let's see what this looks like on Android now. 0% zero Stars Flyer use volume keys to adjust 20% 1 Stars lighter 40% to Stars Flyer today. Now I have to fix that bug rats S1

stars, but aside from that we've now kind of salt some of the accessibility issues and we can make a custom element that has the same accessible properties that in a valmet dies, which was a gap. One more thing. I looked actually do some testing on that. Go back to the slides here. So previously it would be really hard to write a unit test for this or to explore this without using some external tools and popping on developer tools. And we really like to be able to do this right from within your own JavaScript there right from within your own test. So

I'm going to show you a new API here called get computed accessible node, and it's a synchronous and so I'm going to put a weights there. And this is going to return a computer to accept one object. And this is kind of analogous to how you have tile and computed style the get computer access Leonard is telling you not to sweat out two Buttes were set on this but after the browser interpreted those in contacts and parse them and tried to make sense of them. What did it come up with in the end. And so we can query its role. We can query all of the are you attribute like value

tax and stuff like this and this is showing us if this is working correctly and we can actually write test for this Behavior. We can even do feature detection so I can for example try setting the role of something that's relatively new in the Aria standard, but I'm not sure if it's supported yet and then I could use computers accessible known to see if that roll was returned back to me indicating the Bowser actually understood that or if it didn't then I could run some fall back code that's going to be supporting other browsers. So there's one last piece of accessibility object model that

I was talking about and that is when you have really custom UI. Ahead and read this awesome human disguise and say my dog loved it and submit a review. Let me get this cool 3D animated chart going to make something like this accessible. Now. I want to be totally fair. This is a type of thing that comes up all the time, right? You got some content on your page. If you want to make it accessible. It's perfectly reasonable to say I'm going to provide alternate access to this. I'm going to provide a data table with the same

information. Is that bar chart? I'm going to link to that for everyone. Maybe we should do that also, but sometimes we actually just want to take that content and make it accessible and make it actually work with assistive technology. Wouldn't that be cool if we could do that? So let's go to the slides for a moment. Essentially what you often end up with his you've got the Dom that looks something like this. You got some elements that are already acceptable some paragraphs images. All those are working fine, but then you got a canvas doesn't have to be a candidate. You got some element

that's like a black hole for accessibility everything in that subtree is not accessible and it's not really something that you want to make directly accessible right? It's custom drawn. And so what you really want to be able to do is just add your own accessibility tree just create some elements you want to control where their position and you want to control their behavior. You want to say if someone is using assistive technology, this is the semantic and if someone is is not using assistive technology, then they get what's in the Dawn and they can kind of coexist peacefully and that's the

experience we want. So here's how this looks in the accessibility object model. To make this bar chart accessible. We're just going to create an object for each bar. So let bar equal new accessible know what it's like we're creating an accessible know it out of thin air. And then we're going to set on going to set properties in JavaScript basically analogous to Aria attributes. They're going to set the Roll Arena set the label buy a pending some strings together and then we're going to have heading this as a child of an existing element in the Dom and we're still working out the details

of what that syntax should look like. And then because this element is completely virtual we need to give it a bounding box. So I'm going to set the offset laptop with them height and we're going to set the offset parent that allows us to use whatever coordinate system is the most convenient for us. And then finally, we're going to add an event listener. I'm so that way even though some totally virtual element. If not corresponding to the dumb. It's going to be visible to assistive technology and we can receive events directly on this element. So let's go back to the demo machine one

last time here and see how this actually works voice over the built-in screen reader for Mac OS and try to interact with this is Blink 8 on how it looks an interview about me that I'm not going to use the voice over right arrow to navigate into this chart. I'm sorry. 354 Stars 3 stars 2 3 4 5 stars. So there you are. You can see there's an outline around these elements. It's describing the element that is a button so I know it's clickable. Give me the label I want this is a really

great experience noticed it. This is not in the Don. This is a custom accessible experience. I made its going to work for screen reader users or users with switch control all different types of assets and technology and we can really customize it however you want and we can even click on these. I wanted to get some different Behavior, press 5 Stars best version ever made on this site spdate. So there we are. I think this is really cool. Right? This is just a very simple and dumb example, but I think there's a lot of great possibilities. There are a lot of websites out there that are

doing some really cool things with a really custom drawn canvases pipefitter getting access to things that are using webassembly or running on a different machine or the new imported from old architectures and there was ways to make those but you don't want a bunch of times that you really want to create a custom accessible experience for that and that's what the accessibility object model is going to be going to provide. So inaccessible the object model you can try out a lot of the stuff. He's not today in Chrome. There's a command line flag. You can also try out some of this than

Safari technology preview. Some of this is also being implemented in Firefox by the best place to start if you're interested in this is just to find this back on get home. So get hub.com. W i c g that's web incubator community group. Flash arom if you go there you'll see the explainer which is kind of the most up-to-date version of how we think the syntax is going to look you can file issues. If you have ideas for things you like to do with this you like to tell us things that you're interested in promise you interested in solving RV find bugs and implementation

or in the back or something like that. There's also a can I use page to give you a really quick summary of what implemented in all the browsers right now, we're actively working on this but what's implemented is hence the lag behind the proposed impact. So give me an idea if you really want to try a demo on Chrome right now what's inside should you use even though it might differ a little bit from the direction? We're trying to going with the API. So check that out would love your feedback on that today. There's some more sessions on accessibility tomorrow to session

Bondi inclusive design applications the neuroscience and some smart hearing stuff in Android. And we also love to talk to you and that the accessibility sandbox Endo map to the office hours, but really to stop by anytime. We love to hear what kinds of things that you are working on an answer any questions you have and tell him I have a great exchange about accessibility web accessibility mobile all the types of things. Thank you very much for coming. This is Rob Dobson and Dominic mazzoni. Thank you all.

Cackle comments for the website

Buy this talk

Access to the talk “What's new in web accessibility”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Steve Orvell
Software Engineer at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Jen Devins
UX Lead Google Accessibility at Google
+ 3 speakers
Bethany Fong
UX Lead at Google
+ 3 speakers
Catherine Idylle
Interaction Designer at Google
+ 3 speakers
Andrea Wong
UX researcher at Google
+ 3 speakers
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “What's new in web accessibility”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8245 hours of content