Practical Styling in Forced Colors Mode / Mike Herchel #id24 2022
And we're live Welcome back and thank you for joining us. This is inclusive design. Twenty 4, twenty twenty two, big thank you to our platinum sponsors fable and in Topia and our sponsors barrier break TPI and UX for the win. If you use Twitter, you can find us on there at ID twenty four conf. And the hashtag that will be using for this conference is ID twenty four.
And while you're watching on YouTube if you're logged in, you can also participate in the chat. Hope to see you there at and with all that said, I'm now going to hand it over to my co-host Roberto. Take it away again. So next we have Mike after about the protocol starting in the fourth quarter.
Moda So Mike, over to everybody. My name is Mike. And this is practical styling for first colors mode So I'm from Gainesville, Florida mixed dogs hiking's and front end developer ATV Show. I do a lot of dual core maintainance maintenance, including for the new Olavarria theme, which is the new look feel for Drupal. I've learned a lot of these lessons.
I'm going to going to share with you through the creation of this theme and maintenance that has a very high commitment to accessibility. And that includes force color. You can find me on my at Twitter and Amherst's on linkedIn and you can tweet questions at the ID twenty four hashtag or I think check the house to keep on top of that right now.
In Prague. I took this picture last night from the Charles Bridge which was like this really cool bridge where I guess there is this Mission Impossible scene in the movie and you can see the big old castle on the top. It's beautiful. So it's about nine a.m. where I am.
And but at home it is about three a.m. So today. This is what we're going to look and I'm going to take a given intro and talk about me. We're already done with that.
We're going to talk about Windows High Contrast, what force colors is common problems and tools that you can use to solve that. We're going to talk about testing We're going to do a singalong. And by around, I mean, we're just going to open up a code and just fix them common scenarios. If you have any question that we can actually audit your website, I don't know if we're going to have time for that or see how things go.
And that's about it. So let's talk about Windows High Contrast and of course, colors, and like what that difference really is, right. So what is high contrast is the most popular assistive technology that uses force colors. And according to Microsoft, four percent of Windows users use high contrast force colors. Mode is when assistive technology actively changes colors It will change your authored styles to accommodate people, people's limited vision, and so it can enforce the user. It will enforce the user's color which could be either like something like light on dark, dark on light.
There's various versions there's various permutations of each. And you can even come up with your own palettes, including this pretty hideous was a green on fuchsia palette that I made up. But people will do this.
People will come up with their own palette so they can see and use your website better. And we need to accomplish that. So sports colors work.
It overrides very serious custom various distressed properties, including things like color, water, color, outline, color background, color, and it disables other properties, including things like box add a tech shadow background images when it's not actually like if you're using things like linear gradients, background images will show if it's using it as like a URL to the image But what is it use for those colors and overrides those colors. But it uses new colors that are defined within the suspect called siestas system colors. And they're things like, canvas, text, canvas, link, text message, text, active text.
And like through the you can kind of guess what they are. And you're pretty much correct. Canvas is obviously the background of the webpage canvas text is the text on part of that And so when you're creating a are you creating or editing a psychiatrist, you can choose this, you can open up the control panel There's little UI where you can set your color of your text, your colors of your hyperlinks and your colors of your selected text or whatever And they map to this.
And I also want to say that those system closure. There, that's not a full list. There's more you can you can check out the smacker, Google or whatever.
You need to see all the stuff. But those are the ones I have So this is practical styling before colors. So I'm going to talk about some common problems of common solutions and stuff like that.
So let's look at the problems First. So as with many accessibility problems or many accessibility issues, a lot of times it involves forms with different colors. But as I see issues where the boundaries of the form elements are not communicated in or the forms are not identifiable as form elements and so this image right here in my slide deck is this is Google forms, you know, and you would think that Google forms would do things incorrectly and sometimes they do. Sometimes they go force colors, mode We have a select we have a select dropdown right here. And it's a custom. So I can.
So you can see that enforced colors mode, the little triangle that indicates it's a select element changes into a square, which kind of just looks a little weird. You don't know that it's a select element. In addition to that, you can see the button and above that select button, you can see before and after it doesn't have it doesn't communicate the boundary of where that is.
And it could just look like text. You don't have an idea that that's actually about stuff like this is pretty common. Something else that I see a lot is states are not apparent the in the same element right here. This is what the focus is when you're not like when you're in regular mode, when you're not in force color. So it just changes the background color. Right.
But as I said earlier, we know that the background color, background colors are not apparent in force. Government So the focus state just doesn't work. The focus is active here. But you can't you can't tell that because background colors are removed.
So this is obviously a clear violation of visible. You can't tell So this is an issue. And this is something that we've found that I'm not I'm not trying to date Google for accessibility because this is really common This is stuff that I've done before back before I learned about first colors, not a lot of people, not enough people to know about it.
Element boundaries are what's the word I'm looking for, defining element boundaries are not always communicated properly. That's because things like box, shadow, gets back our colors. So here is a modal window. I think maybe the Guardian's website or economist. And so you can see and in regular mode, the boundary of the model is pretty apparent because there's a background, there's an overlay in force colours. But of course, the background color of the overlay gets removed and you can't tell that this is a model.
You can maybe get a little idea or because of that bit of big advertisement at the top that it covers up. But looks really weird. And it can be it can be kind of disconcerting. You don't have an idea what's going on. And so this is another common issue Iconography is something that I see a lot.
I see i see tons of issues with iconography of using background images as as icons that can have problems and then sometimes just can have problems, too. So this is BBC's website from just maybe about a week or two ago. And so you can see at the top of this there's three dots right there. And the three dots are an icon. And I think i forget if they're Asgeir, where they're SVG films do not automatically adjust, you know, so that in the background and background images are not magically just so this these three dots opened up a segment But you can see these three dots if you're on a dark on late But if you go to a light on dark same, they completely disappear And so that's once again, that's an issue. It doesn't properly communicate It doesn't communicate the effect of the function of what's about to happen right here.
So that's an issue. So how do we fix this stuff? You know, and there's a lot of different. There's a there's a number of different new tools that gives you to fix this stuff, including there's a query, forced colours there's a forced colour, adjust success, property Then we already talked about the use of system colours in addition to those there's things like current, the current colour, keyword is very useful.
We'll talk about that in a bit. Transparent borders and transparent outlines are very useful because transparent borders and transparent lines will become apparent in the first colours. Because as I stated earlier, forced colours most changes those colours. So it will change your border colour to something like, canvas text or your outline colour to Canvas text I use a lot of the mask image, CFS property and i'll talk about that in a bit. And then you can use things like ClickFunnels Path, see us as property and you can use those in conjunction with some colours to help out with iconography So let's look at this. Let's kind of look at these tools in depth through here.
So force is McQuary is a worksheet almost exactly like you think should be the syntaxes force colours active. So you see at media force colours this will become active when force colours is turned on. And at that point, you can change things like your fill and your SVG. As you can see what I'm doing right here forced colour, adjust property. This doesn't work for Firefox. I but you can say do not change this particular selector and that is fairly useful and something else that that should be up to kind of highlighting.
This is not force colours. It's not player force colour adjust which is different than the media player. So if i'm going to use this and you're wondering why it's not working, that might be why.
And once again this is not supported by Firefox. So just keep that in mind. So current colour, so current colour is a pretty, very pretty useful keyword.
Right. So it will it will change whatever value or will change the property of where it's been used to whatever the current color is. And so you can see in this particular case, we're using it for this icon right here.
We're changing the filter colour. This used to not work, but it was fixed. And I think was chrome one or two. It was fixed. So when I was doing all my other work in Juvekar to make this work, we had to use a whole bunch of media queries and in system colours.
But now it's a heck of a lot easier. You can just type in your colour and have your fill be the current colour. And this is an easy way to do so. If it avoids the media queries and it just really just works really well. So that's going to be kind of abstract Imperceptible boundaries is something that I went over a little bit earlier So a lot of people will style their buttons with something like this.
You can see, you know appearance. None will remove the default appearance. Everybody, you remove the border because You don't want to border on a button.
And then you just have the background of blue and that will make a nice, pretty nice, pretty button. But of course, that background doesn't become apparent in first colours mode. So instead of having a border of zero, set your border to a transparent one, pixels something like that. And if you really want to be cool, add a comment. Other developers will come in after you and they'll be like, why the heck are you adding this transparent border? And if they have a comment in there, you know they'll be like, well, what the heck is this color? Is it maybe they'll maybe they'll search for it.
And then they'll learn something and everybody will be happy Imperceptible focus states are basically the same thing. You can see that in this in this code right here, we're using box shadow as a and box. Once again gets removed as the same background color So in this particular case, we're going to add an outline and an outline. After we're going to add that comment in there. And everybody's going to have you know, it's going to work in colors mode. And it's also going to have the same exact focus if you're not using force because the outline is transparent.
So this is a really great best practice in ways to do things, to make it work everywhere. Something that really turned me up for a very long time is the select menu, select dropdown. Everybody knows and uses these You saw earlier that Google kind of rolled their own, which if you're an usability person, which you are, since you're watching this rolling your own farmland is often pretty dangerous. A lot of people kind of get around that by styling the select, which I do So you use code like this with the parents and you set your padding within Selex. You can't use things like pseudo elements the before and after. So people at the background, the background image there.
And you know, at a border and will it work? You know, the problem is that the background and the background image doesn't necessarily take into effect the same of force colors. So like, let's say if you're select is as a white background. So the Chevron.
That's pointing down is dark that Chevron will show up if the user has a force color theme that has like a dark background and then vice versa. So the easiest way to go around. This is just to kind of do what you did, you know, so revert the appearance back to the user data browsers, default and that will put that default Select Chevron in there that the browser inserts and that will automatically adjust to force colors. And then you add your background in there. And this is something that I know this code is pretty straightforward, but honestly it took me like way too far, far too long to figure this out. To get this working properly.
But we're using this all over the admin interface of Juvekar and it works great. And we've tested it out Iconography, once again, is a pretty common problem. So you can see in this particular icon right here, this is an SUV. And we're using a name called Papaioannou, which is such a fun thing to say as the full color.
That's not going to change. The color is not going to change. So a better way to do this is to set the tech on. We go back here. So this is the improper and then this is the proper way. So the proper way is to set the color the text color to Papaioannou and then set your fill the correct color.
And this is what we talked about a little bit earlier. This is best practice that degrades gracefully and it's it's a great way to do it. Everybody's going to be happy, including people in for scholars mode. Background images. And this is one that's a little was a little difficult because we're using a lot of background images with the Supreme Court. And so we have to get this to work.
You know, so and this particular link right here, this renders has an icon. And so we have a background image as with a kanji right here. And a lot of people do.
This is pretty common This icon to PNG will show up It will render. But depending on if it's large light or dark, we're not necessarily confident that it's going to show up, depending on what theme that the high contrasting that the user has So will we solve this using the mask image properly in combination with the first class medicore So you can see that we have a first class McQuary right here. And then we we're using mask image, Max, the mask image. Is this really neat siestas properly? It.
Creates what's called a jack o' lantern effect. And if you all are from the USA you kind of know an ejaculation is if you're not around Halloween, we carve out pumpkins, we put a candle inside of them, then you can see the light of the candle shine through in much the same way. What we're what we do is we have the background to be named colour, like linked text or something like that. Honestly, you could probably current color here if you want to, and then the mask image will limit the color that shines through to just the opaque parts of the image. And this works, this works pretty well.
It's kind of a complicated, complicated idea. To get your head around helping them explain it. Right.
The, you know, use the the hashtag and be like, Mike, what the heck are you talking about? There's a couple of caveats on this. So you have to use the Web kit prefix with chromium Something else that is really important with the mask image is it it will mask everything, including outlines and everything like that. So if you're using a focused with an outline, you have mask image applied to that same element. It's removed. It's going to remove that focus. And so you can get around that by you can see in this in this example right here, we're using an Asuda that before pseudo element and that works perfectly.
That works the way it is But this is a point where you really need to test on here. So once again, you need to add a Web kit prefix to this. It's going to mask any borders and outlines.
And this could be a little this could be a little tricky if you don't test it. And it's going to mask any text that's in element. So when you're using that webcam mask, you want to throw that into a pseudo helmet or some little element in there the biggest thing, if I can get anyone and who's listening that they're watching this to do is just test it, you know, just test If you can identify the problems, you can search for the problems. The solutions, please test. So how do you test ? Right. So there's a couple of different ways.
The easiest way now. And this is really neat. If you're on a Mac is the chromium version idea. And later.
You can do it through developer tools. I'll show you how to do that in the second And that's really awesome. And it seems to work pretty well. Sometimes it will actually cross developer tools but overall, it pretty much works And when you're doing when you're testing that by default, you're going to see a dark text on a white background.
But if you there's a little dropdown for the first color scheme and you can you can flip that to latex in a dark background. And on switch, switch things. So that's pretty cool. You can test you can test first colors on the mac and Linux Here's what it looks like. This is an animated geffray here So we open up developer tools, we open the door, we go into rendering and you scroll down, we can see it. And we're switching the same You can see the logo doesn't show up here.
And I did twenty four website. This should. So I'm going to let a little more time because this is pretty cool. So here we go. We're going into the rendering, we scroll down look for that first make our first colors emulation. We active, you can click around, play with that.
And then you can toggle your toggle your color scheme like that to I also like to use virtual machines for testing virtual machines Virtual machines are pretty neat because they give you a and they give a little maybe more empathy to what the actual users are doing. You know the chrome is just emulation seems to work pretty well, but it's not exactly the same So virtual machines give you a a really great experience. And it also gives you the ability to have different browsers, including Firefox. And you can also try different high contrast names. So with like if you're hopefully using virtual machines, if you're trying to focus to test So VirtualBox is a free option, but it doesn't work on the new and Oracle who owns virtual boxes.
No. Well, it's also pretty buggy. When I got a new Mac, I bought parallels and I was kind of bummed.
I had to pay about eighty us. But I love it. It's like it's really good. It's like way less buggy than VirtualBox. It works. It's fast The only thing is you don't have you also don't have free virtual machines.
So like Microsoft gives you free virtual machines that you can download from VirtualBox, they don't do that for parallels. And I ended up having like a short Twitter conversation with some Microsoft devs about maybe that'll change or maybe it has changed. I have another friend who works in a different part of Microsoft. He gave me a coupon code. I bought a license for this for twenty dollars. So if you have those people, they're very nice to have But that being said, it's kind of worth it.
If you're a front end developer. It's really nice to be able to test on this So I created this code right here where we're going to solve some problems. So let me move around. My zoom controls and see if we can pull this out right here. So this is some custom form elements right here. So I'm going to do live coding because, you know, live during conferences always, always works out really well.
So in this particular case, right here, we have a select menu that styled similar to what I talked about earlier, has the lyrics for the Outkast song here and there. So let's just enforce coalitional. So we're going to do this live.
Of course i mean, hit the escape band and it's going to open up the store right here. You can go to the Rendering tab. If you don't see the Rendering tab, you can have these three little buttons here. And you'll see down there. I'm going to scroll down until I find first class. But sometimes, like I said, that's also crash.
When you start playing around with this type of stuff. Let's just see what happens So here we go. So we're in for college. So everything hopefully for you looks like we have we have our dark text on a white background.
So you can see these formal boundaries for the button is not communicating right here. Let's fix up the select element. Looks good. And once again, move around these elements.
I'm going to go down to the button. And you can see I have border right here. So I'm going.
So where I'm going to say border one pixel, transparent, solid And now we have a or we have badguy right here. So the select element looks pretty good right now. But let's test under a dark color scheme And so we do that. And of course, the Chevron doesn't show up because the Chevron is also dark. So this is an this. Right.
So I have this code. I commented right here, we're going to use the we're going to use the force colors medicore and within that force colors. McQuary we're going to set the appearance back to revert, which the value that I think it's ListBox or something like that, or something back.
I'm back to that. And that puts this little default Chevron in here, the default Chevron looks a little funky because we have that padding in there. But that being said, it's apparent that you understand that you understand the function, that this is a director. And that's pretty cool. That's that's that's where we're going right here. So I'm going to turn this off right and to get back to where I was, let's see if it's now we're going to and now I have an icon.
So I have this kind of coming up right here. It's nice, pretty star. You can see it's loading from this. You're all right here. That's a get out.
Just you can kind of guess what's going to happen if we turn on first color small. It's going to look great And when we're on a dark text on light background. But if we switch it to dark, it's not going to work properly. So once again, you can see the Skoda.
This is a lot of code. The cool thing about this mask color, this mask, success, property that I'm that I am talking about right here is that it has very similar syntax to background. The background color. I like the background as property. So like where you would say like background image, you can use what mask image When you say background repeat, you can say webcam mask, repeat background image and not to at in background seismographs and webcam massage etc.. So you can kind of see how that works out here.
We have to we have this this the color shining through right here. We're using linked text You can also, of course, type canvas text. And this text and then it'll change the color between the text of the canvas text That's pretty cool.
But once again, the biggest thing is just go ahead and test stuff. You know, test stuff is important So let me get back to my slide show here. Some more information about this.
We have this blog on windows Dotcom that talks about high contrast mode. This is kind of an older blog. And then we have a great post written by the one and only Eric Bailly who is the moderator on this call on special magazine. Just a couple months ago, he talked about a lot of force color stuff that's really informative. So this is really good tools And if you all have any questions, see about twenty or hashtag on Twitter. And you can, or you can ask or you can maybe tweet me later or bother me or however that works.
And that's about it. So thank you Amazing talk. Mike, thank you very much. Thanks. Thanks for, thanks for having me.
And thanks for staying awake at I don't see any specific questions on the Zodiacal salvacion about Alleycat Gerta that say that a pain with Sacramone ambassador as the color schemes which are very common place. So yeah, I think our esteemed technical coordinator Patrick is also pretty chatty on Twitter about running into some very, very, very, very interesting because are some things some talking about the diary of the caller said by the system, I don't know. So I am very happy to that follow your speech, because that is the same topic that we have. For example, when we talk about digital documents like the war PDF that if they use our set, they files the caller for text, the default color for the background, the use of that to use the force. The caller can haply their preferred color inside the the document in this case and in your case, look inside the website But so one question. How many developer did you think use this kind of fixer for? They template they are by the content.
It's a really good question for a long time, it was pretty common advice to use the current color. But it didn't work properly in Chrome. So I see a lot of people doing things like that for first colors. I can tell you personally, I i've been doing front and development for a pretty long time.
And I really didn't even learn about first colors to maybe about three or four years ago. And that's one of the things that when I started learning about this, I'm like, why haven't I learned about this? Evidently, if 4% of people use this this is kind of a big deal that we need to accommodate these people. So you know, that's one of the reasons why I'm here talking about it. More particular if you have something. Yeah, yeah. If you don't mind I was wondering kind of, you know, one thing that I've kind of run into indirectly is like you're adding a bunch more cSFs and like, let me clarify, that is very valuable and necessary.
But kind of I was wondering if you could talk a little bit about your experience introducing this to Drupal and what that was like. Yeah, so mostly So if you do add in there, you know, and access just through the nature of the CNS, it's more for the browser to download which even though it's not a heck of a lot, it can One of those situations where death by a thousand paper cuts, if you're adding a whole bunch of things like that doing doing items like the setting your fill, the current color within your squeegees is a little bit is a little bit less for me. It's not a heck of a lot of extra assets.
Is it. Works pretty well within core. We kind of manage almost like you would expect.
Of course, the server to server side rendered content management system. And we use Post-it to kind of process everything. So we're able to we're able to necessarily decrease under the selectors, which makes things a little bit cleaner. The the most difficult thing I think, for us is just getting proper testing to get anything into account management like this. Needs to go through multiple review cycles. And because a lot of people are not familiar with this they don't know how to test properly.
So as I'm adding the stuff in there, I'm literally having to train to train people up on what this is, how to work out how to use it, how to work it. And then, of course, I'm learning from other people who are more knowledgeable than me to. And I think that was just the biggest challenge Yeah, yeah. That reflects my experiences as well. So at least there's two of us, you know.
Yeah. Yeah. Patrick also chimed in to say that in addition to Dracul kind of taking a really serious look at first class mode, that Bootstrap is as well. He's helping with that.
So i think that's worth noting in that there are major frameworks, both in terms of content management systems and front end layout that are, you know, prioritizing this and allocating resources and time and potentially budget to it. And so I think that's a really cool thing. Yeah, I'm doing some work. I, I I've done a little bit of work on the US Web design system for Horsefeathers. But right now, I'm working on a federal website, so Yeah, it's becoming more popular. Yeah.
I love the US WTS. So that's, that's really cool to hear. One more thing here potentially. I was wondering if you could kind of just go over again, not to put you on the spot, but the id, the current colour as fagbug just kind of to provide a little bit more detail about what exactly the bug was Yeah. Yeah, absolutely.
So this is something that I ran into. And it was kind of a pain in the butt because when I was doing all this work, the bug was not yet fixed. So within even within the Internet Explorer, within Firefox, you can use current color. The current color keyword will change properly within force colors or within this high contrast.
And it just works like you would expect your current color would change to a dark text if your user has a dark text and might text, you know, but that would not happen with chromium And of course, as we all know, chromium, chromium, kind has the majority of the web. So we got around this by using medicore, you know, the first contacted me. And then we would set the field to things like text or canvas text or something like that. That was fixed.
Jeez, I think it was back in June or something like that. And so now we have to go back and we have to wrap ourselves. But since we don't need that anymore. But that's a good ripping out code. It's always fun. So now within Chrome version one or two, it behaves like the other browsers.
And it behaves in an explorer. It's just, in my opinion, the correct behavior. And so i'm super happy that that bug is now fixed. And it's going to solve its people are using this technique because it worked for so long. And so when fixes bugs, they're probably fixing it for many websites across the Web.
Yeah, yeah. Don't break the web for sure. Yeah. That should be a hashtag Cool. Well, yeah, Mike, this was great talk. And, I might be a little biased, but one of my favorite little dusty corners of the Internet.
So thank you for helping to shed light on it. And I really appreciated how thorough you were in covering the topic as well. Yeah. Thanks for your special magazine article.
I encourage everybody to go read a special magazine article. You can see the link at the bottom right there Shucks. Reburying any final thank Yeah. No, no, thank you. It was a very illuminating for me.
So I read i read the day blog post and the article because this is a new a new experience for me, this kind of development. Thank you. Thank you. All right, everyone, if you enjoyed this talk, there's two things that you can do.
There's more than two things. But two things on YouTube that you can do, you can hit that like button to say I enjoyed this content. Thank you for sharing it. And you can also use that subscribe button to get updates for it.
Twenty four when we post new content to our YouTube channel. Also a reminder that inclusive design twenty four is a welcoming community You can find a link to our code of conduct on the footer of every page on our website. Inclusive Design. Twenty four big and inclusive design Twenty four is brought to you by fable and Topia Barrier break TPI UX for the win equal entry info Axia into it The Law Office of Lainey Feingold, Adrian Rossella LLC. And Web Abell. Thanks to our sponsors generosity, we are able to bring this conference to you all for free.
And so again, thank you to them. We really appreciate their generosity and their support. And we'll be back on the top of the hour with our next section And thank you. One more time to Mike and thank you to River four for being a excellent co-host.
Thank you. Thank you, Eric. Thanks, everybody, for watching. Right
2022-09-23 22:10
