Marcy Sutton "Accessibility of Web Components" (ID24 2014)
Let, me start. With. Us. Okay. Alright, thanks, for that great introduction Brian. So. I'm trying to gain control here, from Carl, yep. Looks like that worked ok. Whoo. Let's, go. Greetings. Marklar. I am, marklar, marklar. At marklar. Let's. Kick things off with a marklar, a marklar. Walks into a marklar. Marklar, asks the marklar do you have any marklar, the. Marklar shakes as mark Lawrence's, know we only have marklar. You're. Probably asking yourself, at this point what, the marklar, is she talking, about well. This, has been an exercise in semantics. The. Meaning of, our words there, they're, necessary, if, we use the same word for everything. Be any meaning, so the same is true with our HTML. The. Same word would be useless over, and over. So. Today, we're gonna talk about a new technology web, components, which, runs the risks of polluting the Internet with a bunch of marklar, soulless. Div tags essentially, that don't communicate roller, purpose, and non visual users. As. Bryan. Said I'm Marcy, Sutton I'm not, a freelance, marklar, but rather a full-time, developer, at substantial, which is a company, here in Seattle, I've. Spent, the past few months expanding, my own skillset while improving the accessibility, of web applications, such as a fitness, app for personal trainers and a, whiskey recommendations. App because. Everybody, likes whisky right. Why. Shouldn't those applications, be accessible to everyone I. Grew. To love accessibility. At my previous job because, it added a valuable dimension, to my work it made, it feel less, like an everyday grind. Little. Lag here. Let's. Go back. So. Here we're looking at the mage tml and, it's. It's, pretty bad there's, every. Tag in this HTML is the same tag name marklar. We're. We've, got a background, image of a marklar, gif some, text about apples. Secret, development program, for the, intel, x86 microprocessor. Which, was actually called mark our code name we. Also have a what, looks like a link but the tag name is still marklar, and this. Is illustrating. That if every tag name was the same it, would not be very useful we'd, probably cringe, if we saw like. Substitute, marklar, for a div and you. Would cringe if you saw this so, it's definitely, not something that we should be doing. Today. We're going talk about web components which, is really, awesome new technology, I should preface this by saying that I am NOT an expert I don't work on specs all day I'm just, really curious and, I'm passionate about accessibility. So. The two parts of this that we're going to dive into I'm, going to be, more, specific about custom, elements and the shadow Dom. So. What are web component, they're new standards, moving through the w3c. The. Five parts that it's our custom elements, where. You can actually create your own tags which is awesome shadow. Dom. Templates. Which, is, super. Useful for templating. Content, on the client side you previously. Would have to do. Something, with like. Scripting, either a PHP or using grunt or some way to include. Partials. Of code there's, actually, a client-side, method for doing this now with templates. HTML. Imports is kind of similar you, can include a partial, of code just. Like you would include a stylesheet and a link tag but. You can include an HTML, file and it's a really, exciting way to work. For, front-end development and then, lastly, one. Part of the spec that's still.
After You create this element there's. A method, that you can call called, created, callback and you. Can add code. To run after the element is created in this case we're creating, an a shadow root with. The. Shadow, root. It's. This dot create shadow root and the function calls and then, after, that you can clone, content, into your shadow Dom and append it to the document. So. What. This does in effect is, it takes your existing. Node, and. Appends. A shadow dom, subtree into, it so the kind of the two magic, things here to make shadow dom happen in the, created callback event, or the, the callback you can say create shadow root and, then. The shadow root you append, content. Into it and in. This case I'm also registering, a taco, surprise, element. But. I think you could probably append, shadow Dom. Yeah. I need, to go back and visit this but in the way that I always did it I created a custom element I was, curious if you could add shadow Dom to. An existing, element I think you probably can. So. I have a little demo. Given. That we have some, difficulties. Earlier, I'm not sure that how. It's going to work with voiceover but. Let's. Open it and. A. Little. Warning if you go and look at these slides and I'm going to post them at the end this, demo, has a giant, gif on it like, really really big I intended, to only look at it on my local machine, but. We can go and look at this little, shadow, Dom widget that I've created. So. I'm going to open the. Developer. Tools. Sorry. Did you want me to turn on voiceover, because this, is gonna have. To go. Um, you, know I don't, think we need to we can just we, party. At 9:40, I think we can probably just look at the dev tools here and I can explain what we're looking at. Okay, so we're, looking at this demo and my. Idea for shadow Dom element, is, that, what, if you had a button that had multiple states and you. Just want to be able to drop in a single button but make it so that the user has, to engage it before, they can do. Anything so maybe it's like a nuclear detonator, and you. Know those switches you have to like flip a cover and, then you, can turn on a button well, in this case I made a an, explosions. Warning. Button that you have to slide to engage it kind of looks like the, unlock. Screen on an iPhone so. I made, a button. That you can tab on to. See. If I can actually tap on to it alright so I'm on this button I could use the mouse but I also made it so that you can use arrows, so. If I use the arrow keys and. Wait. Should. Start moving. Any. Day you know I. Promise. I made it work with the keyboard oh. There. Goes there, good okay we're. In the next phase yes. We really want explosions. Before, I show you this, giant. Gift, I'm. Going, to go. Zoom in here and look at our we, made a slider control, and. There. Is actually a shadow Dom here I think, we need to go and able it which is worth looking at in chrome you can show shadow Dom by going to the settings and the developer tools. Already. Enabled, you. Know I'm curious. They.
Is In comparison, to polymer. Which is another really awesome pull polyfill. And platform, they, are, only ie 10 and above so if you were going to use this and you knew you if, you were going to create custom elements and you knew that you had to support ie9 I, mean. You can make a case that may be using. One polyfill, over another, it's. Worth looking at your. Analytics and. Seeing. Which. Browsers you need to support and go and look at what that polyfill, what. They can cover for you a, lot, of websites have, the luxury now of only supporting the latest but. It's. Not super realistic, I think we're leaving a lot of people out if we don't support, some of the older browsers in. The case of IE that's just always challenging, and really costly so the. Difference between 99, and a 10 can be quite a bit of development time. So. Some resources, here before, we wrap up I created. A little if, you click this. Short, URL it's HTTP. Colon slash slash tiny. Dot CC, slash. A11y. -, web - components. That's, the link to my slides and a, resources. File with a couple of specs and, nice. Websites I like looking at to learn more about the stuff and. I, believe that is it for the end if. You have any questions I am. All. Ears and, I hope to. Learn. More it's. Always a learning. Process because, like I said stuff, changes, so fast but it's. Not exactly solid, footing when you're doing a research on and working sex. Well. Thanks very much Marcy, I don't see any questions if you did not address during the presentation. I guess. We'll stick around just a minute if, anybody has any questions please feel free to mark, them down in the chat box any, box. Yeah. And if you ever have questions just, shout on on Twitter right I love Twitter it's such a great way to get in touch with browser, implementers. And. Spec. Writers and movers and shakers so if you ever have questions or, you. Know you saw something that's, changing, really already and you're like hey you should check, this out and reach out to me on Twitter it's at, Marcy Sutton I. Love. It so I would love to chat with you. Oh. Good. Question. I. Think. Yeah. Polymer, is 163. Camon if I'd. 48kg. Zip which is pretty big it is pretty big yeah and it's worth taking. A look at that in your environment when. You're creating. Projects. Like this, stuff you have to weigh like not, only browser support, but if you. Had. A concern, about performance. Or a load time you, should definitely, keep an eye on all of these resources that you're pulling in and if, there's one, polyfill. That does. The bare minimum number, of things you need and it's not as big and it supports your browser matrix. Then so. It should be decisions, that you make when you pull in these libraries, for. My research, I actually didn't use polymer. Tool platform, I only use their shin so that I could get support, beyond just, chrome latest and opera. I could, go and look at it in Internet Explorer. So. I think he wants more see again. Well. As she starts as she tries to get back and someone thank everybody for, any, presentation. Really appreciate, participation. I appreciate. You. Giving us this opportunity this. Concludes, the presentation for. Our. Accessible. Components.