Marcy Sutton “Accessibility of Web Components” (ID24 2014)

>> Let me start out. The Paciello Group is excited to present another webinar, which is our contribution to global accessibility awareness I’m director of marketing. I’m moderator for today’s session. We owe special thanks to Adobe for collaborating with us. We ask you if you pose questions you use the tab at the bottom or post it in chat so we could copy it in there. We also ask you post questions in the time allowed and we’ll have Marcy address the questions as we go on. >> Okay. >> Let me give you an introduction, Marcy. Marcy is a developer at substantial, a 60 person product development company in Seattle. She’s instructor and coach here of the chapter of girl’s development, it teaches women skills of software development. She can frequently be found riding a bicycle or playing Frisbee with a dog who has epic eyebrows. Without further adieu, here’s Marcy >> All right. Thanks, for that great introduction, Brian. So I’m trying to gain control here from Karl. Yep. Looks like that worked. Okay. Let’s go. Greetings. Marklar. MarkLar says we only have marklar. You’re probably asking yourself what the marklar is she talking about? This is an exercise in semantics, the meaning of words They’re necessary. If we use the same word for everything, there wouldn’t any meeting. Same with HTML. The same word would be useless over and over. So today we’re going to talk about new technology, new components which run the risk. It has a purpose for nonvisual users. As Brian said I’m Marcy. I’m a full time developer at substantial, which is a company here in Seattle. I spent the past few months expanding my skill set while expanding, with fitness application. And whiskey application. Why shouldn’t those be accessible to everybody. I agreed to accessible at my previous job. It made it feel less like an every day grind. Let’s move forward. There’s a lag here. Let’s go back. So here we’re looking at HTML and it is pretty bad. Every tag in the HTML is the same tag name marklar. We got a background image, some text about apple’s secret development program for the Intel 86 microprocessor which was actually called marklar, code name. We have a link but the tag name is marklar. This is illustrating if every tag name was the same it wouldn’t be useful. You would cringe if you saw this. This is definitely not something that we should be doing. Today we’re going to talk about web components, which is really awesome new technology. I should preface this by saying, I’m not an expert. I don’t work on specs. I’m curious and passionate about accessibility. The two parts, I’m going to be more specific about custom elements and the shadow dog So what are web components? They’re new standards moving through the wb 3c. The five parts are custom elements where you could actually create your own tags, which is awesome, shadow dom. Templates, which is super useful for template and content on the client side, you previously would have to do something with like scripting, either php or using grunt or some way to use partials of code. There’s a client side method of doing this. HTML imports is similar. You could include partial code, just like a style sheet and link tag. You could include HTML file and really exciting way to work for front end development. Lastly, one part of this spec that is still emerging are decorators I don’t know as much about them, but my my limited research made them look pretty awesome. The idea is similar in your CSS, how you might include a background image. You could include a snippet of HTML in your CSS and it would decorate your HTML. It is presentation related code. Rather than being limited to CSS styling or applying a background image, you could apply markup through your CSS. I’m excited to see more about decorators Why are we excited about this? Why two talks about it? I’m excited about them. As front end developers we love to talk about it. It means we could extend the Dom, we could create our own elements and we aren’t waiting for browser implementers to create the next form input or some fancy button tag. We could go and create our own. And in the case of shadow dom. We could minimize conflicting. If you’re implements a j plug in, you include somebody else’s Java script and yours is working because there was a conflict, maybe that plug in is polluting the global name space and that causes huge problems. The nice then about shadow Dom, you could incapsulate code to minimize conflicts. Same goes for your CSS. If you had a rogue plug in and what came with it, they define styles for generic H 1s and 2s, after you implement the plug in and it messed with your CSS, that’s a bummer. It overrides hell. If you could minimize conflicts but incapsulating your web components, that’s an awesome way to work In the case of custom elements, if we create our own tags, which I mentioned earlier. In this case, I think it would be pretty cool if you could make a taco button, when you interact with the taco button, it gives you tacos So here we have a big tag that just says S taco button. The dash is because of the requirement of naming your own elements, you basically name space them with a prefix and dash and the name of your element. This is going to prevent, in case they wanted to make a taco button later, I guess, we can create a collection of our own components, start with the prefix and then I see Dale saying, Chrome is removing the prefixes. We’ll see. That’s how it is now. This element I made, the taco button, if I tab through the page, this is my custom and and custom version of reveal JS for my slides. I added a few features to it. One of those was that every slide is visible if you if you just use it out of the box, I made it so only the current slide is visible. So let’s go on to the buttons. Give me tacos A little delay when I tab. So it is a little challenging to there we go Give me tacos. So I have this button, it received focus, it changed color, it has an outline. If I hit the enter key, sit and wait for the for the latency here But it should give us tacos any minute now. I sure hope so. Because it worked this morning. Give me tacos. Give me tacos. There we go. All right. Tacos. If we just keep hitting enter, we should get more and more tacos. Just going to let that go for a minute. Epilepsy warning, if case you’re looking at the screen. I hit enter a few times with the lag. So the idea here, I’m going to refresh the page so it is not so crazy. But with the taco button here, this is kind of a ridiculous sample You don’t need a button to give you tacos but one thing that you [No Audio]. >> Marcy >> I think we may have lost Marcy’s audio for a second. We’ll get her right back. Apologize for that. >> Marcy, we got you back? >> You got me back now? >> Yes, we do. >> I think sometimes this application just is like I’m done. And it restarts. All right. Too many tacos. I over loaded you with tacos. What I’m saying was, this element is pretty contrived It seems sort of ridiculous but it has the same elements of one you might want, which is an auto complete widget. There’s a user control, the button, you could swap that out for a text input or search input and as you would start typing in auto complete widget, it would make a request for pull back results and show them to you. In this case I’m showing you taco gifts. So something where there’s multiple parts and you always want it to do the same behavior, like make it a component that somebody could reuse and drop into a web page. That would be pretty awesome. So I am seeing in the chat that definitely not getting rid of the custom element from prefixes from Alex that works at Google. Yeah, keep an eye on that I haven’t heard one way or the other, except that’s how it is right now. So I mentioned marklar earlier. If we don’t do anything when we create these elements, they don’t have any meaning, they’re just tags. We need to add semantics. So how do we add semantics to these semantics to these elements. We could extend the native element and here we’re looking at Java script. We first need to create an object and we’re going to extend the HTML button element and its prototype, so we create a variable with an HTML button element prototype and then we apply that to an element that we’re going to create. So to actually to get the semantics we have to create an element and append it to the page. If you have an element that is already in your markup, it behaves a little differently. I think there’s at least in my testing, I found that I have to actually generate the tag and then insert it in the page to get most of the behavior. When you’re creating an element, you have to register the name, so here we are registering taco button and then we apply the prototype that we created in our object earlier. And then we append this into the page. So there’s some there’s some really interesting things going on here that are really important, rather than just extending HTML element, if you extend an existing element, then you could get some of its behavior. At least that’s the goal. So custom elements, right now, they don’t have very wide support. But I really like working with native elements, that’s what most of my research was done with. Even though there are two poly fills right now I’m aware of. Native support for custom elements is in Chrome and opera latest and Firefox nightly I believe or Firefox 30 which I believe is nightly and there’s a great site, are we componentized yet that I’ve been checking for some of this stuff. It is worth noting that everything I’m talking about moves so fast, it is really hard to keep up with it. I found that presentations I gave on this a month ago are already outdated. It changes fast. What is cool is browser implementers are hearing our call and making changes to the specs and the way they implement them. So if something, you know, for example, I’m hearing people talking about the custom element prefixes. That’s changing really fast. We have to keep our eyes on it and remember that what I’m talking about right now will change really soon. I mentioned two poly fills, one from Moos sill la called X tag, it has a nice library that gives you, rather than being up in your or up to your elbows in Java script, you could use a little bit of their their object creation method, so here we’re registering an X tag element, called X taco button I’m using the X dash. We do a similar thing, at least in my case, I extended an HTML, it should say button and it says div, HTML button prototype, if you put extend and the type of element you want to extend, that’s how you do it in X tag. I found it won’t run if I include extends button One thing that is nice about their library you get life cycle call back methods. Created inserted removed attribute changed. And you could wire up events really easily. So in the case of my taco button, I wired up a click event and a key down event, so I could make sure that my button would do what it is supposed to, which is show me taco gifts. So X tag is pretty cool There’s another one called polymer that I’m excited to do to hear Alex’s talk, because I used the shim to expand support to more browsers, but I haven’t done as much with creating elements in polymers, I used this to show that their extend method is different than the name registration at top. It is on the extend button I imagine you could do it either way. I’m interested to see what Alex has to add on this topic. It is pretty similar to X tag, they just structure their objects differently. Pretty awesome. The idea of a poly fill to add is that in the case of the shim, you can guarantee that the element the custom elements and shadow dump stuff that you’re using, you could add support to a larger number of browsers than just the three I mentioned in the beginning. The native support is pretty spotty, because these are such emerging specs. With a little help, with a Java script library you could expand support I’ll tell you which browsers they support a little later. So another way that you could you could add semantics is to use the child elements. So inside of a custom element, in this case, I’m making a taco surprise element and it doesn’t really have semantics itself from the wrapping tag. It is basically just a div right now and that gets read aloud as a group, at least in voiceover. So inside my taco surprise element, if I use heading tags and buttons and image tags, instead of making a div for a button, I just use a button, then I can guarantee that I get all of that behavior and it is interactive. That’s how you make something accessible. You just add semantics inside as the native child element And Dale is adding I like h 1 per page. I do I don’t think the HTML heading algorithm is really being used. We’ve kind of determined because screen readers aren’t supporting it, you’re kind of shooting yourself in the foot there, if you want to have a clear document structure. I personally believe only one h 1 per page right now. Another way I wanted to add this in here, to add semantics, you could always use attributes. Like if you wanted to add a roll, in my case, extending elements isn’t really adding the roll I found I need to do some more research and play with it some more. But you could always add an ARIA role. If there’s an existing behavior. In case of button, I could add the button and to get it interactive I could add tab index properties of zero. I personally believe that you should not use numbers over zero because it is too much to manage your tab order. So on the screen right now, we have the taco button element. It has a roll of button and tab index so it’ll be interactive. To register call backs and enable events, I’m creating an element but it is already in the markup, so I have found that I can register the element so that it doesn’t come up as an unknown element but in order to register call backs for events, I need to create an element and reference in my Java script but I could get it to read as button by adding a button roll. And Alex Alex is asking if I added the roll in the template or is the user adding those. A tab index I think would be a good candidate for adding Java script, so whenever you create the element, if you create a button element with Java script, it is certainly feasible you could add tab index with Java script and the same with the roll. I think it is just whatever gets read aloud in a system technology is what we should do. And if if if everything you’re doing would substantiate a button is in Java script, then adding attributes with it seems fine to me. The last thing the user would drop into their markup or the end developer If they could add taco button and then just the tag name, that’s less for them to forget. And we can just give them an element they can drop in. It comes with Java script, the script adds the necessary attributes, that’s a better workload because you accounted for that. And Mike Moore is asking would adding the roll help with the buffering and technology? That’s what I was wondering. In case of tab index, you could add it with Java script, but I would like to do more testing about the roll. That’s a good question. So wait a minute. We’re talking about all of this really cool stuff, what happens in an assistive technology. How do screen readers read these elements. We talked about semantics a bit semantics a bit but I think it is worth talking about how this stuff really works. Especially in the case of shadow dom. Learning about all of this stuff led me to read a lot more about trees as a data structure. And there are a couple of characteristics of trees that are worth noting. They have a root value and subtrees of children, so we could see on the screen I actually have screen shot from a book on the language. It has root node and branching off are child node trees. There are no circles here. They don’t meet each other. They branch off of a root node. It is an interesting characteristic of this data structure that we deal with every day as developers in the Dom. Browsers are also really complex applications. They’re some of the most complex applications out there. The rendering engine flow is super interesting when you start learning about web components because for me, and asking these questions about accessibility I had to know how they would be attached to the page and the screen reader experience would be and where does that come in the life cycle of this. This screen shot is from a really great article from HTML five rocks called how browsers work. It shows you how HTML is parsed and tokenized so they take every tag and create an object out of it and that creates the Dom tree in this flow. We’re looking at web kit specific flow, the Firefox flow is different Or the gecko. So when the Dom tree is created, style rules affect the tree, and so when these nodes are attached, if a if an element has displayed none, that can affect what a screen reader gets. That’s how we prevent hidden elements from being read aloud on a screen reader, if they’re not painted through this rendering process, then they’re kept out of the screen reader experience So the flow is super interesting to realize how Java script and styles affect the actual objects created and handed off to assistive technology. The intricacies intricacies of this I could talk about forever. I really recommend reading the help browser work article. I learn something new every time I read that. So getting into shadow Dom, what is shadow Dom, it means something is incapsulated by hiding a tree under a root. So there a shadow root is this new concept in shadow Dom. I hadn’t heard of it before. The shadow root is actually the root node of a shadow tree. If we go back to the trees we were looking at, there was a root value and then on each of the branches, those had a common parent. So if you added a Dom subtree and then put it in this new boundary, the root node of that is the shadow root. And the actual encapsulation boundary that is created, we call the shadow boundary and it is a separation between the regular Dom and shadow Dom. It is specified by a set of rules. Those rules seem to be changing quite often. That’s what I was saying with the specs, they change really often. There was a property that you could add in your Java script when you created a shadow Dom that was called apply other styles and it allowed you to cascade your CSS into the shadow Dom through from the larger document. They deprecated that and I yet to hear if they replaced it but it was useful if you as the document owner wanted your style sheet to cascade into the style Dom, otherwise when you create these shadow Dom subtrees, there are some CSS properties that cascade in and some that don’t. Like the font will cascade in from the larger document. I think some colors come in, but not everything. It is really strange. So which properties come in and which don’t through that boundary seems like it might change and this is the part of the of the specs that seem like we’re on solid ground. It’ll be interesting to see where we land with that. One other term I like to add is the shadow host which is the element hosting one or more shadow trees. So you could actually append more than one shadow Dom into a root node in your document. So we have a diagram here from the W 3 shadow Dom speck, and we could see a document tree on the left side and it has a shadow host, which if you think of a good example would be the video tag in HTML 5, to create a video tag, you just drop in the video tag, you don’t have to add the controls, the little speaker icon or any of that range stuff. So you drop in the video tag and if you have shadow Dom enabled in your developer tools, you could actually see all of the controls that are behind the shadow Dom bound shadow Dom boundary. There’s a graphic here from the spec that shows you the relationship between the shadow host and the shadow root and then the shadow subtrees which are the children of for example the video tags, shadow Dom. So it is worth going and looking at a video tag in a in Chrome or some browser where you could turn on shadow Dom and go inspect all of these. It is really interesting. So we’ve been using shadow Dom under our noses for a while. It is just now we could create our own shadow Dom. So how do you create one? We have Java script here. It is really similar to the custom element code that we saw earlier, except I’m after we create an element, and I’m just creating a generic HTML element, which is what most of the examples show you how to do, but if I needed to add semantics, I might extend a different element like an HTML button After you create this element, there’s a method that you could call called creative call back and you could add code to run after the element is created and in this case we’re creating a shadow root, with with the shadow root, it is this creates shadow root in the function call and then after that you could 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 two magic things here to make shadow Dom happen in the creative callback event, or callback, you could say create shadow room root and then the root you append content to it I have taco surprise element. I need to go back and visit this, but in the way 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. I have a little demo, given that we had some difficulties earlier, I’m not sure that how it is going to work with voiceover but let’s open it And a little warning, if you go and look at the slides and I’m going to post them at the end, this demo has a giant gif on it, really big, I intended to only look at it on my local machine We could look at this shadow Dom widget that I created. So I’m going to open the developer tools >> Yeah Hold on. Let me >>Sorry, did you want me to turn on voiceover because this is going to have to go through my >>You know, I don’t think we need to. We’re already at 9:40, I think we could probably look at the dev tools and I could explain what we’re looking at. >> Let me get the mouse and turn off my (Indiscernible). >> Got it Okay So we’re looking at this demo and my idea for shadow Dom element is 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 sure the user can engage it before they do anything. Make it is like a nuclear detonator, those switches, you flip a cover and turn on a button In this case I made an explosions warning button that you have to slide and engage It looks like the unlock screen on an IPhone. So I made a button that you could tab on to. See if I can actually tab on it. All right. I’m on this button. I could use the mouse, but I made it so you could use arrows. I used the arrow keys and wait. Should start moving Any day now. I promise I made it work with the keyboard. There goes. There goes. Okay. We’re in the next phase. Yes, we really want explosions. Before I show you this giant gif, 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 enable it, which is worth looking at. In Chrome, you could show shadow Dom by going to the settings in the developer tool. Already enabled. You know, I’m curious, they when you enabled that before, maybe Alex can answer this, have they started hiding the trees? There might be a flag required as well. What I wanted to show you here is, there’s a boundary here, we’re seeing elements, they’re appended into the page because this is after Java script and CSS do their thing like I talked about earlier, with the browser rendering experience, the screen reader is presented with a single tree. This is accessible because it has already like by the time the screen reader gets a hold of it, it is one happy tree. I like to joke about Bob Ross, the artist and how he would talk about happy little trees. There’s one happy tree because the screen reader is encountering the page as rendered. So here we have multiple buttons and we’re just getting one happy tree, which is awesome So yeah, we’re really ready now. The tools, that looks like we’re using the poly fill. So we’re not seeing the shadow Dom But the explosions, there’s actually a a gif that is supposed to load in the background. I like showing gifes, I don’t know if you caught on to that, the idea is I created a web component that had multiple parts and you engaged it, the use case would be creating a single tag that the user could have multiple states, but they only have to drop in a single tag. So it is a little contrived as well. But you could hopefully get an idea of why you might create a custom element or create a shadow Dom and in the case of shadow Dom, it would be to incapsulate the document subtree so that you don’t have interference with scripts or styles outside the shadow Dom boundary. All right. So current support of shadow Dom, Chrome 25, it has been in there for a little while. I think you have to enable a flag or turn on dove tools, it would render the things. Whether or not you could see the shadow Dom boundary and developer tools, that’s why you might need a flag but it enabling enabling shadow Dom in general to create the nodes, it has been in Chrome for a little while according to Canon usecom According to that this is where it is coming from. And Chrome for android as well, it is worth noting. So there’s lots of places you could go and check on support. So I link to those in these slides. For X tag, they with their poly fill, they expand support all the way back to Firefox five and Chrome four and as far as I know, you can’t add a shadow Dom through their line prairie, but you might be able to kind of hack it in there when you create a custom element and do a mash up of native Java script and X tag. I have a question to Angelina who knows more about that I’m curious to know if people are actually using shadow Dom with X tag but I couldn’t really find any evidence of that. So, with X tag, when when you use their poly fill, you could get support in Internet explorer back to 9, which is in comparison to polymer, which is another poly fill and platform, they are only IE 10 and above, if you knew you were going to use this and create custom elements and you knew you had support of IE 9, you could make the case using one poly fill over the other, it is worth looking at your analytics and and seeing which browsers you need to support and go and look at what that poly fill what they can cover for you. A lot of websites have the luxury now of only supporting the latest. But it is 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 really challenging and costly. The difference between IE 9 and 10 can be quite a bit of development time. So some resources here, before we wrap up. I created a little, it is a link to my slides And a resource that is filed 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. So if you have any questions, I I I am all ears and I hope to learn more it is always a learning process, because like I said, this stuff changes so fast, but it is not exactly solid footing when you’re doing research on emerging specs. >> Thanks very much, Marcy, I don’t see much that you did not address. Stick around a minute, if anybody has questions, please feel free to mark them down in the chat box and Marcy well be happy to address them. >> And if you have questions, go on twitter, I love twitter, it is a way to get in touch with movers and shakers. If you have questions, or you saw something that is changing really already and you’re like, hey, you should check this out, then reach out to me on twitter. It is at Marcy Sutton. I love to chat with you. >> I think he had a question. About size over. >> Good question. I think polymer is 163 k humidified It is big And it is worth taking a look at this in your environment. When you’re creating projects like this, the stuff you have to weigh, like, not only browser support, but if you had a 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 poly fill that does the bare minimum number of things you need and it is not as big, and it supports your browser matrix, then those should be decisions you make when you pull these in For my research, I actually didn’t use polymer platforms, I only used their shim so I could get support beyond Chrome latest and opera I could go and look at it in Internet Explorer. [No Audio]. >> I think we lost Marcy again. As she tries to get back, I want to thank everybody’s participation. This concludes the presentation for accessible components

Add a Comment

Your email address will not be published. Required fields are marked *