ROUGH EDITED COPY
CDA If It’s Interactive, It Needs A Focus Style April 14, 2020 7:20 P.M. ET
CART PROVIDED BY: ALTERNATIVE COMMUNICATION SERVICES, LLC www.CaptionFamily.com
This is being provided in a rough-draft format. Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.
Nick Ng: And we want to ‑‑ the main part of the show. Eric Bailey, pronoun is he/him. Eric, welcome. Eric is a Boston‑based designer who helps create straightforward solutions that address a person's practical, physical, cognitive, emotional needs using accessible performance device‑agnostic technology. He's an inclusive design advocate, A11YProject maintainer, and Mozilla Developer Center Web Docks contributor. Reach out to him at @EricwBailey. Eric, feel free to take over, and I'll pass it on to you.
ERIC BAILEY: Thank you for such a lovely introduction. It's great to see you all virtually. So, I'm going to share my screen, but just before I do, quick thumbs up on if audio's sounding okay. Great, all right.
So here is my screen. I'm just going to full‑size it. Hopefully. There we go. And, okay. So, you know, before I get started, I just want to say thank you to the Chicago Digital Accessibility for this opportunity. It's a Meetup I've always wanted to attend, and, ironically, this is how it's going to shake out. And I also want to say thank you to you, the audience, for taking the time to attend my talk. The world is in a scary place right now, but being able to come together like this really ‑‑ it really gives me a feeling of hope and also makes me feel like we're tapping into what this whole Internet thing was supposed to be about. So, yeah, that all being said, let's begin.
And will it work? Okay. So this is the Mona Lisa, by Italian Renaissance painter Leonardo Da Vinci. It's a priceless work of art, easily, one of the greatest paintings ever created, so there's two questions I want to ask you. Is it beautiful? And is it useful? Beautiful, yes. Da Vinci was a master of his medium. The subject's enigmatic expression have inspired tribute, parody, and analysis. Useful from a societal perspective, undoubtedly. However, it's just a wood panel with some paint applied to it. It's fragile, it's brittle, and it needs a controlled environment and constant conservation efforts in order to be maintained. So what can we do with this? You know, really, not a whole lot.
This is a leg splint made by the husband and wife design team Charles and Ray Eames. They were commissioned during World War II to design a lightweight splint to get 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 and death from things like gangrene, shock, and blood loss.
Is it beautiful? I think so. The molding followed the contours of the human leg, giving the splint a flowing, organic shape. And this molding technique was later used by the couple to make both skullture and furniture, including the Eames chair. You may have heard of it, it's a highly coveted piece of designer furniture. Is it useful? 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? I think when viewed through the right lens, definitely. The hammer's bell and neck are elegantly tapered to minimize weight and maximize driving force. The V‑shape makes it so it can pry out nails of many different sizes without any need for specialized attachments. And the handle is sculpted in such a way it's comfortable to grip and slip resistant.
So this is a CSS declaration of outline none applied to everything on a website. You see, 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 included writing CSS resets that globally removed all outlines, because of the perception they were ugly 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 who rely on not having outlines removed for reasons that I'll get to in a bit, and, for the record, I'd like to point out that many CSS reset authors later recanted their decisions to remove outlines from their resets after learning how important the outlines were for the people that relied on them.
Focus styles are commonly thought of as ugly, but I think that's because we approach it with the wrong mindset. They are 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? On this slide is Link the protagonist from the Legend of Zelda game series, and as we all know, Zelda is the boy. 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 in the context of two or more links. So what we want to do is use a word or phrase that describes where activating a link will take you. In the context of a page, you begin to tell a story where you can go and what you can expect to find when you get there. The text that describes a link is what we call an affordance, and affordances are hints about how something should be used. Think of them as little cheat sheets for operating things. For example, on this slide is the image of a push handle for a door.
Another common affordance we use for links is assigning them a color to distinguish them from the surrounding non‑link text. Blue is a commonly understood link color, because it is the color used in many browsers' fall‑back style sheets. This external consistency is a quick way for cognitive considerations, in it's one less hurdle to overcome when learning the ins and outs of a site's interface and how it works. But if you don't see color the way other people do, it 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.
For using a mouse or track pad, we want feedback to tell us that 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 underline when a cursor is hovering over it is a good way to indicate just that, and it doesn't rely on just color alone to communicate change.
We also want to have a state that confirms that we successfully activated the link in question. This reassures the person clicking on the link that something is actually going to happen after clicking it. This is ideal for low‑power devices, low bandwidth and/or high server load scenarios where it may take some time for the site or device to deliver on your request.
But how do we identify a link if we aren't using a cursor or a track pad? We use 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 style sheet that ships with every browser includes code for focus styles that appear if none is provided by the author. This is a really important thing to note. The deliberate inclusion is how people enact with web content in multiple different ways. However, not all fallback focus styles are good enough to meet accessible guidelines criteria for contrast. Firefox in particular uses a tiny dotted outline, and this might prevent low‑vision users from being able to perceive which link has been focused on, which isn't that great. If someone can't see if something has been identified, it will be tough or impossible for them to know that they can activate it.
What we can do is use CSS to overwrite the browser's focus style and create one that's 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 fully re‑enforce the fact it's a link. We can also fill in the background of the link with a color and update the text to white. Now it's even more visually apparent. That's great for both biological and environmental low‑vision conditions.
So you want to make sure that each of your states is visually distinct and separate from the other states when styling an interactive element. Because each state is discreet, it allows us to more easily understand what is happening to the element that it's applied to. So here I have a anchor element, then with the hover state, the focus state, the active state, and the visited state represented. And then note that with the visited link state, it may or may not always be desirable. It indicates when you've previously been to a destination a link points to. And the visited state is, you know, ideal when you have a collection of links that are used for a single kind of task completion, such as viewing training material or navigating through a table of contents. Another thing worth mentioning here is the options for styling a visited link are a bit limited, so let's actually pause for a second and talk about that.
The options of what properties you can use for visited links are limited due to privacy and security concerns. People used to be able to get access to your browsing history via JavaScript's window get computer style and other less savory techniques, and this near‑instant process allowed a third party to determine where you had been on the web, oftentimes to the point of de‑anonymizing you as an individual. This is disturbing enough, but it also raises the issue of a complete lack of oversight about what these third parties did with that collected information, and, notably, who they shared that information with. Most of you are probably thinking about blackmail for visiting porn sites right now, but here's another potential threat to think about. You know, what if your insurance raised your rates because you've been searching about some symptoms you've been experiencing? And you conducted the searches with enough frequency that they flag it as a potential onset as a chronic condition that posed a risk to their bottom line? Yeah, okay, moving on.
In a pinch, you can usually use your hover state for your focus state, combine the two selectors with a comma to save on effort and file size. If there's one practical thing you can take away from this talk is this little hack can go a long way to helping your users out.
And links aren't the only interactive element out there either. Here's a button element, another workhorse of a modern user interface. Like links, buttons have discreet states that you can style. There's the resting state, as I call it, which is just the button element with no interactivity. It can have a hover state, as well as a focus state, active state, and a disabled state. You know, you'll note that the button has a disabled state and not a visited state, and this is because a button is a trigger for an action and not a destination. Disabling links is technically possible, but can wreak havoc on assisted technology. It's best not to do it. I'm using the disabled HTML attribute here as a CSS selector, meaning that appearance is now systemically tied to state.
Poor affordances won't make you rich, by which I mean a lack of affordances might tank your product or open you up to lawsuits.
Here's an article on Fast Company how Ikea adjusted design to match cultural norms. Fast Company is one of the top viewed websites of 2018, meaning it gets thousands upon thousands of viewers every day. However, for its current design, links inside of articles don't have sufficient color contrast to make them distinct from the surrounding non‑link article text.
Here's the first paragraph of the article. Can you tell where the link is? It's here. In addition to the low amount of color contrast between links and static article content, this link style doesn't have underlines, so we're missing yet another affordance that could have helped us determine if it was interactive. And it's important to note these links fail web content accessibility guidelines criteria solely based on what they look and not what their actual underlying mark‑up is. And it's important that accessibility is more than just semantic mark‑up and an accessibility checker may not flag this, but it still represents liability, and it still may open you up to lawsuits. It's also bad business. Having poor interactive affordances means chances are good fewer people will click on things, and that's really not great if you're making money on things like referral links or pointing to other articles on the site to serve up more ad impressions. Or, you know, say you have a startup and just want people to successfully use your app and not delete it in frustration within the first three minutes because they don't know what to do or where to go.
Or, you know, to put it another way, Carl groves says "nobody has complained before is a silly excuse for not caring about accessibility. You're right, they didn't complain, they left." So developed in 2016 and 2019 to, quote, explore the online shopping experience of people with disabilities and examine the cost of business of ignoring disabled shoppers, it was discovered that more than 4 million people abandoned a retail website because of the access barriers they found. And these people represent $2.17 billion in lost revenue potential. In parallel, the American Institutes for Research determined there's an estimated $490 billion in disposable income in disabled teenagers or adults. Those are billion with capital Bs. Startups to multinational conglomerates would benefit from thinking about this.
Now we know why it's important to have all states represented by links and buttons and how to implement them. On this slide is a knife switch in an open position, but, you know, interactive developments on the web aren't just limited to links and buttons, and this should be applied to anything a person can interact with. And so these other elements, including the anchor element and the button element, are the details element, sometimes the object element, depending how it's configured, and then a label element with a companion input select or text area element. And these elements all constitute the basic building blocks of any modern robust design system, to do well to memorize them.
You should also make sure your focus styles work for things that link to text wrap, including things like images. And, of course, don't forget to provide alternate descriptions for those who may be unable to view your content. Here's a puppy in a flower pot. But, you know, we can do a little bit better than that. Here is an updated description. It's a happy‑looking Saint Bernard puppy resting his paw on the lid of the clay flower pot he's been placed inside of. His tongue is hanging out and he's looking straight at the camera, in front of a flowering yellow plant on a bright spring day. If we want to create equal and inclusive products, we can provide detail in our alternate descriptions to match the quality a more abled person may experience. This image is being intentionally placed. If it's the focal point of the page, we want the reason why it's been placed there communicated regardless of the method used to access it.
And, you know, it's a myth that styling focus states is limited to just the outline property. In fact, 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 page's layout around when activated. This is a disorienting effect and can make a person lose their place, so I personally like to use properties that won't cause the browser to recalculate box sizes, such as color, background, and box shadow.
And, you know, speaking of box shadows, one technique I especially like is using stacked box shadows to create a ring around an element that will honor its order radius. So here I have a button labeled "save" with a blue focus ring around it, with some distance, that is created by having the color of the background being kind of the initial first ring, three‑pixel width, and followed by six‑pixel width of the focus color, which extends three pixels past the three pixels of the background to give it the apparent effect of a three‑pixel‑wide focus ring that's kind of slightly floating off from the button.
And you'll notice here that I'm removing the outline to get this effect, and this is a situation where it's actually acceptable to remove the outline. So long as the focus style you've replaced it with is distinct and passes web content accessibility guidelines, color/contrast criteria.
However, people experiencing low‑vision conditions may use high contrast to help them read, so it's good to check your styled states to see if they hold up in this specialized state. High contrast mode will strip away a lot of CSS, including box shadow, and this is actually by design, as it is used to enforce maximum amount of readability in a low‑vision situation. So, you know, to work around this issue, I've used a high contrast media query to tweak the focus style to fill this button in instead, so instead of the focus ring on a hollow button treatment, what I'm doing now is when it's activated, I'm filling this button in, and I'm using high contrast color key words to target the high contrast color theme, and I'm not using absolute colors. This way if a user changes their high contrasting colors, it will adapt without having to do any extra work. And, you know, this effect could be helpful for people who are magnifying their screen as, you know, the focus effect here is more pronounced and, therefore, easier to perceive.
Alternate ways to identify and activate content aren't just limited to keyboards, as well. This is a switch, which helps some people with motor control issues operate technology. They are typically large hardware buttons that you can program to do different things, and this is neither a mouse or keyboard interaction. It's a binary input that may emulate other kinds of input. So just as a forewarning, this next slide has a full‑screen animation, so if you are motion sensitive, please consider looking away while I describe it.
Focus styles aren't limited to just assistive technology users either. Here I'm using the Apple TV remote to identify the tile that I want to activate, and it's worth specifically pointing out that this is a luxury piece of mainstream consumer technology and not specialized assistive equipment.
Okay. We are on to the next slide, which is no longer animated. Thank you.
We're not just limited to the focus selector anymore. The W3C has two new CSS properties for us to play with. Focus Within, and Focus Visible. This slide's photo is a statue of the Buddha with the title "new ways to focus."
Focus within is a pseudo class that's 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. This is a screenshot from the website "Can I Use" showing the support table for this property for all modern browsers, as well as Internet Explorer versions 6 through 10 and 11.
Speaking of tables, a practical example of how we could use this new selector could be for a table who sells contained links. Here is a table of list of NBC television affiliates. So with focus within, I'm able to highlight an entire table row and 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.
And here's how it works. 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 the parent node to the one that will receive focused events. In our example, that is a table row. When a focus event occurs on the link inside of a table cell, the event travels up the DOM tree until it hits the element that has focus within declared on it. Styling rules are then applied, as the conditions required by focus within have been met.
And 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 discretion. On this slide is a tweet by Keith J. Grant illustrating just this.
Next, we're going to talk about other people's opinions regarding focus styles and what you can do about them. Sometimes you're being a good a11y, and I have a strong case for incorporating focus states into your site, but a less informed can override you because they have more organizational clout. So what can we do about this? On this slide is Michael Scott, the boss from the TV show "The Office," one of the greatest villains of all modern media, in my opinion.
Well, one thing we can do is sneak those focus styles in using focus visible, a pseudo‑class that is activated when an element is focused and a user agent determines viewer heuristic the user's input modality. And that's a fancy way of saying it shows focus when activated via input other than a mouse cursor or finger tap.
So say you have a link on a website, and a person decides it's interesting and wants to visit 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 at this given moment, and this allows us to create separate focus styles. One for cursor input, and one for keyboard input. And this allows you to create two separate modes for your website. One that is shown to mouse or track pad users, and one that is shown to everybody else.
Currently, only Firefox supports it, as shown by this screenshot from Firefox versions 4 through 74, 75, 76, and 77, as well as Firefox for Android version 68.
But, you know, 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 meet these concerns that come with introducing a polyfill, I'd like you all to consider this. Can you trust your heuristics? I'm paranoid ‑‑ I mean, I'm skeptical. Computers are awful at understanding the context of the real world.
So, you know, here's Google's world class algorithm having trouble telling the difference between dogs and fried chicken. This is a screenshot of Google image search with some crispy fried chicken placed next to some fuzzy dogs of the same color, and you can search this yourself, and it's pretty funny.
So, you know, the web is more than just mice and keyboards. We're seeing more and more devices with multi‑modal inputs becoming commonplace, meaning that a person might be switching input on the fly to best accomplish their task at hand. For example, someone using the Microsoft Surface, which is Microsoft's flagship computing device, may at any point be using a mouse, a track pad, touch, keyboard, stylus, gesture, or voice inputs. Form Factor is also an unreliable metric. Honestly, device sniffing is also out. You know, here's a Gemini PDA, which is a clam shell 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 a total of 62.3% of all participants use an external keyboard in conjunction with their mobile device in some capacity. And this should especially give us pause, because of the concern about making assumptions about how people actually use their devices, not how we think they will.
So now let's talk about people a little bit more. I have 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 may be 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 creating and supporting solutions based on detecting what the browser reports is an unsustainable nightmare. There's also 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, and this is analogous to the issues with the visited link styling described earlier, only now we live in the future and mass data breaches are commonplace, every day occurrences, meaning that this deeply personal information collected about you, without your consent, is even more insecure than it has been before.
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 you're designing for. This unpredictable state change has been reported to be confusing for low‑vision and less technologically literate users. There are kinds of people that focus within ‑‑ sorry, focus visible, was supposedly created for. What it is, it's breaking the mental model of how these people think about these very basic interactive elements and how they are supposed to function. A fact which demonstrates the importance of testing the things you make with the people they are actually intended for.
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 parody and information or capability compared to the sites that they were supposed to accompany, and often forced people to contact support if they needed assistance, an embarrassing act that diminishes personal autonomy. There's a reason you don't see these kinds of sites anymore, and that's because they just don't work. In fact, Scandinavian Airlines was recently fined millions of dollars by the U.S. Department of Transportation for just this very thing.
People aren't binary about their skill in operating websites. Here's a graph with two axes arranged a cross shape. The X axis are labeled "completely unfamiliar" and "expert," and the others are labeled "fully able" and "severely impaired." When I'm healthy and working on my laptop, I can use Google Doc with ease, so it's placed in fully able and expert area of the graph. Or maybe I'm reading about an event I have some familiarity with but want more information on. For example, I use Meetup, but I have never looked at the Chicago Accessibility's Meetup page before, so I'm pretty much in expert territory, but the icon has been placed a little bit more towards "completely unfamiliar." But, you know, I'm not that smart, so I'm going to have some difficulty learning about differential calculus on Khan Academy, so we're placing this icon, you know, pretty high up for fully able, but towards completely unfamiliar. I know how to use the web, I just don't know about this concept at all. You know, maybe I'm ‑‑ I have been and may in the future, hopefully, be traveling to a foreign country and need to get some kind of critical information, but, you know, I don't speak the language. I have a limited data plan, and I am jet lagged and sick because of the long flight, so here I'm putting an icon for the Moscow Metro in the quadrant of completely unfamiliar and severely impaired. Or, you know, maybe I'll just get old.
Another way to put this, I tab through forms all the time. Am I disabled? Am I an assistive technology user? You know, really it's not about what a system identifies me as, it's about how well a system responds to who I am and what I'm experiencing when I use it.
Because of this, what I'm asking you to do is embrace the unknown. On this slide is a picture Of Hank Hill being embraced by John Redcorn. "King of the Hill" is a sorely underappreciated show, if you've never seen it before.
Focus styles are so baked into what the web is, that we don't even think of it as a unique feature. If you're going to make a browser for mouse consumption, it's simply just part of table stakes. Here is a screenshot of another table labeling the CSS 2.1 selectors, which includes focus. You'll notice it doesn't have a discreet page for focus itself, and it is green across the board, fully supporting every browser, every version, all the way back to its infancy. And, you know, another thing to think about is we're not always using the latest device or the latest version of a browser. For example, this is a $38 smartphone from Walmart. And 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. The Jio smartphone is incredibly popular in India right now. And, in fact, some people purchase and use devices that are no longer supported specifically because the fact that their deprecation makes them affordable. This is the now‑defunct Windows phone. So these groups of users collectively represent millions of people. Many of whom have never used the Internet before. Should we turn our backs on them because of that?
Browsers are eating the world, and we're going to keep finding them in places we never thought they'd be. Here's a developer, Drew McLellan, discovering that his new car has a browser built into it. His quote, "just discovered that my new car has a web browser. And apps." So, you know, in closing, it's important to keep the following in mind. Good user experiences meet people where they are, not where we hope they will be.
So thank you for your time, and to the Chicago Digital Accessibility Meetup group for setting this up. Thank you for the captioner. I really appreciate you taking the time. And, again, thank you to everyone tuning in today. I really appreciate your time and your attention and your consideration. I am reachable online via ericwbailey.design, that's my personal website, on most forms of social media, and these slides will be published. So now, I believe, I'm going to stop sharing, and we may have some time for questions.
Nick (Co-host): Yeah. We have one question from YouTube. I'm going to share in chat. So we had a question from Liz, who asked the question, "if you use keyboard navigation and then you shift to mouse, the dual focus can be confusing. For example, two items are used in keyboard and mouse, when they shift to items in the menu or highlighted," let me know if you understand the content of this question.
ERIC BAILEY: Yeah, if I'm understanding this correctly, the issue is when you have multiple inputs at the same time. So a mouse and a keyboard interacting near simultaneously. I think if my understanding is correct, that this is a good reason why your focus state should be separate from your hover state, in that you want to have a distinction between what is currently being hovered and what is being focussed, if there's a situation where you have those two input events kind of operating in tandem. Honestly, if somebody wants to hop in and tell me I'm wrong, feel free. But, you know, it's one of those if you're crafting a design system and it's a perfect world, that's kind of the thinking as to why you want to have a separate focus state from a hover state. And for the little comma trick that links them, that's just if, you know, your organization isn't prioritizing this sort of thing and you already have hover states because they are cool and pretty, and usually most websites do, just sneak that in when no one's looking. It's a little bit better, because it takes it from no focus indication whatsoever, to at least the focus effect is tied to something that visually updates on the screen.
Nick (Co-host): Cool, so Liz wanted to say thank you from YouTube.
ERIC BAILEY: Whew.
Nick (Co-host): Good answer. All right, we're going to take a moment from live Q&A from anyone on Zoom. For those on YouTube, feel free to put in the chat and I'll relay to Eric.
ERIC BAILEY: Jessica, I see your comment in the chat. The reason I made this deck is because of that fight. Just over and over and over again.
Attendee: I have a question. I guess in the same vein, if we do have clients or design teams that are really hesitant and really fighting against it, what other tools can we use to try to push for? I'd hate to sneak it in. I want to be able to convince people of the use of it, but sometimes it's really difficult.
ERIC BAILEY: Yeah. I, personally, when I'm doing accessibility work, I like the ‑‑ you catch more flies with honey than vinegar kind of thinking. So like part of it is getting people to understand the importance. I think, you know, unfortunately, accessibility work is still not that mainstream, although it is getting better, and so, like, there may not be that knowledge of why a focus state is so important. The other kind of thing that just if you have the ability to, that is just absolutely so powerful, is test your product with somebody that relies on focus states. And the second they hit a page and don't know where they are, and, like, you know, your head of product is sitting there and just watching it, it is absolutely incredible, because it's very easy to read blog posts of text with, you know, people with impressive looking credentials and just be like, well, that's not me, but it's another thing to see a real human being trying to use something and not being able to because of the decisions you've made. And it's a big‑old slice of humble pie, but it's so incredible.
Attendee: That's a great point. Yeah, it builds up the empathy when you can see somebody else struggling with something you've built, or a decision that you've made, yeah.
Attendee: I have a question. So when you had that slide where you had the link, the button, the detail, label, input, text area, and you're telling ‑‑ talking to a designer and saying that, you know, you're teaching them about styling the different focus states and they are used to going to Dribble or Pinterest for inspiration, and not a lot of places have those mapped out in design systems. Are there any organizations that have pretty esthetic options or examples? Because I know sometimes specs, they are just very plain and simple, that you can direct a designer to that might help them find more interesting‑looking patterns?
ERIC BAILEY: Yeah. I'm a big nerd, so I love other companies' design system style guides, and oh, Dribble, I could rant about Dribble for another hour. Like, typically, a mature style guide will include these kinds of things, either because they are making a serious attempt at it, or, honestly, they've been sued because of it and now they are including it because they've been compelled to. But you don't necessarily know that. So one of the cool things you can do is have that appeal to authority and be like, you know, well, Shopify does this, so, you know, they are legitimate. So that's maybe a way we could think about it. And then, you know, kind of following it up with just overwhelming them with resources, where it's like, well, here's seven full‑fledged design style guide systems with all the markup you could ever want, used by major commercial entities and, you know, what more could you do? Please, leave me alone.
Attendee: Mainly, just search for big brands that you enjoy and look for their style guides?
ERIC BAILEY: Yeah, yeah.
Nick (Co-host): Cool.
So we'll take a moment. We have a question from YouTube. I often see how the style that don't contrast strongly with the default state. Is that a major accessibility problem if there are more high contrast focus states?
ERIC BAILEY: I'd say yes in that color contrast guidelines are pretty specific. The math is pretty hammered down at this point, and if you were really interested in this kind of thing, they are actually updating it with, I believe, calculated luminosity and like this ties into, literally, how eyes see color because of physics and chemistry. It's really fascinating stuff, but to answer the question, if you are not meeting a high enough contrast value, there is the chance that a person may not be able to perceive it. So, like, this is the best resource we have for covering the widest amount of users, so if it's not meeting that ratio when the state is triggered, it may not be apparent, so it may not be obvious that it's been focused to, or it's being hovered, or its state has changed in some way. So, like, one thing I like to do is just ‑‑ if I can, just make it a little more obvious, so you have a larger area to indicate that. And that's kind of the difference between the underline on the link, which is, you know, usually a small one‑pixel underline, you know, popping in and out, which is kind of hard to perceive, or a larger kind of focus area, which may surround the entire element.
Karen (Co-host): We have another question from Jonathan in Zoom. I think you showed links using underlines when hovered over. Can't that cause a user to stop knowing they are links?
ERIC BAILEY: I think that's a really interesting question. Potentially. And I'd say that that's ‑‑ that starts to open up into the question of digital literacy in that you can discover it by playing around with your interaction mode. But, you know, personally, I have family that are not technologically sophisticated, and I have kind of seen them ‑‑ not necessarily that specific kind of thing ‑‑ just struggle with these basic metaphors, which is, I think, if you'll let me kind of ramble for a second, kind of ammo for making utility obvious. So make your buttons look like buttons, make your links look like links, make your tabs look like tabs, because the more you can borrow from how everybody else does it, the more it may translate to, like, ah, this looks "ish," like the thing I'm used to, so I wonder if it will work the same way.
Josh Barr said material honesty. Yes, I love that phrase.
Attendee: Can you define "material honesty"?
ERIC BAILEY: Yeah, so it's the idea that the thing looks like the thing it's built from. So a classic example is like a radio button that is analogous to, like, old‑time car radios, where you'd punch in, so you could only make one selection. Which I know just pops open the whole design debate, but it's one of those things where it's like sometimes you'll see designers that have the genius idea to make a checkbox, but make it a rounded circle instead of a square, and that starts to get into, well, what is this? You know, because all the other radios I see are circles, but this one's different, but I don't know it until I click it. I go in thinking I can choose one, and now I can choose many, is it broken, something I did? Oh, God. You know?
Attendee: Thank you. I like it, too.
Nick (Co-host): Any last questions before we wrap up? I feel you put your eye rolled up, trying to think of questions.
I think we're going to wrap it up. Thank you all for joining us on Zoom and YouTube. And round of applause for Eric. Any parting word for us, Eric, before we close this up?
ERIC BAILEY: This was an absolute blast. Thank you so much for having me on. And then I see, if you'll permit me, Seth Kane in the chat is mentioning a future date, which is a virtual accessibility conference, which is kind of following up from CSUN, and it's futuredate.com. Inclusive 24 is coming, as well, and I'll be helping to run it this year, if it's something you're interested at all, please, pitch us. We'd love to have your submissions, and we're especially looking for new voices for accessibility of inclusive design, so we'd love to hear from you.
Santina (Co-host): Eric and Seth, I'm curious if you could share more information about what it is you're putting together for CSUN talks, because I know that ‑‑ at least myself, maybe one other ‑‑ one or two other people here in attendance, but I know some other of our usual attendees were scheduled to talk at CSUN and could not go for various reasons, obviously.
Seth: Yeah, sure. So Future Date is basically a couple of people, about a dozen people that had talks or had engagements with CSUN that either got cancelled or got disappointed that things weren't being put online. So like example, Matt May and myself and a couple other people just decided to put together their time, energy, and effort and build an online conference. So everything will be curated, so topics ranging from legal, to UX, to a variety of different things. It will all be on YouTube, and then there is a schedule posted on the website right now with featured presenters, and as time permits, more talks are coming in, and people are basically just submitting their information. There's a panel of people that's selecting it. So it's next week. The dates are the 21st through the 23rd. And then if you're really just interested, the best way to follow is subscribe to the YouTube channel, and then you'll get notifications on what talks are coming up. And then for those legal‑minded individuals, we've actually decided to partner with ‑‑ oh, my God, I'm drawing a blank on the legal conference that got cancelled for accessibility, as well, but we're basically having ‑‑ going back and forth between the two groups. So it's going to be pretty cool.
Attendee: I just want to jump in and say, I mean, Seth gave a wonderful description, but I'll be presenting, I think next Thursday at the conference. I'll be talking about how I've incorporated accessibility into our QA testing process over at Base Camp. So it's been sort of a ‑‑ the idea, a lot of sort of introductory accessibility techniques, but also about sort of, like, you know, building trust from your team and that sorts of thing, so definitely check it out. The whole lineup of speakers is going to be really great.
ERIC BAILEY: Yeah, I love Base Camp. We just started using it internally, so that's really cool.
Attendee: Awesome. That's cool. For anyone who's not familiar, Base Camp is a project management software. It could be really useful if you're in a recently remote team. We've been remote for ‑‑ forever. And I've been at Base Camp about ten years. So if anyone has, you know, questions or wants to chat, too, about working remotely and working with remote teams and that sort of thing, feel free to hit me up by e‑mail, [email protected], or on Twitter.
Nick (Co-host) Thank you all for sharing that. I think it's a good time to wrap it up and have a great evening.
Thanks, everyone.
ERIC BAILEY: Bye, everyone, thank you.
Bye.