Season 1 Episode 6 Sep 11, 2020

Chrome 86’s Focus Features, Microsoft’s Deepfake Verifier Tool, and Google’s Business Application Platform

Pitch

Don't lose your focus.

Description

In this episode, we talk about Microsoft’s new tech to combat deepfakes and Google’s Business Application Platform. We then chat with Fen Slattery, accessibility lead at Clique Studios, about Chrome 86, which has two new features that Chromium says will improve both the user and developer experience with the focus selector, and could be a big win for accessibility.

Hosts

Saron Yitbarek

Saron Yitbarek is the founder of CodeNewbie, and host of the CodeNewbie podcast and co-host of the base.cs podcast.

Vaidehi Joshi

Vaidehi Joshi is a senior software engineer at DEV, and creator of the Base.cs blog series and co-host of the Base.cs podcast.

Guests

Fen Slattery

Fen Slattery is accessibility lead at Clique Studios and a front end engineer in Chicagoland.

Show Notes

Audio file size

54335676

Duration

00:37:44

Transcript

[00:00:00] LS: Hey DevNews listeners. This is Levi Sharpe, the producer of the podcast. We really want to benefit from your feedback on the show. So we’re gifting anyone who submits a review on Apple Podcasts, a pack of Dev stickers. All you have to do is leave a review on Apple Podcasts and then fill out the form in our show notes so that we have your mailing address for the stickers. Thanks for listening.

 

[00:00:31] SY: Welcome to Dev News, the news show for developers by developers, where we cover the latest in the world of tech. I’m Saron Yitbarek, Founder of CodeNewbie.

 

[00:00:40] VJ: And I’m Vaidehi Joshi, Senior Engineer at Forem.

 

[00:00:43] SY: This week, we’re talking about Microsoft’s new tech to combat deepfakes and Google’s business application platform.

 

[00:00:49] VJ: And then we’ll be speaking with Fen Slattery, Accessibility Lead at Clique Studios, to talk about Chrome 86, which has two new features with the focus selector, which could be a big win for accessibility.

 

[00:01:01] FS: Often when we’re building a website, especially if we’re not familiar with what a focus state is, we can accidentally get rid of them a lot of the time. It’s a big problem a lot of developers have.

 

[00:01:12] SY: As a part of its Defending Democracy Program, Microsoft has developed new technologies to identify deepfakes. For those who might not know, deepfakes are synthetic media in which machine learning and AI are used to create visual and audio content to not only mimic someone’s likeness, but also their speech and their mannerisms, which is kind of creepy. Deepfakes are only getting more and more convincing and they’re just one more worrisome technology in a time when the truth and facts are constantly under attack and it’s especially relevant, given that we have a huge US election on the horizon. This month, Microsoft announced in its blog the Microsoft Video Authenticator. This technology can analyze photos or videos to give a percentage chance of whether or not it is a deepfake. The blog states that it works by “detecting the blending boundary of the deepfake and subtle fading or greyscale elements that might not be detectable to the human eye”. There are two components to the technology. One is a tool in Microsoft Azure, which allows the addition of hashes and certificates that live as metadata in the content whenever it’s online. The second component is a reader, which can be a browser extension and check the certificates and matches the hashes. It then gives a confidence score on the authenticity of the content and that it hasn’t been changed as well as information about the content producer. So Vaidehi, I want to start by asking you, do you remember the first time you saw a deepfake?

 

[00:02:42] VJ: I don’t think I’ve ever actually seen one.

 

[00:02:45] SY: What?

 

[00:02:45] VJ: In fact, I didn’t really know about them until this story.

 

[00:02:50] SY: Oh my goodness!

 

[00:02:52] VJ: I think that means I’ve probably seen one and I didn’t know it’s a deepfake because it sounds like they’re everywhere.

 

[00:02:56] SY: They’re everywhere. Oh my God! Okay. So I’m going to tell you about the first time I saw my deepfake. It was this, I can’t remember the actor’s name, but it was this comedian actor and it was on one of those late night shows. And the deepfake was that this actor was talking about Tom Cruise, and the deepfake was, as he was talking about Tom Cruise, he became Tom Cruise.

 

[00:03:19] MAN: And then Tom Cruise walks in and even those guys were like, “Whoa!” And he’s super stoked to be there. You know? He’s like, “Yeah! Boom!”

 

[00:03:30] SY: It was really freaking. Okay. So I didn’t know I was watching the deepfakes. So my husband just came up to me. He’s like, “Watch this cool video.” So I’m like, “Okay.” I’m like, “Why is he showing me an interview of some random comedian?” It was so weird. And so the comedian’s talking, right? And the deepfake starts to happen. And I remember thinking, “Oh, was I watching Tom Cruise the whole time?” Like I was so confused. And then Tom Cruise keeps talking and then all of a sudden it morphs like very slowly, like morphs into the comedian. And then my brain was like, “No, no, no, no, no.” You just got confused because you heard the word Tom Cruise and you thought you saw a bit like really this other comedian. This is how slow I was. It had to happen like two more times for me to be like, “Wait, wait, wait, wait. What is going?” And then Rob, my husband, was like, “This is called a deepfake.” And he explained to me what it was. And I was like, “Holy!” It was so freaky. There’s this other one that I saw where these people did literally an entire mini action movie where they deepfaked Keanu Reeves’ face onto the body of this like tall man that could have been the same height as Keanu Reeves.

 

[00:04:37] MAN: Mr. Reeves?

 

[00:04:38] KR: What can I do for you guys?

 

[00:04:41] MAN: Keanu, right? Is it cool if I maybe get your autograph?

 

[00:04:44] KR: Absolutely. I’d be honored.

 

[00:04:46] MAN: Yes!

 

[00:04:47] SY: And it was this whole action packed seen in a convenience store where there was like a robbery then Keanu Reeves like burst in.

 

[00:04:56] KR: Look, look, whatever’s in the register, I’ll triple and then I’ll match that to a charity of your choice.

 

[00:05:03] SY: There’s like karate moves and it’s like a full and it’s using Keanu Reeves’ face the entire time.

 

[00:05:14] KR: Sorry about that. So Sam, right?

 

[00:05:17] SY: And it’s just a little bit off so that you can tell it’s not quite real, but it is very good. We’re like a couple of years away from creating like free Keanu Reeves’ movies. It was shocking. It was incredible.

 

[00:05:32] VJ: That sounds like the most positive outcome, Free Keanu Reeves’ movies. My head went to like way darker places.

 

[00:05:38] SY: Where did your head go?

 

[00:05:39] VJ: Well, I was just thinking like consider the fact that I didn’t even know what a deepfake was and how many I’ve seen, how many different forms of content and media and like video surveillance footage could be doctored that we don’t know about? And it sounds like until now, until this new technology, we didn’t have a way of even verifying whether it was doctored and a deepfake or not, which was kind of shocking that like it’s happening now.

 

[00:06:08] SY: Yeah. And it also kind of makes me wonder how do we identify the truth? Because these are relatively new questions.

 

[00:06:14] VJ: Deep questions.

 

[00:06:17] SY: Making deep on Dev. You thought you were just getting the headlines. But with this Microsoft Video Authenticator, it just came out this month. It’s relatively new. Frankly, we don’t know like how good it is, right? It’s only giving you a percentage chance of whether it’s a deepfake, fake. So it’s definitely not a foolproof and I assume the better the deepfakes get, the harder Microsoft and other technology companies will have to work to be able to identify them. So it just kind of makes you think about the history of evidence, right? Before we used to be able to say, “You were caught on camera,” and then Photoshop came and now that’s irrelevant. Right? And now it used to be, “Oh, they were caught on video,” then you’re screwed. And then now you can doctor videos. So how do we identify truth when we weren’t there to see the thing happen?

 

[00:07:02] VJ: Yep.

 

[00:07:02] SY: And I just don’t know what the future lies in the context of just capturing truth.

 

[00:07:08] VJ: Yeah. It’s very scary to think about the fact that like people have figured out that this is a thing you can do.

 

[00:07:14] SY: And like everyday people. We’re talking people who just have a little bit of creativity.

 

[00:07:19] VJ: And some free time.

 

[00:07:20] SY: And some free time. These are not highly skilled trained computer scientists. There are a lot of like beginner tools out there that can help you accomplish this.

 

[00:07:31] VJ: Yeah. And it’s interesting because this conversation sort of aligns well with some of the conversations that happen around AI and machine learning and how we’re basically mining the web and all the content that’s out there for data that you can feed into these AI machine learning predictive algorithms. So if we keep creating content and information, the ability to create convincing deepfakes is just going to sort of like increase in parallel with that, right? Because you just have more content to pull from.

 

[00:08:03] SY: We’re only going to get better at this.

 

[00:08:04] VJ: Yeah. And so it’s sort of prompting this conversation I feel like around authenticity and like certifying what is true content versus doctored content. How do you do that from a super nitty-gritty down to the certificates and like the binary data of this content? How do you certify that?

 

[00:08:26] SY: Yeah, absolutely.

 

[MUSIC BREAK]

 

[AD]

 

[00:08:46] SY: Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud. It streamlines development, allowing you to focus on your code, not your infrastructure. Also, you’re not locked into the service. So why not start building your apps today with Heroku?

 

[00:09:02] JP: Vonage is a cloud communications platform that allows developers to integrate voice, video, and messaging into their applications using their APIs. So whether you want to build video calls into your app, create a Facebook bot or build applications on top of programmable phone numbers, Vonage has you covered. Sign up for an account at developer.nexmo.com and use the promo code DEVTO10, that’s D-E-V-T-O-1-0, by October 10th for 10 euros of free credit.

 

[AD END]

 

[00:09:35] VJ: This week, Google debuted its newest product, The Business Application Platform. This platform is a no-code development tool that will let users automate processes and create applications without writing any code relying instead on APIs. Google says that this product will allow non-technical users to quickly build data-driven apps and they’ll be able to extend their existing applications and modernize legacy applications too, without having to write any code. The platform’s technology is actually built off of App Sheet, Inc., which was a no-code app development startup that Google acquired earlier in 2020. And Google has good reason for investing in no-code platforms. According to an estimate from Gartner, Inc., a research and advisory company, there will be four times the number of “citizen developers” compared to professional developers by the year 2023. And this platform is also going to include a product called “API Management Technology”, which Google acquired when it bought the company Apigee back in 2016. Google also announced early access to a related product called AppSheet Automation, which is going to allow people to automate processes at large scales. Users will be able to automate workflows, like project management collaboration and inventory tracking. And this product actually includes AI and natural language processing to provide features like auto-completion. So it’s really interesting to like hear about Google sort of doubling down on this and it makes me think about how long they’ve been thinking about this because they acquired Apigee in 2016, they acquired another company in 2020, and now they’re releasing this platform. So I wonder how much they’ve been thinking about leaning into these no-code tools as opposed to low-code tools, which are also pretty ubiquitous at this point. So I’m curious, what do you think about Google’s decision to like lean into this?

 

[00:11:40] SY: I think what is interesting is because three years doesn’t seem like that long, but it does seem like Google is really invested in this because they acquired a company in 2020. And within the same year, they’re like launching something about it. Whereas the integration usually takes a while or sometimes it shelves completely or it’s completely rebranded and kind of pushed off to the side as an entirely different, and it seems like Google is very invested in kind of making this one acquisition work. And that investment I think is really interesting. I think the other thing about no-code tools, it makes me wonder how the developers at Google feel about this. Are they like, “Wait, wait, wait a minute”? Like, “This is what I used to do. Am I giving up my job or am I moving maybe the boring parts of my job off to a machine so I can work on more interesting problems?” You know what I mean? Like, how does this affect kind of the everyday developer? What does this mean for the rest of us?

 

[00:12:40] VJ: It’s interesting when you see companies create no-code or low-code products, because now you’ve lowered the barrier to entry and you’ve created a product that makes this super easy for other people to tap into, but now you’re sort of like making it easy to create things that otherwise were hard to and that the skills related to building a website or creating an automation tool or writing an integration, those were highly coveted skills. And now if a machine is doing it, are they as coveted? I don’t know.

 

[00:13:13] SY: Yeah. Like what’s going to happen to our very lucrative salaries when other people can build some of the stuff that we’ve been historically high and we weren’t used to be, as you said, the only people who could do it? So I’m curious to see in the next 5, 10 years, if these citizen developers will end up kind of eclipsing what we do and maybe starts to not devalue what we do, but maybe take us off our pedestals a bit, the other thing I’m thinking is, is this maybe a low enough barrier to entry that the citizen developers want to become professional developers? Is this end up being just a different pathway to getting more technical people in the industry? If I start off as a citizen developer working on no-code tools, does that get me interested in thinking like, “Okay, this is all the cool stuff I can do without coding, but what if I could code? Think how much cooler my stuff can be and how much more advanced the things I built would be.” That might be kind of an interesting gateway to growing the increased demand for professional developers. This reminds me of an episode of CodeNewbie last season that we did where we spoke to David Hoang who’s the Director of Design at Webflow, which is a no-code tool. And he talked about whether or not developers should feel threatened by no-code tools.

 

[00:14:36] DH: It’s kind of this awkward moment because then they say, “Well, what do I do?” Right?

 

[00:14:41] SY: You’ve taken my job.

 

[00:14:42] DH: Yeah. Like I’ve learned to code and now you’re taking this job away from me. That’s not true. In fact, what we’re trying to do is expand the ability for people to create on the web. And frankly, there’s not enough engineers out there either. So these are initiatives that build on top of each other. And I think one thing that’s really interesting is for engineers, like there are so many big problems that we can really focus on. And I often use this example, like, “Aren’t engineers tired of having the center buttons or have to finagle a CSS?”

 

[00:15:19] SY: Good point. Yeah.

 

[00:15:20] DH: Like, “Let’s use your ML degree on some of these big problems.” And that’s really the mission, right? Is that no code is a way for people to get there and they have the choice to go as deep as they’d like, right? So let’s not restrict it to people who maybe just want to spin up a business and want to run that and may never have a desire to be a programmer, while at the same time making sure that no-code tools are sophisticated enough. That’s actually teaching people how to program.

 

[00:15:51] VJ: I actually really liked that perspective because if you think back to when a lot of companies started making it very easy to create websites like Squarespace and Weebly and all of those, I feel like a lot of developers got their start around that same time when they were like, “Oh, I want to make a website. I’m going to start with this tool, but actually I want to customize it and I need to kind of go off the happy path.” Because if you think about it, these products are limited in what they do let you do. Right?

 

[00:16:20] SY: Right.

 

[00:16:20] VJ: It sounds like Google’s platform will let you do some integrations, but what if you want to do an integration that’s a little bit off or does something weird and that the platform doesn’t let you do? Now you actually do need the skills or you need to get those skills or find someone with those skills to make that happen.

 

[00:16:35] SY: Exactly.

 

[00:16:36] VJ: It could be a really nice gateway.

 

[00:16:38] SY: Yeah. And it makes me wonder, is there ultimately an upper bound? Is there a ceiling for just how advanced no-code tools can possibly be? Recently I was building an app for my new company, Disco, and I was thinking like, “Do I really need to build like a full app myself? Can I just use one of these no-code tools, just like make things a little bit faster, a little bit easier?” And my app is pretty simple. You go through the list of courses, you could play on a bunch of lessons and you look at some notes. It’s a pretty straightforward app. But there’s a couple of things with like the Stripe API integration and then there’s like looking at data across different course completion. And there was like just enough complexity that none of the no-code tools works. I tried at least five of them. I tried low code, I tried no code, and like nothing quite fit what I was doing. What I was doing wasn’t that complicated. And so it kind of made me wonder, like, “Is there ultimately a ceiling with these no-code, low-code tools where developers will kind of always be in this position of skill and ultimately power where our jobs are safe? Because no matter how good these tools are, they don’t quite make up for the skill and expertise of developers.”

 

[00:17:52] VJ: Yeah, absolutely. What you were just talking about with your work on the Disco app and like having to create something effectively from scratch, it made me think about how we, as a society, have automated a lot of things that were easy enough to do, and that’s sort of freed us up to work on harder problems.

 

[00:18:12] SY: That’s true.

 

[00:18:12] VJ: So I wonder if these no-code, low-code tools will make it easy to spin up an integration or build a website, and then like a lot of developers might be able to focus on things like AI or machine learning or distributed systems, things that are not necessarily easily automatable and something that a platform can’t just solve for you. So maybe it’ll actually drive us forward in a very odd way.

 

[00:18:39] SY: Yeah. I can totally see that happening. Coming up next, we are joined by Fen Slattery, Accessibility Lead at Clique Studios to talk about Chrome 86, which has two new features, which Chromium says will improve both the user and developer experience with focus, which could be a big win for accessible after this.

 

[MUSIC BREAK]

 

[AD]

 

[00:19:16] SY: Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud. It streamlines development, allowing you to focus on your code, not your infrastructure. Also, you’re not locked into the service. So why not start building your apps today with Heroku?

 

[00:19:33] JP: Vonage is a cloud communications platform that allows developers to integrate voice, video, and messaging into their applications using their communication APIs. So whether you want to build video calls into your app, create a Facebook bot or build applications on top of programmable phone numbers, Vonage has you covered. Sign up for an account at developer.nexmo.com and use the promo code DEVTO10, that’s D-E-V-T-O-1-0, by October 10th for 10 euros of free credit.

 

[AD END]

 

[00:20:07] SY: Joining us to talk about Chrome 86 and focus is Fen Slattery, Accessibility Lead at Clique Studios. Thank you so much for being here.

 

[00:20:15] FS: Hey, thanks for having me.

 

[00:20:17] SY: So Fen, tell us a bit about your development background.

 

[00:20:20] FS: So I am originally by training a Full Stack Engineer who pivoted into doing accessibility work. So I actually went through a coding bootcamp years ago and from the beginning was really passionate about making things usable by people with disabilities. I’m a disabled person, myself. Amongst other things, the main thing that impacts how I use the web is I’m autistic. So actually this is also personally relevant to me. I’ll often navigate using only keyboard and no mouse. So I rely on focus states, too. Yeah.

 

[00:20:55] VJ: Tell us a little bit about Clique Studios and your role there.

 

[00:20:58] FS: Clique is a web firm. We work with all different kinds of organizations to enhance their website or give them a new one. We work with everything from big organizations you’ve heard of like McDonald’s or Northwestern University, all the way down to small nonprofits and law firms, really helping everybody enhance how they share their message and making sure it’s inclusive of everyone who might want to check out their site and accessible to people with disabilities. Tying into that, I’m the accessibility lead. So it’s my job to make sure that everything that goes out our door is usable by people with disabilities. That involves a lot of QA testing on my part, a lot of training our internal teams, as well as a lot of external education focus. We find that one of the biggest barriers right now to making the web more accessible is folks don’t realize that something they need to be thinking about. Or if they do, they don’t know where to start. So that’s a lot of my job.

 

[00:22:00] SY: In terms of accessibility, what are some recent projects that you’ve been working on, things you’re excited about?

 

[00:22:06] FS: Oh yeah. Oh my gosh. We actually just launched a website for the Lincoln Park Zoo here in Chicago. That is, in my opinion, my new sort of gold standard for accessibility work. We’ve woven in a lot of awesome accessible design and code features with a lot of really great content that does more than just meet the minimum standards for accessibility and really helps people who are both visiting the website at home, but also physically on grounds at the zoo, meet all of their needs they might have with their disability. I’m really, really proud of what we’ve done with them.

 

[00:22:44] VJ: So before we get into Chrome 86 new features, which are supposed to improve both the user and developer experience with focus, can you tell us a little bit about what focus is?

 

[00:22:56] FS: SO in short, if somebody is navigating a website via just their keyboard, no mouse, or maybe some other kind of assistive technology, they need to know what they’re interacting with. So folks who use a mouse, you can see, you might be able to predict, “Oh, I’m about to click on this link on a website,” because you can see where your cursor is and you can tell you’re about to click on something. Maybe if it’s a lengthy color changes of the link or an underline appears or something like that to give you an idea of what you’re about to interact with. You’ll also notice that your cursor turns into a little pointer hand to tell you, “Hey, you can interact with this thing on the website.” You can think of a focus state pretty similarly to that. It tells those of us who navigate with just a keyboard what we’re about to interact with. So by default, in most browsers, if you haven’t changed the way the focus state looks, it’s going to be a little often glowing little kind of outline box around interactive elements, like links, form inputs, all that good stuff. The trick is that, like I said, by default, the browser has focus states already built in. But often, when we’re building a website, especially if we’re not familiar with what a focus state is, we can accidentally get rid of them a lot of the time. That’s a big problem a lot of developers have, or maybe we’re leaving them in, but we’ve done something to the CSS on the page and now the focus states look weird or maybe they show when they shouldn’t. As I said, that focus state should only show when I’m navigating via keyboard or assistive tech and not when I click on a link. I shouldn’t suddenly see an outline box around what I’m clicking on. That’s really confusing. So a lot of the times that’s what happens. They’ll show unexpectedly because a developer maybe isn’t sure what they’re there for. And those of us especially who do client work are familiar with the problem of, “Oh, there’s a weird box showing up. Get rid of that.” And so often developers will just get rid of a focus state. They don’t know what it’s there for, but it’s really important to folks like me who rely on a keyboard as we navigate websites.

 

[00:25:16] SY: So let’s talk about Chrome 86 and its new features. Can you tell us about the focus-visible pseudo-class?

 

[00:25:23] FS: Yeah. Yeah. So one of the things that’s really cool about this is it essentially less developers easily see that focus indicator in the same way that you might toggle on and off other pseudo classes, oh, I don’t know, like hover, let’s say, right? Maybe you’re trying to style a button and you want to get a good look at what it’ll look like when it’s being hovered. You can apply that hover pseudo-class that normally the browser is taken care for you to take a look at what the hover of your button looks like. Similar thing with focus visible. It allows us to toggle on and off. Is the focus visible on this element? So we can quickly see what it looks like so we can style it, so we can test it out.

 

[00:26:12] VJ: So there’s also another feature that Chrome 86 adds. It’s a new setting called “The Quick Focus Highlight” feature. Can you tell us a little bit about how that works and what it does?

 

[00:26:23] FS: Yeah. So it’s a user preference you can turn on. It’s not on by default, important to know. It causes whatever you’re currently focusing on to display a focus indicator for about two seconds or so. The neat thing about this is I mentioned earlier, it’s possible for a developer to turn off focus states. The quick focus highlight shows even if CSS is causing focus to be hidden. So it’s a really great way, both if you’re a user with disabilities to force there to be a highlight on the page, but also helpful for a developer who is maybe trying to debug where focus states are and aren’t showing up.

 

[00:27:08] SY: Absolutely.

 

[00:27:08] FS: The other great thing about it is that it makes all of the focus states on the page match, which might sound a little trivial, but oftentimes one of the things we think about when we’re designing focus states is, “Well, really, is this focus state visible?” And maybe if your page is very visually dynamic, there’s a lot going on, a focus state that works on one link somewhere might not be visible if you use that same styled focus state somewhere else. Maybe, I don’t know, on a page I have a section that has black text on white and another spot I have white text on black. Maybe in one spot, I’m using a black outline for my focus state, but if elsewhere on the page, there’s a black background, well, I’m not going to be able to see the black focus state. So you might make your focus state look different on different elements on a page, which is important, but as I’m sure you can imagine that gets pretty complex pretty quickly. So it can be easy to accidentally make focus states you can’t see. So that quick focus highlight forces all the focus states to look the same.

 

[00:28:19] SY: So when it comes to some of the biggest things that developers tend to forget when it comes to accessibility, what are those things? What should we be developing for and how do the new additions to Chrome 86 help us get there?

 

[00:28:34] FS: So often when I am helping developers start their journey and learning about accessibility, folks will expect that it’s going to be really complicated. There’s a lot of new things you have to learn. It’s a new framework you’re learning or something like that. But fortunately for those of us who work in the browser, accessibility is actually relatively easy as long as you’re following the rules of HTML and CSS. And I know we’re maybe all used to browsers, letting us get away with kind of some wacky HTML that doesn’t follow the rules, right? HTML is a very forgiving language like that. There are no errors. You can use a div to your heart’s content. However, there are rules of what different HTML elements mean and what they’re supposed to be used for. And if you’re following those rules, you’ll actually come out with a pretty accessible website right out of the box. Don’t use CSS and JavaScript to do wacky things they shouldn’t be used for.

 

[00:29:37] SY: Like what?

 

[00:29:38] FS: So a great example of that is, it almost makes me cringe to think about it, but maybe, for example, you want a button on a page, you want a specific way that that button should look. So you pop a div on the page and add some JavaScript and add some CSS and your you’re styling your button to look like a button. And when you click on it, it works how a button does. It takes you to somewhere else or it doesn’t put on the page, but it’s not actually a button. It’s a div you’ve styled to look and act like a button. And now that may seem like it works just fine. It’s actually going to be a big barrier to those of us with disabilities that rely on assistive tech to use the website. We need buttons to actually be the button HTML element for our assistive tech to understand what the heck is going on. Maybe even a more simple example that a lot of us would encounter is using headings incorrectly. So in HTML, there are six different levels of headings, H1 through H6. And there’s an order that those need to follow. You have to have an H1 on a page. You can’t have more than one H1. And if you’re using another level of heading, you have to include everything up to it. So if I have an H4 on a page, there also has to be an H2 and an H3. Now we can style headings using CSS to look however we want them to, right? So it can be really tempting to just use, I don’t know, whatever heading level is convenient for everything on the page, but that HTML element communicates meaning and it’s important that we follow it. So really my answer for one of the biggest mistakes that developers make that’s easy to think about and fix is using HTML elements to mean what they actually mean. So if you’re going to have a button on a page, make sure to use the button tag. If it’s a link, make sure you’re using an anchor tag, things like that.

 

[00:31:42] SY: And how does Chrome 86 help with that?

 

[00:31:46] FS: One of the ways that Chrome 86 helps with following the rules of HTML and CSS is it makes it easy for a developer to fix their issues if they’ve maybe not been following the rules of CSS and HTML. As I mentioned, it’s really common for developers to not use CSS and HTML correctly and just wipe out or hide focus states because we might not be sure why they exist or what they’re there for. The focus-visible pseudo-class on that quick focus highlight allowed developers to go in and actually think about focus states more easily, just to fix websites where they’re hidden or ineffective or unusable focus states, but also when we’re building a new page completely, and we want to make sure our focus states are visible, they look good and they’re easy to see and use.

 

[00:32:41] VJ: So you mentioned that one of the things that developers can do to get better at accessibility is understanding the rules of Semantic HTML. Are there any other resources or accessibility tools that you would recommend to others who want to learn more and get better at accessible?

 

[00:32:57] FS: So a good spot to take a look at is these set of rules we follow on the web that tell us if a website is accessible, and there are a lot of rules specifically around focus states, for example, relevant to these new features in Chrome 86. That set of rules is called the Web Content Accessibility Guidelines or the WCAG, or WCAG, it’s an awful acronym to pronounce, but that’s what it is, the WCAG. And that is a set of dozens of guidelines about everything from focus states, to how to use headings correctly, to how we know if a page will work with assistive tech, things like that. And that set of guidelines is something we use to check sites against to tell us if they’re accessible. But as I said, it’s dozens and dozens of guidelines, which can be a bit overwhelming if you’re new to accessibility. So resources I recommend free. Basic introduction, a great one is WebAIM. They are an organization that does a lot of great writing about digital accessibility. They’re actually one of my favorite resources from when I was learning years ago and they cover everything from, “Hold on a minute. You keep saying screen reader. What is a screen reader? What is assistive technology down to all of the little details of how exactly should I make this focus state work? How should it look?” Things like that. They’re one of my biggest resources. A testing tool that I love and recommend is called Accessibility Insights. It allows for both automated and manual testing. It’s actually made by Microsoft and is built on top of the gold standard for testing libraries for accessibility. It’s a simple little browser plugin you can use for Chrome and Edge. There’s also tools you can download for Windows and Android devices. And essentially it can run a bunch of automated tests to check accessibility aspects of your website. Now automated tools can at best find about 50% of the kinds of issues you might be having with code. And that’s okay. There’s a lot of things that we can’t automatically test and you have to do by hand. But Accessibility Insights will find a lot of easy issues for you to fix, if they exist on your website. It also has a full manual QA testing script built in that you can use to check your entire site against all of those web content accessibility guidelines. It’s great. It also has a few little ad hoc tools around testing things like focus states that make it easier for you to check them out. Although, gosh, now that we have some of these new focus features in Chrome, I don’t know I’ll be relying on that as much, which is really, honestly, one of the things that I like best about these features having been added to Chrome. I still recommend external plugins that do a lot more than what Chrome does on its own. It can sometimes be just another barrier to accessibility testing if you’re somebody new to this. If you have to download a bunch of plugins or other software to check the accessibility of your website, it can be easy to think, “Well, maybe I don’t have time,” or, “I’m not sure about that. I don’t want to play with a new tool right now.” But if it’s built right into your browser, there’s no excuse to not check your focus state. I also actually have a lot of resources available for both developers, as well as designers, other folks in tech that you can send other folks on your team along to on my website, fenslattery.com, including two new webinars I’ve recently put out about an introduction to web accessibility and how to keep your website accessible going forward. So those would be two great resources I’d recommend to anyone looking to learn more about how to make an accessible website.

 

[00:37:01] SY: Well, thank you so much Fen for speaking with us today.

 

[00:37:03] FS: Yeah.

 

[00:37:04] VJ: Thank you.

 

[00:37:15] SY: Thank you for listening to DevNews. This show is produced and mixed by Levi Sharpe. Editorial oversight by Josh Puetz, Peter Frank, Ben Halpern, and Jess Lee. Our theme music is by Dan Powell. If you have any questions or comments, dial into our Google Voice at +1 (929) 500-1513. Or email us at [email protected] Please rate and subscribe to this show on Apple Podcasts.