In this very special season premiere, noted CSS and accessibility expert Christoper Schmitt sits down with Michael to dig into the important introductory concepts involved in writing CSS with an eyes towards creating accessible, inclusive designs. From how semantic HTML lays a foundation, to settings like prefers-reduced-motion, you’ll learn about how the CSS you write can affect your visitors’ experiences and why it can be challenging to tackle.

Followup Resources Loses Funding (2:27)

Accessible CSS (4:42)


The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

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 will say I do prefer Christopher when it’s like written down on, you know, just written down just general but Chris or Chris for I will answer to,

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 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 or 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 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 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

was 10 years ago, nine years ago, 10 years ago. That was a great book. Yeah.

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.

The publisher really wants to do it and update one like after it was published, but it was just like a guy who, who else was in it. Who else co authored it, but it was like a rock star.

Yeah, it was. There was a list.

Yeah, it was like Chris Mills, and it was in there. And then Glenda Sims in there, and then Leslie, and then as well, so she was she was on it. So it was really just like a great, great team. I was really fortunate to be part of that.

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,

that you’ve actually stylize it now, right? Yeah, I saw that. And in terms of that, and so there was a discussion going on about the accessibility of it all, because you know, how important to having links with underline. And they’re like, well, if you if we do this, if your designers could do something really bad with it, I was like, have you seen the web for last 20 years? I mean, like, if people can do amazingly awful things with CSS, and this is from a guy who just loves CSS, I’ve written so many books about CSS. And so I just, I just feel like it’s a tool, you know, for learning, that’s great. But if you don’t know you’re doing it just go, you know, it might just blow up in your face. You know, I think the article talks about contrast, right? And so, you know, you don’t apply enough contrast through CSS, you know, colored units. And then, you know, you don’t have an accessible website does, it could look pretty or whatever, but it doesn’t, might not be usable, it might not be accessible. So and actually one of the things we did at work here at ability was we had a client said, like, hey, well, skip links look really boring. And they really just mess up my interface. And so one of things I did was I put together a blog post with the team of team members help of websites that we thought had really great looking, skip links. And so if you include our blog posts, you can see it but and so we showcase like, Starbucks is really good, skip links. Chase Bank has has a good one and so and so just really great way of just showing how CSS can be used to display without, you know, skip things being overbearing on to website

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,

yeah, and some people just have, you know, they decided to go and we’re designed directions like there’s a website that I reviewed and they decided to take Off link colors. And so the link color match the text copy and get rid of the underlined links. So I you didn’t know what was the link when you read it. So it’s only if you haven’t a hover and you know, and using the mouse and never worked with the keyboard navigation. And so I was just like

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.

I mean, I think you’re right. I mean, it’s, there’s so many things learn with web design. And like, I see this a lot with boot camps where like, they just, they give you a day of HTML, and maybe a day or two and CSS. And then it’s like ressa times JavaScript, you know, and so, in accessibility is even like touch because they don’t have the time to work on accessibility into the flow. And then, you know, as someone who was a student, you know, to college as a graphic designer, We’re all just trying to figure out how web design works, period. And then if but also for me as a student, I was just trying to figure out how graphic design worked. Right. And that was, the hard part was like I was trying to like, I always lessons, you know, from color theory to layout to composition, you know, and then if you throw on, like, trying to figure out accessibility like what, whoa, Where’d that come from, like now as a graphic designer, but I really went there for print. And then halfway through I went there for web design. So that was kind of thing but yeah, it’s uh, there’s just so many disciplines that you don’t have to deal with when you’re dealing with print, as you have to deal with design. So there’s so many more things that you have to be concerned about. And so that’s one of the things I love about what design does the one things I just give me so much headaches, because there’s like so many more things to to contemplate and an answer.

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?

Yeah, I mean, you really want your CSS to be really clean. But I think really it helps everything going forward if your is your HTML as semantic as possible. My when my my Jeff being stories much remember who Jeff Dean was, or is he still, but he I first met him back in the days when he worked at Wired magazine was online property, and it was a magazine in San Francisco. But then I met him again, when I went to South by Southwest, and there was an accessibility panel. And so he’s on there and his quote, was that he doesn’t have to worry about disability because he uses semantic HTML, right and his websites and so And that what people don’t realize is that he also says like, it feels like he gets him 75% of the way, there was also what he said. And I think that’s, you know, still very true. Because it’s just a lot of things that just so people know, like, my day job is I audit websites for accessibility. And so for errors and so a lot of the issues I find is a good portion of them are just really bad HTML. Yeah. And people just seem to forget what links are. And they use JavaScript to make things clickable because they can and JavaScript them you know, like we I’ve seen like, table data cells become clickable, spans are clickable dims are clickable. And when you come in with a screen reader, now that is not going to work because the screen reader isn’t for browsers for the whole entire screen, right? So so like, know what’s, you know, what’s, what the computers going to give it? And if when it comes to like a table, so it might, it might skip that entirely like to like, well, this is just a table so I’ll just read the contents and move on. Yeah. I give it and so. But I think if you’re into accessibility, I think the greatest gift for learning or starting out with is, whatever computer you’re on whether you’re Windows or Mac, just find out the native or easy solution to get a screen reader going and for seeing how well the end, you quickly realize that it’s a linear viewing experience where with your eyes, you can just jump all over the place of a page. But when you’re listening to content coming through, almost like you know, I guess, have someone just reading a book to you, it just, you just can’t turn around and you also do stuff like that. So yeah,

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.

Yeah, it’s Yeah, it’s amazing because that ability we actually have a, one of the features was sources that we write provide is a usability test with people with disabilities and so and so it’s and at South by Southwest, we have booth where we have people with disabilities that I can and if you want to come to our booth and have a website in front of us, and people came up to you what your website that you were for your company or whatever. Go through your website to see accessible is it Resistance those people who came and did that and sign up for it, it was just a mind blowing experience that they like, Oh my gosh, I’ve never, I never heard someone use a screen reader on my website before.

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.

Yeah, on top of that, there’s also some great things I don’t think there’s like the main and header and footer. Which I think Twitter is kind of like ubiquitous now like everyone uses Twitter. But some people forget about header. And those are called like landmarks and so that that allows people with access technologies to put the navigate to different sections of the website, but also I think really important stuff is semantic. HTML is using your headings correctly. This is the people at WebAIM, which is a another accessibility specialist. They do an annual survey with people who use assistive technology and it like last two years, at least, over 60% of people who use assistive technologies, like a jaws reader. They use headings to navigate websites to figure out what’s important and and how to go through everything. So if you want an h1 Make sure you use one h1 and use if you can’t, hopefully you can, but then h2 and h3 h4 in order and make sure you don’t jump around for like using h2 then ha ha Whatever, in order saga so yeah.

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.

Yeah, they don’t abstract the semantics from the visual, right. So right because

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

is tough, like how do you how do you handle content where you are?

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

well, which is true all if you can look this up, I went to a book launch with David Siegel. He’s at the secrets of successful websites, I knew that there was content was gonna be an issue because he asked the question, and the whole book was about managing projects back in the day. Now his question, it was like how many people have issues with content and the whole room raised their hand and I’ve never seen content not be an issue for for organizations that and that was early lesson for me and like our contents gonna be a tough one. It’s true, like wherever I go is this you know, or whatever. You know, I just, you know, people think it’s a really interesting thing to do to

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?

I mean, I tell people like, you know, you want people to go to your website right again, You know, let’s say a real people, like, you know, people people usually bounce out of a website after viewing one page, you know, if it’s like a Google search or whatever like that, and like it, but you want them to go through your whole website, right? Like, yeah, but you don’t want people to listen to the header 618 times, you know, trying to find the right content on your website, you know, so, so the importance of skip the links, just to make sure that you don’t want to hear the header over and over and over again. So that’s very, very key for that. But the thing is also that skip the content is also it’s part of the WIC hag is to bypass it’s called bypass bypass blocks. But I’ve also found it’s also important to bypass just loads of content, that person just doesn’t want to hear. And we’ve, we’ve used this and with clients like that use with clients, I just just tell clients like they’re really, if they’re going to use a Twitter, embed, our Facebook embed, we widget which are not accessible. But those things that go on and on and on forever. And they, they just, you know, there’s there’s so one way to just do a skip, you know, skip this Twitter or Twitter, Amanda’s on that too, or you just have a big table and when people bypass it, I guess that’s

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.

Yeah, I mean, yeah, I definitely tell people to shy away from this 49 and if you’re using displayed on the high content, I would just like Hey, want to drink The content off the page all together, because you’re forcing people to download it. And if it’s text I’m sure, damage is a good download but in the background, but yeah, just want you to put that but there’s if you want to hide things but make it accessible for screen readers there’s, you know their CSS rule set for for screen reader only they’ll hide it visually but tweeters will still be able to pick it up. So,

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.

I think those are good recommendations like mine heights really good. I was reading a blog yesterday yesterday and there was no line height whatsoever. And my eyes were just burning Just trying to read it,

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.

I will go back to that point, like where you said, like you’re Yeah, I think people realize that, you know, they can be temporarily disabled, right? They could have like, they could break their arm and that notion that but that, you know, they could be hard for them to use a keyboard and have to rely on mouse and and and if they you know how hard it is, you know, this autocomplete we’re currently on a Mac and does, you know their eyesight goes away for a while if they have like, they get there with the LASIK surgery. I wonder. So they’re, you know, they’re so they’re blind for a day or two or whatever like that. So how can they use their website? Now? if they if they can’t, you know, everyone’s is could be temporarily disabled at some point. And then can you actually use your own website at that point in time? Yes. I think for any website, you know, there’s, there’s nothing better than getting your stakeholders to watch a UX test in person, because then they actually see you know, how people are using your website. Exactly. So I think that’s the best thing to do it. So

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.

We ever were, like, you know, I think people don’t forget using the mouse hover, and the interactions with the mouse. And so they actually like integrate, make sure they have a hover effect when they they go over links and some of that too, but they forget a focus part of it. And and so when you think what happened maybe with yours is like when you when you did your tab navigation. There’s no CSS rules. You know, that fired Went through the keeper. Yeah, yeah, they just weren’t there. And then sometimes the earliest versions of boostrap had outline was the CSS property outline equal to non or zero. And so what happened is that that visual indicator, we call it the visual focus ring is gone. Right. And so as you’re trying to tap through a site, and outline is equals zero or not, and when people who are using rely on keyboard navigation can’t see where they’re, you know, where the focus is on a web page. And so that, you know, I see we see that a lot with with clients is that the outline just gets sucked away and you have no idea where you are. And the quick fix is what I usually tell them is that just to apply a descent like a music off, my brain goes a grouping selector. Basically just combine your hover with your focus to get go to the same CSS rules as the house. And usually that’s all you need, because usually there’s enough contrast with your focus because people are your hover, because people, they like the hover, right, the other mouse clicked. But sometimes they don’t, you know, sometimes it’s not that great. And you need to create a focus style that’s high contrast. And so you need to make sure, make sure there’s enough of a contrast so that when people go through the site, they can see it and so And normally, if you don’t do outlines zero done or equals zero, the browser will just display its own native, focused visual focus ring.

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

more like walk shadow where we apply box shadow to move things around. Yeah.

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?

wicked has a handful of rules about color and I should wrote article for 24 accessibility, which is great, like avid calendar for accessibility every December. And so, mine was about color theory and contrast ratios. And so contrast ratio is everyone knows is basically taking of the background color with the relative movements of the foreground color. And just doing a ratio like this is, you know, what’s what’s the ratio between this color to this color and so, and that way, you can take any color and basically figure out ratio from it. So mechanic has some, you know, symbols about that and say like, you want to make sure your colors are this level of color contrast and not below it, you want to go above it just so people can see that there’s a link in the text to so and then there’s also going to be triple A level of contrast where it’s just like, we’re set up 4.5 ratio, it’s gonna be even higher. If you want to Aaa level of compliance. And so that’s, that’s pretty interesting. And then there’s also a non contrast non text contrast. We’ve had success criteria, which is 1.4 11, which talks about buttons and icons and making sure that if there’s something that’s important, if I wouldn’t have we get this right, this for user interface components, and graphic objects, like buttons and icons, he provide enough contrast that people know the edges, if you will, when an item or button and so so a lot of times, you know, back in the day, sometimes you get like, kind of artsy or wild card sites with a search button was just a text. It looked like text as they took the border around, and they made it visible. So you didn’t know it was a button. And so, but the

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

That’s the kind of big No, no, so that’s where color comes into play for a lot of things like that. So That

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.

I mean, there. There’s an article on CSS tricks, I forgot who wrote it. I want to see if there’s something that could be totally wrong. And she just went through assess how to automatically make sure there’s enough I think Sarah could be wrong about using sex. to automatically give enough contrast, if background colors change or not. So like if you have a button and button text and it changes color, the text of the button will always be having a contrast. So you know, you need JavaScript make it work, you know. So

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 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.

Yeah, it would just be the file name right? away, right,

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

like a CMS with a CDN sometimes get these like weird letter number combination, which means nothing to anyone here. Now a

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,

right. I mean, if you have your page and semantic order, then I was like assume that your screen readers gonna read it in a Your format with with the sequences is really important is that for people who can’t see, but they have to use tab navigation, right? So they want to. So as they go through the page with having a negation, which with that the focus ring goes from left to right and goes down the page, in an order that makes sense visually, that goes along with the Page Layout, if it doesn’t do that, and it might be an issue for some people with disabilities that they don’t know, they’ll lose track of the focus ring, they’ll know where it’s gone. I see this, I’ve seen this a couple of times, where people put the back to top button. Visually, like in a code order, it’s like a top of the page is like top of document, but visually, they move it with CSS with position, you know, absolute to the bottom right corner. And so they’re like, they’re going to the page, the admin page, and also their focus ring goes to the bottom right. of the browser window. They’re like totally lost as do like What’s going on what happened? What things I no excuses grits are here and I love the fact that they’re here the fact that the seasons are here

long overdue Yeah,

yeah. But and like and as before got to accessibility I was like oh I can’t wait because then I can present a page but I can have a docking source order be in a linear format that makes sense but then I can have free as a designer to layout the page in any way I want. Right? I can just let go I can place content in the footer appear and upper page I go great at what card and do kind of cool design mentor, Charlotte just so I could do is really things I could always want to do in print. I can do a web and and move things around. And then you know, mechanics disabilities like Oh, I can’t do that. If I want to make sure I have an accessible page because that it’s something called the reading order to success criteria. 1.3 point two is that you Wanna make sure you’re reading order matches what’s actually displayed on the page. And as he, you want to make sure it’s a logical intuitive to go through an order that so like. So with CSS Grid, you actually pull things out the document order and leave things on a really cool and different way. But

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.

By the way, I just thought on that I think that’s a great, great thing to do. Because there’s going to be so many sites that are out there like for entertainment or, or, you know, I have a video in their web page that’s embedded, set the autoplay and which is terrible, we should not do that. And also, if you have a carousel that’s automatically playing, that could be hard for people with disabilities. Or if you have an animation that kind of plays. So what I love is prefers reduce motion is that people with disabilities can take that taking control of their computer, and have selected this as an option with you know, makin an option with preferences. Instead, it’s a habit for reduce motion. And so when they go to a page, I think chrome supports it now from Safari does to Ethiopia page and the CSS is written correctly or whatever, instead of having the video player Automatically, you can just say, hey, you will just be a poster frame. And then they can actually play it if they want to. Or just just give them an image still image and you don’t have to play anything, or the carousel carousel is on pause automatically. So it doesn’t go play on it. So such as a really great feature where the person, your user has taken control of your computer, and you’ve done your homework and tender due diligence and apply the CSS rules ahead of time. And so it’s a really great way just to provide accessibility, accessible experience. That’s that’s very usable.

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.

Yeah, it’s so important to as I actually when my topics and I talked about its color theory in color on the web accessibility and my research was like actually to pick the top 100 you know, portion, the top 100 the top 500 companies and actually did some analysis on some of them and say, like, are these sites you know, available for colorblindness? I think Exxon. I remember so I use Exxon as my whipping boy, if you will, sorry. But and they’re just not really prepared for for pipeline. So it was like every type of scenario you go through this was not it was not working out.

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.

I’m also like, I like the kinds of great way to dovetail back into the color ratios. Because one of the reasons why we they use relative luminance or luminous in general, is because they could not figure out a way to what’s it’s really hard to figure out what kind of colors work great for all the different types of people, all different types of colorblindness. And so one of things they make sure they use these ratios was because they felt like that was enough of just by going through color ratios and limits that didn’t provide enough of a contrast, depending no matter what the color combinations are. So And part my article for trade for accessibility, actually that, like links to some resources is like, well, it was a great start, but the color ratio is kind of flawed, and they’re actually working on that week, okay, people are actually working on new format for overall setting up. But that’s why you will also know us and want to make sure your car ratios are you know, 4.5 and higher for texts,

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.

Yeah, it’s such an amazing like, like we started out, it was such a glacial pace in which, you know, tools came out and browser features came out. And now it’s just so amazing how fast things happen. I mean,

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

absolutely love accessibility insights for for the web. And so the Chrome extension, which which was ricer Chrome, but and it’s I use that for audits because there’s, if you just, there’s a quick scan for amay testing, it’s built it and it’s actually built off the x engine. So you think it’s, I think I said that, right. But they also wrapped around it as a walkthrough for accessibility. So if you want to do a full audit of a web page, it’ll spill, you can walk through the whole entire thing steps. And I use it as my day to day tool for testing. And I love it or it’s all laid out there. And so Sometimes I have to go through the the accessibility tree, when something really gives me a fit, trying to figure out what’s going on. But from a day to day stuff, it’s just really insights for web really helps.

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

our throw in there. Paul Adams is accessibility consultant. He has a series of bookmarklets remember what those are. And so if you want to do some simple testing, I use them for making sure tables are coded correctly. headings, landmarks, you know page titles, make sure top indexes on there. So if you Want to just quickly test and make sure for things that are out there. So that’s pretty good. So there’s a nice tool to have. And then also, Chris Hendricks, I hope I said his name right, as a web developer extension. And so that is great. If you want just turn off JavaScript, if you want to turn off CSS really quickly. I’m sure there’s plenty of ways to do it in Chrome Dev Tools. But but also is a great way because when we talked about earlier about headings, and making sure your page is structured correctly, so you actually see a document order based off that is in that tool, too, and so it’s a really great robust tool, even if you’re just doing development work period.

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 slash trumpkin Ux that’s in New 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.

Yeah, so I work for a nonprofit, not mobility which is kn o w And so we do what we do. It’s a nonprofit to do outreach and education programs. We have our hands on practical accessibility training conference, every main Austin called access you. We also do technical audits for people. So if you want to if you want to host it, right So if you’re on a website that wants to view to be there, and also we have, it’s called access works and which is usually testing for people with disabilities if they want to actually see how well your site holds up Unknown Speaker participating, is that

you can find me on Twitter at telefax T. Le JC JCT. My website is I’m also producing a we just mentioned with Paul Adams, but he’s actually doing a webinar that we’re hosting in June 23 for iOS and Android native app testing and so to get an app and you want for your husband, that’s a half day workshop on online webinar. Just got out there.

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 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