On this stage about how to make your elements accessible and I strongly recommend going and watching it at home it’s an amazing talk and he tells you like proper concrete things on how to make it better I’m going to tell you two things that I got wrong because they were like kind of like really easy things for me to get right and I didn’t focus dates are only a big one focus dates tell you you know where the focus is on the page it’s a really ugly outline that in the 2000s it was really cool to set outon focus because nobody really liked it and that’s really terrible because if you’re not using the mouse and you’re just using the keyboard you’re not going to know where you’re on the page but even if you are a mouse user if it’s just like you remember the last time you had to buy something on the internet and at the end you get to the 15 field visa credit form where you have to like fill in on your information your shipping address your mailing address your name and your credit card number and you’re going to be tabbing to them I promise you you don’t actually click on every single field I know you and if nobody is telling you where the focus is on that page you’re going to start typing your credit card number in your like address field you’re going to get frustrated it’s already frustrating experience buying things on the Internet don’t make it worse don’t make bad you eyes for people I don’t care whether you use this outline or a different outline or you’re communicating focus in a different way as long as you are communicating focus in someone you can make like a nice ripple around it just make sure that if somebody is using the keyboard they know where the focus is on that page and the platform helps you with this tap index equals zero whatever you put it on that thing becomes focusable and by default at least it gets the really ugly outline it’s ugly but you’re doing better than not doing anything at all and the other thing is that you have documented active element which tells you where the focus is on that page which means now you can unit test this and automate this make a test where you have 17 of your elements and simulate tabbing through it and check that the thing is that the thing that is focused is the thing that you expect to be focused and it’s styled like you expect it to be focused unit tests are the best they make sure that your element doesn’t randomly break the platform also gives you Aria Aria is what a voiceover application is used to read HTML there’s a whole bunch of like documentation Aria I’m not going to talk about Aria I just want to mention that some elements have like built in Aria like nav and a have like extra Aria built in themselves and that are you labeled by is this really awesome attribute that is basically like Aria label on steroids because if an element already has a built in Aria label like input the native input does it uses the Aria label to read whatever you typed in it you can’t put an extra Aria label on it you can only have one so if you want to make the native input more accessible like say with a label that describes what it’s for are you labeled wise therefore that it always adds more information to any element so this is really important please make your elements accessible because if we’re going to make accessible elements we’re going to get accessible apps and the same thing happens for performance if you have fast elements you’re going to get a fast app and if you have maintainable elements you’re going to get a maintainable app and that’s really our goal as element developers we want to make the web better we want to make amazing apps for other people so that’s it I hope you got something out of the stock please go home and make elements and if you do tweet them at me so I can what remained thanks
Web components are the new shiny thing on the web, but what makes a good web component? How do you design a useful API that works for all of your users and all of their browsers? How do you make it render quickly and how do you teach people how to use it? After a year of working on the Polymer Elements, I’ve made sure to make all the possible mistakes so that you don’t have to. This talk is about the things I’ve learned from that.
Watch more Chrome talks at I/O 2016 here: https://goo.gl/JoMLpB
See all the talks from Google I/O 2016 here: https://goo.gl/olw6kV
Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
#io16 #GoogleIO #GoogleIO2016