Categories
Online Marketing

Payment Integration

This replaces the payment forms on a site with a much simpler experience on mobile devices. So let’s talk about paying for things on the web. This is a longer talk, so let me give you an idea of what’s coming up. First, we’ll talk about the user experience today and what could be better, we’ll look at the payment request, API twice.

First, to give you the big picture, then we’ll dive into the code. Finally, you’ll get the usual resources in lab. It’s no surprise, given the rise of mobile computing, that a majority of commercial traffic is coming from mobile devices, what is surprising is that 66 % of that mobile commerce is still happening on the web, even when people have native apps installed. Unfortunately, we also see a lot lower conversion rate on mobile web relative to desktop websites.

Mobile conversions are about one third of the desktop conversions. If you wonder why this is the answer is pretty simple. Checking out collecting payment from the user is still rather messy. People often give up while filling the checkout form some checkout forms have improved since the beginning of web Commerce. What hasn’t changed is you still have to manually input the same information credit card billing address and shipping address? Our first step to solving this problem is autofill, because autofill works on existing forms.

You don’t have to modify your site. Autofill just works to help users check out faster autofill alone increases conversion rates by 25 %. Autofill does a good job of identifying form fields, but it’s not perfect. If you want an even better experience, you can have the autocomplete attribute to your forms. In this example, we’ve annotated the credit card portion of a form using values such as CC name and CC.

Number autofill will know exactly where to place its information. If you want to learn more about autocomplete attributes search the web, using what WG autofill to find the specification, autofill gets rid of the manual nature of data entry and makes it much simpler for the user. The current checkout experience presents you with a form to fill out every time for users, though the ideal experience would be that, when it’s time to buy they just buy site should be able to focus on creating an amazing and engaging shopping experience without worrying about optimizing.

A long checkout form this is where the payment request API comes in, we’re going to look at it first from a user perspective and then look at the code. What if we could do away with the form using web payments when it’s time to pay the user? Just pays payment request is a simple JavaScript API that helps the browser collect payment information. Then it’s a simple one: tap checkout for the user and an easy way for a site to receive a payment.

With the payment request API, you can make the whole process much faster and simpler and since the browser is actually taking care of collecting payment information from the user, we go from end taps to one tap. Let’s take a quick look at the code flow here. First, the site initiates a payment request in this request. The website passes to the browser the parameters of the payment, for example, how much is being charged and the available forms of payment? Don’t worry about the details now we’ll come back in a few minutes and look at this in detail.

The browser then determines the intersection of payment methods from the site and what the user has. It then presents a selection UI where the user chooses their method of payment. You get the UI by calling show this displays a native UI over the browser within this UI, the user can change how to pay the delivery method and the delivery address. The payment method can be credit cards or one of the apps that’s installed on their device, such as Android pay and, finally, the user taps on pay.

Then the browser requests a response from the selected payment method. This might be an app on your device or going directly to a payment provider. The payment processor verifies the request by examining its details and then returns the response directly to the server and the website now has all the information it needs to process the payment. Is this safe? The API is more secure than forum based payments.

The new payments are based on modern cryptography. You don’t need to enter payment data that could be logged or observed at the point of entry. Autofill is safe from website access and is typically stored. An encrypted storage on the hard drive to prevent disclosure, even when the OS is compromised payment request, is not just a chrome only API. The API is currently under development in the w3c web payments working group.

The goal is to create a universal cross browser standard for any website to accept any form of payment so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser. The browser passes, addresses and credit card details immediately and securely to the site, and since the browser is collecting payment information from the user, we go from end taps to one tap: you’ve seen how payment request works for the user.

Now, let’s go over the code in more detail. First, a quick review. The site initiates a payment request in this request. The website passes to the browser the parameters of the payment, including the price and the payment methods accepted. The browser determines the intersection of payment methods for the site and the user and presents a selection. Ui payment can be anything from a simple credit card payment to a payment application installed on the user’s device.

The browser requests a response from the selected payment method and returns the response directly to the merchant. There are multiple code samples for this on: Google, Chrome, github, dot, io. Let’s start writing some code. Step 1 is to tell payment requests. All the ways you can get paid. Step 2 is to define the details about the actual transaction cost items, currency, shipping options and so on.

Here’s an example of how you would define shipping options notice. The selected bit you can include this: if you have multiple options, the browser will tell you which one the user selects step 3 is to define what information you want. The API to collect. Take the three data structures you just created and pass them to the payment request. Constructor. You often do this when the user indicates they’re ready to pay, take the request and call it show method.

This returns a promise and opens the user interface. The UI shows the details of the purchase and collects payment information when the user approves the prom resolves with a payment response object. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place when a request comes back, call complete to close the UI.

The complete method tells the user agent that the user interaction is over. The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Android pay. The response will be documented by the provider. There’s one loose end to tie up what happens if the user changes their shipping address or options.

This may change the total cost and in some cases, may change the shipping options. Payment requests can omit shipping address, change and shipping option change events. You should add event. Listeners for these and update the payment details. Accordingly, the sample code will show you how and that’s it. You can find a full set of resource links on this final slide. You may have noticed. I didn’t mention a lab, we’re just finishing it up at the time of filming, so check your lab notebook for a complete ecommerce example.


 

Categories
Online Marketing

Implementing the Web Payments API – Progressive Web App Training

Api is a w3c standard to eliminate payment forms for users and standardized payment collections for sites. It allows us to request payment and shipping information with a single API call.

This knows how to run Apple pay on iOS Safari and Google pay on Android. It’s not limited to those to any payment provider can write a plug-in. It’s not even restricted to one browser. It’s probably in the browser you’re using right now the browser simply acts as an intermediary collecting the information we need in a consistent way. Then returns a JSON object with the results that we can use to collect the payment.

If you have used a pay with Apple pay or pay with Google pay button in the browser, you already know what the experience will be, like developers previously used custom libraries to implement this, such as the Apple pay, API or the Google Wallet API, and if you Want to do that too great, but if you want to work with whatever payment system, the user has payment request. Is your friend, let’s take a quick look at the code flow and user experience? We want to buy this jacket, what happens when we tap buy now? This is an ordinary button with an ordinary event handler.

First, the site creates a payment request, object and populates it with some details. It typically has the price, a list of items being purchased and the available forms of payment. This is all invisible to the user. We need to trigger the payment user interface, you get the UI by calling payment request, dot, show this displays a native UI over the browser and returns a promise. The next few steps are all happening inside this promise.

The first screen is a summary of the information supplied by the app tapping on an item opens it the EPI stores, addresses and payment options securely. In this example, Larry can select his shipping address with one tap edit. The address or add another need to change. The shipping option no problem: it’s just kappa way note that changing this option may change the total price. The payment request api can handle this with a little help from your app notice, the multiple payment options, the api also handles country, specific payment methods and, finally, the user taps on pay.

At this point, the browser runs the selected payment service. This might be an app on your device or going across the network to a payment provider. The completed payment returns a special token that you can send to your server. The server has ways of verifying this token. Is this safe? The api is more secure than form based payments. The new payment instruments are based on modern cryptography. You don’t need to enter payment data that can be logged or observed at the point of entry, so to review payment requests, eliminates manual and tedious entry by storing the user’s information securely in the browser.

It works across browsers across OS platforms and can work with any payment service that wants to write just a little code now that you’ve seen how payment request works for the user, let me show you how to code it remember that the payment UI contains multiple sections. We need to populate these sections before making the request. The request needs at least three data structures, the payment options, the order, details and shipping options so we’ll create those then generate a payment request.

We will call show and get back a promise that resolves when it’s time to contact the payment processor, finally notice that we may want to or three event handlers. These are called while the UI is visible and can trigger updates when the user changes addresses or shipping options. Let’s walk through the steps in the UI and the corresponding code. First, the user taps by now. So we want to set up a payment request.

Remember that we need some data structures before we can create the request. The payment methods lists all the payment services that your site understands. It’s an array of payment method, objects and each method may have its own specific properties here. We’re listing the basic credit card method and Google pay note that I’m leaving out the details of the Google pay object as it’s pretty involved.

We want the user to know what they’re buying. This includes the core details of the transaction, how much money? What currency? And what list items you want displayed? Keep the line items fairly high level. It isn’t meant to be used as an itemized receipt. If you want more than one shipping option, you can define this structure notice, it’s a property on the transaction details. If you have multiple options include a selected bit, the browser will highlight the selected option and fire an event when it changes.

Now you can define what information you want from the API by default. Payment requests will only return the payment info if the user is logged. In you may have the rest of their information. If you need more these options, let you collect what you need. Take the data structures, you’ve just created and pass them to the payment request constructor. This should happen in response to a button tap or other user initiated action.

Now so far the screen hasn’t changed. We need to trigger the UI, take the payment request and call the show method. This returns a promise and opens the user interface notice. There’s a big block of code. After this, we still have a couple of steps until we’re done. The UI shows the details of the purchase and collects payment information when the user approves the promise resolves with a payment response object.

The payment response object contains everything needed to submit a payment for credit card payments. The response is standardized for non credit card payments such as Google pay. The response will be documented by the provider. Next, you should check that the payment is valid. Send the information to your payment processor for processing the UI will show a spinner while the request takes place. Okay.

So how do we remove the payment UI after we click payment? Even if it fails call payment response, not complete. You can include a message to the user. This tells the browser that the payment is complete and allows the app to notify the user of the result. Now, there’s one loose end to tie up what happens if the user changes their shipping address or options. This may change a total cost and, in some cases, may change a shipping options.

Payment requests can omit shipping, address, change, shipping, option, change and payment method change events. You should have event listeners for these and update details accordingly. Remember we’re making the update in the middle of a promise, just as we do installing the Service Worker, so we use a similar bit of code. We get the event and call update with on it. This takes a promise that resolves to a new transaction details record.

It’s not all that different from calling cache at all from the service workers install event that also returns its result via the event. The get new info method is something that you would write. It takes some data from the request and builds a new transaction details. Object. Here’s a reminder of what goes in the transaction details. Your code probably needs to copy from the old object to a new one.

We resolve the promise with the new details, update with then updates the payment request and the screen, and that’s it. You now have a seamless, easy to use checkout experience now that was a bit of a long example, but most of it is boilerplate check out the payment request. Samples at Google, Chrome, github, io, remember the process for easier payments starts with autofill. If you want more payment request, is there to help? You can also check out specific libraries for Apple pay, Google pay, Samsung pay and others they put up a pay with button on the screen.

They usually fall back to the payment request interface, but they may be an easier option for your users. The only way to know is to try them for yourself thanks for hanging in there through web payments. This is one of the most complex parts of building a PWA, yet it’s really satisfying and could be great for business. Take care and I’ll see you again soon.


 

Categories
Online Marketing

Google Sign-In for Websites: Authentication with backends

Let’s learn how to integrate with the backend. This will allow you to keep sessions and store user data in a database on the server. When I wasn’t caring with backends, you deal with something called ID token. It contains the issuer of this token, which app this is for an expression date and so on.

You can verify the user’s identity and its integrity by examining the ID tokens content. Let’s get started, you can obtain an ID token upon the successful authentication and then send it over to the server using a secure, HTTPS connection on the server side. The retrieved ID token will look pretty cryptic, but don’t worry you can decode verify and extract this information without a network call by using the Google provided.

Client libraries like this note that the client libraries verify most of the information, but you still have to check if AUD, which indicates audience matches your client ID and ISS, which indicates issuer matches either of following strings. Now you can retrieve the users profile information to be used in your app. This ID token includes the same profile information you can get using the JavaScript library on the client.

A quick tip to remember is that if the users email address is already verified by Google, you don’t have to verify it again in your app once the ID token is verified, use su B, which indicates subject as a user ID to store information. Remember don’t use the email address as a primary key for users as it might change in the future. Okay, now you are ready to integrate Google sign-in with back-end in the next article.

I will talk about how to authorize and access Google APs sucks for stopping by station.


 

Categories
Online Marketing

Solving SEO with Headless Chrome (Polymer Summit 2017)

If you manage to pick up on my accent in the last five words, I am indeed Australian and it’s honored to be followed up by Trey, my fellow Aussie, as well prior to joining this team. I’d worked on the beloved chrome dev tools, one of my smallest, but maybe my greatest contribution was adding the ability to rearrange tabs in dev tools, there’s probably the greatest five lines I’ve ever written.

I did work another five other features. So if you find me afterwards feel free to ask me about them, and I might share dev tools trickle to more recently, I’ve had the humbling experience of building web components at all and witnessing all the incredible components that all of you have built and published. For example, the one and only Pokemon selector and if you’re the person who says but there’s a Hanyu, only 151 pokemon in the original set well there’s even an option that lets you set that too, so all kudos to Sammy.

For this, it was, however, in the process of building web components at all, which brings us to what we’re here to talk about today. So, first I’m going to cover my story of how I came to encounter this SEO problem while building web components. Our dog will then look at how I used have less chrome to solve this before diving into all the details of how that actually works and how you can use it. So I’m going to take a step back for a moment and talk about what I learnt in the process of building web components.

A talk. The first thing I learned was how the platform supports encapsulation through the use of web components with this encapsulation comes with inherent code reuse, which leads to a specific architecture. I also learnt about progressive web apps and how they can provide us with fast engaging experiences. I learned how the platform provides api’s such as service workers, to help enable those experiences, as I learned how to compose web components, to build a progressive web.

App we’ve heard from Kevin yesterday about the purple pattern: push render precache lazy load as a method of optimizing delivery of this application to the user and one of the architectures which enables us to utilize. The purple panel is the app shell model. It provides us with instant, reliable performance by using an aggressively cached app shell. You can see that for all the requests which hit our server, we serve the entry point file which we serve regardless of the route.

The client then requests the app shell, which is similar, but because the same URL across the application, we can combine that with a serviceworker to achieve near-instant loading on repeated visits. The shell is then responsible for looking at the actual route that was requested and then request. The necessary resources to render that route. So this point I’d learned how to build a progressive web app using client-side technologies like web components in polymer and how to use patterns such as the purple pan to deliver this application quickly to the user.

Then there’s the elephant in the room SEO for some of these BOTS they’re, basically just running curl with that URL and stop right there, no rendering no JavaScript. So what are we left with with this PWA that we built using the app shell model? We’re left with just your entry point file, which has no information in it at all, and in fact it’s the same generic entry point file that you serve across your entire application.

So this is particularly problematic for web components, which require JavaScript to be executed for them to be useful. This issue applies to all search engine indexes that don’t render JavaScript, but it also applies to the plethora of link rendering BOTS out there. There’s a social BOTS like Facebook and to but don’t forget the enormous number of link renting BOTS such as slack hangouts Gmail, you name it.

So what is it about the app shell model that I’d really like to keep well? For me, this approach pushes our application complexity out to the client. You can see that the server has no understanding of routes. It just serves the entry point file and he has no real understanding of what the user is actually trying to achieve. This allows our server to be significantly decoupled from the front end application, since it now only needs to expose a simple API to read and manipulate data.

The client that we pushed out to the application that we pushed out to the client is then responsible for servicing. This data to the user and mediating user user interactions to manipulate this data, so I asked: can we keep this simple architecture that we know and we love and also solve this SEO use case with zero performance cost? So then we thought what, if we just use headless chrome to render on our behalf, so here’s a breakdown of how that would work.

We have our regular users who are making a request and they would like a cat picture because who wouldn’t and as part of this approach, we ask our robot and to answer this, we look at the user agent string and check if it’s an own bot that Doesn’t render in this case the user can render so we serve the page as we normally would. The server responds with the fetch cat picture function and then the client can go and execute that function to get the rendered result by the way.

This is one of my kittens, which I fostered recently, which is super adorable. Now, when we encounter a boss, we can look at a user agent string and determine that they don’t render, and instead of serving that fetch cat picture function, we fire for a quest to headless Chrome to render this page on our behalf, and then we send the Serialized rendered response back to the bar, so they can see the full contents of the page.

So I built a proof-of-concept of this approach for web components rock and it worked. I wrote a medium post about it, and people really interested in this approach and want to see more of it. So, based on this response, I eventually decided that instead of my hacky solution that I would build it properly but then came the most challenging part of any project and I know you’ve all experienced it as well naming.

So I asked on our team chat for some suggestions and I got a tongue, so these are some of our top ones. There’s some great ones in their power renders use the platform as a renderer. However, today I’m very pleased to introduce render Tron. Let me render that, for you. Brenda Tron is a doc arised, headless, chrome, rendering solution. So that’s a mouthful, so let’s break it down. First off what is docker and why did I use it? Well, no one knows what it means, but it’s provocative in all seriousness.

Docker containers allow you to create lightweight images and standalone executable packages which isolate software from its surrounding environment in render Tron. We have headless chrome packaged up in this container so that you can easily clone and deploy this to wherever you like. So what about headless chrome? It was introduced in chrome, 59 for Linux and Mac chrome 60 for Windows, and it allows chrome to be run in environments which don’t have a UI interface such as a server.

This means that you can now use Chrome as part of any any part of your tool chain. You can use it for automated testing. You can use it for measuring the performance of your application, generating PDFs amongst many other things. Headless chrome itself exposes a really basic JSON API for managing tabs with most of the power coming from the dev tools protocol. All of dev tools is built on top of this protocol.

So it’s a pretty powerful API, and one of the key reasons that headless chrome is great. Is that now we’re bringing the latest and greatest from chrome to ensure that all the latest web platform features are supported with render Truong? This means that net your SEO can now be a first-class environment which is no different, the rest of your users. So just a quick shout out. This all sounds really interesting to you and you would like to include headless chrome in some other way in your to a chain.

There’s a brand new library, node library that was published just last week, that exposes a high level API to control chrome, while also bundling all of chrome inside that node package. So you can check it out on github at google chrome, slash puppeteer, so we’ve looked at the high level of how headless chrome can fit into your application to fulfill your SEO needs now it’s time to dive to how it works.

But I’ve been talking a lot. So, who wants to see render tron in action alright. So this is the hacker news PWA created by some of my awesome colleagues and it’s built using polymer and web components. It loads really fast and all-round performs pretty well. We can see that there’s a separate network requests which loads the main content that we see and we can guess that it’s affected by this SEO problem, since it uses web components which require JavaScript and it pulls the in data asynchronously.

So one quick way to verify this is by disabling JavaScript and refreshing the page, and once we do that, we can see that we still get the app header, since that was in the initial request. But we lose the main content of the page which isn’t good. So we jump over to render Truong the headless chrome service that is meant to render and serialize this for you. So I wrote this UI as a quick way to put in a URL and test the output from render Tron so first off.

What are we hoping to see because these bots only perform one request? We want to see that whole page come back in that one network request. We also want to see that it doesn’t need any JavaScript to do this. So take a look, I’m going to put in the hacker news URL and tell render Tron to render and serialize this and that using web components, and it renders correctly I’m going to disable JavaScript and verify that it still works.

So you can see it’s still there and it all comes back in that single network requests render tron automatically detects. When your PWA has completed loading. It looks at the page load event and ensures that it has fired. But we know that’s a really poor indication of when the page is actually completed. Loading, so Rena Tron also ensures that any async work has been completed and it also looks at your network requests to make sure they’re finished as well.

In total, you have a ten-second rendering budget. This doesn’t mean that it waits 10 seconds, though it’ll finish as soon as your rendering is complete. If this is insufficient for you, you can also fire a custom event which signals to rent Ron that your PWA has completed. Loading serializing web components is tricky because of shadow Dom which it straps away part of the dom tree so to keep things simple.

Rennet ron uses shady Dom, which polyfills shadow Dom this allows render tron to effectively serialize the dom tree so that it can be preserved. In the output, so let’s take a look at the news PWA, which you’ve all seen – and it’s also built by some of my other colleagues and we’ll plug that in to render tron will then ask render tron to render this as well and that I’m also using Web components, and then we have it.

So what do you need to do to enable this behavior with polymer 1? This is super easy and render tron doesn’t actually need to do anything simply append D’Amico’s shady to the URLs that you pass to render Tron and polymer 1 will ensure that shady Dom is used with polymer 2 and with web web components. V1. It’s recommended you use web components, loader jeaious, which pulls in all the right polyfills on different browsers.

You then set a flag to render tron tell it that telling it that you’re using web components, and it will ensure that the necessary polyfills that it needs for serialization get enabled so another feature of render Tron is that it lets you set HTTP status codes, these Status codes are used by indexes as important signals, for example, if he comes across a 404, it’s not going to link to that page, because that will be a really poor search result.

Now server, though, it’s still returning that entry point bar with a status code of 200. Okay, so it looks like every URL exists. Rena-Chan lets you configure that status code from within your PW, a which understands when a page is invalid, simply add meta tags. Dynamically is fine to signal to render on what the status code should be render. Tron will then pick these up and return that status code to the bot, so this approach isn’t specific to polymer or even web components, let’s plug in Fahnestock google.

Com and sees what happens when we serialize it. So that looks pretty good. Who can guess what javascript library was used to build? Google fonts angular render Trond works with any and all client-side technologies that work in Chrome and whose Dom tree can be serialized. The render tron endpoint also features screenshot capabilities, so that you can check that headless, chrome and the load detecting function are performing as you expect.

Unfortunately, this service is not fast for each URL that we render we spin up headless Chrome to render that entire page, so performance is strictly tied to the performance of your PWA. Renat Ron does, however, implement a perfect cache. This means that if we have rendered the same page within a certain cache freshness threshold will serve the cached response instead of rear-ending it again. So how can you get your hands on this today and how do you use it? Well, first, you need to deploy the random tron service to an end.

You’ll need to clone the github repo at Google, Chrome, slash, magnetron, and it’s built primarily for Google cloud. So it’s easy to deploy there. But if you remember this is a darker container, so you can deploy this to anywhere, which supports a docker image. So to make things simple for you to test our. We have the demo service endpoint, which you can hit at render Tron appspot.Com and that’s the one with the UI that we saw earlier.

It is not intended to be used as a production endpoint. However, you are welcome to use it, but we make no guarantees on uptime. Having this as a ready to use service is something we might consider based on the interest receive. So, just in case you’re wondering my boss’s twitter handle is at met, Matt s McNulty, just in case. You want to tell him how awesome I am so once we have that endpoint up you’re going to need to install some middleware in your application to do the user agent splitting that I was talking about earlier.

So this middleware needs to look at the user agent figure out whether or not they can render and if not proxy, the requests through the render tron endpoint, if you’re using purple server, which is a node server designed to serve production applications using purple. You simply need to specify the bot proxy option and provide it with your rennet on endpoint, if you’re using Express, there’s a middleware that you can include directly by saying app, don’t use render on top make middleware with the proxy endpoint and whether or not you’re using Web components, if you’re not using either of these check the docs for a list of community maintained bit aware, there’s a firebase function there, as well as a list of existing middleware that render China is compatible with.

If it’s not listed, it’s also fairly simple to roll. Your own middleware by simply proxying based on the user agent string, and that’s it, that’s all the changes you need to make to use, render tron today and all these bots can now be happy. Brenda Tron is available to use today compatible with any client-side technologies, including both polymer 1 and polymer 2. Thank you.


 

Categories
Online Marketing

Google Sign-In for Websites: Authorization

Our current recommendation is To let users authenticate first and defer, asking Permissions until you need to access an API In order to use a Google APIs, you have to enable them from The [ BPI ] console Then looking at this page You can find the scope strings that correspond to the Apis, you have enabled Each one of these Represents an API so take note of the ones you need Now. You can make requests from The client or from the server, Let’s look at the client first, There are two steps.

You first need to get a Permission from the user Check if the user has already Granted access to the API using hasGrantedScopes, Otherwise request the Permission by calling grant Use the scope strings. You Obtained in the previous step, Once the permissions Is granted you can make API calls on Behalf of the user To send a request to the Google APIs, you can use gapi, For example, if you want To use a Google drive API at the client Module then drive module with the API version Using client drivers is simple In this case.

I’m grabbing The list of files and folders in the users root directory. Ok, let’s see how we do the Exact same thing: on the server side, Getting the user’s permission, Happens on the client side Use grantOfflineAccess To get a permission, Offline means that You can access Google APIs, even when the user Is not using the application Upon user’s consent, your Client will receive an object that contains authCode, And now you can send The authCode over to the server using a Secure HTTPS connection On the server side use a client Library to exchange authCode with a credential object: Which includes access_token, request_token and id_token, The access_token Is a primary key to access the user data? Through Google APIs, The refresh_token is a key To renew the access token, An id_token represents The authenticated user, as I mentioned in A previous article Remember that the Client libraries take care of refreshing, the Access token, if it has expired, For this reason, you should Store the credential object in your database.

After each request, This ensures you always have The latest credential object Once you’ve got the Credentials you can make API calls by using The [ INAUDIBLE, ] APIs, client library, OK, So we have gone Through the steps we recommend in order to use Google sign-in effectively, If you have any Questions ask them at stackoverflow with A tag Google sign-in and we will do our Best to answer them, Thanks for stopping by, I hope you will enjoy coding.

A smoother sign-in experience for your users with Google sign-in [ MUSIC PLAYING ]


 

Categories
Online Marketing

Intro to ARIA — A11ycasts #13

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


 

Categories
Online Marketing

Introduction to Google Sign-In for Websites

我叫 Eiji, 有个可以解决这种问题的简便方法, My name is Eiji and there’s a handy and simple solution: 叫做联合登陆 To this issue called federated login 联合登陆意味着用户 Federated login means that user authenticates 可以用第三方身份进行认证 Using a third party identity, usually 一般不用再输入证书或配置文件信息了 Without reentering credentials or profile information, Google 登陆是, Google 在联合登陆上的一次尝试 Google Sign In is Google’s take on federated login, 它可以让你尽可能简单的去实现 And is designed to be as easy as possible for you to implement 并且方便用户登陆 And for users to sign in 让我们看看它的工作原理 Let’s see how it works: 这是个登陆按钮 Here’s the sign in button 用户点击后, 出现一个登陆窗口, When the user taps on it, a sign in window appears 用户选择一个账户 The user chooses an account and then signs 如果还未登陆就进行登陆 In if he is not signed in already 用户允许访问配置文件信息 The user allows access to profile information, 现在弹出的窗口关闭了, 用户登录成功, Now the pop-up window closes and the user is signed in 要注意的是 当前应用请求用户权限的最好方法 Notice that the current best practice for asking permissions 是增加它的权限 Is incremental authorization 这意味着与其在登陆同时请求用户权限 This means that, rather than signing in and requesting user 你不如直接登录 Permissions at the same time, you should first 并且只在需要的时候 Sign your user in and request for permissions only when they 请求权限 Are needed, 想了解更多详细内容, 还请看我关于权限的视频, Check out my authorization article for further details on this 现在让我们看看如何轻松 Now, let’s take a look at how to implement Google 实现 Google 登陆 Sign-In in just a few steps: 首先 前往, Google, 开发者控制台 First, head over to Google Developers Console 创建一个工程 添加证书 Create a project add a credential 配置一个同意屏幕 再创建一个客户 ID Configure a consent screen and create a client ID 在, HTML 中 用 meta, 标签把客户 ID 添加到 head 当中, In HTML add the client ID to the head section using metatag 之后加载 api.

Js Then load api.Js 它是, Google, Javascript 库的核心 This is the core of Google JavaScript library, 加载完 api.Js 调用 gapi.Load 方法 When api.Js is loaded, call gapi.Load, 导入, auth2, 模块来启用, Google, 登陆 To import auth2 module to enable Google Sign-In 再调用 gpi.Auth2.Init 方法进行初始化 Then call gapi.Auth2.Init to initialize 一旦这些都完成了 你也就准备好了 Once these are done, you are ready, 下一步是生成一个登陆 button The next step is to render a sign in button 最常见的做法就是采用传统的 button.

The most generic option to do this is to use a custom button. 可以用标准 CSS, 在, HTML 标签中设计 button. Put an HTML tag and use regular CSS to design the button 别忘了看我们关于 button 的设计指南 Don’t forget to read our guidelines for designing the button 你还会在同一文档中发现 button 的资源文件 You also find the button assets in the same doc: 添加一个事件监听器 这样在点击 button 时就会进行登陆 Add an event listener and invoke sign-in when the button is pressed.

登陆功能会返回一个, Google, 用户对象 The sign-in function returns, a Google user object, 可以用它得到基本配置文件信息 例如姓名 Use it to get basic profile information such as username, 电子邮件, 以及用户头像, Email and the profile image 最终 用户调用, signOut 方法就可以登出了 Finally, users can sign out simply by calling signOut 了解更详细的工作过程 可以回顾我们的样例代码 Review our sample code here for a more detailed work through 好了 Ok.

这就是用 Google 登陆进行认证的基本内容 This was the basis of authentication using Google Sign-In 但是涉及到服务器时又该怎么做呢 But what do you do if there’s a server involved, 或者如何以用户身份访问 Google, API, Or how would you access the Google APIs on behalf of the user, 我会在接下来的 I will talk about these workflows, 系列视频中讲讲这些工作流程 In the following articles in this series, 感谢您的收看 我们下期再会 Thank you for stopping by and stay tuned [ MUSIC PLAYING ]


 

Categories
Online Marketing

Learn How to Design — Designer vs. Developer #10

How did you manage to break through? So it’s not stopping you, but maybe enhancing the stuff that you actually do. I think one of the things that I always struggled with is that, from the visual standpoint like I’m, not a super talented visual designer I’ve seen some amazing visual designers that I’m just like. Oh, my goodness like that is really really slick, and I love that and that’s not like my strengths, and so I was a lot came back more from like the coding or a perspective being able to actually implement some stuff in code which they couldn’t.

But you know there was this kind of this deciding factor realizing. Am I more of a designer or more of a developer like you know, I’m not necessarily that great at graphics, but there’s still so many other ways of design that can kind of spread in so really like doing some research and finding about more about UX design And realizing that is really kind of wondered what I wanted to focus on, it’s kind of what led me to that.

So it’s definitely was this kind of process of navigating through it’s like. Where do I fit in my designer and my developer, were you know from the first projects that I started doing you know a lot of time? I did a lot of websites and when people come to you, they go hey. We need a website built, they don’t necessarily say hey. We need some front-end developer to come and come do this, especially if you’re working with smaller businesses and clients.

So you do take on the designer and developer hat to kind of make that happen. A lot of developers are very afraid to learn about design. It’s like, as I get question question like if I was to write an article, the perfect article for the developers would be how to how to learn to design or how do you, then, which makes no sense to me, because learning to design doesn’t really mean anything. It’s just like what part of design you know what discipline of design but there’s still that question of okay.

What is the first step? That’s someone who wants to really as someone who’s gone through this process yourself. What was your first step to say? Okay, that’s it! I’m becoming a designer right, I think you know following a lot of design patterns at that time. I didn’t really understand that they were called design patterns right. You kind of you implement them in the site’s doing a lot of web work.

You kind of take on okay, the navigation menu. Where does that live and you’re following a lot of the patterns that have already been created, and so you kind of learn to explore through that, and then you know, testing out the site and realizing. Oh, this doesn’t feel right like something’s off, let’s, let’s work on how to make this better, but I think one of the the great things that can really help designer or developers wanting to go into design is looking a lot of like the material spec guidelines.

They’re. Actually really really helpful, because not only does it actually tell you hey here’s some guidelines of what to follow, but it actually doesn’t really got a good job of explaining. Why you’re doing that yeah exactly so. That actually is really helpful because then you’re able to understand. Why was this created like what was the thought process behind, adding potentially a bottom navigation, or why would you have a side side nav? You know it’s it’s really getting to kind of explaining that so you’re able to learn from learn from actually interacting with something and seeing how they’re doing it, but also getting finding out why they decided to do that, because I think well so much of design is Some it’s problem solving right, so so many people forget that when I think of design they think of the finished product, but there’s so many different stages of how you got to that finished product.

And so a lot of it being able to understand how someone was thinking through that really really helps you from a development perspective get into that design field of understanding. Okay, how do I get from thinking of? How do I develop this versus? How do I even arrive to the solution? I think that’s the that’s kind of the big difference there as developers. You know you have something. That’s already designed for you.

For the most part, I mean some people get handed things. Some people get handed an ios mock and said: hey make this and make this into android. So then, at that time you kind of become an Android design. In that aspect, what you think is like the biggest thing that stops developers really understanding design. One of the things that we do at Google is we do design sprints, so the design Sprint’s are really great because it brings people from all the different disciplines and such leads together to work into solving a challenge that we have.

You know. So you have product managers, engineers, designers, researchers, everyone in the room together and kind of thinking and working through a problem which is really fantastic because you get all these different ideas and one of the things that I really notice is where, as we’re bringing in designers, You know and engineers, and all these people together is when we’re walking through the challenge.

The engineers are already thinking of the solution, yeah and already thinking about how to implement it. They go straight to that which makes sense that that is their role right as engineers. Usually, you are given something and you have to go. Oh, how do i, how do I make this happen? How do like thinking through problem solving how to actually get to that solution where, as designers, we don’t know what the solution necessarily is? So I think a lot of the blockers is automatically wanting to know the answer yeah, instead of being more aware and being okay with saying you know, I don’t know the answer to that, but let’s let’s explore it together, yeah, so I think that’s the biggest hindrance That can really stop developers and to getting into design.

It is wanting to have all the answers. It’s it’s okay, not to have them I mean, and what do you think developers can actually do to get past? That I mean because I find like for me. It’s way sketching and just experimenting, and so I suppose, is how does the developer maintain that kind of playful space where they’re, not thinking right, here’s the library we’re going to use to do like or whatever widget or fab or whatever? But what can they actually do that allows them to to not thinking about like the end result or breaking from that cycle? Yeah, you actually bring up a great point with sketching.

That’s probably one of my favorite exercises when I’m working with different people to get them thinking of solutions. So if you’re developing an app or so is hey, let’s get some sketches out there get a sharpie and just start sketching out through some ideas, because that really that doesn’t you can really get some ideas on paper and not be merry to them. You know and not feel like really connected, because you spent all this time developing the solution and realizing.

Oh, it doesn’t really work, and so, if you start really low fidelity with some sketches that can really open up your mind in terms of thinking about different solutions. Because as you’re sketching through it you’re realizing, oh like maybe I want to use this fab button or something everyone loves fab right, so you want to incorporate it somewhere and then you realize hmm, maybe that’s not the right thing to do and I haven’t spent all This energy developing or even designing this, so then I can kind of toss that and move on and create a different solution.

So sketching, I think, is a great resource. Instead of people go straight, a lot of people like to prototype in the code, but I usually like to challenge people and go hey start, sketching some ideas and then once you’ve landed on something that you think you want to explore. Some more then dive into code or dive into sketch or whatever your you’re using. So I suppose for the engineer to really understand design.

It’s almost like okay, just start sketching first and start thinking about the thing you’re going to build and the possibilities, rather then straight to the in solution. One of the things I really noticed there was the way really good designers responded to constraints. You know you think about: I don’t like black and white photography or jewtown prints, whatever their responses to restrictions on the medium


 

Categories
Online Marketing

Accessibility Testing – Totally Tooling Tips

It’s good. Did you get a haircut? I did a haircut new accent, new new new. Look. You feel it’s good! It’s good you’re, looking better than before. You feel better than before. You’re, not mad. I am NOT no hi, I’m Rob Dodson, I’m a developer advocate on the chrome team, sure Rob just just sell, sell yourself. I mean hello and also uh you’re selling stuff, also host a little show on the chrome Developers.

Youtube blog called alley cast world-renown. Is that what we’re calling it yes well world renowned, I see people around the world have renowned it. I think, okay, all right, believe what you want to believe, but today we’re going to be talking about accessibility, audit, Angley right. What is your workflow for that? Look? Like yeah, so over here on, my laptop I’ve got a site that I’ve been working on.

This is called lifestyle. It’s got some cool like hipster photos and stuff, like that people have styles of the accessible and famous all right yeah, and what I usually do when I’m you know working on improving the accessibility of a site is, I will use the new audits panel in chrome, Dev tools, which is very very nice if you go to create a new audit, you’ll, see that you’ve got like a number of options inside of there, so you could look at PW, anus, best practices, etc.

One of the topic areas is accessibility, so you can just go run, just an accessibility audit. If you don’t, you don’t feel like doing the other tests. Here’s one that I ran against the page and it’s doing pretty. Okay right. It’s got on anyone not so bad, but there’s definitely a few issues that we need to fix and in particular one that I see a lot is, is color contrast, so you’ve got your your your foreground text.

Maybe is a little too light on the background. Color one of the nice things that we can do with the audits panel is we can actually dive in and we can see which elements specifically have failing contrast. So here I can see that I’ve got this like product card price element and if I click on that and stretch this out a little bit, you can see. It’ll take me over to my elements panel and I can actually scroll in to view the actual element that is failing just this price right, y’all, nice and it already selects the domnode for you, that’s cool, yeah, and so one of the things that’s really helpful.

Is you know really this is this? Allow me to sort of quickly identify this node, but one of the things we’re working on, which is over here in Chrome, Canary right now, is actually a color picker. That will make it a little bit easier for you to fix those contrast issues. So if you’re in something like Chrome Canary, you can go into Chrome, colon, slash, slash flags, you can look for the word: developer tools, experiments, oh you’re, in flags and experiments.

You look like to live dangerously, oh yeah, oh yeah, so dangerously, so we enable the developer tools, experiments right. We step into the future, it’ll refresh our browser for us. We can go back over here pop up in as the dev tools click on this little Settings. Menu good, where it says experiments da da and here we can see, we’ve got accessible the inspection as well as color contrast ratio line.

So let’s see what that does so we’ll go, find that same node. That was giving us problems over here. Inspect it and then we can see in our Styles panel I got a little color sread and click on that and you’ll see that there’s this little line inside of my color palettes. This is actually a sea mmmmm-hmm. This was actually telling us like. Where are our colors needs to be in order to have sufficient color contrast? So, since we’re above the line, we get this little warning that says, we’ve got a little contrast.

I happen to know that this is not like the final look for this piece of UI. It’s still being iterated on, but it’ll be something like this, where you’ve got a line and you can sort of tell which side is the good side of the bad side. So I can actually just drag this below the line. That warning goes away. You can see over here. It’s also like updating my element live in the document and it’ll sort of tell me what the good color contrast ratio is.

So I can just grab that value right off here and then go back and just fix it in my CSS. That’s pretty neat, so I was trying this out the other week and something that occurred to me was that you know if, if you use a developer, realize that the contrast is a little bit off, do you need to go back to your designers at that point, And say: well, is this okay for our brand and thing is that’s when they should be factored in earlier on in the process I ideal.

Yeah like this is there’s, there’s definitely other design tools out. There there’s, I think, there’s plug-ins for sketch, and things like that, which will also help you look at the color contrast for your designs and make sure things are not too low. Contrast, anytime, you can catch that earlier in the process, make sure all the designers are on board and all the stakeholders are on board and and that sort of like makes it easier when those things come downstream for folks to implement it, and it doesn’t kind of, Like a contentious issue or anything cool, that’s that’s awesome.

The house audit also had some other accessibility stuff in there as well right. So it had contrast. No, I was highlighting all the tributes to alt attributes, yep yep, so yeah. If we go back to that report, let’s see here so yeah a few of the things that that this site was failing. It’s missing some alt attributes. We’ve got form elements that don’t have associated labels: the big problem there is you land on a control, and maybe it says that it’s a button, but it doesn’t tell you what kind of button right is it the you know, sin my social security number to hackers Button, I don’t want to click that button right.

I want to make sure that I’m clicking the right kind of controls. I know what I’m interacting with we’ve got over. I think 32 tests, or maybe even over 35 tests in in the lighthouse accessibility checker here and under the hood. These tests are all based on a library called axe core which is made by some folks at a DQ so yeah. We we work at the axe, core library we leverage to the test from inside of it and we sort of integrated into dev tools.

You can hop around and inspect the notes. Real, quick, that’s awesome, so this is great again for locally checking on your accessibility issues. What about CI and continuously monitoring your accessibility? Is there a story for that too yeah? Absolutely so the the lighthouse library itself can be used as a standalone node module. So you can pull that into your CI process. If you want to do that or alternatively, you could use the axe core library that is powering these tests and you could use that standalone.

The the nice thing there is, you can sort of decide which accessibility tests you want to turn on or off, depending on sort of the criteria that you’re trying to meet very cool. So we’ve got lots of great tooling for accessibility, auditing. What about docks or education material? Yes, we have that as well. So if you go to developers.Google.Com/live Sunda mental, slash accessibility, we have a whole section there on getting started with accessibility for the web, and it also includes links to our Udacity course.

So that’s like a multi-week kind of hands-on experience where you actually like build stuff and read a bunch of articles and kind of get up to speed on accessibility, very cool yeah. I feel, like my lifestyle, is more accessible, already yeah cool yeah, thanks for having me today, yeah thanks for coming down awesome yeah people should check out ala cast: oh yeah, oh yeah,


 

Categories
Online Marketing

How to check for accessible colors — A11ycasts #17

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,