Tag: Team: Scalable Advocacy

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

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,

 

Categories
Online Marketing

How I do an accessibility check — A11ycasts #11

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

 

Categories
Online Marketing

New Techniques for Responsive Design

We have different devices. Different needs even different data requirements, and this is at the core of the PWA attitude to building for the web. We need layouts and content that work across devices if your site doesn’t adapt to the user’s device, you break the illusion and lose trust.

These quotes are from Brad, Frost and Liza danger. Gardner. You should check out that blog post about responsive design, which are linked to from the course materials as Liza says, manage risk focus on content. You know you can make virtually any site usable simply by sizing elements and content correctly. The golden rule for great progressive web app content is not to let content inadvertently overflow horizontally, especially on mobile.

That sounds basic, but lots of sites break this rule by making images inputs and other large elements on the page with fixed sizes. Using relative measurement units and RAM percentages will reduce the severity of this issue. Adding a meta viewport tag will also solve a lot of problems. This tells the browser the size of the virtual viewport on which it renders a web page without setting the viewport meta tag correctly, most browsers scaled down the page to fit a virtual 980 pixel wide viewport.

I’ve seen some great examples of this in action on w3schools, we’ll give you the URLs for that in the course materials. With this article, the initial scale value sets the zoom default. For this page, don’t set a maximum value that will make it impossible for users to zoom and that’s a big problem for accessibility. One other thing you should be aware of the viewport meta tag will mess up the layout for fixed-width sites.

The Mater viewport tag is designed to work with responsive layout. If you use it in a fixed sized layout, it will break things until you convert the site to a responsive, lay out trade document.Documentelement client to see how the viewport meta tag affects the virtual viewport. Here’s another simple technique: this solves many layout problems, you’re setting the preferred size and the maximum size and works for article and audio too so yeah.

You might think that relative sizing would fix everything, in fact, for a while back in the day, some of us thought that relative sizing could solve everything we layout. We had, you know liquid layout, maybe even text could be relatively sized, but relative sizing isn’t enough simplistic. Relative sizing, like this a diagram, means that you have content areas that are too big on desktop and to smaller mobile.

This is why media queries were invented. It’s a simple concept, use different CSS for different sized viewport based on width. That doesn’t just mean making the same layout for every device on a phone. You might want a single column layout, a two column layout on a tablet. Maybe three columns for desktop and so on. You can use media queries to select different layouts depending on the viewport size, here’s a single column layout on mobile to column, on tablet and three columns for desktop.

So do you think about devices, and you might think you could get away with this? Ask yourself what could go wrong with this approach? What about new devices new viewport sizes? What about changing window sizes on desktop we’ll come back to this later now? Is that all there is, of course not. There is a better way go back to our original exercise. Remember content is king devices, keep changing and device, viewports are getting bigger and smaller, not to mention pixel density, pixel, shape, display quality and so on.

Don’t force your designers and developers to make a change every time a new device appears start. The design process with the smallest form factor then add the major breakpoints for the form factors that you work with phone tablets, laptops and widescreen devices. You can then create minor breakpoints to handle specific changes to elements that don’t affect all elements. The final detail to keep in mind is to optimize the content for reading, ideally keep the width of your content to 70 to 80 characters wider than that value makes content hard to read.

Now that doesn’t mean you stop thinking about devices and device classes. You might want one column for phones, two columns for tablets, three columns for desktop, like we’re saying or whatever you can find out more about these recommendations on web fundamentals. Now remember the earlier media queries example in the mobile first world of PWS. We need to turn that around make small viewports the default.

Look at the example here. By the way, there is no fixed rule about whether or not to include media queries, inline or use a separate file. Also, you might want to consider using m’s or REMS for units here, but I won’t go into that now. You’ll also do responsive layout in JavaScript. If you like, this is a simple way to do. Conditional content match media is well supported and there are polyfills. Calc is really useful in responsive design, where you want to use a combination of fixed widths and percentages.

In this example, we have two thumbnail images: side by side: 50 %, the width of the parent element with a 10 pixel margin between them, no matter what size. The viewport responsive design is about more than just changing layouts, as well as changing layouts. You might actually also want to manipulate content, depending on the viewport size and device type, for example, on a phone you might want to make sure page content is visible when the user goes to your home page, so you might opt for a hamburger menu for navigation And put banner ads lower on the page.

Also, if need be, you can just get rid of stuff on desktop. Your users will want full functionality, but not on mobile right wrong. Don’t guess your users needs based on viewport size, plan, content and functionality carefully and don’t assume users want less content or functionality on phones than desktop, for example. Again, this is a crucial part of the PWA attitude. Understand your users, don’t second-guess them.

Data-Driven design, design, content, layouts and transaction processes, so users can get to what they want as quickly as possible. Our data shows that every step to get to content loses 20 % of users rather than removing content. A more sensible option can be to choose different content. Now for images this is called art direction, choosing different images or different image crops and I’ll show an example of this later.

You might even want to provide different text for different viewports such as shorter headlines, but yeah be careful again not to assume that mobile users want less content for article. The general rule is to use a smaller resolution for smaller viewports. This can result in massive reductions in bite, size, playback performance and proven sand, also reduced streaming cost. The best way to do this is with adaptive streaming or HLS, not just media queries and yeah.

You can find out more about that more about adaptive streaming in the course materials. But just to reiterate, the key point here is that when you’re delivering article to mobile, don’t use resolutions larger than you need and talking about article content, don’t forget to caption articles using the track element. It’s really easy. Let’s take a look at the relatively new technique for creating responsive layouts, CSS flexbox provides flexible sizing and alignment element reordering and better performance than floats.

Css flexbox is well supported and we strongly recommend it easy centering is the holy grail of CSS. Take a look at the code here. It is incredibly simple. I still find it slightly thrilling by the way the materials that accompany this article have links to lots of flexbox examples, including this one. Let’s look at the CSS for the examples here. This uses CSS flexbox for three different layouts depending on the viewport width.

Let’s start with the defaults for smaller viewports, remember, mobile-first, the container is declared to use CSS flex. The flex flow property means child elements can wrap. Rather than being squashed onto the same line. You can also use inline flex, that’s shorthand for flex direction and flex wrap properties. The default is ro, no rap 100 % width for each div in the container add a different layout for slightly larger viewport and different again, once the width hits 800 pixels.

The container is now a fixed width and centered horizontally using margins. Let’s take a look at the example here. Once again, this uses CSS flexbox for three different layouts, depending on the viewport width and again, let’s start with the defaults for smaller viewports. For view puts over 600 pixels in width. The order is changed on the smaller viewports. We wanted to give child 1 full width, but for a slightly larger viewport, we can put it next to child 2.

I could go on anyway, to other properties. I’d like to draw your attention to justify content, how items are packed and aligned items how items are aligned. Css grid is in some ways related to the grid system concept, familiar to graphic designers. A page is thought of in terms of lines tracks between lines, cells and areas. Css grid is coming, and it’s already behind a flag in Chrome and Firefox you’ll find more information in the resources for this article.

The lab exercises that accompany this article will help you get started with media queries, breakpoints grids and with flexbox

 

Categories
Online Marketing

Introduction to Service Workers

You’Ll learn what a service worker is and what it can do for your apps. A service worker is a client-side programmable proxy between your web app and the outside world. It gives you fine control over network requests. For example, you can control the caching behavior of requests for your site HTML and treat them differently than requests for your site’s images.

Service workers also enable you to handle push messaging now. Service workers are a type of web worker, an object that execute the script separately from the main browser thread. Service workers run independent of the application they are associated with and can receive messages when not active either, because your application is in the background or not open or the browser is closed. The primary uses for a service workers are to act as a caching agent to handle network requests and to store content for offline use and, secondly, to handle push messaging.

The service worker becomes idle when not in use and restarts when it’s next needed. Now, if there is information that you need to persist and reuse a course restarts, then service workers can work with indexdb databases. Service workers are promised based now we cover this more in other materials, but at a high level a promise is an object. These are the kind of placeholder for the eventual results of a deferred and possibly asynchronous computation service workers also depend on to api’s to work effectively fetch a standard way to retrieve content from the network and cache a persistent content storage for application data.

This cache is persistent and independent from the browser, cache or network status now because of the power of a service worker and to prevent man-in-the-middle attacks where third parties track the content of your users. Communication with the server service workers are only available on secure origins served through TLS using the HTTP protocol will test service workers using local host, which is exempt from this policy.

By the way, if you’re hosting code on github, you can use github pages to serve content. Their provision with SSL by default services, like let’s encrypt, allow you to procure SSL certificates for free to install on your server Service Worker, enabled applications to control network requests, cache those requests to improve performance and to provide offline access to cached content. But this is just the tip of the iceberg.

We will explore some things you can do with service workers and related api’s caching. Assets for your application will make the content load faster under a variety of Network conditions. Two specific types of caching behavior suitable for use are available through service workers. The first type of caching is the precache assets during installation. If you have assets, HTML, CSS, JavaScript images so on, and these are shared across your application.

You can cache them when you first install the serviceworker when your web app is first opened. This technique is at the core of application. Shell architecture now note that using this technique does not preclude regular dynamic caching, you can combine the pre cache with dynamic caching. The second type of caching is to provide a fallback for offline access using the fetch API inside a serviceworker.

We can fetch request and then modify the response with content other than the object requested use this technique to provide alternative resources in case the requested resources are not available in cache, and the network is unreachable. Service workers can also act as a base for advanced features. Service workers are designed to work as the starting point for features that make web applications work like native apps, and some of these features are blog messaging API, which allows web workers and service workers to communicate with each other and with the host application examples of this Api include new content notifications and updates that require user interaction.

The notifications API is a way to integrate push notifications from your application to the operating system native notification system. The push API enables push services to send push messages to an application service can send messages at any time, even when the application or the browser is not running. Push messages are delivered to a service worker which can use the information in the message to update local state or display a notification to the user background.

Sync lets you defer actions until the user has stable connectivity, and this is really useful for ensuring that whatever the user wants to send is actually sent. This API also allows servers to push periodic updates to the app, so the app can update when its next on line. Every service worker goes through three steps in its lifecycle, registration, installation and activation to install the service worker.

You need to register it in your main JavaScript code. Registration tells the browser where your service worker is where it’s located and to start installing it. In the background, for example, you could include a script tag in your site’s index.Html file or whatever file you use. Is your applications entry point with code similar to the ones shown here? This code starts by checking for browser support by attempting to find Service Worker as a property in the navigator object.

The service worker is then registered with navigator dot Service Worker dot register, which returns a promise that resolves when the service worker has been successfully registered. The scope of the service worker is then logged with registration, dot scope. You can attempt to register a service worker every time, the page loads and the browser will only complete the registration. If the service worker is new or has been updated, the scope of the Service Worker determines from which path the service worker will intercept requests.

The default scope is the path to the Service Worker file and extends to all directories below it. So if the Service Worker script, for example, Service Worker dot gif, is located in the root directory, the Service Worker will control requests from all files at best domain. You can also set an arbitrary scope by passing in an additional parameter when registering in this example. We’Re setting the scope of the Service Worker to slash app, which means the service worker will control requests from pages like slap slap, slash, lower and slash out, slash, lower slash low directories like that, but not from pages like slash, app or slash, which are higher a Service worker cannot have a scope above its own path.

This is in your service worker file, service worker, dot, j s now thinking about installation. Once the browser registers a service worker, the install event can occur. This event will trigger if the browser considers the service worker to be new either, because this is the first service worker encountered for this page or because there is a bite difference between the current service worker and the previously installed one.

We can add an install event handler to perform actions during the install event. The install event is a good time to do stuff, like caching, the apps your static assets using the cache API. If this is the first encounter with the service worker, for this page, the service worker will install and if successful, transition to the activation stage upon success once activated, the service worker will control all pages that load within its scope and intercept corresponding network requests.

However, the pages in your app that are open will not be under the serviceworkers scope, since the serviceworker was not loaded when the page is opened to put currently open pages under serviceworker control, you must reload the page or pages. Until then, requests from this page will bypass the serviceworker and operate just like they normally would service workers maintain control as long as there are pages open that are dependent on that specific version.

This ensures that only one version of the serviceworker is running at any given time. If a new serviceworker is installed on a page with an existing serviceworker, the new serviceworker will not take over until the existing serviceworker is removed. Old service workers will become redundant and be deleted once all pages. Using it are closed. This will activate the new serviceworker and allow it to take over refreshing.

The page is not sufficient to transfer control to a new serviceworker, because there won’t be a time when the old serviceworker is not in use. The activation event is a good time to clean up stale data from existing caches. The application note that activation of a new serviceworker can be forced programmatically, with self dot skips waiting service workers are event-driven installation and activation events, fire off corresponding events to which the serviceworker can respond.

The install event is when you should prepare your serviceworker for use. For example, by creating a cache and adding assets to it, the activate event is a good time to clean up old caches and anything else associated with a previous version of your serviceworker. The serviceworker can receive information from other scripts through message. Events. There are also functional events, such as fetch push and think that the serviceworker can respond to to examine service workers navigate to the serviceworker section in your browsers, developer tools, different browsers, put the tools in different places, check debugging service workers in browsers for instructions for Chrome, Firefox and opera, a fetch event is fired every time a resource is requested.

In this example, we listen to the fetch event and instead of going to the network, returned the requested resource from the cache assuming it is. Their service workers can use background sync here. We start by registering the service worker and once the service worker is ready, we register a sync event with the tag foo. The service worker can listen to sync events. This example listens for the sync event, tagged foo in the previous slide.

Do something should return a promise indicating the success or failure of whatever it’s trying to do if it fulfills the sync is complete. If it fails, another sync will be scheduled to retry retry syncs also wait for connectivity and employ an exponential back-off. The service worker can listen for push events, push events are initiated by your back-end servers through a browsers push service. This example shows a notification when the push event is received.

The options object is used to customize the notification. The notification could contain the data that was pushed from the service service workers can be tested and debug in the supporting browsers, developer tools. Screenshot here shows the chrome dev tools application panel. There are lots of great resources to help you get started and find out more access them from the materials that accompany this article.

In the lab materials that accompany this article, you can practice working with service workers and learn more about intercepting Network requests.

Website management packages are important for any business these days. Check out the video from Allshouse Designs to see what can be done for your company and yes, for how much. 

 

Categories
Online Marketing

Intro to Web Push & Notifications

This diagram gives an overview on the client side. Your webpage interacts with service workers which in turn receive push events via the user agent, also known as the browser and on the backend.

You send messages from your application server to the push service, which then delivers them to the correct client. Let’S look at the notification API first, this allows developers to display notifications to the user. Before we can create a notification. We need to get permission from the user. This code will prompt the user permissions to show notifications. You can try this out from the browser console as you’ll see later, permission is requested automatically when subscribing to a push service.

So there’s no need to call this function when using just push notifications. Let’S take a look at some examples for configuring and displaying a notification from a service worker. We first check that permission has been granted. Then we call show notification on the service worker registration object and pass in the notification title. You can also try this out from the browser console. Try it on the new tab page now for push notifications.

You call show notification in the service worker in response to a push event. When a message arrives, we can specify an optional options: object to configure the notification. This is passed in as the second argument. In the show notification function, the body property is the body text displayed below the title icon? Is the image displayed at the top of notification? Vibrate is the vibration pattern for phones, in this case 100 milliseconds on 15 milliseconds off 130 seconds on so on, data is the arbitrary data we can retrieve in the service worker when the user interacts with the modification.

In this example, primarykey allows us to identify which notification was clicked when handling the interaction in the serviceworker. Let’S try that out. We can add action buttons to the notification that we can then handle each in a different way. Here’S what that looks like notification, interaction events are handled in the service worker tapping clicking or closing the notification. There are two notification interactions you can listen for in the service worker notification.

Close the notification close event only triggers when the notification is dismissed via a direct action on the notification. If the user dismisses all notifications, the event will not trigger, and this is done to save resources, notification, click. If the user clicks the notification or an action button in the notification, the notification click event is triggered. If the user clicked on an action, the action is attached to the event object of the notification click handler.

We can check which action was triggered and handle it separately. Now, let’s see how the two handlers work in a service worker. First notification close: we access the notification, object from the event object and we can get the data from the notification object. We might use the primary key property from the data to identify which notification was clicked in a notification click handler. We can determine what action button.

The user pressed by inspecting the action property on the event object. Note that each browser displays notification actions differently and some don’t display them at all to compensate. We put a default experience in this example in an else block after checking which action was clicked so that something will happen on a simple click of the notification. Now, let’s see how you send push messages from your server and handle incoming messages on your client web app.

Each browser manages push notifications through its own system called a push service when a user grants permission for push on your site, you subscribe them to the brow. Push service: this creates a subscription object that includes a public key to enable messages to be encrypted and an endpoint URL for the browser’s push service, which is unique for each user from your server. Send your push messages to this URL encrypted with the public key.

The push service sends the message to the right client. Now the service worker will be woken up to handle incoming push messages when a push event is fired, and this allows your app to react to push messages. For example, by displaying a notification using service worker registration show notification, your app doesn’t need to listen to or Pole for messages and the browser doesn’t even need to be open.

All the work is done under the hood as efficiently as possible by the browser and the operating system, and this is great for saving battery and CPU usage. Let’S go through that step by step in the apps main JavaScript call push manager subscribe on the serviceworker registration object, get the subscription object and convert it to jason, get the endpoint URL and public key and save this to your server, for example, by using a fetch Request send the message payload from your server to the endpoint URL encrypted with the public key.

The push message raises a push event in a serviceworker which we can handle in a push event handler in push event handler. We get the data from the message and display a notification. The push API allows users to subscribe to messages sent from your app server that are sent via the push service used by the browser and subscribing, of course, is done in the JavaScript. For the page, responding to push events, for example by displaying a notification, is done in the serviceworker, just to repeat subscribing to the push service and getting the subscription object happen in the JavaScript for the page.

First, we check if the user is already subscribed and update the page UI accordingly, if they are not subscribed, prompt them to subscribe, if they are already subscribed, update the server with the latest since that may have changed by the push service, since it was last used When the user grants permission for push on your site, you subscribe them to the browsers push service, as I said before, this creates a special subscription object that contains the endpoint URL for the push service, which is different for each browser, along with a public key.

We send the subscription object for this user to the server and save it now before you subscribe a user check if you already have a subscription object, if you don’t have the object again update the UI to prompt the user to enable push notifications, and if you Do have the subscription object, update your server database with the latest subscription object. The ready property of the service worker defines whether a service worker is ready to control the page or not.

It returns a promise which resolves to a serviceworker registration object. When the service worker becomes active, the get subscription function returns the subscription object or undefined. If it doesn’t exist, we need to perform this check every time. The user accesses our app because it is possible for subscription objects to change during their lifetime. This is the process of subscribing to the push service register, the service worker from the main page main jeaious.

This request goes to the user agent. The user agent returns the service worker registration, object, use the service worker at registration, object to access the push manager API and from that requests are subscribed to the push service. This request is passed on to the push service. The push service returns. The subscription object, which includes the endpoint URL and the public key, save the subscription object data to your server and send push messages from your server to the endpoint URL encrypted with the public key.

Like I said now before sending notifications, we must subscribe to a push service. We call push manager subscribe on the service worker registration object to subscribe and the resulting push subscription object includes all the information. The application needs to send a push me such an endpoint and encryption key needed for sending data each subscription is unique to a service worker. The end point for the subscription is a unique capability.

Url knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret or other applications might be able to send push messages to your application. Here’S an example of the subscription object. This is the object returned from the push service. When we call reg push manage, add subscribe. The subscription object has two parts.

The first part is an endpoint URL. The address on the push service to send messages to this includes an ID that enables the push service to send a message to the correct client and service worker. The second part of the subscription object is the keys property. The p25 6d H key is an elliptic curve, diffie-hellman ECD H public key for message. Encryption. The earth key is an authentication secret that your application server uses in authentication of its messages.

These keys are used by your application, server to encrypt and authenticate messages for the push subscription and, let’s see how the process of sending a message is done. The server generates a message encrypted with the public key and then sends it to the endpoint URL in the subscription object. The URL contains the address of the push service along with subscription ID, which allows the push service to identify the client to receive the message.

The message is received in the push service which routed to the right, client and the process of sending a push message from the server works. Like this. A back-end service on your server sends a push message to the push service using the endpoint URL from the subscription object. The message must be encrypted with the public key from the subscription object. The push service uses subscription IDs encoded in the endpoint URL, to send the message to the right user agent.

The push event is picked up by the service worker. The service worker gets the data from the message and displays a notification in this example. We’Re using Google’s web push library for nodejs to send a push message from a node.Js server. The TTL value in the options specifies the time in seconds that the push service should keep trying to deliver the message now. This is important to set correctly some messages.

Have a short life some may be valid for several hours or more. We then pass in the subscription object. Payload and options object to send notification. You need a way to ensure secure communication between the user and your server and between your server and the push service and between the push service and the user. In other words, the user needs to be sure that messages are from the domain. They claim to be from and have not been tampered with by the push service you need to make sure the user is who they claim to be valid, was created to solve this problem.

This vapid identification information can be used by the push service to attribute requests that are made by the same application server to a single entity. This can be used to reduce the secrecy for push subscription URLs by being able to restrict subscriptions to a specific application server. An application server is further able to include additional information. The operator of a push service can use to contact the operator of the application server in order to use vapid, we need to generate a public/private key pair and subscribe to the push service using the public key.

The public key must be first converted from URL base64 to a you in 8 array. This is then passed into the application. Server key parameter in the subscribed method. The web push library, provides a method generate vapid keys, which generates the keys. This should be used once in the command line when push generate vapid, keys, Jason and the keys stored somewhere safe. We can use the web push library to send a message with the required vapid details.

We add a vapid details, object in the options parameter. That includes the parameter required for the request signing now. Let’S look at messages from the receiving end in the web. App on the client handling push, events happens in the surface worker, the service worker will be woken up to handle incoming push messages and a push event is fired. This allows your app to react to push messages, for example, by displaying a notification using service worker registration, show notification to display a push notification.

You listen for the push event in the service worker. You get the push message. Data from the push event object in this example, we simply convert the message: data to text The Wrap, show notification in a wait until to extend the lifetime of the push event. Until the show notification promise resolves, the push event will not be reported as successfully completed until the notification has displayed.

You can practice working with the notification and the push API by following the lab that accompanies this article, one small gotcha, don’t use private or incognito mode for this lab for security reasons, push notifications are not supported in private or incognito mode. You

Website management packages are important for any business these days. Check out the video from Allshouse Designs to see what can be done for your company and yes, for how much.