If it's Interactive, it Needs a Focus Style

[Music] hi I'm Eric I'm a designer at thoughtbot and this is my talk if it's interactive it needs a focus style thank you for attending so I figured I'd start things off with a polarizing statement single page applications ultimately render as HTML and because of this we still need to ensure that anything interactive on the web has focus styles applied to it for some reason some people seem to think that just because you're using fancy JavaScript to route things that you're somehow exempt from making your content accessible that is false so moving on this is the Mona Lisa by Italian Renaissance painter Leonardo da Vinci it's a priceless work of art easily one of the most famous paintings ever created so two questions I want to ask you is it beautiful and is it useful beautiful yes da Vinci was a master of his medium subjects enigmatic expression has inspired generations of tribute imitation parody and analysis useful from a silo perspective undoubtedly however it's just a wooden panel with some paint applied to it fragile brittle and needs a controlled environment and constant conservation efforts what can we do with that not a whole lot this is a leg splint made by the husband and wife design team Charles and Ray Eames they were commissioned by the US Navy during World War two to design a lightweight splint to get wounded soldiers out of the field without causing additional injuries the metal splints of that period weren't secure enough to hold the leg still causing unnecessary traumatic injury from and death from things like gangrene and shock and blood loss is it beautiful I think so the molding followed the contours the human leg giving the splint a flowing organic shape this molding technique was later used by the Eames to make both sculpture and furniture including the Eames chair you might have heard it heard of it it's a highly coveted Pia of designer furniture but is it useful yes definitely it's literally saved lives this is a hammer you can find at any hardware store is it useful very much so is it beautiful when viewed through the right lens definitely the hammers bell and neck are elegantly tapered to minimize weight and maximize driving driving force the claws v-shape makes it so you can pry out nails of many different sizes without any special attachments and the handle is sculpted in such a way that it is both comfortable to grip and it is slip resistant this is a CSS Declaration of outline:none applied to everything on a website way back when many print designers transitioned to web design and brought their biases with them codifying and perpetuating a lot of bad ideas this includes writing CSS resets that globally removed all outlines because there is the perception that they were ugly when compared to the static layout you get with printed content and while the web does borrow a lot from print it isn't print and we should stop thinking about it that way many people rely on not having outlines removed for reasons we'll get into in a bit and for the record I'd like to point out that many CSS reset authors later recanted this decision to remove outline styles from their resets after learning how important they were to the people that relied on them focus tiles are commonly thought of as ugly but I think that's we approach them that's because we approach them with the wrong mindset they're an integral part of the web and we should treat them like such a good link includes a good focus style to help the people who rely on them navigate so what makes a good link first we write the word link that Clues us into what we're trying to do we don't say click here because not everyone clicks things with mice but the word link is pretty ambiguous when placed in the context of multiple links so what you want to do is use a word or phrase that describes where activating the link will take you in the context of a page you begin to tell a story of where you can go and what you can expect to find when you get there the text that describes the link is what we call an affordance of bizarre hints about how something should be used think of them as little cheat sheets for operating things another common affordance we used for links is assigning them a color to distinguish them from the surrounding non link text blue is commonly understood as a link color because it is the color used for many browsers fallback style sheets this external consistency is a quick win for cognitive considerations it's one less hurdle to overcome when first learning the ins and outs of an interface but if you don't see color the same way other people do this may prevent you from determining if the text is a link or not to get around this we add an underline to help distinguish what a link is this affordance is as old as the Internet itself underlines equals links if we're using a mouse or trackpad we want feedback tell us we've successfully identified the link we want to activate this communicates to the user that the cursor has been successfully placed on an area that can be interacted with removing the underlined when a removing the underline on a link when the cursor is hovering over it is a good way to indicate that it doesn't rely on just color to communicate change we also want to have a state that confirms that we've successfully activated this link in question this reassures the person clicking on the link that something is actually going to happen after clicking on it this is ideal for low power devices low bandwidth situations and/or high server load scenarios where it might take some time for the site to deliver on your request but how do we identify a link if we aren't using a cursor or a trackpad we as a focus style which is a visual indicator that works much like the hover style here we have successfully identified the link we want to activate via the tab key on a keyboard the fallback stylesheet that ships with every browser includes code for focus styles that appear if none is provided by the author and this is important to note this is a deliberate inclusion is this deliberate inclusion is a recognition by browser manufacturers that people interact with web content in multiple ways however not all fallback browser focus tiles are good enough to meet acceptable criteria for contrast as stipulated by the web content accessibility guidelines Firefox in particular uses a tiny dotted outline this might prevent low vision users from being able to perceive which link has been focused on which isn't great if they can't see if something has been identified it will be tough to impossible to know if they can activate it what we can do is use CSS to overwrite the browser's default Focus style and create one that is web content accessibility guidelines compliant here I've turned the dotted outline into a solid blue outline using a color that matches the hyperlink color to further visually reinforce the fact that it's a link we could also fill the background in on the link with blue and then update the text to be white now it's even more visually apparent that's great for both biological and environmental low vision conditions such as maybe looking at your phone outside in the bright light you want to make sure each of your states is visually distinct and separate from the other states when styling an interactive element because each state is discrete it allows to more easily understand what's happening to it notice here that there's also a visited state for links which may not always be desirable it's best to use a visited state when a link is in a collect larger collection used for task completion so examples of that might be navigating through training material content or through a table of contents there's also some security considerations you'll need to take into factor in when you're styling your visited lengths and that's just due to the nature of browsers and privacy in a pinch you can usually use your hover State for your focus State combine the two selectors with a comma to save on both effort and file size if there's one practical thing you can take away from this talk it's that this little hat can go a long way to helping your users out leaks are the only interactive element out there either here's a button element another workhorse of the modern user interface you'll notice that the button has a disabled state and not a visited one this is because a button is a trigger for an action not a destination disabling links is technically possible but it can wreak havoc on exists an assistive technology such as screen readers it's best not to do it I'm using also the disabled HTML attribute as a CSS selector meaning that appearance is tied semantically to state so now we know why it's important to have all the states represented for our links and buttons and how to implement but interactive elements on the web aren't just limited to links and buttons and this system of distinct and discreet visual treatments for States should be applied to anything a person can interact with these other interactive elements are links buttons selects details sometimes objects and input and text areas with an accompanying label element these elements all constitute the basic building blocks of any modern robust design system you should also make sure your focus tiles work for things like links that wrap non-text content including things like images it doesn't have to be anything fancy just make sure it's obvious and of course don't forget to provide an alternate description for those who may be unable to view your content its omit that styling focus States is limited to just the outline property as well you have the full range of CSS to work with just make sure that when a state is styled it is done so in such a way that it does not shift the pages layout around when activate it this is disorienting and can make a person lose their place I like to use properties like box shadow color background things that won't cause the browser to recalculate box sizes when triggered and speaking of box shadows one technique I especially like to use is the Stax box shadows effect to create a ring around an element that will honor its border radius you'll notice that I'm removing I'm removing footbe oh you'll notice that I'm removing the outline to get this effect this is a situation where it's acceptable to remove the outline so long as the focus style you replace it with is distinct and passes acceptable color contrast criteria however people experiencing low vision conditions may use Windows high contrast mode to help them help them read so it's good to check our styled States to see if they hold up high contrast mode will strip away a lot of CSS including box shadow to get around this I've used a high contrast mode media query to tweak the focus style to fill the button in instead this could be helpful for people who are magnifying their screen as the focus effect is more pronounced and therefore easier to perceive alternate ways to identify an activate content aren't just limited to keyboards either this is a switch which helps people with motor control issues operate technology they're typically large hardware buttons that you can program to do different things this is neither Mouse nor keyboard interaction it's binary input that can emulate other kinds of input focus Styles aren't also just limited to assistive technology users either here I'm using the Apple TV remote to identify the title I want to activate and we're also just not limited to focus electors anymore either the w3c has two new CSS properties for us to play with focus within and focus visible focus within is a pseudo class that is activated when an element is focused or contains an element that is focused currently the most recent versions of Firefox Chrome and Safari support it and a practical example of how we could use it it could be for a table whose cells contain links with focus within I'm able to highlight an entire table row when a link in one of its table cells has received focus this is done entirely with CSS something you could previously only accomplish with the help of JavaScript here's how it works so we're looking at the table represented as a hierarchical tree in the document object model or Dom for short focus within is declared on a parent node to the one that will receive focus events in our example that's the table row when a focus event of occurs on the link inside of a table cell the event travels up the Dom tree until it hits the element that has focused within declared on it styling rules are then applied as the conditions required by focus within have been met note that if the browser does not support this selector and it is included in a list of other valid selectors the entire group declaration will be ignored so be sure to author your CSS with care and deliberation next we're going to talk about other people's opinions regarding focus styles and what we can do about them sometimes you're being a good Ally and have a strong case for incorporating focus States into your site but a less informed person can override you because they have more organizational out so what can we do about that focus visible is a pseudo class that is activated when an element is focused and a user agent determines via its heuristics the users input modality that's a fancy way of saying it shows focus styling when activated via input other than mouse cursor or finger tap so say you have a link on a website and a person decides it's interesting and wants to read it they identify the link if focus visible is declared on it the browser runs a bunch of logic to figure out what input the person is using this allows us to create separate focus styles one for cursor input and one for keyboard input this allows us to create two separate modes for your website one that has shown two mouse or trackpad users and one that is for everybody else currently only Firefox supports it but we can get other browsers supporting it by using a polyfill which is a technique that uses JavaScript to recreate a browser feature but in addition to the extra data to download and maintenance concerns that come with introducing a polyfill I'd like to I'd like you all to consider this can you trust your heuristics computers are awful at understanding the context of the real world here's Google's world-class algorithm having trouble telling the difference between dogs and fried chicken and the web is more than just mice and keyboards we're seeing more and more devices with multimodal inputs becoming commonplace meaning that a person might be switching input on-the-fly to best accomplish their task for example someone using the Microsoft Surface may at any point be using a mouse a trackpad touch keyboard stylus gesture or voice inputs form-factor is also an unreliable metric so device sniffing is out here's a Gemini PDA which is a clamshell Android smartphone with a full QWERTY keyboard it's a delightful little mutant of a device and I love it devices may also have their input augmented the latest screen reader survey by web aim revealed that a total of 62% of all participants use an external keyboard in conjunction with their mobile device in some capacity this should especially give us pause for concern about an assumption about making assumptions about how people actually use their devices now let's talk about people a lot of problems with identifying people as assistive technology users without their express consent I think the general idea behind focus visible is well-intentioned but ultimately maybe a slippery slope solution the specific concerns I have aren't new nor are they exclusive to just me for starters if you've spent any amount of time doing web development you know that trying to make solutions based off of detecting what the browser reports is an unsustainable nightmare there's also the collecting sharing the collecting and sharing of personally identifying information focus within can be used as a hook to try and identify people as assistive technology users without them expressly communicating that from a technical perspective this runs afoul of the same kind of problems device sniffing does and regardless of its accuracy who the hell knows what a person collecting this information is doing with it mass data breaches are also commonplace occurrences these days would you feel comfortable having this kind of information about you sold to the highest bidder another big picture concern is if you don't check to see if your design solutions actually work the way you intended with the people that you're designing for there's a whole host of biases assumptions and subtle nuance that silently worm their way into the design process especially when it comes to designing for disability and we should always be on guard to prevent that finally this line of thinking is starting to creep back into a terrible trend of the early web which was separate sites for assistive technology users these sites didn't always have parity in information or capability compared to the sites that they were supposed to accompany and oftentimes forced people to contact support if they needed assistance which is an embarrassing act that diminishes personal autonomy there's a reason you don't see these kinds of sites that much anymore and that's simply because they don't work people aren't binary about their skill and operating web sites when I'm healthy and working on my the laptop I can use Google Docs with ease but I'm not that smart so I'm gonna have to have some difficulty learning about differential calculus on Khan Academy maybe I'm traveling in a foreign country you need to get some kind of critical information but I don't speak the language have it a limited data plan and am jet-lagged and sick from the long flight or maybe I'll just get old another way to put this I tab through forums all the time am i an assistive technology user really it's not about what this what a system identifies me as it's about how well a system responds to Who I am and what I experience when I use it because of this what I'm asking you to do is embrace the unknown focus styles are so baked into what the web is that we don't even consider it a unique standalone feature if you're going to make a browser for mass consumption it's simply part of the table stakes we're not always using the latest device or the latest version of the browser either if you're economically disadvantaged unhoused or live in an emerging market you simply may not have access to a device capable of taking advantage of the latest technology in fact some people purchase and use devices that are no longer supported specifically because of the fact that it makes it affordable these groups of users represents millions of people many of them many of whom have never used the internet before so should we turn our backs on them because of it browsers are eating the world and we're going to keep finding them in places we never thought they'd be so in closing it's important to keep the following in mind good user experiences meet the user where they are not where we hope they'll be thank you [Applause] [Music] you

Channel: thoughtbot

Views: 1,229

Rating: 4.8888888 out of 5

Keywords: design, a11y, Accessibility, focus style, web design, css, inclusive design

Id: 43OYDFgLjMQ

Length: 19min 35sec (1175 seconds)

Published: Thu Jan 03 2019