 Hello, I'm Maniko from Chrome's Web Developer Ecosystem team. I'm part of the small team that build a web application like Scooch and a web game like Prox. So whenever we were starting these projects, we started with design and think about responsive design. Think about desktop and how it looks like on the smartphone. And you think about the click interaction and touch interaction. And this is all great. This is a common practice. And it's so great that you are thinking about responsive design. But many other users might be interacting with your website using something other than mouse and tap. For example, other user might be accessing your website only using keyboard or other assistive technology. Or other users might be accessing your website using screen readers and listening to what's on the screen. Other case, user might be accessing your website using feature phone with tiny screen or on the smart TV using giant screen and using a remote controller as a mouse. So whenever we build a web application, we need to think about those different devices and all of the users using those devices and making sure that nobody gets left behind. Let's think about this small web application that has a menu. You click on it, some new content load in, and then you need to click Next. This seems very simple. It's only two click. But for users using keyboard, this might be different. But for the same website, user might have to tap the key many times to select the menu. And then once the page is loaded, they have to click many, many, many, many more times on the keyboard to get to the next button. And this is not great. So in this case, we as a web developer need to do a little bit of focus management. See, the browser, if they found a focusable element like button, then it focus on it. But as a web developer, we can add a attribute called tab index and set the value to minus 1 to tell the browser that this element is not focusable. Using this attribute, we can do technique called lobing tab index. So let's say the website have a collection of items that is selectable. You put tab index of 0 to only one item and set everything else to minus 1. In this way, there's only one item that is selectable in the collection. And if the user, keyboard user, wants to move away from the collection, they just need to tab key and then go to the next button easily. If they want to interact with the collection, then they can use up and down arrow key to navigate those collection. In this case, we add a little bit of JavaScript to listen to those key events and move the tab index of 0 to where the focus should be and move the focus. And speaking of focus, focus ring or focus highlight is really important. In many cases, this is the only way user know which element has a focus and which one get clicked when they hit Enter. And this one comes in handy too when the user is accessing your website using tiny screen like feature phone. Of course, if you prefer the mouse and touch user to not see those highlight, you can look into focus visible attribute on the CSS to control those. And speaking of focus, we sometimes need to proactively manage the focus too. Here's a common user interaction we see on the internet today. You click on the high bugger icon and then the menu slide up. But where did the highlight go? Well, highlight is still trapped in the background. So even though user open the menu to interact with the menu, they cannot get to the menu item. In this case, you need to move the focus to the menu. So click on the hamburger icon. Menu shows up. You need to move the focus into the button inside of the menu. And don't forget if user click on it and close the menu, then focus should go back to the previous element that had a focus. If you want to know how we use these techniques in the real world web application called Prox, you should check out my talk from Google IEL called Building Fast and Smooth Web Apps. Thanks for watching.