The bad news, however, is that, even with these improvements, a lot of websites still won’t magically turn into speedy experiences. I mean think about it for a second, if you had a bus station and click on a link in your Twitter feed, you wait five seconds.
You wait. 10, you keep thinking. It must be amazing content. If it takes so long to prepare and write, then you get pulled back into reality. A full screen interstitial asking me to buy sunscreen, please, like me, dialog that’s, set to scratch from the content and make the page so small, you can’t even scroll and as if that was enough, a bunch of competing analytics scripts in the background at party hard.
Every second and kill your phone’s battery, or maybe the analytics scripts, just want to stop the phone from suffering and put it out of its misery quickly. I really don’t know in all seriousness, though: all of this wouldn’t be such a big deal for the publishers of those sites. If you were just willing to continue to suffer, but you don’t you’re furious about the current state so furious, then you either don’t bother and click off and studies to just a 40 % of users drop off after just three seconds or decide to install an ad Blocker clicking off is a lose-lose situation.
You are frustrated because you didn’t get to read the article. Your friends post it and publishers are frustrated because they didn’t get a chance to show you other great stuff and relevant ads to help pay to create that free content. An ad blockers might work for you as a reader, but hand the business model of many publishers that depend on ads to help pay for the content offered. But here’s the thing, publishers, obviously don’t – purposely – try to slow down pages.
They add all of these extras to try to increase the monetization of their site and attract more and more readers to help keep the site on business, and then they end up in a tough spot where they feel they need to decide between improving the user experience Or focusing on monetization and user acquisition, these overloaded user unfriendly web sites aren’t a new problem and some have tried to come up with solutions.
The FIR our walled gardens that lock you to a specific content distribution platform. Now you have to implement a custom solution for every single platform and your content cannot be discovered through search engines or link to from other websites by by open web, or you could create a native app and lose even more advantage. The web offers like effortless entry without install or easy distribution of content not terribly attractive either.
We felt this was a problem in need of a simple and elegant solution, a new way to implement an issue, a beautiful, streamlined, wicked, fast content web pages. Without all the extra clutter that is built on the openness of the web and doesn’t try to replace it, it allows everyone to participate and collaborate that publishes platforms and developers all stand behind and benefit from. That’s short.
What accelerated in the open the EM project dramatically improves the performance of mobile sites on the web, often to the point where their load appears to be instant. It’s an open source initiative that relies on existing web technologies and is built in collaboration with many different partners. Many technologies today come with super complicated, build processes, but not so with amp. In fact, an amp 8 is just a normal HTML website with a couple of restrictions and extras no build process, no extra step, because of that it doesn’t require a lot of additional work.
Unlike having to build custom, apps and products for a myriad of platforms and social outlets, in fact, if your website doesn’t use custom JavaScript and is mostly static, you probably don’t even have to create a second version of it for app. Every amp document includes the MJS JavaScript library that delivers optimum performance by adding and validating a few important rules in your markup when looking at an amp document.
The biggest difference you see is that some elements, like the image tag, are replaced with custom elements. That’s done to ensure staying in Fastlane in two critical situations. First, it allows MJS to control the entire load chain and prioritize certain elements and requests over others. In practice. This means that most third-party content and elements below default I’ll load it after the main content arise.
So your users can start reading as soon as possible. Second, ms custom properties strictly required a width, height or other aspect ratio defining attributes to be set. This way, mj’s knows exactly how your page will look like before any assets are loaded and can layout the page. In advance, this prevents the famous flash of unstyled content, the ugliness of a half lured website. That then starts to jump around by loading more stuff, as well as the need to re-render and do additional layout calculations, a browser task that can be very slow.
Every single imitational addition to amp documents is carefully designed to end up the speed of the page 211 and implement rail. A user experience focus performance model, but the chrome team came up with and because MJS comes with a built-in validator that locks to the console. It ensures developers Fastlane as nothing is more frustrating than a speed regression you discovering month later on an end page.
The content is always King and the user experience is Queen no compromises. But if you now say wait, a sec sounds great for users, but how does this help publishers, consider this users love fast content and amp allows platforms like Google, Twitter, Pinterest or LinkedIn to know for a fact that this content is fast, which they can then promise To users in return, if I know it only takes me five seconds to read that article, I do it much more often with many more articles, I’m happy.
The platforms are happy because I’m happy and the publishers is happy because they get to show me more content and just like that everybody wins get started. Writing your first and page today by checking out two tutorials in the description or head directly to am project org to learn more
Thank you for coming to this 9:00 a.M. Session for the jet lag and insomniacs, and those of you often left from the party last night. So let’s talk about web components. We had a whole bunch of titles. For this talk, it doesn’t actually match. What’s in a program, my favorite was the me Annika school for kids, who went to web component good and do other things good too.
It was rejected and addy osmani suggested Miao Miao pro-tips Miao Miao, which is pretty much what’s going to happen here. So Miao Miao hi everyone, I’m Monica, I’m not Waldorf on Twitter and github in Internet places and officially at Google, I’m an Imagineer and that’s because I get very excited about emoji and I sort of like shout about it into the void that is Twitter, but what They actually pay me, for it is OH emoji, so fun thing about the slide.
I had to use Android emoji and not the Apple ones. It was mandated by legal and what I do is web components and for the four people in the audience. I think, as we did a raise of hands, we don’t know what that is. What components are a standard we’ve been working on so that you can write reusable widgets for the web, so you can make your own fancy parts and give it to people and everybody can use it.
I work on polymer, which is a library that helps you write. These web components, and in particular I write web components with polymer. We have elements like these ones that are like material design. For me elements we also have lemons. I don’t look like anything. We have a declarative, Ajax element that you can put in your page and get super easy, xhr requests and that’s kind of fun. So you might not think of yourself as an element developer.
You might think like you’re, a web developer, you make apps, but if you want to start playing with web components, I think thinking like an element. Developer is really important, so you might only make to make elements for your for your own application, but you’re kind of making them for future. You because future you is going to have to use these elements and if they’re crappy, future use going to have a hard time.
So I’m going to tell you basically all the mistakes I’ve made in the last year of making web components so that maybe you won’t have to do the same ones. So there’s like four things that I thought are kind of interesting about making web components you got to make an API that doesn’t enrage your users, and this is actually kind of interesting. You’ve got to maintain this element once you start giving it out people you got to make sure that’s fast and isn’t like slow like molasses and destroys everybody’s application, and you want to make sure that it’s accessible.
So these are the four things we’re going to talk about. So let me tell you a story in the 90s, we had HTML one and it was lovely and was basically like reading the paper on the internet. Things that you might see on a page were things like links and headers and images. If you were lucky and that’s all it happened, you opened a web page and you read it and I was pretty much it and in 1995 things got exciting.
We got HTML 2 and they Channel. We got three awesome elements, we got input, we got form and we got but and we got select and I think we found button well, input type equals buttons there. So now this meant that like websites could offer you interaction. You can type something in a text box and the website would react to you in some way and the reason why I think this is important is that these are basically like ogee web components.
There are little reusable widgets that the platform gives you and you can put in your application. That’s exactly what a web component is, and since 95, in the 21 years that we’ve had this we’ve come up with a couple of more web web components or like whatever you want to call them. We have article and audio, which are kind of awesome. Canvas is like an enormous framework in and of itself dialog in details, and things like that.
I’r really implemented in all the browsers and a lot of the input types aren’t implemented in all the browsers. So the reason why I’m telling you is that, even though we kind of had web components for something like 21 years, we’re not very good at making web components and I’m going to spend the next like 10 minutes telling you how input is really terrible. Because that’s one of my favorite things to do in life on the other side of the world, we have UNIX and here’s where, like begins to be a little bit of a flame war.
So we’ve had your NIC since the 1970s, and one of the things that UNIX is really good at is making reusable little programs that everybody knows how to use. These are the ones that I just like used, probably in the last week. These are the ones you’ve. Probably used ever in your life, maybe not till knit and lynx unless you’re playing a joke on somebody, but UNIX is really good at this. You use LS every day like if you use a terminal, you use LS every day and the reason why UNIX is so good at it is because UNIX has a philosophy about how to write these super tiny components, commands programs whatever you want to call them, and That’s what we’re going to talk about for a little bit, because, if you’re going to go ahead and right web components, I want you to think of what grep does and not what input does grep is a great example of our useable component.
Input is absolutely terrible. First thing so: yeah UNIX has like 17 bullets in their philosophy, and some of them are super meta, like value developers times over computers, which is great, and I don’t know what that means. But one of the ones – that’s the most popular one – is that your component should do one thing, and this is a hundred percent true of web components. If you build a component, it should be really tiny.
It should do the thing that it says it does and it shouldn’t do anything else. If you look at the cat command cat takes a file from your computer and spits it out to the terminal, it doesn’t try to print it. That’s what LPR is there for it doesn’t try to find a string in it. That’s what grep is there for it doesn’t try to sort it alphabetically, that’s what sort is there for cats takes a file and prints it to the terminal.
Input, on the other hand, has something like 21 types. I think today. Last time I checked, even when it started in 1995, it had eight eight types off the bat, that’s how he started the races and that’s really terrible, because they don’t really have anything in common. These input types others in they allow you to select a value. You have input type equals text ray just like mash keyboards and they appear on-screen.
You have the slider which, like you, drag a ball on a vertical slider and that magically picks a number. You have a color picker that gives you an RGB color. You have the map type, which is basically like an image map and where you click on that image is the thing that gets saved as a value. So again, all of these things they have in common the fact that they have a value. They shouldn’t be the same element.
They don’t even look the same, and then you start like painting yourself into a corner once this is your API that you started with. So here I’m creating input, it’s a by default of type equals text, so it’s an HTML input and because you can type in it – and it has a carrot, you can get where that carrot is and selection start is the property that you do this and then I’r going to change the value, the type to input type equals number I can still type.
I still have a carrot, but now, if I actually try to access that property, I get an exception. It’s not that it’s like a bad value. I literally get an exception. The browser panics this makes no sense from an API perspective. Both of these are an HTML input element. Both of these have the same prototype. They have the same property, and yet, if you access it on some types like most of the types to be honest, selection start just barfs on your console and the reason why this is happening is because input type equals text and imple type equals number should never Have been the same element, they were the same 11 because in 1995 we didn’t have JavaScript, we didn’t have polyfills, we didn’t know how to fall back to a default behavior.
So we’re just like we’re going to put everything in one element and it’s going to have a default value and it’s going to be great, but 21 years later, we’re still paying for these mistakes that we had to do in 1995. Because of what the platform was like, so this is why don’t look at input for API advice, because input makes mistakes all the time another one of the UNIX philosophies is composition.
Programs play very nicely with pro with other programs in UNIX. This happens with pipes, the output of any program can become the input of any program and everything works, magically and beautifully, and the way this works on the web is by sort of nesting elements together. So select is composable like select an option or composable. That’s how you can put elements in a checkbox and you can put in text and you can put in a button and you can put in an input and an image and can what do you think is going to happen here? Does anybody know what actually happens? Yeah, this happens, it’s amazing, so the input gets rendered outside of the select box, we’re not even trying there’s no image and with a button we’re just taking its text value.
This is not a composable element. This looks like it could be composable, and so I’ve had a chance to get it really right and they made a mess of it and the historical reasons here are again because in like 1995, when it came out, are you four on Windows didn’t know how to Draw select, select, combo boxes, otherwise, but 21 years later again we can do better and with polymer we did do better. We made our own select box, we called it paper because its material design and in the drop-down you can put on items.
So you can put in text, you can put in an input and you can put in a button and it looks like exactly what you would expect there is the text. There is the button there’s the lemon. I don’t know why you would put an input in a pop-up menu, but I mean you could nothing to nope nobody’s stopping you if you want to do that and that’s a composable element. So when you’re making your elements think about this, are you expecting to have children composed in there? And if you you, try not to make assumptions about them, try to expect sort of any types in there, because people are going to put inputs in your drop-down menus and you’re going to have to deal with it.
And this one leads me to extensibility, which is the code that you’re writing today should work in ten years from now, unless was written 40 years ago on a platform that is nothing like the Mac that I’m running it now and Allah still works. It probably had to be recompiled, but I don’t think anybody changed the source code dramatically. 20 years ago. We wrote forum and forum is the opposite of an extensible and plan for the future element, because forum only works with the input element and when I say it only works with the input I mean it is literally baked in the parser when the parser gets to The for form element: it only looks for input for elements that have the tag, input and skips everything else, and this blows for us as web developers, because what, if I make a super awesome input now that is like way prettier than the crazy native endpoint.
I can’t put it in a form because the form is going to ignore it altogether, so I have to like start hacking around it and make hidden input so that the form recognizes it. So, in contrast in polymer, we try to like not make assumptions about what sort of things again our element expects. We have the swipeable container, where anything that you put in it gets this like magical, Android, swipe, left or swipe right action, and this means that I can put in divs and I can put in inputs and I can put in polymer elements, and I can even Put in like web components that people wrote without polymer that a lemon doesn’t care, it accepts everything and that’s a really good element, because if it works today, it’s going to work in the same in the same way in like 10 years, when the Dom might change A little bit but the platform stays, but the elements stay similar.
So the point here is like to not make any assumptions when you’re making your relevance – and it’s very so. The way I interpret is that when you create your element, assume that it starts like sort of naked, without anything, it doesn’t have any property set on it. It doesn’t have any children, it’s just like born into the world, and then it starts reacting to things when properties change react to that.
Don’t assume that the properties are already set. If people add content to it, react to that assume that when your element starts up, it has nothing and you have to deal with everything that follows, and that means that pretty much in any way that people are going to use your element you’re going to be Fine, because you pretty much covered all your bases by just reacting to changes – and this also sort of leads me to this conversation about state, because, unlike UNIX and this is where UNIX wins, UNIX programs don’t really have any state, they start up.
You give them some input, they do something with the input and then they die and everybody’s happy, but on the web the input sort of lives there on the page, for as long as that page is open and you’re probably going to type in it, and it Has to somehow remember what you typed in it and that’s it isn’t, is internal state which isn’t necessarily bad, but what what you should do about it is that make sure that if your element changes the state internally, you communicate this to anybody.
Who cares you fire? An event every time this internal state changes and similarly you as a user, should be able to always change the internal state of this element in the same way that the element can do it and guess what guess? What input fails that so input type equals number? It’s kind of a good one, a good element, because in theory it lets you like validate when you type in it. So it lets you type in digits and a period for decimals and like the negative sign in a for exponents.
So it doesn’t. Let me type in Monaca emoji, which is great. I guess so, if I type in one two, three four, the internal value of the input is one two three four. If I type in nothing, the value is nothing, and if I type in junk the value is nothing wait what yeah. So it turns out, because this value is actually invalid. The input is going to secretly reset the value to the empty string, but don’t actually tell anyone.
This is going to do it internally and not fire an event about it and if you start with nothing and you type in junk, you as a programmer cannot detect this change, like nobody has told you that that anything has happened, but you with the eyeballs are Looking at that input and be like look there’s junk in it, you got to do something about it, but as a program where you can because input is like hiding, it stayed away from you.
So don’t do that don’t be input which is pretty much. The like point of the stock never be input, because nobody really likes surprises, like surprises in an API, are the worst they’re like finding that your cake is made out of kayo and not cake, and this is San Francisco. Everything is made out of kale. This is the new tragedy in my life, so remember how I said that the reason why we painted ourselves into a corner with input is because in 1995 we didn’t have polyfills.
We had to somehow have a default type on all these stupid inputs, and the only way we could do it is just jamming them into one object, but now we have polyfills, so we need to deal with polyfills, and the really important thing about polyfills is that If your element expects a polyfill, please for the love of God, do not include that polyfill with the element and here’s the story. So we have an element that uses the web animation polyfill with the web animation spec, which works on some browsers and not all of them.
So there’s polyfills for this and we were like we’re going to be so nice to our users and include the polyfill with this element and everything’s going to be grained you’re going to have a great time and then Chrome settings came around and they’re like. We would really like to use this element on Chrome settings, a page that runs on Chrome and no other browsers. Chrome has the web animation standard implemented, but because we jammed the polyfill in that element, chrome has to actually download the polyfill for something they already know.
How to do on every single page? That’s really great, so they don’t really want to use that element and they hate us for it um. So the moment you include the polyphen in your element, you take that choice away from the application developer. Maybe they want to use a different polyfill. Maybe they don’t even care about supporting Internet Explorer. Who cares? Don’t Jam the polyfill in there you’re not actually helping anyone document it, but it’s required, but let the user take care of that.
So what I hope you got from this last ten minutes is that input is terrible and you should not look at it for any API advice, and that group is kind of really good, because UNIX is actually really good at making this. So if you want to read the 17 full at least 17 bullets of UNIX philosophy, I strongly recommended they’re kind of really interesting and they’re, probably going to make you help better make you make better APs help you make better ApS, got it in the end.
Awesome. So we have an element: we’ve given it to people, it has a beautiful API, nobody hates us for it, and now we actually have to maintain it somehow. So the thing about maintaining your elements and why it’s important is that if you go on NPM and you download a package that hasn’t been updated in two years, this is going to give you like the creepy GPS like if nobody cares about this package – and nobody Is fixing it and I’m probably going to be running with a lot of bugs? This is the same with web components.
If you want people to use your elements, you got to keep your elements up-to-date, because that makes them cool and usable and one way we and polymer do. This is by making sure that we follow semver. Oh whoa, whoa, whoa whoa. That was exciting. We got there Samburu, I get excited with silver all the time, so silver stands for semantic versioning and it basically means that every of the every one of these numbers in these versions actually mean something they’re, not just random.
So the last number on the right here I have a tweet from Dave Mithen who makes fun of semver because no matter how what do you think you’re shipping you’re actually going to break your users. So you know keep that in mind. The last number means that this patch has a patch fix. It has bug, fixes it still backwards-compatible everything is a-ok. The middle one means that you’re shipping some features, but they still backwards compatible.
So if you’re using this version yesterday and then you update and you get the new version, your your app should still be fine you’re going to get new features, you don’t have to use them, but like everything that used to work should still continue to work. It probably won’t because you’ll write some bugs, but that’s a different problem and the first one is a major version. This means you’re actually introducing breaking changes.
So if somebody wants to pick up this new version, they actually have to do a little bit of work for everything to work in their application and there’s two things. I want to tell you about major version. Bums, one of them numbers don’t have meanings. Please do not think that increasing your major version is actually like a marketing ploy, or anything like that. Don’t get obsessed about this all you’re doing is communicating that this version has breaking changes, you’re going to have a bit of a hard time and the second one is just because you can communicate this breaking changes doesn’t mean you should have like really aggressive breaking changes.
Breaking changes are really terrible for your users. They have to do work. They have to like read the new API and figure out how you broke them and figure out how to like make their stuff work again. So I’m Palomar we try to be very deliberate. We haven’t shipped a major change yet because we want to make sure that, like the moment, we ship it. It’s like a write change and it’s going to not be actually very hard for users to update to it so be very deliberate about what you’re shipping.
In a major change, don’t just abuse it because you can’t communicate it. That’s what Ruby does um so now that we have cember, we can tell the users that you know this user. This version is going to break you or not, but the only way we’re going to figure out if we’re actually going to break users is by testing, and this should not be new to anyone. You’re right software, you tested duh, but testing.
Look. What is is kind of interesting, because what components are new, and I found that I had to test things that I did not expect that I had to test the first one is obviously the public API. If you pinky swear that a function exists, you should make sure the function exists and does what it says it should do. Duh umm and I’m trying to click now we’re having great times with this remote. I really like it.
So. The other thing is that you might want to start introducing this idea of like a private API. Javascript doesn’t care, so don’t worry about that one. But if you introduce a convent, couldn’t convention like underscore news private, you get to be responsible for less of that API. Like a lot of your configuration methods or any of like your internal functions, you don’t have to make them public because, if you’re making it public you’re responsible for them, but if you make them private, then anybody who’s using them.
You can be like listen you’re on your own. I told you not to use it. If you really want to use it can’t promise it’s going to be there same polymer, you use, underscores any functions or properties that start with an underscore or two underscores. If it’s a behavior, I private use them at your own cost. I might just delete them for shits and giggles. You should test your accessibility, so element should be accessible and I’m going to like rail on this one in about 20 minutes, but you should also test this.
You should unit test it because you don’t want to break it. We use the accessibility, developer tools. It’s on github under Google Chrome, that’s what this cryptic diagram means and they’re, basically an API that you can run as a unit test and every time you said something like roll on an element. It makes sure’s it like, runs 20 tests and make sure all the Aria labels are set up correctly and tab indexes are set up correctly and your contrast isn’t terrible.
So that’s really good. You can automate them. You should also test the look and feel – and this is where things get interested, because your vending elements that look like something the thing that they look like kind of becomes part of your cart. It becomes part of your contract with the API it with the element user. So I discovered this a super hard way where we had an element. It was a button and I thought, being extremely awesome and I changed the box sizing from content box to border box, and I was like everybody’s going to love this change and I broke like 15 people because it turns out if you change it to border box And somebody was sending a size on that element.
That side is now completely messed up and they’re going to have like adjust everything and add 20 pixels to everything, and I ship that as a bug fix – and it was actually breaking change. Go me and that’s because I don’t have any tests for the UI so make sure you actually test the UI, because you’re promising your user. That a thing looks like the thing. It should look like. Here’s a bunch of UI frameworks and libraries that let you make UI tests, I don’t care which one you use just use, one.
You don’t even have to you everybody’s, taking pictures of these nice. You don’t even have to use this one. You can literally do like get bounding client direct on your elements and make sure that the right size and like the font size, is the same. Do whatever you want as long as you test your and if I don’t remember, I told you, elements are composable and they like should accept children and they should like working other things.
So if your element should be composable and that’s the thing that you care about, make sure that you test it. If you’re writing something, that’s like a form put all sorts of things in that form and make sure it doesn’t crash. If you think is like an input, put it inside a form and see that works, fine test, your things, cool, we’re testing, we have silver, we’re telling the users we’re updating our elements.
Users, trust us they’re delighted with our elements are going to use them forever. We need to actually write documentation about it, um, because if you don’t WTF m, you can tell people to RTS em later so cover your bases. Now, if your element has any edge cases document them, I don’t care that your element is being weird if it’s in like RTL mode as long as you tell me about it, because otherwise, I’m going to write this like super-lonely stock over Stack Overflow post, that nobody’s Going to respond to I’m just going to be sitting there and be like it’s been 10 hours.
Why doesn’t this element work just document your is going to be great, we’re maintaining irrelevant. Everything is great. Let’s talk about performance, so performance has been a big topic at i/o performance. We want fast steps fast, apps, lead to user engagement, lead to more views, leads to me getting promoted and getting paid more. Everybody wants that. But when we talk about elements, performance is actually really important, because if you it doesn’t matter how fast I make my application, I can use rail and purple at everything if I’m building it out of really terrible and slow elements, there’s nothing that I can do, which Means that you, as an element developer, have to make to be very careful about what you put in an element because it’s going to screw somebody in a major way later.
So, if you think about your element, maybe it’s like 1 milliseconds fast. Let’s see it’s a checkbox and it takes 1 millisecond to paint because that’s what we really do, one thing: do it fast duh? So if you think about painting, if it takes one millisecond to paint your element, you might like high-five yourself and be like one. Millisecond is the fastest paint I’ve ever heard of in my life, I’m doing great, but if I have like a thousand pizza toppings on that page and they’re, all checkboxes you’ve now added a whole second to that page and a whole second to a web page is Actually enormous we’ve been trying to like save milliseconds out of pages, and you just made it so much slower, so focus on first paint and make sure that the first time your element shows up on the page is as fast as I can possibly be.
Steve are well on the polymer team. Has an amazing rule about this? The best to advise about how to make your element be fast is do less and be lazy. This applies to like any, that you want to be fast, do less be lazy? By do less, we literally mean that don’t do anything, you don’t need before. First paint, don’t like said magical handlers, don’t set magical Styles that are needed maybe later so we had this code a lot in a lot of our polymer elements were like when the element was being attached.
So when was actually inserted in the Dom, we were updating the pointer events to make sure you couldn’t click on disabled things, and we are, you know, adding click handlers, and this looks like very reasonable code right. It’s very short. It probably doesn’t take very long to run, but again, if you do it a thousand times, that’s a thousand event listeners you’re setting up before you’re painting the page, that’s enormous.
So what we do now is we wrap it in this like after next render? We do everything that’s needed for paint, this isn’t needed for first paint and everything that’s needed, like literally the tick right effort painted we do it after the next render – and this is really great because now my page paints really fast. My elements paint really fast and they’re interactable the milli site like instantly right after so everything is perfect and everything is fast.
Be lazy. Take sad one step, one step further, don’t do anything unless somebody acts chillie asks you for it. Don’t just like volunteer to do work, that’s bonkers! You would never do that in real life. I have nothing to do right now. Let me do some work. It’s great you’ll read Netflix. You know you do so in polymer. In polymer, we have a lot of polymer elements: they implement the material design, spec and the material design.
Spec. Has this thing where, like every time you click on something has like a really satisfactory poll that is a little jiggle and everything’s, really nice and fun. So the way we were coding it up is that literally every element had a ripple element inside of it check boxes buttons inputs. Everything had a ripple which sounds really great in theory, right like it should ripple, we should put a ripple element in there.
It turns out that’s crazy. Let’s go back to my pizza, topping analogy. I have a thousand pizza toppings, I’m probably going to click on like four of them, because I’ve tried to put all the pizza toppings on a pizza before and it is terrible. Don’t do it pineapple and mushrooms don’t go together. They go together with onions, though so, if you’re only going to like click on three things, you only need three ripples you’re now creating like 997 ripples.
You don’t actually need so we update our code and we do something else that where no element has a ripple when it starts up, but if you click on it, the first thing is going to do on that clicking will be like do. I have a ripple. No well, here’s a ripple make it jiggle. So now, in this enormous application, we’re only creating the ripples, we actually need or being incredibly lazy – and this makes everything super fast because I’m not just creating Dom nodes that are sitting on the page.
Doing absolutely nothing not even giving them access to Netflix do less be lazy, do less be lazy. This is your manager tattoo it somewhere and we didn’t just like come up with us one day. Well, Steve did he woke up he’s listening to like this weird podcast? I think that tells him that, but like we actually started writing tests for performance to figure out how this was going and there’s many different ways in which you can test performance and they’re all terrifying, because I’m actually terrified of everybody else’s frameworks.
So I have like two simple ones that I use and they work really well. The first one is console dot time so cause the whole time, takes a label and basically like between the first time. You call time and time end on that label. It calculates how much time does this cost and you can also nest them, so you can be like well. Creation took this long, but setting attributes took this long and the reason what causes all time is.
Nice is because you get dev tour. You get a timeline in the of tools and you can see like what’s actually happening here. This is incredibly fast because I was just doing random numbers in a loop you’re, never going to get code that runs in ten milliseconds like that, but yeah. So that’s constant load time. It gives you a time line if you’re even lazier than that, and you don’t want to don’t care about that aki-nee’s performance now, which literally just tells you milliseconds now milliseconds now, so you can do it before and you can do it after a task and see How long that took – and I think that you do inside, if you want to test your first paint – is that you want to create your element.
You want to attach it to the body and you want to do a giant hack. So let’s talk about this giant hack in the same way that we’re optimizing our elements, the browser has been optimizing itself because it assumes there were terrible developers which we are so just because you’re appending something to the body doesn’t actually mean chrome is going to paint It Chrome’s going to like wait to batch them.
If that’s the thing isn’t visible, chrome doesn’t even care if it doesn’t affect the layout, it doesn’t care and you can’t actually tell chrome to paint things so the only way we can we can time. This correctly is by sort of forcing chrome to relay out the entire page, which also forces it to paint offset with. Is one of these attributes that when you call it on a on an element, is a style attribute? It like has to recalculate the layout because it’s in reference to its parents, so that’s the one that I use pretty much anything with the word offset in it is going to cause a relay out.
You can Google for all the other ones. If you don’t like it, but the idea here is that, if you want to make sure your element has painted somehow trigger our relay out on the page and the follow up to that is don’t do this once do it like a thousand times, do it as Many times as you have time for, because if you only do it once anything could have happened in there, somebody could have sent you an animated gif to your slack blog, which slows down your computer.
The garbage collector could have run the garbage. Collector could have not run if you do it a thousand times you’ll get more accurate numbers. You actually get a good answer about how slow or how fast your element is at painting, and the reason why this is awesome is that now you can automate it. You can put this in a unit test. You can put it on a test that you run on every merge and then on every more.
You can be like well, this elementals, like 10 milliseconds fast yesterday and itself 15, and then you can ask yourself whether the feature you’re, adding or the bug fix, you’re adding, is actually worth this performance, constant you’re taking. So let’s talk about accessibility, there’s! This amazing quote about so anywho, but the conclusion here, just to like bring it home, is test your elements for performance make sure they are fast.
If your elements are have their ups really slow. I hate you and you’re going to slow down the web. Please don’t slow out. The web is really hard for all of us accessibility. So there’s this amazing quote by Cordelia Dylan, which is that accessibility is like a blueberry muffin. So the way you make a blueberry muffin isn’t by taking a plain muffin and a fistful of blueberries and jamming them in there and be like I made you a blueberry muffin, you made me garbage the way you make a blueberry muffin is by taking the eggs And the flour in the sugar and the butter and beating them together and adding the muffin the blueberries to this raw dough and putting them in the oven and waiting for 35 minutes, and then you get delicious blueberry.
Muffins accessibility is hard. You have to do it. The entire time from the birth of your element to the end of your element, in the same way that you make muffins, you can’t just make an element and the last day before you ship and be like, I didn’t, make it accessible. Let me jam some Eric: are your labels in there you’re going to make a terrible job about it, and the reason why this is important is that if you don’t have accessible elements, you’re not going to be able to make accessible apps? And if you don’t want to make accessible, apps you’re a terrible person, you should have meat making apps for anybody.
You should be doing something else. Thanks y’all Rob Dodson gave a really good talk yesterday at 9 a.M. On this stage about how to make your elements accessible, and I strongly recommend going and reading it at home. It’s an amazing talk and he tells you like proper, concrete things on how to make it better. I’r 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 outline none on 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.
The bad news, however, is that, even with these improvements, a lot of websites still won’t magically turn into speedy experiences. I mean think about it for a second, if you had a bus station and click on a link in your Twitter feed, you wait five seconds.
You wait. 10, you keep thinking. It must be amazing content. If it takes so long to prepare and write, then you get pulled back into reality. A full screen interstitial asking me to buy sunscreen, please, like me, dialog that’s, set to scratch from the content and make the page so small, you can’t even scroll and as if that was enough, a bunch of competing analytics scripts in the background at party hard.
Every second and kill your phone’s battery, or maybe the analytics scripts, just want to stop the phone from suffering and put it out of its misery quickly. I really don’t know in all seriousness, though: all of this wouldn’t be such a big deal for the publishers of those sites. If you were just willing to continue to suffer, but you don’t you’re furious about the current state so furious, then you either don’t bother and click off and studies to just a 40 % of users drop off after just three seconds or decide to install an ad Blocker clicking off is a lose-lose situation.
You are frustrated because you didn’t get to read the article. Your friends post it and publishers are frustrated because they didn’t get a chance to show you other great stuff and relevant ads to help pay to create that free content. An ad blockers might work for you as a reader, but hand the business model of many publishers that depend on ads to help pay for the content offered. But here’s the thing, publishers, obviously don’t – purposely – try to slow down pages.
They add all of these extras to try to increase the monetization of their site and attract more and more readers to help keep the site on business, and then they end up in a tough spot where they feel they need to decide between improving the user experience Or focusing on monetization and user acquisition, these overloaded user unfriendly web sites aren’t a new problem and some have tried to come up with solutions.
The FIR our walled gardens that lock you to a specific content distribution platform. Now you have to implement a custom solution for every single platform and your content cannot be discovered through search engines or link to from other websites by by open web, or you could create a native app and lose even more advantage. The web offers like effortless entry without install or easy distribution of content not terribly attractive either.
We felt this was a problem in need of a simple and elegant solution, a new way to implement an issue, a beautiful, streamlined, wicked, fast content web pages. Without all the extra clutter that is built on the openness of the web and doesn’t try to replace it, it allows everyone to participate and collaborate that publishes platforms and developers all stand behind and benefit from. That’s short.
What accelerated in the open the EM project dramatically improves the performance of mobile sites on the web, often to the point where their load appears to be instant. It’s an open source initiative that relies on existing web technologies and is built in collaboration with many different partners. Many technologies today come with super complicated, build processes, but not so with amp. In fact, an amp 8 is just a normal HTML website with a couple of restrictions and extras no build process, no extra step, because of that it doesn’t require a lot of additional work.
Unlike having to build custom, apps and products for a myriad of platforms and social outlets, in fact, if your website doesn’t use custom JavaScript and is mostly static, you probably don’t even have to create a second version of it for app. Every amp document includes the MJS JavaScript library that delivers optimum performance by adding and validating a few important rules in your markup when looking at an amp document.
The biggest difference you see is that some elements, like the image tag, are replaced with custom elements. That’s done to ensure staying in Fastlane in two critical situations. First, it allows MJS to control the entire load chain and prioritize certain elements and requests over others. In practice. This means that most third-party content and elements below default I’ll load it after the main content arise.
So your users can start reading as soon as possible. Second, ms custom properties strictly required a width, height or other aspect ratio defining attributes to be set. This way, mj’s knows exactly how your page will look like before any assets are loaded and can layout the page. In advance, this prevents the famous flash of unstyled content, the ugliness of a half lured website. That then starts to jump around by loading more stuff, as well as the need to re-render and do additional layout calculations, a browser task that can be very slow.
Every single imitational addition to amp documents is carefully designed to end up the speed of the page 211 and implement rail. A user experience focus performance model, but the chrome team came up with and because MJS comes with a built-in validator that locks to the console. It ensures developers Fastlane as nothing is more frustrating than a speed regression you discovering month later on an end page.
The content is always King and the user experience is Queen no compromises. But if you now say wait, a sec sounds great for users, but how does this help publishers, consider this users love fast content and amp allows platforms like Google, Twitter, Pinterest or LinkedIn to know for a fact that this content is fast, which they can then promise To users in return, if I know it only takes me five seconds to read that article, I do it much more often with many more articles, I’m happy.
The platforms are happy because I’m happy and the publishers is happy because they get to show me more content and just like that everybody wins get started. Writing your first and page today by checking out two tutorials in the description or head directly to am project org to learn more
Debugging than you need to this tutorial shows you how to make the most of chrome dev tools so that you can debug your JavaScript as quickly as possible. I’r going to use this buggy demo here to demonstrate all of the debugging tools and dip tools. I recommend that you open up this demo yourself and follow along with each step.
The link is in the description. Whatever issue you’re debugging, you always want to start by reproducing the issue. You want to find a series of actions that consistently reproduces the book in this demo. When I add five and one the result down here at the bottom is 51. Obviously that should be 6. This is the bug that I need to check down at this point. You might be tempted to use console.Log to infer where the code is going wrong.
Sure it may get the job done, but it’s rather inefficient. First, you have to find the relevant code which could take a while on a big code base. Then you have to sprinkle constant log statements throughout the code. Then you got to reload the page and look at the logs, but maybe the logs didn’t give you all the information you need, so you got to go back and add more logs and so on with dev tools.
You can pause the code in the middle of its execution, inspect the variables that are in scope at that moment in time and walk through your code, one line at a time open, dev tools by pressing command option, J on Mac or ctrl shift J on Windows And Linux, then click the sources tab. The sources panel is where you debug JavaScript. It has three main parts at the top left. Here is the file navigator pane, where you can inspect the files that the page uses after clicking on a file.
You can see the contents of it here in the code editor pin and down here is the JavaScript debugging pane, which you’ll learn more about shortly. Note that when your dev tools window is wide, the JavaScript debugging pane moves to the right. If you take a step back and think about how the app works, it’s probably safe to guess that the incorrect sum gets computed in the click event listener that’s associated to the button.
Therefore, you want to pause code right when the eventlistener executes event.Listen their breakpoints. Let you do exactly that. Expand the eventlistener breakpoint section then expand the mouse category then check the click check, box, dev tools now pauses on the first line of any click event listener that executes back in the demo, click the button again and dev tools. Pauses on the first line of this on-click function, the blue highlight indicates what line of code you’re currently paused on, if you’re paused on a different line of code press resume script execution until you’re paused on the correct line you paused on the wrong line, because you Have a Chrome extension which registers click event listeners on every page that you visit.
If you try the workflow I’m describing in an incognito window, you can see that you always pause on the correct line of code event. Listener, breakpoints are just one type of a breakpoint. Dev tools offers many other types. For example, you can set a breakpoint on a specific line of code or when a Dom node changes or when an exception gets thrown and so on. After this tutorial, I recommend checking out our breakpoints guide, which teaches you when and how to use each type.
The link to that guide is in the description too, I’m paused in the click listener, and now I want to execute the code one line at a time. The code stepping control is right here. Let you do that click. The step into next function call button to investigate a function further. For example, when I step into the inputs our empty function, it jumps me to the first line of that function when I’m confident that a function is working as expected, I can click the step over next function call button the function executes, but I don’t walk through It line by line, for example, if I click to step into the next function, call this line here would be highlighted, blue meaning.
This is where I’m currently paused, but when I click step over next function, call the function executes to completion and I pause them. The next line of the function that I’m currently stepping through last suppose, I’m stepping through a function, and I realize it’s not relevant to my bug. In that case, I can press step out of current function and dev tools executes the rest of the function. If this doesn’t make complete sense right now, I recommend creating a snippet, which is a little block of JavaScript code, that you can execute at any time set a breakpoint and your snippet and play around with the code stepping controls yourself in order to understand how they All work back in the script, I can tell that the bug is probably somewhere in the update label function rather than stepping through a bunch of irrelevant code.
I can set a line of code breakpoint right around where the bug probably occurs to do that. I just click the line number next to the code. This blue icon indicates that there’s a breakpoint on this line when I press resume script, execution dip tools runs all the code up until that lime and then pauses before that line executes over here in the JavaScript debugging pane. I can see the call stack that caused this code to execute.
I can click on the functions to see where each one got caught. The scope section shows me all the local and global variables that are currently defined at this moment in time. I can click on values to edit them, but I’m not going to do that right now. However, when I look at these values, they look suspicious they’re, wrapped in double quotes, which means that their strings. This could be the cause of the book.
I’r going to investigate this further over in the read expressions section here. I can read the values of variables over time. You can store any valid JavaScript expression here, for example, I click, Add expression, then type type of sum then press enter, and I can now see the value of that expression, as I suspected sum is a string when it should be an integer. Now I’m going to open up the console to test out a potential fix for the book when I’m paused on a line of code, the console has access to all the variables that are currently in scope.
For example, when I evaluate addend 1, it returns 5. I think I can fix this bug by converting the addend 1 and adding two variables two integers before adding them. So let me try that now yep that fixes it. I can verify that this change fixes the bug by editing the code directly from dev tools. First I’ll resume script. Execution then make my change, save the change. I press command s on Mac or ctrl s on Windows and Linux.
Then I click deactivate breakpoints so that I can test out the app without triggering the breakpoints I’ve set. Now the app sums up numbers as expected, all right, you now have an excellent foundation and how to effectively debug JavaScript using dev tools from here. I recommend learning about all the breakpoints that dev tools has to offer. As I mentioned before, we also have a JavaScript debugging reference where you can learn about literally every feature related to debugging in dev tools.
Links to both are in the description thanks for reading and happy bug, hunting
But if you think registration forms are difficult, we should talk about. Checkout forms a lot more form fields, a lot more questions, but I think that you’re going to see a consistent theme emerging through, like our talks here today, which is this one of let the browser help you. There are certain advantages that we have as a browser, especially when it comes to reducing friction and making life easier for users, especially things around repetitive data steps, things that the users can store inside of the browser’s, but we’re trying to do our expose api’s and give You tools to reduce, friction and make things easier for your users.
We saw it in Koreans, while management and we’ll see a very similar theme with what we’re doing in payments, but first a little user activity just before we go off for lunch, which are some questions. Okay, great so first question just curious: how many people here actually enjoy the process of buying something on the web using their mobile device? Okay, good yeah and some people, but by large? No and whether we should come talk.
I’d love to hear like what is that you’d like about buying things on the mobile web and what it is that you don’t as much a second question, and I would be really impressed here how many people can remember all the details of their credit card. I’r talking full 60 digit number really CVC on expiration. Okay, it’s more than I expected. I got to be honest, like okay, we’re still like under 15 %, but okay cuz I’ve even payments out for like 18 months, and I think I have yet to remember a credit card number, that’s great and then okay final question: how many people enjoy the process Of handing over all their sensitive credit card information to a random third party server I’ll get one.
It’s almost like. I’r asking these questions to lead up to a particular point, and – and there was a points and the reality is that most users finds payment difficult. They find it insecure and scary and frightening and they find the process of doing it on the mobile web, particularly bad, and so we had this number. We talked about it at i/o as well, and it hasn’t really changed, which is that on average, we tend to see about 66 percent fewer conversions on mobile than on desktop and again we think there’s an answer to that, which is all around again high.
Friction the difficulty and issues around trustworthiness and security, and so we’ll talk about sort of how we’re addressing those today and how we’re trying to bring fast, simple and secure payments to the web platform. But this is a little I’m a p.M. It’s a little bit too PME for me actually, and so I have a much better mission for us inside of the chrome team, which is we’re trying to save the world from annoying check out forms.
So I’m trying to save the world from virtual keyboards and having to memorize and all of those terrible things. I actually started this joke of the better payments Bureau a couple of months ago, and now it’s become like a thing so anyway, but actually Chrome has been fighting the good fight against annoying check out forms for many years. Actually, we start with autofill back in the day, you guys are probably familiar with autofill.
This is my one slide on it. It’s not really the topic today, but consider this. My 10 second plea to say: if nothing else leave today and set autocomplete types on your check out forms. It helps us it helps. The users helps the browsers and it basically ensures a hundred percent accuracy on autofill. I’r not here to talk about that today. I’r really here to talk today about payment requests, which is this new API that we’re building for the web to really help solve a lot of the problems I’ve been talking about.
But before I talk about what payment requests is I want to talk about what payment request isn’t and that’s, because payment is complicated. There are a lot of players in this space and I just want to sort of set up fronts and sort of help alleviate any confusion. So the first thing payment request is not a new payment method, so we’re not trying to create Chrome pay or browser pay or yet another X pay button on your website.
That’s not fundamentally our goal. Our goal is to help users pay, that they went the way that they want to pay and do it quickly and efficiently. Secondly, we are not trying to become a gateway or a process or or some entity that literally moves money in the ecosystem. So it’s not we’re not trying to step on any toes here or like enter into this ecosystem. We think that the market has actually done an incredible job here.
Already players like stripe and Braintree and others have done a really stellar job over the last couple of years of taking the incredible complexity of accepting online payments and making it really simple. They’ve removed the burden of things like acquiring banks and all the couples of PCI, and they put it all into a easy-to-use API. And so our goal is to ensure that whatever we do plays really nicely with all these gateways and processors.
But that’s not fundamental goal to become one. The thing about all these great new services, though, is that they’ve really focused on developers, which is great they’ve made your lives easier and it made easier for you to accept payments, but the user experience has largely remained the same. You have to go from the state where you know nothing to a user to everything and formfields tend to be the way that we do this.
So payment request was fundamentally built for users. I mean we think it’s pretty good for developers too, and it’s pretty easy and we’ll sort of talk about code samples. But fundamentally, like my goal, I think about users and how I can help them and help them get through these burdensome flows on mobile, faster and more efficiently. So what exactly is payment request? Well, pay requests, like I said, is a new standards-based, API and standards-based.
I want to emphasize that we joined the web payments working group almost a couple years ago now and every major browser is a vendor. We have financial institutions from around the globe and we’re trying really hard to build something that everyone can integrate, that all forms of payment integrate with and all browsers can do so that users on a variety of devices and ecosystems can continue to leverage and have the Benefit of it, we’re just in the early stages of it and sort of will talk about where we’re at, but that’s sort of fundamentally our goal, and so when we started to think about what design this API looked like.
We had two high-level goals in mind and they sort of reference back to my original question set the first one is we to build a seamless, easy-to-use, checkout experience on mobile? In particular, we wanted to make sure that users like could minimize typing and minimize friction as much as possible, and the second thing is we really want to bring more secure payments into the web platform. In many ways like the web is one of the the last places where it’s very commonplace to exchange over all of your sensitive information to some unknown third party, and even though there’s an answer to this from the payments community.
With regards to tokenization, the web really didn’t have a great answer for that, which is why we’re really excited that we’ve brought Android pay into the web platform and again we’ll continue to expand that. But this brings tokenized forms of payment. So in the events of data breach or other problems, you as a users are protected, but also it also reduces the burden for for you, as developers and merchants, and so those are our two high-level goals that we had and again the idea here, just at a High level is that, if you think of your traditional checkout flow, it looks something like this.
It’s you know anywhere from like two to five pages, maybe one for single page things and you have somewhere between like 10 and 40 form fields where you’re asking a variety of questions. Things like what’s your name, what’s your shipping address, what’s remail, what’s your phone number? What’s yer credit card number, what’s your expiration and then you have users who are like you know trying to like do all this on their mobile device and at some point they’re, like man and I kind of give up, and maybe they go to desktop later or Most likely, they don’t – and you know and Aaron talked a lot about the growth of mobile right, and so we really think we need to fix this and make this easier and the way this happens with payment requests is you can imagine that the browser sort of Plays this role and and helps facilitate checkout across this, the the highest friction point.
So we take that common set of data, those common things that you request and sort of leverage our strengths to make it easier for users to to be successful. So before I could show you a demo, I want to talk about what types of data is actually supported by payment requests. So the first one is probably a little bit obvious, but it’s a form of payments. So, at the end of the day, you need a way to actually request money from the ecosystem, so it needs some sort of form of payments.
Right now in Chrome, we support we support credit cards and Android pay. I put etc on here, because the is to support more but we’ll talk about that a bit more later, and so you always have to request a form of payment. You can’t call payment requests and not want to form a payment that would just be weird and then would just be request: arbitrary user data API. So the other big thing that we allow you to request is shipping address and shipping options so for physical good purchases.
You can leverage the API to say, hey give me their shipping address and then there’s a dynamic mechanism for you to take that address and then populate shipping options that have updated pricing, etc. You can also request a phone number. You can request a an email address, of course, for like sending a receipt or even prompting sign up afterwards and coming soon, actually, but not quite there, but in a couple of months is payer name support, and these are all flexible.
You can request any of these or none of these, if you want the idea is to support a broad range of of use cases out there. So if you’re like a ride, pickup service, you probably don’t need you. If I don’t need everything, but you definitely need. Let’s say a location like an address and a name, let’s say or if you’re a physical good you may may or may not need their payor name because you’ll get that from the shipping address, so it’s flexible and you can sort of accommodate experiences as as fits Your the business, but the really important point here, is that all of these data points can be stored and returned by the by the browser, so users, by and large trust chrome to store this data.
They trust us to store their names, their emails and even their credit card data. And so the question is like: why put users through the burden of a form that they have to fill out manually and, like you saw like sabine slide about like fat, fingering and the difficulty of mobile keyboard typing and those problems were multiplied across all those form Fields, so if you can save them the burden of doing that, we think it’s worthwhile and sort of payment request is really designed to do that.
But let’s go ahead and just let’s just going to sort of see it in action switch over to a demo here see if we can see all right, excellent, I’m going to you open up, Chrome on stable and I’m actually going to use the exact same shop. Api, that’s, oh and you see it, it auto sign man, you have to love and a good demo goes right, and but otherwise it’s the exact same website, polymer shop demo, except I’m going to go a little bit further and actually just make a purchase.
So I hit the shop now button. You know, I definitely don’t have enough. Google hoodies so I’ll, just source wet shirt, so I’ll just buy it yet another one. So it standard shop. You see that there’s like size and quantity. I won’t affect those, but you see that there’s there’s two buttons at the bottom there’s a typical Add to Cart button, but there’s this also. This Buy Now button that Buy Now. Button is based on feature detection, so we’re checking to see if payment request exists and if it’s there great, let’s leverage it and if not it would.
You would just see an edit card, but I’m going to end use the rapid checkout approach, and so I tap on the Buy Now button and you see that this this payment sheet slides up from the bottom. This is a payment request in action, so you’re looking at sort of natively drawn UI, it’s controlled by us. We can through it, but it’s populated with data from the merchant. So you see that my total amount is there $ 22.
15. I defaults to my form of payment that I prefer, which is android pay. If it’s available only cuz, it’s faster and more secure. You see it they’re also requesting my email address for the purpose of sending a receipt, and the only thing I need to do here is select. The shipping address it’s very difficult to ship, a sweatshirt to someone. If you don’t know where it goes so I’ll tap on that you’ll see that the payment chief slides up to full screen – and it has my addresses, automatically populated for use.
These are our two Google offices here, so I’ll go ahead and shift to the one in San Francisco, where I work, you see that when I do that the shipping options are automatically populated there, and so we have a free shipping in California option or in Express Shipping, and if I change those it will dynamically change the price, so you can see here that express shipping changes, but of course, why would I pay more I’m going to go back to zero? That seems to make a whole lot more sense to me and now I’m ready to pay.
So we just have the pay button and then you’ll see the Android pay screen slide directly up we’re running the test app. So it says unrecognized ooh, you guys wouldn’t have that and because I’ve actually authenticated in the last couple of minutes. I don’t even have to do any extra authentication on Android pay I’ll literally just tap the continue button. A responses comes back and the transaction successful so pay with Android pay, no keyboard, no typing.
All I had to do was tap and select and confirm my shipping addresses so really great, really seamless, we’re really excited about it and just to show you that if you don’t have Android pay available no big deal, we can always change our form of payment and, If I didn’t have Android pay, I would just default back to my credit card, in this case, a Visa card that I have once again I’ll select my shipping address and options.
I hit the pay and the only thing the only keyboard we can’t get rid of is the CVC input everything else we have so I’m going to do one two three. I used to do like a live credit card on this and I discovered that what that didn’t work well for me, so I’ve switched to a demo card but either way the same. The same concept applies, we’ll talk about what’s happening behind the scenes, but this is all client-side basically, so it’s all happening super fast and pretty great they’re really excited about that.
And now maybe we can switch back to the slides and talk more about what it takes to make this actually happen. So how do you leverage payment requests? Well, it’s pretty simple. There are three parts to payment requests, two of which are that are required and one of which is completely optional, and so we’ll talk about them in order. The very first one are payment methods, so we need to know basically all the ways that you can get paid.
This could be a wide variety of things in the future, so it could be. I accept Visa and MasterCard and AMEX and Discover JCB UnionPay. It could be in the future, I accept Ally, pay or idea or PayPal, etc. As long as people are built into the ecosystem, like I said for now, Chrome we just launched so we’re, starting with credit card support, Android pay, and so it looks a little bit like this. So we basically pass in this thing called method.
Data and metadata is an array of objects and those objects. Each have a an array of supported payment methods. So you can see here that Mont. The first thing I support our credit cards. I support the standard for Visa Mastercard, Amex and discover. That’s it nothing else to do it, just as I accept this in the future coming out in a couple of months, we have added support for granularity for things like debit or credit or our prepaid, but for right now, essentially, when you say visa, we sort of Assume you can accept all visa and don’t make a strong differentiation there, but the second one is a little bit more interesting, and this is Android pay, there’s sort of an abbreviated version of this, but to support Android pay.
You see that there’s an additional key inside of that object, which is the data data, is sort of a generic object and it’s a payment method. Specific. The reality is that different payment methods out there have different dependencies different things that you’re going to pass in when you instantiate it by default, so for Android pay, for example, you always have to pass in like your merchant ID, you have to pass in what kind Of token you would like either network or gateway.
We don’t have a full example here, but and then what happens then is when a user chooses to pay with one of those forms of payment, we basically bundled it all up and pass it on to the payment. App so and then the payment app uses that data plus things like origin and assertions from chrome to basically verify that the payment app is the right one, and so the payment can can continue. So it’s pretty simple, but the idea here is that you throw everything you can at the browser for ways that you accept payment.
So if you can accept a like a hundred different ways of paying around the globe, tell us a hundred ifferent ways to pay, because what the browser does is we find that spot in the middle between the set of ways you can get paid and a way That a user can pay you and give a user an optimized experience about the ones that make the most sense for them. So you solve, for example, in the demo that Android pay and a Visa card were available, but let’s say that we had removed visa as an option, then visa just wouldn’t show up, because that doesn’t make any sense and so for, as you go across the globe There are wide variety of ways to pay, but we recommend giving us all to them and then we’ll find the best experience for the user to optimize around their preferences, their defaults and what? What is the best thing for them? The second bit of data is also quite important, so now that we know how I can pay you, we need to know how much money you wants to get paid, and this is what this looks like great.
So the first thing, the most important thing that’s required is this total attribute three parts basic. There are two parts really. The first ones are label, so we customize this. So if you tell us, total will display total, but you this could be like authorization donation. Whatever you want – and you have to, we have to know an amount and the amount is compose of a total amount of money and an underlying currency code.
So we know, for example, or the underlying payment app that we transferred to knows what currency to charge in we’re also to support display items. So, just like I showed you like when I tapped on the total those line items. I came down that basically told you how the total amount was reached this you can’t. We also support this. It’s a wholly optional. You can pass in. You can pass it if you want or ignore it.
We recommend it it’s nice to give a high-level overview to a user about the things that inform the total amount, things like the subtotal tax, shipping, cost, etc. Less of like a full itemized receipt and again in more of like a high-level overview, one important point payment request does not do math we’re not good at floating point math. So if you pass in, you know, you have two line items that sum to five and your total says four like we’re not going to throw anything so you’re totally in control of this thing.
So just keep that in mind and they’re by the way it might be some use cases where it makes sense for those not to a line, but by-and-large just want to point that out. The other point to note is that transaction details can also contain shipping options, and in this case, if you put them in there by default, we support default shipping options. We only recommend you use this if you’re highly confident that your shipping options will not change, then they’re not dynamic.
So if you support, for example, world wide free shipping and it never changes, no matter what the address is feel free to default populate this. But if your shipping is dependent upon a user address, then we recommend waiting until you’ve gotten a user, a user address event which we can talk about a little bit and then you can use that to dynamically query, against whatever service you use to calculate prices, and You can repopulate this and that’s the important point that basically the transaction details object can actually be updated and overwritten throughout the lifecycle of payment requests at certain events and points.
So if a user changes their shipping option, you saw like how, in my demo, when I changed my ship, the price change and the list items changed. That’s because when that event took place, we repopulated those set of transaction details, and so you have that flexibility in control on those events, and so that’s how we get sort of that dynamic pricing model that exists out there and so again don’t do default shipping options Unless you’re highly confident they aren’t going to change and the final piece is the extra information, the optional set of options, and that’s that things I talked about user address, shipping support, name, email and phone all entirely optional, but definitely useful.
I think there was like sort of this myth out there that the the only drop-off point in the funnel is the is the process of putting in your credit card, but really like the entire checkout. Funnel is well a funnel and so like wherever your users. Experience. Friction and there’s a step. Others are drop-off, so we highly recommend taking advantage of these these different pieces, and so there’s a few that we support, like I said, and it’s as simple as passing in just a bunch of boolean’s.
Basically, do I want shipping? Yes, do I want email, yes, etc, and you can again, these can be variable, so you can say I don’t want shipping, but I do want a name and phone number or you can say I just want an email address to send a receipt to. For example, it’s completely configurable and again. The idea here is to support a wide variety of use cases. Something funny that is minor that we have coming soon in the next couple of months is we’re adding support as well for a shipping type value.
It’s pretty simple, but the idea here is that let’s say you are buying a pizza, one does not ship a pizza right. That’s just weird like we deliver pizzas, and so it’s a very minor feature that allows you to actually specify shipping delivery or pickup. As like the address type, so we still call shipping address underlined in the system, but this way in the UI a user would see. Oh, I want my pizza delivered two three four five speed streets.
I don’t want it delivered or if you’re a ride-sharing service, for example, you can say pickup and it’s your pickup address where you’re currently at or located, and so that’s the value of that particular little thing again pretty minor but allows us to just have like a Better user experience underlining the whole system so now we just put it together basically, and we get that whole experience that we talked about, or I just showed you so.
The first thing we do is we instantiate payment requests and we pass in our method data way that we things that we support. We pass in the transaction details again how much money, what currency code, what line items do we once and then our optional options right? So in the case of our demo that I went through, that would be request, shipping, true and request email, true, but again that one’s completely optional um.
You see here. I’ve also added an event listener to my shipping address change and we support two events in the system: shipping address change and shipping option change. These are this: is that dynamic mechanism that allows you to receive the events parse out the new details? Let’s say so: if a user selects a shipping address that event fires, you can actually pull out that full shipping address.
We don’t do just the zip code because you can’t get fully accurate shipping information with just a zip code. So you get a full user address. You can use that at that time to call event update with this basically says: hey, you know browser, I’m thinking. I need to calculate this. You can call your back-end api’s and you can update resolve a promise with new transaction details. So again that updated transaction details object can now contain your updated set of shipping options, including the empty set of options and an error which says like opps.
Sorry, we don’t ship to you know wherever it is that you’re trying to ship to so that’s also supported and so and by instantiating payment request or not. There’s no UI. That shows it’s just instantiation when you want that actual payment sheet to slide up from the bottom. Oh, we called that show that show is actually our signal and we actually raised that payment sheet and put the user through the process.
That returns like a promise, and when that promise resolves you have a payment response and that payment response contains the entire set of data. It’s just a JSON object that contains the entire set of data that you requested so for a credit card. For example, you would know what the underlying network was so Visa, MasterCard, etc, and then you would see credit card number phone number, full, CBC, expiration, etc.
Think, like the same set of data, that a user would have typed out into your form, you’re now getting just from the browser as a JSON response, you can use that to basically send that response directly off to your gateway, your server or even let’s say in The case of like, like you know, scribe API is like directly to over to the API is for tokenization, it’s completely up to you, because it’s all plaintext these responses.
It’s important to note our our method specific. So if you selected Android pay as your form of payments, then when that response comes back, it’s going to look like an Android pay response. You’re going to be able to select this there’s a key and they’ll. Tell you that, oh there, the form of payment they chose was Android pay and then you’ll have to expect that the Android pay details object, looks different than a credit card, one which may look different than some other form of payment like an alley, pay, etc.
I mean in a good that’s because different payment methods have different requirements and are different systems and call things different things. The final step here is, we just need you to tell us to close the UI, because once you get this payment response back, we actually show us a little loading spinner and the little loading spinner is sort of waiting for you to come back and let us Know the the result of the transaction we highly encourage, but do not require that at the time that payment response comes back, you try to make the payment.
There are legitimate use cases where you can’t do this things like 3d 3ds flows, etc, but by and large, if you can submit, we recommend it, and so you call the complete you can call with success or failure, but you can also call it with nothing. This is basically an affordance for the browser to do like special UI considerations in the event of success. You know like a little animated check mark or something but yeah, it’s totally optional, but the important thing is that, when the UI closes will actually resolve that promise and that promise is your cue that the UI has been completely torn down.
So if you have animations or things that you’re trying to time with the close of that wait for that promise to resolve and then you’ll be guaranteed that any chrome UI has now been stripped from the page, and that’s it on with that. You basically have the hold experience, so in just a few lines of code, you basically get help user alleviate all that friction and difficulty I’ll type in all those annoying form fields, pretty simple, but also again, with Android pay and other future forms of tokenized payment.
You’re. Basically, getting easy tokenize forms a payment that reduced like the burden of CBC memorization, etc. So really excited about this, and this is all possible because the browser is sort of sitting as the middlemen. There proxying data back and forth between native apps on the device and and the underlying website and the developer. That’s requesting it. So my last few minutes here I want to talk about just a few UX considerations and forward-looking stuff.
So first one is my very bold. Hyperbolic statement to say, kill the cards, which is maybe a bit strong, but just sort of my way of saying if a user is coming to your site or you for a lot of users who come to your site on mobile, that only make a single purchase. Why put them through the burden of opening the page, adding it’s a card? Finding the cart page clicking the card page going to review page go to the checkout page, then.
Finally, starting the process there on mobile want to optimize their experiences. Payment requests allows you to do that quickly and immediately, so consider adding like Buy Now buttons directly to your product pages, especially on mobile, when it makes sense again. This moment won’t make sense for all businesses, but I would encourage you to go back and sort of check the numbers and see if, like this might be a powerful tool for you guys to leverage to help your users just a few other things really quickly that I’ve talked about – and you’ve heard mention here today – is thank progressive enhancement.
This is a new API. It won’t always be available, so you can’t necessarily completely depend on it, especially in a cross-browser way. Yet, although hopefully we’ll get there, so think what happens if it’s not available, you’ll still need a fallback flows etc. The second one, of course, is we encourage you to keep the set of list items high level, so don’t think of it like an itemized receipts. We don’t want the user to select this long scrolling list in the UI, if possible, try to keep it high level, subtotal tax things like that.
If it’s single item you can put it in there, but by and large we encourage high-level subtotals and things like that and then last one. Something to consider is that if you already have a user’s information – and you already have a credit card on file or some way to pay – I wouldn’t expect you to use. Don’t think you have to use payment requests like give the user the best experience they can and that means go ahead and just leveraging what you already have on file.
But if you don’t have anything and you don’t have the credit card or the credit cards expired, you need a new one, a consider payment request as a tool to help these users. You know we talked about. You know. We talked about sign up first right, but that might not always make sense for your business if you think about it, like maybe your your p0 or your most important thing is getting user through that checkout flow, then you can request an email address from payment requests And now all you need from them at the end of that funnel to sort of optimize.
The experience for next time is a password and so consider sort of leveraging this again. These are tools to help you be successful, so just a quick status update. So we are live in in Chrome as of m-53, so we’ve only been live for about, say, eight wait weeks now and it’s sort of a quiet launch. We had a great set of early launch partners that we worked very closely with and they integrated and tested and gave us a lot of great feedback again.
The API is still early. Chrome is the first browser to implements, and so we’re really thankful to all of these players for their great feedback and from it we’re actually making a lot of changes and improvements and enhancements to the underlining experience. And so I just want to talk a little bit about what you can expect to come soon, so the first one that we’re working really hard on is support for third-party payment apps.
As you go around the world. There are a lot of ways to pay in India. You know you have like paid TM and snapdeal, and all these other new emerging wallets and you go to Holland. You have ideal if you go into other countries, a whole new forms of payment that are not just credit cards and Android pay, and we want to be able to support all of this in a nice open way where we can support users from all over the Globe, no matter what, and so we’re really close to finalizing this and we hope to have support next year.
Secondly, we have a lot of spec and feature enhancements coming, so we have the shipping address types. I talked about you’ll, be able to call this within an iframe coming up soon, as well as much other small enhancements and improvements, and then we also have much of UX improvements, so we added a are scanning just recently, so you can now just like scan you. If you don’t have a credit card, you can just scan it directly into into the into the UI, so there’s things to make it faster, easier and fundamentally better onboarding flows and then just quick time lines here.
Just so you’re aware we’re sort of targeting in 56. That’s our January release as, like our next big major release. It’s going to have all these enhancements all these improvements and we’re really excited about it on you’ll, continue get updates along the way. This is all live in chrome, stable and we’d love to continue to work with you and get your feedback um everything I’ve talked about today is available online.
In a lot more detail, we have integration guides a bunch of examples in sample code where the phones come up, and then we also have a game start with Android pay. Android pay is really simple. With payment requests, it’s like less than ten lines. We do almost all the heavy lifting for you, so just a quick shout out there, but I’ll be around the rest the day I would love to chat with you learn about your challenges, things that you think you need from the browser ways that we can help.
You be successful, especially in checkouts, so thank you so much
So, for instance, I’ve got this input here, wrapped in a label and that’s going to produce a visual UI like the one that you’re seeing here this radio button.
But that’s also going to create a spoken UI based on the built in semantics of those native HTML tags. Now, if you’re not quite sure how all of that happened, or why those semantics matter be sure to check out our previous episode on semantic. So I’ll include a link down in the show notes and we can also maybe drop in an annotation up here for you to click on. I just I have some background on how semantics work and why those are important in the first place now.
This is all good and everything, but there are instances where a simple layout in native HTML just aren’t going to cut it and so to handle these situations. We have the web accessibility initiative accessible, rich internet applications, spec, which is a bit of a mouthful. So you oftentimes see this referred to as wai-aria or maybe just Aria, so audio works by allowing you to specify attributes on elements which then modify the way.
Those elements are translated into the accessibility tree. So let’s take a look at a really basic example. Just to show how this works, so, if you create a a plain checkbox a screen reader is going to announce it. As you know, a checkbox it’ll tell you what its label, if it has one like we do in this case, where it says, receive promotional offers and it’ll also tell you the the state of the checkbox right, whether it’s checked or not, but let’s say you’re in A situation where, for whatever reason, you need to implement your own check box using something like like a div right, maybe you need to style it in a really special way.
So, in this case, we’ve got a div checkbox we’ve created here, and the screen reader is going to give the user really like no indication that this element is meant to be a checkbox. It might announce the the text inside of the div there, but it’s not going to tell you the role of the element. I can say it’s a checkbox. It’s also not going to tell you the state so excited you sure is going to be able to see these visual cues and they’ll be able to figure out that this is a checkbox.
But nothing is going to be announced to our screen reader users and that’s a really big problem. So using Aria, we can actually tell the screen reader about this extra information here up at the top, I’ve got some custom checkboxes just created using gives down at the bottom. I’ve got some checkboxes using the native input element so using voiceover. Let’s see how these are announced differently: voiceover, I’m chrome, custom checkboxes in custom check intense group with three items there and then slices group with two items: heading ten times check, check box and then slices uncheck, checkbox voiceover off.
So you see there that the the div elements just are announced as groups. It doesn’t indicate to the user in any way that these are checkboxes where it’s the native element. It indicates it’s a checkbox and it tells you the state whether it’s checked or not. So, let’s see if we can add some Aria to improve upon this so over in my dev tools, I will select these the checkbox elements and I’m going to start off by just giving them a role of checkbox and I’m also going to give them a state Of Aria, checked of either true or false, depending on you know the actual state of the element there.
So if a role checkboxes to the one Aria checked equals false and let’s try it again using the screen reader voiceover, I’m dropping custom. Checkboxes 10 pens check the checkbox and then slices contract checkbox always go over all. So adding that role and Aria checked attribute causes the middle Union accessibility tree to actually have the desired role and state without changing. You know anything else about the nodes, appearance or its behavior, which is pretty awesome right, we’re just adding in additional semantics using Aria.
So in terms of the accessibility tree, what ru does is it really allows you to subdue like tree surgery? So you take the accessibility tree as generated by plain HTML. You add Aria to that, and now you get a different accessibility tree and it may be subtly different or it could be radically different, depending on what attributes you use, however, keep in mind that this is really the only thing that ru changes.
It doesn’t change anything about how the element behaves on the page. For instance, it’s not going to suddenly make your element focusable, it’s not going to add keyboard event, listeners for you or anything like that, or you does not change behavior in any way. It really only is for adding in additional semantics. So if you, you know, if you’re making a custom control, it’s really on you to make sure you go back, and you also add in that keyboard support so you’re kind of like maintaining that that consistent experience for your users.
So now that you understand more about what ru is and kind of some of the basics of how it works, I want to cover some of the things that Aria will. Let us do in our application, as we saw in that check box example. Aria can add semantics to an element where no native semantics already exists. So, for instance, you take a div element, it has no built-in semantics, but we can use Aria to be able to role.
We can use already to give it a check State, for instance, build a custom check, box or radio button, or something like that, or you can also be used to modify existing element semantics. So, for instance, let’s say I’ve got a button element that I want to. Actually turn into more like a toggle button, so I can on/off switch type of control. I can give it a roll of switch. I’m give it an already check state of true or false, and now I’ve sort of modified the semantics of this control, and now it’s more of a even more specific kind of thing.
It’s like a toggle button right to switch button. It’s important to note here, though, that the switch rule is part of the newer aria 1.1 spec. So, as I’m recording this, you know there’s probably a number of assistive technologies which do not support this role. Just yet, just like all web standards. Aria is you know, constantly evolving and advancing to try and keep pace with new UI patterns, so that’s something important to realise as well right, if you, if you come across an aria rule, you also want to check for the support of that role in assistive technology To make sure it’s widely supported, and then you can use it another thing or you can do is it can express semantics and UI patterns which really like don’t already exist in HTML, and I think this is where Aria kind of comes into its own Aria.
Basically, will let you create accessible widgets, which are not possible using plain HTML. To give you an example. Here is like a tree: widget component, okay, we can take an unordered list and add all your rules of we tree item and group and add an already expanded attribute to a few those children and now we’re expressing the more rich semantics of this tree element and Again, there’s no tree tag in native HTML, so it’s something that you know we wouldn’t be able to build otherwise without aria, which is really important.
Another thing we can do and as we saw this in our previous episode on labeling or you can add extra labeling and descriptive text to an element right to give that element an accessible name. So, for example, if you have like an image only button which doesn’t use an actual image element, so you don’t have access to an alt attribute or anything like that to put alternative text on it. You can still use Aria.
You can use Aria label to give that element its own accessible name, and that way you can have it be announced properly by a screen reader to those users, or you can also express semantic relationships between elements which go beyond just like standard, dom parent-child sibling relationships. So, for example, a more complex relationship is something like this element controls that element over there.
Even if they’re not like you know, direct parent-child or anything. So in this case right here, I’ve got a button which controls whether a particular part of the page is visible or hidden, and it does this in the form of kind of a disclosure widget. You can see here where it shows advanced settings. We’ve specified using Aria controls – that’s actually controlling this group of elements down here for these Advanced Settings checkboxes.
So even though they’re not parent-child, they’re, actually sort of like siblings. We can create this new relationship indicating this element over here controls that elements over there, which is really cool and finally, Aria, can make parts of the page live, so they can inform assistive technology right away when something changes – and we saw this in our previous episode On building alerts, so we add role equals alert to some element.
We drop some new content into it and then it’s going to announce that immediately through assistive technology to the user. So are you giving you a lot of tools to make sure the experiences you build? Are semantically rich and can be easily understood by assistive technology? Now we’re definitely going to be diving into the subject more in the future, but that about covers it for today. So if you have any questions, you can always leave them for me down below in comments, or you can hit me up on a social network of your choosing.
As always thanks. So much for reading I’ll see you next time, hey. If you enjoyed this episode of Ally cash, you can always catch more over in our playlist or click. The little subscribe button and you’ll get an email notification whenever we launch new stuff on the blog. As always, thanks for reading
Really Really different, Whereas if you take two colors that are very Close together on the color wheel, it ’ s, going to be harder to tell the two apart Now the reason why this is important in web Design is because often times our whole goal is convey some information to the user, usually Through text and images, But if the contrast of our text is a little Too subltle and too mixed in with the background, it might be difficult for the user to read.
The page and that might sort of degrade the user experience. So what I wanted to do today is walk through Some of the process that I use to sort of check the page and figure out if it has appropriate Contrast and how to tune it up if I find some issues But to start follow me over to my laptop And I have a little presentation that I want to show you It kind of walks through how we measure contrast.
On the web, So here I ’, ve got a set of text boxes on A white background, and up above you can see, I ’ ve, got these numbers up here for some Contrast ratios, So I ’ m measuring in terms of luminance The difference between this foreground color and this background color Now on the web. We actually have guidelines That try to instruct us what our contrast minimums should be So the web content accessibility guidelines, In section 1.
4.3, they say for body text: you want to aim for a contrast: ratio of around 4.5:1, for, like smaller text or your general body copy For larger text, something that is 14 point. Bold or 18 point you can ratchet that contrast ratio down just a little bit to 3:1. So if we go back and we look at our image – Of contrast, we ’ ve got these first. Two examples would meet that minimum contrast requirement.
So this one is just pure black on white, so its 15.9:1 Thats really high contrast. This one is a little more of a subtle grey But we still have 5.7:1, which is pretty nice. These last two, though, are just a little too Low contrast, so they wouldn ’ t quite meet that requirement. We can also actually bump this up, though Theres a enhanced contrast recommendation in the web content accessibility guidelines, As well So this is for situations where you know you Might have either an older audience or a low vision audience.
In that case, we can bump the contrast ratio. Up to 7:1 or 4.5:1 for the regular body text. So if we go back – and we look at this example – Here, really only this first one would meet that enhanced contrast, ratio requirement So consider who your audience is going to Be when you ’ re, building your site or application, and that can help decide where you want to Aim on the contrast ratio scale, I use a number of different tools to try to Figure out, if I ’ m nailing those contrast, ratio, minimums And actually my friend Louis, has done this Really cool thing where he has put together this accessibility testing for the web handbook.
Called OATMEAL, which stands for Open Accessibility, Testing Methods for Experts and Lay folk. He actually has a whole guide in here about How he measures color contrast and the folks on his team do that, And so we ’ re going to kind of follow this Guide a little bit, We ’ re not going to use all the exact same Tools, but this is a really cool methodology that you can check out and use in some of Your own apps to maybe figure out your process, So what I ’ ve got here is a website called The accessibility blog and we ’ re, going to follow two of the steps in that OATMEAL Guide doing a sort of semi-automated check using a tool like aXe And then we ’ ll, do a more manual spot.
Check using a WCAG, color contrast analyzer, So starting on this site, the first thing: I ’ m going to do. Is pop open, my DevTools, I ’ ve already installed the aXe. Extension For Chrome, If you actually check out our previous episode, On A11ycasts and I’ll leave a link to this down in the show notes we covered all the different Ways that you can install aXe on your system, So I ’ m just using the extension for Chrome Here – and I ’ m just going to open it up and check out this page and hit the analyze button, And you ’ ll – see that it tells me over here.
On the left that I have a few elements that do not have sufficient color contrast, I ’ ve. Got about 7 issues here: It ’ ll! Try to give me a CSS selector to the Elements that need some work, but there ’ s an inspect button that I often use to just Inspect the element in the Dom – and I can scroll up and say who exactly is this Alright, so we ’ re starting of with these Little anchors up here in our navigation – and this is one those areas that I see a lot where It looks like we ’ re, actually pretty close to having good contrast here, but we ’ re.
Sort of on the bubble – it ’ s, a little unclear. Are we hitting that or not So? What I ’ ll often do. Is I ’ ll. Take this Foreground color and I ’ ll, take this background color and I can use another tool this one That I often use is called Lea. Verou: ’ s, Color Contrast Checker, so I ’. Ll also include a Link to this down in the show notes, And then we can just drop in our foreground.
And that background color, and we can see that the contrast ratio of these two is 3.6 So its not quite where we want to be for smaller text Again, we want to bump that up to about 4.5. So this is an area where I know that I need To go back, and since I also have some of these elements right here that are even lighter, And since I know that this is pure white text – and I can ’ t make it any brighter, my only Real option here would be to make this header bar a darker blue, so that all three of those Links pop a bit more Another thing that we might notice in our Tool, if we step through some of the options, is that we also have areas down here like This little sub-heading, which we ’ ve, got a kind of subtle, grey on white thing, going On and again we can take that into Lea Verou: ’ s, Color Checker and we can figure out.
You know, Are we on the bubble One option if we want, we can make the text Bigger so we can maybe hit 3.0 contrast ratio That ’ s one option we just make the text Sort of larger, if we ’ re on the bubble Or we darken the foreground text because The background is pure white, so we can. ’ t really make the background any lighter, So we can go through and we can work through. Our CSS and tune those colors up and that ’ s really what a tool like aXe is doing It.
’ s actually, looking at the CSS values, For background and foreground, But there are some situations where a tool Like the aXe inspector is not going to be able to tell us if we have contrast issues And that ’ s in situations where we don ’ t have clearly defined foreground background. Colors So, for instance, over here on the right, I ’ ve, Also got this advertisement, and these are pretty common, where you have some text over An image background and the text itself might even be an image right So for a tool like aXe.
It can ’ t pick out. Two distinct foreground background colors, so we ’ re going to need to use another tool. To figure out, if we have contrast issues over here, So the tool that I like to use is the WCAG 2.0 Color Contrast Analyzer, It ’ s, another Chrome extension and I ’ m. Going to warn you, it ’ s a little bit buggy, but I ’ m going to walk you through how I Use it and maybe point out some of the issues, so you can work around those, But basically what we do here is after we ’ ve.
Installed the extension we ’ ve got this extension up here in the top right click. On that, What I found to be sort of an issue here is On retina monitors, if you try to tell it to analyze a region and you select a region, It ’ ll, be sort of off Like it sort of zooms in and it doesn. ’ t. Seem to be able to handle retina that well, So, instead, I ’ ll tell it to capture visible Content And what this is going to do, you can see That it ’ s already sort of zoomed in what this is going to do.
Is it ’ s going to try To scan all the pixels on the page and it ’ ll highlight the contrast between that pixel And the ones next to it, So you can pick out those areas that have Low contrast, While it ’ s scanning, so it will take a while Right, it ’ s, only up to 27 %. So far, so I can walk through some of these settings for You, though, So the first one here is asking us what level We ’ re measuring at So again.
I mentioned that we have the minimum Contrast ratio of 4.5:1 or we can take it all the way up to the enhanced contrast ratio. Of 7:1 right So again you can choose your target there. Then there ’ s. Also this pixel radius option And at first I wasn, ’ t quite sure what this was for by default, it ’ s set to one. So it ’ s. Going to compare the two pixels next to each other, but it goes all the way up to 3 Often times when we ’ re working with text.
On the page, it ’ s, not a clearly defined. The text ends here and the page starts here. Instead, it ’ ll, do a sort of anti-aliasing Thing So if we go and we look at the image of our Text this D: here it ’ s, actually sort of three colors. So we ’ ve got a couple greys and then the Solid white and that ’ s, what forms the body of that character When it ’ s, asking us what pixel radius that We want to use it.
’ s, basically asking us what sort of anti-aliasing range do you want? To accommodate, for So what I do is I tend to set it to 2. That way I can analyze a couple pixels next To each other, Alright cool, so it looks like it just finished. And what it ’ s doing here? Is it ’ s drawing these white outlines to show us areas of high Contrast And any place where it gets sort of noisy Kind of like right in here we can tell that we have slightly lower contrast If we go over and we look at that ad, we can See that yeah we definitely have some issues here So up at the top, where it says developer.
Friendly, it seems like it: ’ s, doing ok.. We can toggle this mask on and off. So when We hide it. We can see that when we get to the body text inside of this ad, it actually Is even more translucent than the header and when we get down to the bottom and it Mixes with that background, it ’ s, really really tough to see. So this is an area where we know we might Have to go back to the designer and say “ Hey, I can show you this and I can definitively Prove that there is a contrast issue here, and this is a place where we need to maybe Tune it up Either give the text a backing, so it pops A little more or figure out if we can use a different background image, something that Doesn, ’ t interfere with the text as much ” So yeah using these tools and using a guide.
Like OATMEAL, you can, through you, can analyze the contrast for your site or application. Maybe look for problem areas tune. It up make sure users have a better experience That about covers it for today. So if you Have any questions for me, as always, you can leave them down below in the comments Or hit me up on a social network of your choosing, As always. Thank you so much for reading. And I ’ ll see you next time.
If you want to learn more about color contrast, We ’ ve got some additional articles. You can check out in our playlist Again thanks for reading and I ’ ll see You next time,
So today I thought it’d be fun to go through my process for doing a simple accessibility audit a lot of times I have teammates or even like third party partners who reach out and they say hey. You know. I’ve got this site that I built, I’m not deeply familiar with accessibility, so can you give it just a once-over, and let me know if there’s any sort of like major gotchas I should be looking out for so I wanted to cover my process today.
This is not, you know, an exhaustive review or anything, but this is generally the stuff that you can do to find some obvious high level issues. So, if all the way over here to my laptop, usually the first thing that I do on any website, I’m going to use webbing as an example here, webbing is an awesome site for web accessibility. Usually one of the first things I do one on any web site is: I want to ensure that I can navigate using the tab key on my keyboard and that there are discernible focus styles, as I move around the page, so in the case of webbing, if I start tabbing through here, you’ll, actually see the first thing that it does the very first time I hit tab.
I get this thing called a skip link up here in the top left hand, corner skip links are super useful. You know on sites where you might have heavy navigation. You want to let the user skip immediately down to the main content, so webaim implements the skip link. Some other sites, like github, have skip links. If you actually go to github and hit tab, you might notice, it says, like you know, jump to your repositories or whatever so skip link is kind of a cool thing to look out for, but then, as I’m tabbing around the page, I want to make sure That I see a focus ring on different elements on the page now web aim actually does a cool thing here, where they animate their focus ring.
So you can even see it moving across the screen, which is pretty cool. They highlight their focus States. This is, you know, just about the best link, a tab focus behavior. I think I’ve ever seen really, but I just tab through the site, and I make sure that you know I can reach everything that is interactive using the tab key on my keyboard right. So that’s step one tab through your experience, so the other thing that I like to look out for is, as I’m tabbing around the page.
I want to make sure that there’s no off-screen content that can accidentally be focused so follow me over here. I’ve got this. This material design, Lite sort of like template site that the the team has created and notice that it has this sort of like sidebar over here and, as I’m focus moves into that sidebar right now. Let’s say I shrink the page a little bit right. So it’s totally possible that someone could have their browser this size on their desktop and let’s try it and tap through this now.
So I tab through this write. My focus is over here on the top left or sorry top right in that search field. Now it’s on that button. Now, as I’m pressing tab, though we don’t see the focus indicator, it’s as if it has disappeared and we keep tapping, we keep chatting and eventually it’s going to show back up. Ah did you see it down here at this? Like read more button, so what was going on there? Well, if we expand again, we can see that actually, what was happening was focus was sort of hidden in these off-screen fields was over here in our side nav, and so I see this on a lot of websites, and this can trip up.
You know anybody who’s using a keyboard to navigate and I can come trip up mobile screen readers because you have something off screen, but it’s still in the tab, water, it’s still focusable, so a screen reader might travel into those off screen elements. You know you might have dialogues off screen, you might have side nav off screen and you don’t actually want the user to be clicking on those during that current state.
So that’s another thing that I look out for. I want to make sure that people are disabling off, screen, interactive content, making sure it’s removed from the tab order. The next thing that I look for is I want to make sure that I can do kind of like a simple navigation of the page using a screen reader, so for this demo, I’m going to use the shop app by the polymer team. This is a pretty cool site that I work with that team, a lot to try and make sure that this was a good, accessible experience.
So, in the previous few episodes we covered how to use NVDA, we covered how to use voiceover on a Mac. I really recommend all web developers familiarize themselves with the basics of at least one screen reader just so they can quickly move through a page kind of like what we were doing with the tab key – and this is just sort of like a sanity check to make Sure the screen reader can actually like land on controls and they’re, announcing things that they should.
So let me turn on voiceover and all kind of like move through this page quickly, to show you what I mean by that all right. So I’m just going to use the vo Keys to kind of like quickly move through some interactive stuff visit, link, home link, shopping, cart, zero items, link where link ladies outerwear link men’s t-shirt. I might you know, try and move down to like Lane section. I want to land on an image right.
I want to make sure that that image has alt text. That’s really important a lot of websites, especially like e-commerce sites and things like that, you’ll move through and because they haven’t provided alt text for any of the images it’ll oftentimes just read like the file name for an image. So that’s another thing that I often look out for as and as I’m going through, this phase, you know, did the the person building the site use proper, alt attributes.
I also want to make sure that if there are custom controls like buttons and things like that, that have been implemented using either custom elements or using like divs with a bunch of JavaScript, that those are interactive with a screen reader. Okay, so we’re on this drop down, it says size collapsed, pop-up button. Let’s try and use voiceover to interact with this, so I’ll click on it. Okay, it’s reading me the number of items, and now I want to use just like my regular arrow keys to move around inside of this control.
So up down right, left right things like that, so go down to extra-large, hit inner right. Okay! That’s something that I look for right. Any custom control is working as I would expect with the keyboard. The other thing I know about this site is when I add something to the cart. It’s going to sort of add like a little sort of a like modal pop-up type thing that’ll show up on screen, and so I want to make sure that the screen reader user is notified of that, possibly by moving their focus into that item.
So let’s do that item added to the cart added to cart for items interact without it took our view. Cart, don’t close dialogue voiceover off, so you can see that when the item was added to the cart, the screen reader focus was directed into that thing. That just slid out on screen, so I know the way the polymer team is doing this, if I recall, is they’ve got something in there with the tabindex of negative 1 and they’re, focusing that element just to direct our focus.
So that’s another thing that I read out for making sure if, if something is being dynamically added to the page, that focus is directed to it. So that’s a quick pass that we can do with the with screen reader. The next thing that I do is I try and check the page structure, so I wan na make sure that the page is using appropriate headings and that there are appropriate, landmark roles or landmark elements on the page, because those help with screen reader navigation as well.
So, let’s look at something like Wikipedia which does a really good job of this. So I’ll turn my screen reader voiceover on Google and what I often do is I just opened the the rotor inside of voiceover in NVDA. There’s the. I think it’s called the web elements thing. I think we showed it off in the last episode. Basically, it’ll give you kind of an outline of the page in voiceover. You can open it by using a ctrl, alt or a control option you and just hitting, left and right to menu all right.
So we can see all the headings on the page. We can see that they’re doing a really good job of using. You know. H1. H2, h3, going all the way through the hierarchy of headings they’re, not just mixing and matching H tags based on like the size that they are, which I see a lot of developers do, which can generate kind of like a broken document outline for the screen reader. I want to make sure that when they’re using heading tags they’re using it to basically build the skeleton of the page, so you know we can right move through this content in a sort of a logical way.
So if I wanted to jump down to this, the section I can easily do so. The other thing that I look for again is is landmark elements. So, let’s, let’s go back and look at webbing, so webbing does a really good job of using landmark elements on their site. So again I open my web Roder. I look for landmarks and here we can see that there’s things like banner navigation search main. So if I wanted to bypass all the navigation and get right to the main content, I can do that right.
So that’s another thing I look for you know there are sites out there, which really don’t include many landmark elements at all and again, that’s sort of an efficiency feature that you can very easily add in use, use main tags, use, nav tag or use like you Know, role attributes to create those landmarks, somebody users who use screen readers can, you know, just navigate around a lot faster fashion, so that covers a focus that covers basics of screen, readers that covers headings and landmarks.
The next thing I check for is color and contrast. I want to make sure that you know if someone who might have a low vision impairment, it’s going to be able to discern the text on the page. So again, you know looking at a site like material design lite. This is a really attractive website, but there are areas where I think some of the texts could be a little low contrast and maybe a little difficult to read.
So there’s a really great Chrome extension that you can install on the Chrome Web Store. We can look for axe extension, so acts like a like a chopping axe right, so this is by DQ systems, and basically this is a simple extension that you can add to Chrome, which will sort of run an audit against the page and flag. A number of accessibility issues, but one of those is color and contrast. So on this site I can just open my dev tools after I’ve installed that audit.
You can see it’s right here in my dev tools panel, there’s this big analyze button. So I click on that and it goes through. It looks at the page and can tell me right here that there are some elements which need better contrast. So I click on that and it’ll actually give me kind of like a path to reach that element in CSS. I can actually even click on it and it’ll highlight that element in the dev tools for me.
So, in this case, for instance, this might be a little hard to see, but maybe I’ll try and boost the page. But you can tell that uh that these footer links down here right where it says right under this github logo, wears like web starter kit and help. These are low contrast texts that the audit has highlighted for me. So that’s something that we can read out for. There’s another extension: the let’s see the the chrome, accessibility, dev tools extension here we go so we’ll include a link to this as well.
It does very similar stuff to the axe extension, but one of the nice things that this extension does is when you highlight something that is low. Contrast it’ll actually give you a color suggestion, so it could be like you know. Maybe if you make the links, you know this different hex value you’ll be able to meet the what tag minimum. So, let’s see if we actually highlight these guys right here and then our dev tools, I’m going to go to where it says, accessibility, properties and see right here, lists this warning for contrast, ratio and I can actually click these color values.
And it’s very subtle, because this one’s actually like almost perfect – it’s not quite clicking these little sreades will actually change the text. Value on sites and it’ll apply an inline style for you, and that way you can see. You know what a better alternative color would be. The last thing that I try to do after I’ve done all of this is I try to recommend that you know whoever is building this site, integrate some excessive regression testing into their build process.
Again, if we go to github and we look up acts core, so this is the library that powers that axe extension, but you can also use this library as part of your build process right. So, as you’re running your automated tests, you can have a sample page. You can have axe core, look at that page and flag in accessibility audits, and you know those could then call your tests to fail. At which point you know you got to go back and you got to fix those issues.
Okay, so we we’ve covered a lot, but this is basically how I do my accessibility audits, it’s by no means exhaustive, but on many of the websites out there. This is how you’ll catch some of the major issues that folks need to work on. That can take their experience from totally broken to. You know at least sort of like a decent baseline experience for folks. If you have any questions, as always, you can leave them for me down in the comments.
Otherwise, you can contact me on a social network of your choosing, as always thank you so much for reading so yep hey. If you enjoyed this episode of alley cat, you can always catch more over in our playlist or click. The little subscribe button and you’ll get an email notification whenever we launch new stuff on the blog, as always, thanks for reading
Jimmy's Internet Marketing Business Blog 