#53: Accessible CSS Techniques w/ Christopher Schmitt

Hey everybody, Happy New Year 220 20 you’re listening to the drunken UX Podcast. I am your host Michael Fienen. Unfortunately this morning, we can’t kick off the year with Aaron. He is off doing all of his holiday shenanigans, but that’s okay. Because we wanted to make sure that we rank in the new year right. This week. This is episode technically 53 or season three, Episode One, however you feel like counting. We’re going to be talking this evening about accessible CSS and and techniques and tools and ways to look at that. And we have brought in a special guest for you, Mr. Christopher Schmidt from over at nobility Christopher Thank you. So you prefer Christopher Chris is that I was We’re fine. Both are fine. Thanks for having me. I always have folks that are like, is it Mike or Michael? And I’m like, Well, my name is Michael. So we’ll go that route.

I figure I’ve answered too much worse than my life. So go with whatever people want to call me, folks. If you are enjoying the drunken UX podcast, be sure to go by our sponsors over at New cloud.com slash drunken UX, you can go check them out for any kind of interactive mapping needs design. They’ve got an interactive back in that you can build your own maps and whatever you need, go check them out at New cloud comm slash drunken UX. If you want to find us, as always, you can go by twitter.com or facebook.com. Slash drunken UX or on Instagram at drunken UX podcast. If you want to jump in chat with us, we’ve always got our slack up and running. You can go to drunk in ux.com slash slack and you can hit us up there and get an invite into that space and outside of that, I am drinking this evening. A very nice spring bank tin. This is a new one from my shelf, I promised I’d be bringing some new stuff on the show. So I’m doing a campbelltown scotch. There’s only about three distillers in campbelltown and spring banks, probably the biggest one. It’s got kind of an earthy, smoky flavor, some kind of a dried raisiny like almost like a smoked raisin kind of flavor. That’s nice. Before we jump into tonight’s topic, I wanted to hit real quick on a piece of news that just came across my newsfeed literally right before we started recording this. If you are a WordPress developer, you’ve probably come across pods at some point, if you’ve done any kind of work with custom post types. I’ve used pods on probably four or five different projects. It’s just a good way to bootstrap setting up any kind of custom post type interface that you’re looking to also really can help with front end content submission. If you’re not wanting to write your own forums, Time to the REST API or something like that. They have tools that help with all that very good plugin, been around for years and has really evolved over the years and have a link to this article in the show notes. The big piece of news though, one of their main sponsors for the last few years has been automatic. And automatic has decided that they are going to start turning their support more towards Gutenberg related projects. As a consequence, pods is losing about 90% of its funding a, that sucks, be they don’t say like how much that is, I don’t know if that’s a lot of money, or maybe only a little bit of money. I hope it’s not a huge amount, because I know that’s detrimental to them keeping up with their update cycle and support and all of that, but I just wanted to give them a shout out because if you go go to our show notes, and they’ve got a site I believe it’s friends.pods.io they’re looking for about 160 more people to just be like a supporter of the project. To help retain some of that funding and you can pledge $5 a month or 10 bucks once or you can be a higher if you work at a company that wants to sponsor something like that they first got higher level sponsorships. Just wanted to put some attention on that. It’s a great project a great tool. The folks that run it have really worked their butts off on it. So go give it a look and throw some support their way. This week, we have Christopher Schmidt and I mentioned he is from mobility. He’s the accessibility and Training Specialist over there, formerly of environments for humans where they did online conferences. He also is done on site organization for things like the artifact conference, if you’ve been the CSS DEF CON conference. You may also know him from about 352 books he’s written, which are things like html5 and CSS cookbooks. I think the first thing I ever read of yours was the wasp interact the big giant training manual base for how to get into CSS and JavaScript. And all of that. Was that about 2010

I remember looking back at wasp interact. I’m on a web and Technology Advisory Committee for our local high school. And that was when I joined that a few years ago, that was one of the things I had brought up to them was exactly what you were saying, here’s a living kind of learning material that you can bring into a classroom. You don’t have to worry about always going out and finding new books and new material. This is kind of a source for you. So that was part of my foray into that space, but Brittany Terrell, it’s still I mean, honestly good material, if you’re looking for, you know, really comprehensive book, even though maybe a little out of date.

Yeah, it was. There was a list.

This week. Accessible CSS is our topic. I want to start with this great quote, this comes out of a UX movement article, and I hate this quote. It’s from the aesthetic accessibility paradox. And it says, In general, the more accessible and interface is the less aesthetic appeal that will have. We used the phrase on this shown and it’s always used out in the wild quite frequently, this idea that accessibility is usability. If you design Really good, accessible sites, they are inherently usable. But we don’t talk about the aesthetic a lot. And I think that’s one area where this article actually does a good job in that the emphasis of the article is really about, like, how do you strike that balance between something making something incredibly accessible, but also really pretty to look at. Because there are lots of things that are pretty to look at that simply aren’t accessible, especially when it comes to, you know, contrast and grays and things like that everybody wants to have things subtle and drowned out in some of these things. So I wanted I thought this was kind of a good way to outline some of this and get started. But what would be like your mantra in that area? Like what is the SS his role in accessibility for you? Well, I mean, it’s like it’s a tool, right? It’s, you know, and depends on how you use it right? If you don’t know what you’re doing you just build it an accessible website with everything that you’re working on. So it’s just, I think I’m on the CSS Working Group. But they had a discussion recently about the new property about the link border,

after, take a look at a few of those. We actually just redid our skip links at work because I was in playing with Um, and I forget what I was doing something completely unrelated. But I noticed I was, as I was tapping through, I was working on keyboard controls for an element. And I noticed when I was tapping, I was getting no visual pop up of these. And we’ll talk about some of this here in a little bit about focus and hover. But I was getting nothing as I was keyboard controlling. And so that triggered me into doing some rework on the way our skipping links work and everything so that you could see them and they would show up, you know, in places that made sense. So that’ll I’ll have to take a look at some of these and see how I fit into the mix. Because a designer I am not, but I can make the things were there. You made a comment there about, you know, how much control do you want to give a designer basically over something that people rely on for things like accessibility, I had a conversation earlier this week about a wholly and completely unrelated topic, but in a similar vein, the CounterPoint that was made to me and I’ve got read this quote out of this tweet to that we had a client describe this as we gave them Legos and they made a butt plug. And it’s that idea of you know, how you can create flexibility and have all this control. But you also have to have a bit of trust in our people are going to put it together, you know, and great, we’ve got all these CSS properties and my brain immediately goes to things like a underline and how we use underline and, and border and all of that to control the way links are underlined because you can, you can take away and links underline completely with CSS with a couple with a couple properties. And it’s like pulling hair to get people to understand. No, that’s incredibly important visual cue to say,

a game show out of that, find the link, you know, and this, this gets into maybe a deeper philosophical discussion that maybe it’s better for another time. But I think there’s an important philosophical discussion to have there. At the graphic design level, you know, when we talk about web development and and coding and that real raw sort of, I’m going to build a website where at least trying to get a lot better about talking about accessibility and working that into your workflow and working that in your code. But I’m not convinced that in the graphic design world, especially because my Most people who study web design in the graphical sense, you know, they still end up taking a lot of classes in various, you know, art direction and art design and concepting and things and they do product design and a lot of these supplemental kind of categories that all come back to making graphics. I’m just not sure that we’ve gotten that message into that space as well, because the discipline tends to cross over so many different areas.

We’re kind of in that same age group where we learned to build websites when the only way to do that was to teach yourself and extend Ability just like as a function of web design, it just wasn’t a discipline yet, as we got into the early 2000s, and the late tooth or the late part of the early 2000 decade, oh, 607 in that area, that’s where you really started seeing that emphasis on, hey, this is a thing and we came 1.0 actually, I think it came out like around 99 or something like that. But, you know, this emphasis on things like five a week compliance. In Kansas, we have policy 1210 those things really didn’t start picking up until a lot of folks like you and I had already been doing this for a while, and we had to kind of backtrack and re learn and we bear some responsibility for being that voice a little bit to make sure that hey, just because like even we learned it a different way. It’s we understand this value, and we need other people to understand that value. And I think Let me see if this is a fair way for me to say this that I feel like if you’re going to get into design And you’re going to get into layout and things like that. Approaching accessibility from the standpoint of your CSS and your design has to start with good semantic HTML and good clean JavaScript. Is that a fair thing for me to say?

I recently started using the read aloud plugin in Chrome which because for all the research I do for these episodes and and things like that I gotten to where it’s a lot easier for me to sometimes to throw an article into that and let it read it to me and that actually has had a surprising impact on how You like linearized content and things like that, for that reason that we’ve discussed on here before, like when you sit down if you can ever, if you ever have the chance to sit down with a blind user, and listen to the way they consume the web and the way they listen to a screen reader, it, it is mind blowing how quickly they can hear that. But when you get into some of these things that aren’t marked up, right, the way it reads them can get very unpleasant to say the least.

And when we talk about semantic HTML, it’s there’s I like to give a good example of that, because we’ve got the the standard thing when we use things like divs, and spans a lot, those are non semantic elements. They’re just containers. They can hold anything that can be virtually any shape or size. They can be layout related content related, when we html5 really stepped up our ability to have semantics. The classic one I like to talk about is now you have an element now called nav that you can use to wrap set pieces of navigation on your site. So we’re talking, you know, top menus, bottom footer elements, things like that can be wrapped in that element, so that the browser knows that navigation inside of that. The other thing that using the proper elements in the proper places does is You don’t have to put things like, and we’ve mentioned this before and have talked about how this applies to things like Aria roles are your roles let you define elements as being certain things for a screen reader. Things like the nav element there, its default Aria role is navigation, you don’t have to go through and put in the extra roll when you use the right semantic elements on some of those things. So that using that correct markup, using, you know, the the date time element using things like article and main and all of that to wrap, wrap your your content on your page, those things all help explain to a screen reader what your Dom looks like. So it knows how to flow through it. And that that’s incredibly helpful. And it sets up you for then how you’re going to write all the CSS and know where it’s going to impact things and what it’s going to impact.

When like I worked at an organization where we’ve got distributed authorship. Yeah. And when it comes to content creation and QA on code is one thing QA on content is something where I think we a lot of organizations have a lot of work to do. And you run into folks who inevitably want to use an h1 inside of something, because it’s bigger. Yeah. Even though it’s absolutely not an h1, or, you know, even deeper than that. 234 You know, if you’re, because a lot of the times those headers, we do use size to convey importance of the header. And some people are just like, well, it’s not big enough in that space. So I’m going to make it an h2 instead of an h4 like it should be. Right. Yeah. Because they don’t understand I have no more abstract.

these are, you know, they may be a secretary and an office or a salesman or something like that like that. They shouldn’t have to know that and Ideally, your tools would be good enough to prevent them from doing it. But the reality is very different. Most of us have CMS or whatever that is, don’t have that level of granularity and control. Well, like, well, content

Not well, we we do try to abstract as many of the structured fields out as we can. So when it comes to things like headings and stuff like that, where we know they’re in use, we absolutely try to make those a field that you fill out rather than part of like body content. But you know, if it’s a blog post, for instance, you’ve got a busy wig in there. And the only thing we can do, we aren’t right now. But the only thing we could do is write an extra plugin that would take out some of the tiny MC options that you can’t take like the h1 is going to be the blog post. That’s the post title so reasonably, you shouldn’t be able to Pick an h1 from from the drop down. But that also would require us to do a bunch of extra work on the plugin for there was a vague on a blog post, but maybe not another item. And

think but it’s because content QA isn’t the same as editorial review, so to speak, and there’s a there’s a just a technical gap there that most organizations I just don’t think are big enough, quite frankly, to pay one person full time to be, you know, content QA person. Yeah. which is unfortunate, but I think is ultimately the reality of that. And if you’re anywhere that has a lot of content, you know, I come from this university background where, you know, our site was 80,000 pages, and that’s a small university site. And we’ve got dozens of people putting out new pages and changing things daily. In those situations, it would have been my full time job just to have the the review pipeline set up to make sure all that’s okay. And I couldn’t do that. And there was certainly no money in the budget to hire somebody. And I think that’s just where a lot of people fall. And unfortunately, the users bear the consequences of that, which is really the sucky part about it. For developers, most of them the the first run, and you really have I think, with where CSS and accessibility intersect. And this is true, you know, a lot of folks will will hit this when they start using something like foundation or bootstrap. That’s one of the very first kind of examples where these pop up because they’re baked in. And that’s with things like visibility classes. foundation comes with this class, that’s called show dash four dash s, our show for screen reader. And what it does is let you make text for instance, your skip to content type of link that you would put at the very top of your page. The reason you would put a skip to content link at the top of your page is so that your user doesn’t have to listen through, you know, 60 links of header navigation, you know, you got your main nav and sub tab and all of that you don’t want them to listen to that every time so you give them a skip link. Right?

we’ve got some code in our CMS that when a page renders out, and our blocks render out, it automatically generates a unique ID on each block. And each one gets a skip this block link as well. So if you are trying to tab through one of our pages, it’s got because we’ve got product pages, you know, that will have panels of features and testimonials and all you can quickly tab through those using those links as well. So that same thing that to bypass those blocks, that the unique thing and why like this is sort of one of those first areas that people hit is they make a common mistake when you get started with this and that’s thinking that, Oh, well this is content that isn’t meant for Normal User it’s a you know, sort of a programmatically consumed element so to speak. So I’ll just make it display none or visibility hidden. And there’s a an article of accessibility for beginners with HTML and CSS. That will have link from Maria baldr eva bully rev up Poltava. Sorry, at that, that mentions this. But when you get into visibility classes, if you ever take the time and look at the markup that goes into some enroll again, these there will be plenty of links in the show notes for some of these. When you look at the way foundation does a unaccessible hidden link, they do things like position, absolutely move it off screen, make it height, one one, change at z index, if you make it displayed on or if you make it visibility hidden screen readers now. There was a time probably 1015 years ago where that work Now screen readers honor that. And so if it’s not displayed, or if it’s been told to be hidden, the screen reader will skip right past it as well. And so the user can’t get it right. So we come up with these ways of changing the way they’re viewed and negative 9999 pixels to the right, we move them totally off screen so that they exist out there in the ether. And when a screen reader hits it, to it, it’s still visible then because does still exist in space, so to speak. Generally, one of the first places you’ll run into though, we’re CSS factors, I think fairly heavily into that, because we’re concerned with screen readers. We’re concerned with keyboard controls and how those interact with elements.

yes, so let’s use that to kind of get into some of these things that let’s talk about where CSS fits in specifically in terms of how it impacts accessibility either for good or bad for that matter, because there are certainly things you can do with CSS that would hurt accessibility. One of the big ones comes from week one for 12. And that’s dealing with text behavior. Now, what it outlines is these ratios so it deals with line height, line height should be one and a half times the font size, spacing. should be at twice the font size between paragraphs. Letter Spacing is point one two Word Spacing is point, one, six. And so you can use those ratios if you’re using M’s or rems as your base for your element sizing, you can make sure you can use CSS to control those as at least a minimum spec so that no matter where your stuff is, any p tag always has margin bottom, that’s to ram for instance, and and use that as a means of ensuring that you’re passing that particular checkpoint. A lot of this comes back to reading specs and that you have to do I mean there’s read the documentation and nobody does that. But that’s, that’s where the answers are, at least for a lot of this.

you know, used to pride myself on the fact that I could read the teeniest tiniest, I remember building models and taking these decals that had tiny print, I could read them all. Man, I’m going to be 38 next month, and I can still do it. Don’t get me wrong, but I don’t like it. And I that’s why I’m like, my baseline is 16. And I think my personal blog is like 18. Because it is it’s just nicer to read when you have good big flowing thought. And it’s like it takes you longer to read it because of it. Our Season Finale for season two, we were reviewing the 10 Ux commandments and one of those commandments was you are not the user. Great. Michael 26 year old Michael had great eyesight and could handle that eight point Arial font, whatever. But that doesn’t mean all of my users are that age, and have that eyesight. And I say now that I’m getting older I’m I wear glasses when I use my computer because it reduces my eyestrain. We are all temporarily abled to a degree and even something like just reading even though I can read I’m not blind by any stretch of the imagination. I certainly appreciate the attention to detail and folks do make an effort to make something easy. That’s medium, I think did a really good job with that. Right.

one of the big ones I harp on is focusing on the pseudo elements hover and focus. This is one of those areas and this goes back to the whole you know, one of your first experiences with CSS accessibility might be this whole visibility thing. Where hover and focus come into play is back to keyboard control, particularly when you are tapping through. If you’ve got that skip to navigation. If I’m using keyboard control this because we talk about hiding things for screenwriters. But somebody using keyboard controls isn’t necessarily blind, their motor impaired. And so they see your screen fine. And if you’re tapping through a website and trying to use that keyboard or if you use a, you’re using even I control and I monitoring, you need a way to do the same things because they need to skip content as well because they don’t necessarily have the dexterity to use a mouse or scroll wheel. When they focus on that skip to content Lee, you need to see that in the page somewhere so that they know that’s where they are one of the traps and I had mentioned when I was reworking ours I now have this whole conversation has brought me to where that happened. It was in our navigation. When you tabs through our site and tapped into our main nav. You vanished. You were still tabbing But the drop downs didn’t open. And it captured that tabbing for an amount of time that was completely unknown to the user. And that’s not fair to them at all. As a consequence, so you have to use hover you have to use, but buying that focus as well, because focus is sort of that follow along so that you can open that up and show the same things and show those elements. And we forget about those, I think, Far too often.

I’m a big fan of us outline. The nice thing about outline is that it doesn’t disrupt the flow of the content the way or can it when you’re using board or depending on your box sizing at you know, adding a hoverboard or or focus border might move content around whereas outline does

I generally encourage people to not like try to change the outline color or anything. If only because as since outline is, like you said, it’s a function of the browser, it’s very similar to the way I think about form validation, when you put like required on a field and the browser itself will try to validate that if you’re using a date field or in some field, the thing is your user is used to their browser, and more sites than not, are probably not customizing it. And so we’re back to Jacobs law of UX where most people don’t use your site. You know, they are using all of the other sites more than yours. And so the more you can let the browser behave the way they are used to the browser behaving makes it more likely that they will understand the behavior on your site. At least that’s it, that’s my opinion on it, but you, you can work with that though, and you can customize the outline a little bit but you use it, definitely use it. What’s your take on color palettes? This is one that and if you if anybody uses things like slack and discord and all of these apps have 29 teams like the year of dark, you have dark mode now websites and for a long time some of them offered like you can you know, either you can have your tranquility, green theme or whatever, like you could pick your own color themes back in the day, but using some kind of either site setting or a drop down or something in terms of setting in particular, either color palettes for color blindness, enabling color schemes that are friendly for colorblind people or for contrast people who have needs for high contrast and high visibility. What’s your take on that?

Yeah, this sort of faded out magnifying glass in the background.

I think the easy way, you know, when you think about this is a SAS as your friend, there are a ton of mix ins and functions that can help you in terms of like, making sure that you have colors that are the right contrast. You can make a style sheet that’s like, you know, you’ve got main dot CSS, and then main dash high contrast dot CSS. And a little piece of JavaScript can sit in the corner, put a link in the corner, your side button in the corner, your site that says switched high contrast. And all it has to do is add a body class, and then it’ll automatically swap out your color scheme for any given elements that need to be affected by that. And it’s pretty painless from an approach.

because there’s we’ve got access to all these calc functions, right, exactly. And so with the right calc function, if you’re using the HSL, or something as your color setting for an element, theoretically, you could easily sort that out dynamically that often I’ll if I can find that I’ll throw it in the show notes. That’ll be a good one. One other area where you can use CSS to kind of block out some of the old way of thinking is using CSS to apply background images or you know, after images, things like that, that are purely decorative, they’re just there for the aesthetic quality and this you know, the way we open this up talking about the way accessibility and and usability and aesthetics can kind of be antagonistic of each But you can use CSS to answer some of those needs so that you don’t have to have images without alt tags. That was always the common argument. Well, should I just put a.in? My own space? Can I leave it blank? Because there were, you know, there was the method of just saying, Well, yeah, if it’s for decoration, you don’t need an alt tag. But with CSS, you don’t have to worry about that question at all just make it part of the decorative layout of things. My favorite part of this and this is something we’ve referred to many times on the show is the old CSS Zen Garden, which really demonstrated that that pure and beautiful separation of presentation and layout and utilizing all of these, you know, whether it’s pseudo selectors, after before using CSS background images and things like that, web fonts, any number of Different things, you can make this beautiful design out of something that’s marked up exactly the same as a million other examples. And that’s one just one way to get around some of those things where we’re going to put, you know, these images over here use them, however, we’re going to use them, mark them up through CSS, use normal semantic HTML, then behind that, and you don’t have to worry about those images. Because a lot of screen readers one of the things that I’ve ran into, I think, I think read aloud does it. If it runs into an image without an alt text, it’ll just read the image path.

which, so it doesn’t actually absolve the problem in that situation. You can’t always leave alt text right blank without it causing a problem. He’s

couple areas of caution. First and foremost, and this Kind of actually refers back to the CSS Zen Garden order and positioning. We use CSS all the time to move things around the page, make things look differently. But like we were saying earlier, when you get into a screen reader, a screen reader can only read one thing after another, it does what we call linearize the page. And that’s something to really think about hard when you’re using CSS to not go out of your way to move things out of the flow. In a way that doesn’t make sense. Man, well, I don’t know why I pick these articles. And everybody has a name that I feel terrible. My last name is Fienen. It’s spelled weird. I hope you all can appreciate that I understand my role. But to switch. I’m going to go with that. And he’s got an article called writing CSS with accessibility in mind. And he’s got a section in there that specifically talks about ordering and positioning of country. content with CSS. But there’s this huge importance that comes with making sure your content is in the order that you need it to be read this, you’ve heard Chris about like the F pattern, the pattern of websites, where we tend to read left to right and up to down in this way that our eyes create kind of an F shape on the page. And there’s this debate that constantly goes that says, you know, is the F pattern still relevant in today’s modern web, I argue it is from the concept of how we linearize the page when even we ourselves are reading it with our eyes. That that F pattern is kind of the way you can think about how a screen reader is going to take that page and line it up, left to right, top to bottom,

long overdue Yeah,

the sucky part is, this is something that’s really hard to convey over a podcast. Because you can go in when you define a CSS Grid, you can look, you’re literally laying out the name of individual blocks, or can rather lay out the name of individual blocks and then assign content to those. So I can say your last element could be the top left element visually. And so how that then flows for the accessible DOM is be very problematic from a user flow standpoint. One of the last areas I’m going to hit on this just kind of briefly because it gets into some hype. specific examples, I think, which is media specific style sheets, where most people will be used to this is having like, all and print. Those are, I think the two really common ones, you have your normal style sheet that’s just for whatever. And then you have your style sheet that’s for print so that you can do things like take your header out, and maybe you linearize your content or you make images full width, and you can do a million things. That’s that when it prints, it prints in a way that’s friendly to the page so you don’t have sidebars, and all of this. But there are also other media queries you can run that are outlined. There’s a good book called web accessibility web standards and regulatory compliance. Chapter nine, it was chapter nine, it was written by a gentleman called Richard Ridder called named Richard Ritter. And there’ll be a link in the show notes to that. And he outlines all of these different media queries and you can get into A media query specific for Braille, embossed Braille for speech reading out for TTY, which is like teletype machines. You will not run into these very often. But you certainly could run into them in areas where either you have governmental compliance. I could imagine if you had a job with, say, the Social Security Administration, they may have needs for compliance with things like Braille and TTY. That’s not out of the realm of possibility. And I say them, mostly just to let people know that they exist. Because I don’t think there’s again on a podcast not a good way to convey Braille CSS to you, but it is a thing and it does exist. But you can also get in between the media queries we have for devices, feature queries, the app supports functionality. You can get into things that I’d like yeah, you brought up earlier Christmas, we were talking about the prefers reduced emotions. I totally love.

And there’s a complimentary query for that or property for that too, which is prefers color scheme. Both of those are basically supported across all modern browsers, except edge will for WebKit. Now that edges switched Over to WebKit. It will support it. But if you’re in edge 18 or previous, it does not support either of those. But let’s see. Last thing to hit on, I want to talk just real quick about a few tools. So that if you want to get into developing accessible CSS, what can you do that will help some of this? And first and foremost, I cannot recommend Firefox’s accessibility tools enough. If you go into their web Inspector, they have a tab for accessibility will have a link to the docs on that. There was a question one of our listeners that john yesterday I was asking about color schemes, and specifically about color blindness. And one of the features in Firefox’s Accessibility Checker is that you can simulate color blindness on your page. So you go in and you tell what kind because if you’re not familiar with colorblindness, not just you can’t see red green. There are many Different types and and the way it affects color on a page. And you can go through and pick those and it will filter your page color for you so that you can see how your page looks. Does it have high enough contrast? Does a button vanish because of the foreground background color? That’s hands down one of my favorite tools.

color blindness is a tough one for designers because you could end up working at a company whose colors, their color scheme, their branding just isn’t very colorblind friendly. And you probably aren’t going to be empowered to be like, Hey, we got to change all these colors. Now, these colors you’ve used for 100 years.

make sure it’s readable, and you bury the lead on that comment. When you point out there working on a better ratio. We’re always working on better everything, quite frankly, you know that a lot of the tools we use now for all of this simply didn’t exist five or 10 years ago. So all of this is an exercise, you know, CSS in particular, these things like prefers reduce motion, preferred color scheme. Those are new things that weren’t supported even a few versions ago in most browsers. This This stuff is constantly evolving and you just kind of have to keep on your toes and always be looking for ways to improve because you never know when that next good feature is going to pop up.

a few other things that Firefox does, you can have it scan for issues with contrast and keyboard navigation. It’ll if you right click on anything on a page, one of the options that pops up is just inspect accessibility properties. If you hit that, it’ll bring up the I call it the accessibility DOM. I think they call it the accessibility tree. But it’s basically the way it’s parsed it from an accessibility standpoint, because the way things get parsed in the way a DOM tree is rendered for accessibility purposes is a little different from the way a browser renders it. And it also looks very different. But you can see all of those properties there. If you Hover those elements on the page, it’ll give you some quick hitters like, it’ll show you the, the interpreted role for that element, it’ll give you a contrast ratio, if it’s applicable. And if it knows, it will also show you if you’re passing certain week had compliance levels. So if you click on a piece of black text on a white background, it’ll tell you, this is a header with a contrast ratio of, you know, 10 to one or whatever the absolute value is there. And it’s triple A compliant, super useful and very quick because it’s all just hover and it shows up, and it will show you that full accessibility tree. The accessibility tree is incredibly technical. Don’t start with it. But as you get into development, and as you get better at these things, and you pay more attention and you care about how is this piece of text rendered to a screen reader, that accessibility treats can give you a lot of very useful information from a technical standpoint about how it’s being interpreted. And that’s super useful, but also advanced technique tech world that we won’t go into. Chrome also has some I think that you use right, Chris, I

It helps you out there. So I I’ve used the the x plugin for Chrome, I use the site improve plugin. Andy is one we’ve brought up many times that the Social Security Administration came up with. But of course, yeah, like the only thing I’m just really surprised that Chrome has not caught up better, I guess that Firefox is baked in on a lot of this in a way that’s really nice and useful. And Chrome is still just letting third parties deal with it. But I’m also

I’ll throw links to Paul and Chris’s stuff in our show notes. Go check that out at drunken UX calm and we will be back in just about one minute. Look at those while we hear a word from our sponsor. The drug UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school, city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just two minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration or to view their portfolio, visit them online at New cloud.com slash trumpkin Ux that’s in New cloud.com slash drunken UX Christmas Thanks so much for taking the time to sit down with us. It’s great a talking to you. I haven’t talked to you in a long time outside of Twitter. So it’s a, it’s good to hear in your voice again, I appreciate it. But also go check out Chris’s company knowability because they do fantastic work and accessibility. But for the next couple minutes, the microphone is yours. tell everybody where they can find you where they can meet up with you. Anything you got going on what your favorite pot roast recipe is, Unknown Speaker whatever you feel like.

Awesome, everybody. If you want to find us as always Twitter or Facebook at flash, drunken UX, Instagram at slash drunken UX podcast. Join us on slack a drunken x.com slash slack and outside of that, you know what folks I’m not gonna even try to lead you on All I care about is you start 2020 by keeping your personas close and your users closer bye bye