 All right, so let's get started. What this talk is about. This is about faster design processes for accessibility. In fact, some of the processes that I use make design go even faster than it did before I got into accessibility, because much of the decision-making gets simplified and pushed forward, saving time and money. Recipe came out of the focused WP Thursday meetup and Andrew Palmer gave me the idea to incorporate my love of baking and my love of accessibility into one talk. So you're gonna see a lot of food, fortunately just eight. So recipes produce consistent results in the kitchen and they can also produce consistent results in our work online, saving us lots of time and money. In fact, I've even done one day builds to produce accessible websites that worked for people who are completely blind. The outline for the talk today, who is affected by poor design choices, some definitions to keep us going throughout the talk, some good ingredients for different skill levels, tools to help us save time, putting it together in an actual process, and a little bit of a wrap up to help you get going with it in your processes. Quickly about me. I got started at about the end of 2019 into accessibility thanks to Amber Hines and her always encouraging and supporting people to get into accessibility and learn more about it. And as I started down the rabbit hole, I just fell in and kept going. So about a year ago, I decided that many of the tools were not actually great for me. In fact, many of the tools were frustrating. So I started building my own because I'm a developer. And when I get bored, I also organize the Baltimore WordPress Meetup and we are online on Zoom, feel free to join us. Slides and links for this presentation are available online. So who is affected by poor design choices? And the answer is people. People are not perfect. I know. That's a shock to me, too. But hundreds and millions of us are running around the world imperfect. So as of 2015, there were about 7.4 billion people in the world. And it's estimated that about 4.2 billion of those people were affected by poor vision. That is a lot of people who can't read your website when they take their glasses off at night. In the US, we have some more specific numbers in 2022, 79% of US adults need vision correction. Those are your customers. Those are your clients. Those are your users. Some more stats. About 20% of people are estimated to have some level of dyslexia. Now, like all things in life, it's a scale. Some people are slightly, some people are severely. And it doesn't affect everyone exactly the same. The graphic up here says what we think dyslexia looks like. And that flips the letters around. But that's not the whole story. It's not just flipping the letters around. It's also people who frequently have Erlen syndrome. And in this case, letters shake and bounce, just like driving down a bumpy dirt road. It can be an extremely unpleasant experience, but good design choices can make it better for them. For example, using a hard black on hard white or 0000 on FFF, that's pretty much the worst for them. Gentle that down, use something like 222 on FFF. It becomes a whole lot more pleasant and a lot of the things stop bouncing. Talking about men, in general, men are significantly more colorblind than women. It affects less than 1% of women. It affects about 8% of total men and closer to 10% of Caucasians. And what happens with colorblindness is basically, they just lose some of the spectrum. So as you can see on this chart, red and green, orange, yellow, green, they look the same. So those people can't differentiate if you just put up a red box and a green box. That doesn't help them. They need icons, they need information. You can still use red and green to help users who do have full color vision. But color alone can't be the only indicator. Synesthesia, most people have never heard of this, but it affects approximately 4% of the population. And for synesthesia, of course, it's a spectrum. What happens is letters and or numbers take on colors. Now imagine trying to do an hour-long math class when the numbers decided to all take on colors. And some people who are affected by synesthesia, numbers even take on tastes. So imagine tasting numbers for an entire hour. And you wonder why some of these people don't perform well in math classes under traditional systems. In addition to people being imperfect, they also live in an imperfect world. How many of us have gone outside with a smartphone? Basically everyone. It's fun, we like to be outside. We like to have our smartphone. But when you're outside on a bright sunny and snowy day, it is nearly impossible to see low contrast text on that phone, regardless of how good your vision is. We also have a habit of using our devices in poor lighting. And again, that can affect our ability to see colors and differentiate objects. We also frequently are in situations where we have help. We have distractions. We have other people we're trying to work with. And if we're trying to teach someone something or show someone something and something is really frustrating, guess what, we're leaving that website. We're going somewhere else. It wasn't a pleasant experience, they're gone. And of course, we get affected by temporary issues. We get headaches. We get the flu. We just have bad days. We're short on time. We're stressed. And if things aren't easy to read, easy to find, I know I have left many a website because the text was just too annoying to read. Yes, that was how I felt, I felt annoyed by the text on the website, so I left. Simple as that. So what we wanna do is consider that the majority of our audience is imperfect. The majority of our audience has difficulties. We are designing for the majority. And the majority needs accessible design. Now a few definitions. The first one is WCAG, WCAG, Web Content Accessibility Guidelines. And they're maintained by W3C or the World Web Consortium. These are the same people who maintain CSS, HTML and other standards. And just like the other standards, these are versioned. 2.0, 2.1, et cetera. Unlike some of the other standards, these have levels. Level A, level AA, level AAA. Level A has the fewest requirements and is the easiest. Level AA is considered the standard and in many lawsuits has been what judges have ordered a website to do for compliance. And level AAA is generally considered above and beyond. There are many criteria in there that are very difficult to meet. Also, the abbreviation ALI, A-1-1-Y. Sometimes called ALI, sometimes called ALI, tomato-tomato, doesn't particularly matter how you pronounce it, but I do prefer the word ALI because it means I can say I'm an accessibility ALI. I am a friend of people who have challenges in their lives because I have challenges in my life. A quickly about legal aspects of accessibility. More and more countries are putting into legislation specific requirements on web accessibility. Some requirements will go into effect in the EU in June of 2025. The US is pushing more and more accessibility requirements through both the federal system as well as individual states. And as we know, people in the US visit websites from other states. It happens. When there have been lawsuits in the US on almost every single circumstance, they have been ordered to meet WCAG 2.1 level AA. Quickly about an overlay widget because I get asked about this a lot when it comes to legal compliance. It is middleware. It sits between your website and your user. And it basically plays a game of monkey in the middle. Sometimes it helps content get along. Sometimes it interrupts and can even break websites. It's an automated script. And like all automated scripts, sometimes things go well, sometimes things go poorly. And just as a general reminder, I am a web developer, not a lawyer. Let's talk about ingredients because recipes always have ingredients. Some ingredients are really easy to use. So for example, a giant chocolate chip, really easy way to incorporate chocolate into your recipe. Just pick it up and pluck. So simple. Other ingredients may look like they aren't that hard to use, but actually are. For example, baker's chocolate. You will see most recipes say, get out your double boiler. And then be very careful about melting your chocolate because if you overdo it, you'll seize the chocolate and ruin the recipe. So it is a deceptive ingredient that can create a lot of challenges for new bakers because they think, oh, that doesn't look too hard. The photo up here is a yule log cake, which is a rather tricky one to make because it is very easy to accidentally crack a cake. And that means that the two pieces just break when you try and roll it up. Let's talk about web design. Colors, colors are ingredients that go into our websites, just like chocolate goes into recipes. Some colors are great. You can see on the far left, we have a nice oatmeal color. It's a nice soft color, lots of things look good with it. It's very easy to read against. This is a great color, very easy to use, very few restrictions on where you can use it. Also in the middle, we have a nice charcoal. It's not all the way to black, so it produces nice contrast with a lot of colors. And then we have neon pink. Neon pink is a very challenging color to work with. People just don't like to read content on neon colors. It's not pleasant. You don't go up to a big sign outside of a bar and stick it in your face. Well, I guess some people do, but most people do not. It's just not pleasant. So how do we take some of these colors that we want to incorporate in and get them to be friendlier, easier to work with, more beginner friendly? One trick is to take colors in the RGB spectrum and switch them to the HSL spectrum. That is hue, saturation, and lightness. If we reduce our saturation to below 50%, and we take our lightness and we either move it lower or higher, keep it out of that middle range, then we get some very lovely shades that work great for people to read against. And here in this example, I dropped my saturation down to about 49%, and I brought my lightness down to about 40%. And now the color is much easier to read against. Fonts, fonts are a great ingredient. They're essential to any website. But if you go to places like Google Fonts, you'll see 1500 plus different fonts available. It's ingredient overwhelm, it's way too much. So what we want to do is we want to give a much shorter, much simpler list of fonts, especially since we like to have clients participate in the process. It's great to have them participate as long as they have a short list and you give them a specific default. You either pick from this list by this date or you will automatically get this as your font. Another trick for the body font on most websites is add just a little bit of letter spacing. Letter spacing moves the letters just hair apart and can make readability significantly easier. Now, since all fonts are different, this does vary a little bit, but I found that .015em works with a lot of fonts. The next thing to do when you're giving someone a font to consider is to give them text that they can read but are unfamiliar with. So I like to use pangrams. These are sentences that have all the letters A to Z, but they are sentences that people are typically very unfamiliar with. People have to think, they have to focus, they have to really read. So this makes them pay far more attention than if they were reading content that they are familiar with and also if they were reading something like L'Orient Ipsum where they don't bother reading it because it doesn't make any sense. It's also important to always look at your numbers and all of your uppercase letters and to check for combinations like I, L, L, I, willing, billing, drilling. These can look very tight in some fonts. I don't like default aerial on these words because they get too smushed together, but if you add a little letter spacing, it becomes a much more pleasant experience. It's also important to check for ambiguous letters. These are things that look like other letters. For example, I, L, and one. These three look very similar to each other, but some fonts allow you easy differentiation. Here I have Verdana up and you can see that the capital I, the lowercase L and the number one are all different. More beginner ingredients for websites. Images, images are a great ingredient. They're just like our giant chocolate chip. We can just plop them down. The only consideration we really need to look at is alt text and alt text is context sensitive. So it's always important to consider the context of the image when writing the alt text. Now it looks a little deceptive, popping over to a carousel of images. This is a very advanced ingredient. This is like our baker's chocolate. It doesn't look that hard. Recipes may make it look kinda easy, but it's actually very difficult to make a carousel accessible. And many, many of the page builders and the plugins that are available for carousels do not have accessible carousels. So a little bit more about ingredients. Good ingredients work for everyone. Using basic fonts. Using improved colors. Using simple images. And by using these elements and making these good choices, we can have our designers build us great designs that work for everyone and our developers can easily implement them for accessibility. Now on to some tools for saving time. Because everyone likes to save a little bit of time. Some tools are very simple. Like we have a whisk and a metal bowl. This is used all the time by chefs all around the world. It is a very basic, very useful, but don't try and make whipped cream this way. Your arm will be very tired. So if you wanna make something more fun, like whipped cream, we'll use a stand mixer. Big, powerful, tell it to go, come back in five minutes and you got whipped cream. Here's an example of a tool that requires a lot of manual work for accessibility. This is a simple contrast checker. It compares A to B. Mixes two ingredients together and gives us an answer. Well, that is good for a quick check. But if I were to do that for all of my ingredients, I'm gonna spend over an hour trying to check all my colors because I'm gonna make a few tweaks as I go. That's gonna be a lot of effort. So what if we could put all the colors in at once? I've built a lot of websites and I typically need two to three background colors on most websites because that's just what design looks good. We also need headings, text, links, hover states, borders. A lot of people forget about borders, but when you have an input box, it's really great if you know where to put your cursor, especially when we're on a smartphone. I've been outside in the backyard with my dog and I'm trying to look at a form and I'm like, where do I click? There's no border. I'm supposed to click somewhere. I don't know where I'm supposed to click. Now, what's the dog doing? Oh, wait, border. It's stressful, it's upsetting. People don't like it. So a good tool for saving time is one that allows you to put all of your inputs in and then get an instant result of everything. And it gives you answers saying that you did okay. This meets all of the criteria or it'll flag if there's an issue. Another tool for saving time is to look at all of your fonts on actual examples. And again, we use those pan grounds because it requires us to try and read the text and put some effort into it because it's so unfamiliar to us. So the purpose here is that good tools save us time. There is absolutely a purpose for quick checkers. I use them regularly, but there's also a purpose for the power tools that give us full comprehensive answers. Now, we have our ingredients and our tools, but we need our procedure for our recipe to put it all together so that we can actually create accessible designs. As a quick reminder, when we work with copywriters and designers or when we're doing the copywriting and designing ourselves, we always have boundaries. We're always told what audience that we're going to write to. We're always told what colors we're allowed to use. What is the brand? Overall, WCAG has 50 criteria for 2.1 level AA. That's a lot of criteria and a very intimidating list. But we can actually handle much of that criteria with processes so we don't have to actively think about it. And the less we have to actively think about it, the more we can focus on our designs. So the first thing I like to do is eliminate criteria. It's my favorite thing to do with them because then I don't have to worry about them. So a number of criteria just don't apply to static mockups when we are building a design. They just aren't relevant. For example, here is an image of a video with a caption on it. Well, when we're creating our static mockups, we're not actually putting the whole video in. We're just putting in a single image so we don't need to worry about captioning. Then a number of criteria we want to just say no to. An example here, we have a moving logo carousel. We don't want to have auto-playing content. It has criteria about it and we can eliminate having to worry about those criteria by just saying no. The next piece of criteria we can eliminate with simple procedures. We just set a rule in our rules and when we follow it, the criteria is automatically met. Yay. So here's an example. One of the WCAG criteria requires that line height be able to be 1.5 times the font size. Well, as you've noticed through most of my presentation, my lines are spaced out at 1.5 times and here you can see a line height of one. It's just not as pleasant to read. So just use 1.5 by default and you're done. Don't do unnecessary work. Quite frankly, most designers have no idea what a focus state is and honestly, they shouldn't be designing for it. Most of the time I use themes that handle my focus states for me so I never even think about them. I never do any work for them because it's already been handled. So don't ask your designers to handle focus states. Don't show them to clients because it just gives clients something random to obsess about and we hide them just like we generally hide the washing of dishes from the main people. Some more criteria to solve in advance. Try to help designers to avoid making unintentionally poor choices. Here we have a dark red background with neon green text and as we already covered, neon colors are not good for primary text or backgrounds. They can be really fun to throw in as accents but people don't enjoy reading neon text and people don't enjoy neon backgrounds. Another criteria that I like to handle with specific to-dos is I tell my designers to account for roughly double the amount of text that is in a box. So here we have a section of text. We have these resized up to 200% and you can see that they are roughly similar. It's gonna vary based on the exact text you have an exact with but if your designer accounts for roughly double the content in their designs then it should work pretty well when you go to test for things like enlarging your text to 200% and it also helps to account for the inevitable content changes down the road. So let's combine it all together. What we want to do is understand that people have different skills and we need to help them by making choices to work with their skill levels. I regularly use a design service to do my designs for me because it's just not my favorite thing to do. Also I frequently get into the weeds on the code and I just can't always think of new designs. So what I do to prepare for my design service to do their work is I select the colors in advance. I use my fancy tools, I get my whole color palette built, I get it all checked and I tell them these are the colors you're gonna use. I pick out my fonts in advance and I let them know what those are. I give them the specific list of what they're gonna do such as setting their line height to 1.5 or what they're going to avoid like not putting any carousels in. The next thing I do is I provide text content in photos because designers are just not great at designing in a vacuum with no content. And I give them a basic wireframe. Now frequently I even do this by just recording a simple screen video saying, oh, here's an example site. It has kind of the overall wireframe that I want and I walk them through the wireframe and how I want that applied to what they're going to build. A last set of instructions I did for an e-commerce homepage and it took me about 30 minutes to get my colors, my fonts. I grabbed my existing to do and to avoid list and gave them the short screen video. The 90% done rule. The reality is something will change down the line. Even if miraculously it doesn't change between design and when you go live, the reality is content will change down the road. So you don't want to focus on getting it 100% correct. 100% done. Because it's never going to be done. It's a website, it changes. So make it clear to everyone involved, designers, developers, clients, that our goal in design phase is to hit 90%. This also helps a lot of people to not obsess over the little details. Font selection. What we need to actually tell our designers when we give them the fonts. We need to tell them a whole lot more than just use Helvetica typeface. We need to tell them which font to use, which one to use for our heading in our body. As in many designs we like to mix up two different fonts for those. Occasionally even add in an accent font or use our heading font as an accent. I normally give them headings one through four. I almost never give them any instructions on heading six or heading five. And the reason is if you look at content and you actually make a table of contents of your content, you are almost never going to be dealing with H5 and H6. So I normally just set them in development exactly the same as H4. Because I've had 2,000 page websites and we never used an H5. Be sure to give them the font size and specific font weights. Make sure to include line height and paragraph spacing. Paragraph spacing is that little bit of extra space that comes after the paragraph. It makes things easier to read because they're more broken out. And always check your letter spacing. I almost always include it on body text and occasionally include it on headings. Depends on the font. Colors. As we showed before, we need a whole lot more than just five colors in our websites. So I encourage everyone to get a lot more colors. I've got an example list of CSS variables. And this is actually how I hand things to the designer. The tool I use gives me this entire list of CSS. While most designers have never written CSS, they can read that just fine. It says background color one and it gives you the specific color. And then developers love it because it's just copy and paste. So I make sure to give them the backgrounds, headings, bodies, links, hover states, borders, and accents. And if I have dark backgrounds as well as light backgrounds, I will have to give them a whole list for that as well. It's important to be very clear and specific. I have a reusable set of instructions that I hand out with all my designs that tells them exactly what to do and what not to do. Examples like don't put text on top of an image. This isn't great for readability, especially when the image and the text both change out later. And then it's always important to have checklists. Checklists help keep everyone remembering as many things as possible. Were the correct fonts used? Did they make sure to use line and letter spacing? Did they use allowed elements? Did they use any of the avoid elements? And just go through those checklists after. It makes it a lot less mentally intensive to review work. So to kind of summarize what we've done, the earlier in your design processes that you are able to solve for accessibility, the less expensive the whole process is. Just like most things. If you find a bug early, it's really easy to fix. If you don't find the bug to the end, it can be hours upon hours to get that fixed. Recipes are to produce consistent results. The more procedures and formulas we have to make it consistent, the better our output at the end. People are not perfect. Our customers, our clients, they are not perfect. We have lots and lots of people with different abilities in this world, in this room. I see a whole bunch of people wearing eyeglasses. It's because people need different types of assistance at different times in their lives and we want to meet them where they are at. WCAG, this is where we go for our criteria. This is where we go for what we want to meet. It's important to remember that different types of ingredients require different skill levels. Just put in a few images, almost anyone can get that coded up. But if you try to put in a carousel, that's very difficult to get coded up properly for accessibility. So in general, I avoid it. Tools for saving time. Some tools are great for a quick check. Some tools are great for a comprehensive build. Using the appropriate tools at the appropriate times is very helpful. And of course, process, process, process. When we build out good processes, when we build out good to-do lists, we save ourselves a lot of time and money. So that they can flip the room around, I planned to take questions out in the gazebo right outside this room. So if you want to meet me out there, then I am happy to answer questions for as long as you want to ask them. I got plenty of water.