You should focus — supporting different devices on the web (Chrome Dev Summit 2019)

Key Takeaways

hello I'm Monica from Chrome's web developer ecosystem team I'm part of the small team that build a web application like Skoosh and web game-like rocks so whenever we were starting these project we start with design and think about responsive design think about desktop and how it looks like on the smart phone 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're thinking about a specific 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 more 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 device 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 loading and then you need to click Next this seems very simple it's only to click but for users using keyboard this might be different so for the same web site 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 needs 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 tabindex 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 lobbing tab index so let's say the website have a collection of items studies selectable you put tabindex of zero to only one item and set everything else to minus one in this way there's only one item that is selectable in a collection and if the user keyboard user wants to move away from the collection they just need to tap 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 keys to navigate those collection in this case we add a little bit of JavaScript to listen to those key bits and move the tab index of zero to where the focus should be and move the focus and speaking of focus focus ring or focus highlight is really important in many case 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 means sometimes need to proactively manage the focus to here's a common user interaction we see on the Internet today you click on the hive logo icon and then the menu side up but where did the highlight go well highlight it's 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 procs you should check out my talk from Google IO called building fast and smooth web apps thanks for watching [Music]