This episode is a recording of a October 2023 WordPress Accessibility Meetup where Gen Herres demonstrates how to work with designers who have no accessibility background, to get designs created that meet WCAG criteria. If you want to watch a video recording from the meetup, you may do so on the Equalize Digital website: Recipe for Accessibility: Limiting Ingredients for Faster Design: Gen Herres.
WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. Learn more about WordPress Accessibility Meetup and see upcoming events.
Listen
Mentioned in This Episode
Transcript
>> CHRIS HINDS: Welcome to episode 041 of the Accessibility Craft Podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin.
This episode is a recording of a October 2023 WordPress Accessibility Meetup where Gen Herres demonstrates how to work with designers who have no accessibility background, to get designs created that meet WCAG criteria. WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. For show notes, a full transcript, and additional information about meetups, go to AccessibilityCraft.com/041
And now, on to the show.
>> PAOLA GONZALEZ: I want to introduce today’s speaker, Gen Herres. Gen Herres is the owner of Anphira, and organizes the Baltimore WordPress Meetup Group. Gen has been featured in podcasts, and won the 2022 Member of the Year Award, and number one WordPress community. She’s very active in WordPress groups, encouraging other developers and designers. She has been incorporating accessibility into websites for a couple of years now, and is a strong advocate of processes that move accessibility to earlier points in a project and make accessibility easier to understand for novices.
So without further ado, Gen Herres, I’m going to leave the floor open to you and you can get started with your talk.
>> GEN: Yes, so just because I ended up naming this the exact same thing as what I did at WordCamp US, and this is not the exact same presentation, although there are some similarities, I did change the name for my slides just so that you’ll be able to find them on my website, and they won’t be exactly the same.
This presentation is all about how to make accessibility faster. We all know that accessibility can have a huge amount of learning time. Just this big amount of startup before you can really get running with your accessibility, so how do we try and reduce that startup as much as we can? The answer is tools and procedures. This is what pretty much all organizations use to speed things up and make them more reliable.
Then we’re going to talk about dealing with designers who don’t have an accessibility background, and the reality is almost no designers do. Most designers have absolutely no accessibility background. Most of them have never even heard of it. I have only even met, through online, a couple of designers who actually do have an accessibility background, so most of the time when I work with them, they have no idea what’s going on. I have to give them a setup so that they can get things right.
So first we’re going to talk a little bit about talking to clients, because sometimes we have to kind of get clients on board. Then we’re going to get into tools and procedures, and put it together.
So just briefly about me. I started doing accessibility work in about 2019, and I got introduced through Amber as well as Colleen. Then I got started on this whole project to make accessibility easier for people to get started, because I found that the biggest challenge was that people were asking about accessibility, and the answer was, “Well, do several courses and then a bunch of actual practical implementation, and a hundred hours later, you can get started with actually doing it.” And that was terrifying for most people.
So I have been working to try and make it easier to get going, and I also organized the Baltimore Meetup, which is on Zoom, online, and we do have “Ask Me Anything,” which is basically an open forum for WordPress questions. Slides and links are available, and this URL will be repeated throughout the presentation.
Couple quick definitions. I understand that most of this group does have some accessibility background, but just in case. WCAG are the Web Content Accessibility Guidelines, and they’re maintained by W3C, or the World Wide Web Consortium. Currently, WCAG 2.1 AA is what most websites are aiming for, although WCAG 2.2 is about to be released. The good news is it’s only adding a couple of criteria.
A11Y, this is the abbreviation for accessibility. I believe it came out of Twitter, where they were trying to make everything fit into 150 characters.
Next, HEX, RGB, and HSO. These are ways to represent colors on the internet. HEX and RGB are basically the same thing. They’re just a different representation. RGB uses base 10, HEX uses hexadecimal or base 16.
HSL is a different way to represent color, and this can be really, really useful when you’re trying to take an existing color and make it into an accessible variant of that color, and I love talking about color, [chuckles] and I’m going to try to restrain myself so.
So the first thing I want to talk about whenever we’re doing accessible design is getting the clients on board, and where I like to start is, people aren’t perfect. They’re just not, and one of the big pushbacks that I get from clients is that they say, “It’s not my users.” Well, it really is your users, because people aren’t perfect. Just about everyone encounters a situational, temporary, or permanent disability on a near daily basis.
Here’s an example from the real world. The world also is not perfect. Just like we aren’t perfect, the world isn’t perfect, so I like to listen to music while I walk my dog. I’m sure I’m not alone in this. I use the Pandora mobile app, but one of the big issues I have with this app is the progress bar. It is only one-pixel tall, so what starts out as a kind of OK contrast? I’ve got an image of a kind of darker magenta background with a white progress bar, and honestly, it’s difficult to read, to start with, but now we’re going to go take that phone outside to walk my dog. Well, now the whole screen is just washed out. It becomes super bright. It’s just all the color gets washed up, so now I’m dealing with this against a light pink background, so we now have white on light pink. It’s definitely not meeting contrast.
Then because it’s bright and sunny out, I put on my sunglasses, which are tinted to help improve contrast so I can see things better outside, especially deer because my dog gets very excited about the deer, and they’re of course darkened and polarized, so what I get is a washed-out color, and then it gets all super dark, and the result is I cannot see the progress bar at all, even with perfect vision. What’s happening is, the world and the world that I’m interacting with makes this a very, very imperfect situation, and, of course, people in general, lots of people aren’t perfect.
As an example, about 79% of the US adult population needs vision correction, and these people, they take off their glasses at night. They no longer have their corrected, improved vision, some people, even with vision correction, don’t have perfect vision. There are many people out there living their lives;, police officers, firefighters, delivery people who are all walking around with even their corrected vision being imperfect. That’s just a fact of life, and then when they get home at night and they’re tired, they take off their correction, so now it’s really imperfect.
I have a friend who is legally blind without vision correction. With correction, he can get to about 20, 60. He could only even hold a driver’s license in a couple of states because he can only pass the vision test in those states, and when he takes off his contacts at night, pretty much the only thing he can do is listen to podcasts, because everything else is a blurry mess.
Lots of people have some level of dyslexia and/or irlen syndrome. Most people don’t have the severe version. Most people have a mild version who have dyslexia. It’s pretty mild. It’s pretty manageable. It can work out. They can get through life. They, especially if they get early intervention, they can learn coping mechanisms. They can learn techniques. They can get assistance from various devices. Our smartphones can now actually help them with using optical character recognition and actually reading things for them. Many websites, we can just right-click and have it read out big paragraphs of text to us.
So there’s a lot of things that they can have and still have some mild dyslexia. There are police officers, there are firefighters running around right now with mild dyslexia. These people are out there. They’re not going to talk about it. They’ve developed the techniques, they’ve worked through it, they have gotten to the point that they can function just fine in everyday life, so we don’t know that they have problems.
Men are particularly prone to color deficiency. About 8% of men in total have color deficiency, and it is higher in Caucasians. If you’ve ever put on a pair of those orange or amber glasses that a lot of outdoor enthusiasts wear when they’re dealing with lower-light conditions like dawn and dusk, you’ll find that it washes out a lot of the color spectrum. You just can’t see things vividly. If you look at a beautiful image or fall scenery, it’s kind of dull, but it’s actually excellent for seeing wildlife. Seeing the difference between a deer and the tree behind it. That shift in the colors actually makes it easier to see, so it’s not always a bad thing for surviving in the wild.
Synesthesia. This is one I have found most people have never heard of, and it only affects a small portion of the population, and again, people who are affected by this don’t tend to talk about it. They don’t want to be ridiculed. They don’t want to have people telling them that there’s an issue. They don’t want to deal with any stigmas, so they don’t talk about it, but I have talked with people who do have synesthesia, some people, it only happens with words, some people, it only happens with numbers.
I have a friend who the reason she can’t do math is because it makes her physically nauseous to try and deal with these numbers taking on characteristics. For her, they take on both colors and taste, so she actually tastes numbers, and even in different contexts, they sometimes taste different, so that can be really, really nauseating for her to try and do much math.
Obviously, if she’s just looking at a speed-limit sign that says 35, she’s dealing with it for a very, very short amount of time and then she glances away, and that doesn’t set her off. It’s when she has to do it for five minutes, 10 minutes, 30 minutes, that’s when it really starts to bother her.
So basically, when I talk with clients, I emphasize that people aren’t perfect, and their situations aren’t perfect. Lots of us are using our smartphones outside. We are looking things up. We are having an in-the-moment question. We are having a moment of, “Oh, I totally forgot to do that. I’m just going to quick grab my phone and order it.” Well, you quick grabbed your phone and your lighting situation is terrible. Well, that’s real life. Your lighting situation can also be really, really dark and you’re trying to stare at a bright screen.
Of course, in the real world, we all have help from our environment, other people in our environment, sometimes they’re physically interacting with us, like when we’re trying to watch some content with our kids. They could be screaming, yelling in the background, like if we’re trying to order pizza while watching the game with someone. There’s all sorts of things that can be happening in our environment that are affecting how well we can concentrate and how well we can use something.
If you’ve ever talked to a mom who is trying to hold a baby and do work on a computer, because if they move that baby out of their arms, it’s going to wake up and start crying, so they just have to grab their arms and do what they can.
Of course, we sometimes don’t feel well. We get the cold, we get a flu, we just get a headache. It’s fall and allergies are picking up, and I get some sinus headaches here and there. Life just happens, and people don’t live in a perfect world, and they are perfect, so we want to design for all of these imperfect people in their imperfect world, because as I always tell clients, this is the majority of your users. These are your people. They are not perfect, and we need to design for the real world, not the ideal world.
>> STEVE JONES: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish.
A WordPress native tool, Accessibility Checker provides reports directly on the post edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand.
Accessibility Checker is an ideal tool to audit existing WordPress websites find, accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. Scans run on your server, so there are no per page fees or external API connections. GDPR and privacy compliant, real time accessibility scanning.
Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password protected sites, view site wide open issue reports and more.
Download Accessibility Checker free today at equalizedigital.com/accessibility-checker. Use coupon code accessibilitycraft to save 10% on any paid plan.
>> GEN: Now we’re going to talk about tools. There’s a couple different types of tools out there. There are manual tools and then there are power tools, so some of these manual tools are super, super versatile. You can use them in all sorts of different situations for all sorts of different purposes. You can use them any way you need, but they’re manual. They require a lot of work. I’ve got an image here of a person whisking some stuff by hand, and if you’ve ever whisked by hand and tried to make, like, a chocolate whipped cream, it’s a lot of whisking.
So then we have these more powerful tools that are more specific in their purpose. This KitchenAid mixer in this image is not for everything. It’s not the tool that you would use for absolutely every situation, sometimes it’s absolutely overkill. If I just need to whisk a couple of dry ingredients together and then move on, the mixer would not be a good option, but when I want to make a whipped cream? Oh, yes. I just pop the cream in, set the mixer to 10, wait about one to two minutes and it’s done. It did all the work for me. It’s great, so it’s about choosing the right tool for the right situation.
Here I have an example of a tool that I have used many, many times. It’s called Contrast Ratio, and as you would expect, it computes the contrast ratio between one color and another. It does a great job, but unfortunately, when I need to build out an entire color palette for a website, it’s not so great. It requires a ton of manual work, and can take plenty of people hours to build out the whole palette. That’s just not great, so instead, we have a tool which gives us some simple inputs and then does the work for us. Just like when I put the contents into the mixer and set it on speed 10 and just wait a moment and it does the work for me.
Here’s an example of the tool not only doing the work for you, but also giving me answers in a way that I can understand. I have a table here, and in the left column, I have a whole series of the letters “OK,” and that tells me that it came out OK, so I can easily scan through that list. Or if I was using a screen reader, I could easily go through that list, and I would hear either the words “OK” or “issue,” and then it would tell me what the item was, so now I can quickly scan through and see whether I have something I need to fix, or if I’m good to go.
Then, of course, it’s always great to have something that I can show to a client, and something I can show to my designer as an example.
Designers are frequently very, very visual people. They do fantastic when you give them an example. They don’t do so great when you write out a long description. I’ve tried both ways. It works far, far better when I give them an actual example: “Here’s what I want it to kind of look like.” “Here’s a guide.”
So now we are going to go ahead and take a quick look at a fun tool, so if you listen and pay attention…
>> PAOLA: I’m sorry to interrupt you. We had a question coming from Alice: “What is the name of the tool being shown?” It was right before the pricing table that you showed.
>> GEN: I am going to show it in just a minute.
>> PAOLA: There we go. Thanks.
>> GEN: And it is also available on the slides and links.
So here is a WP Builds. It is a podcast. It’s been running for quite a while in the WordPress space. They’ve got a lot of good content, but if you look at their website, it’s pretty painful on the eyes. We have a whole lot of things that don’t pass contrast. I can hold down. I’m using the Brave browser. This is a version of Chromium, the same thing that Chrome is built on. Command, shift, C. This brings up an inspector that allows me to take a look really quickly at contrast.
So here I can see that their light blue with their white text has a contrast of 2.04, and as we know, that does not pass. We can see here that their yellow background has some dark-gray text, and that has a contrast of 11. That passes, but this yellow is really, really bright. It is a fluorescent yellow and it’s not pleasant to read against. People really don’t like reading against fluorescent colors.
So we are going to do a sample fix. This is the tool. It’s called the Full color and font builder, and it starts with the simplified inputs. Here we have some simple inputs, and we will later get to a full exhaustive list of inputs, and it asks us to just answer some basic questions.
What font do we want? Well, I just looked at the website and checked the inspector quickly, and it told me that the font was Montserrat. That’s great. Put that in. Font sizing, it’s standard. Standard’s a default. Large is great if you have a low-vision audience, and then we take a look at the corner styles that they use on the site. Well, it squares. That works.
Next, we put in a light text color. It should be close to white, and a dark text color should be close to black, so I just grab the actual colors off of their site. Then they have two brand colors, so I selected two as the number of brand colors and I put in those two brand colors. Now I click the button. Now that the button has been clicked, the sample has been built, so now I can come down to the sample section.
In this sample, I have it bolded. Text is styled as a link without being a link, and buttons are styled without functionality. That’s because this is for display, so here we can see in this sample that the yellow has been toned down a lot. It’s still a yellow, but it’s now a soft yellow, which is much easier to read against. The bright blue, which they had as the background in their footer, which was particularly neon and hard to read, is now a soft light blue. Easy to read against. We’ve kept their primary color for the buttons, and instead of using white, we used the dark gray, so now we meet contrast.
Since they only had two colors, we also grabbed a third accent color to kind of go with their color scheme, and now we’re showing all of this in context. We have the headings. We have the content. I’ve put in here a bunch of text which is actually readable, but is not text that you are used to reading, so here we have, “Jinxed wizards pluck ivy from the big quilt.” OK? That’s not text that I’m familiar with reading, so it’s going to make me work a little bit harder to read it and to understand it.
This is particularly good for clients, because if they’ve given you the content, they know their own content, so they’re no longer even attempting to read the content because they know it. They know it so well, they don’t read it anymore. They’re only looking at the physical appearance of it. They’re no longer looking at, “Can I actually read it?” So giving them this content that they are completely unfamiliar with and asking, “Can you read it?” Is a much better test of if it works or not.
Then I’ve got some commonly-confused letters and numbers. and one of the most challenging spacing situations, the ILLI, such as willing, billing and drilling, and I also incorporate a couple other options. I’ve added some stylization for links so that you can see how those look in context. I’ve added the dark background based on their colors, with their button based on their colors. It’s always fun to show kind of a data table. Lots of websites include some form of a data table.
Pricing areas are really, really common request, sometimes they’re a feature area, but regardless, we get a lot of requests to have areas like this.
So we show this out. I particularly like showing pricing areas using divs rather than attempting to actually make it a table, mostly because this allows you to specifically say, “Here’s this option. Here’s exactly what it includes.” And then you move on to the next option, and then this stacks wonderfully on mobile, and if you’re trying to do a compare or contrast, you can say, “This level includes A, B, and C, but it does not include D, E, and F.” And then you can show the next level as including maybe D, E, and F.
So it’s really clear, especially with a screen reader, to say what’s included, and specifically say what’s not included. That makes it really easy for people to understand, especially when they’re only catching a small glimpse of something, like when they’re on mobile.
I have a simple form here to show people what a form would look like styled in this new color palette. This is also great to give to our designer. “Here’s exactly how you should style form fields.” “Here’s an example.”
I have a couple stylizations for testimonials. I’m always being asked by clients to show testimonials or quotes about things, so here’s some styling with that, and of course we have a footer, and footers always include links. Generally, lots of links are in the footer. Here’s a common approach to a footer.
Then we move on to the next step, so we’ve now put in our inputs and we viewed our sample. Now we’re going to check to make sure that everything worked out fine. Here we have two grids. We have a grid with light backgrounds and dark text, and we have a grid with dark backgrounds and light text. Again, what we’re looking for is the value “OK.” Here we can see in the left column under color name for both of these tables that we got the OKs. If we see the word “issue,” we know we have something to fix, and this is specifically targeted based on the use, so an accent color is used for something like an icon. It has a different contrast ruling than your text and link colors do.
Below these, we have what all of that information actually means, and I’ve written out what they are, so instead of just saying 18 point, which most web developers have no idea what 18 point is, I’ve written it out in actual pixels so that web developers can understand what it is in actual pixels.
Now we have the full settings input, so this section has been built when we did the simplified inputs we told it to build. This whole section has been built out and populated for us, but here is the opportunity where we can tweak and adjust something. Maybe it came out OK, but we didn’t quite like what we got, so we can make changes here on the grid, and then once we’ve made the change, we can just click on the “Update the sample” in CSS variables.” And then we can check our contrast grid to see if the update, if we still pass, and then we can check our sample to see how it actually looks in context.
Finally, when we’re all done, we get to come to the CSS variables, because this is what your designer and developer want. They want to get a complete list of what they should be using.
For fonts, we do prefer using REMS, because that way, we size according to the user’s preferences. If the user has said they like large text in their browser, if we use REMS, that will work with the user. It will say, “OK, you like large text. Your text is now larger.” Yay. They may prefer small text because that may be how their vision works, and for them, it may be easier to see it on small text. It does happen for some people, so they may say small text. This way, it allows the user to pick what they want and how they want their experience to be, and so we enumerate it out. The pixels are generally much easier for graphic designers to use. They tend to work in pixels, they tend to think in pixels, they tend to build in applications like Photoshop and Figma, where most things are sized in pixels.
>> PAOLA: Gen, we have a question coming in.
>> GEN: Yes.
>> PAOLA: Eman [phonetic] asked: “Do you use REMS across the board in font size, leading, kerning?
>> GEN: I use REMS for font size. I use EMs for font spacing, and I generally use EMs for font height or line height, and then I will typically use pixels for paddings and margins.
>> PAOLA: Oh, OK. Yes, that answers the question. Thanks.
>> GEN: Then we get all of our colors, and we’ve got those with the light background and those with the dark background, and while these are written out as CSS variables that a developer can just grab and use, they’re also written out in a way that a graphic designer doesn’t have to know CSS. These are still readable.
Here, when we say, “Button text color,” OK? When we’re talking about buttons, that’s the text color, so it’s pretty easy for a designer to understand.
I’ve worked with a number of different designers and they haven’t had any difficulty reading what these things are.
So I just grab the whole thing and I copy and I paste it, and I include it in my instructions to my designer.
>> PAOLA: Can you answer more questions coming in?
>> GEN: Yes.
>> PAOLA: DK [phonetic] asks: “Why pixels for padding and margin?”
>> GEN: Because most of the time, I do not want elements to get spaced more just because someone picked a larger text size. That can sometimes result in literally an entire page of blank white space.
>> PAOLA: Got it. OK.
>> GEN: Anything else? Good to go?
>> PAOLA: Yes. Good to go.
>> GEN: All right, so now we are on to procedures. The whole purpose of procedures is to save time and money, and to make a repeatable process that people who don’t have as many skills or as much experience can implement.
Most people that I’ve work with, especially designers, they are really, really used to having things like brand guidelines. All of the time, if they work with a printing company, they’re told exactly how much bleed they have to have, how many colors they’re allowed to use. They’re used to a ton of specifications from these companies on exactly how they have to produce the work so that it can be printed and done up properly, so telling them these brand guidelines, telling them the numbers to use, they generally welcome it because they don’t have to think. They don’t have to make decisions. They can save their thinking and decision power for more of the creative aspect of the designing.
I tend to use a design service that doesn’t have any designers with WCAG experience, but many of them have a lot of brand design experience. They have built, they’ve designed lots and lots of web pages. They understand hex codes, they understand pixels, they understand all of that, and they really like that I just tell them, “This is what you’re going to use.”
Here’s some more content, so when I hand out the instructions to them, I choose the fonts and colors for them so that they don’t have to try and understand WCAG, because the reality is they’re not going to, and then I give them specific checklists to talk about how you should and should not do things.
In this slide, I have an example from a website that I recently visited, which I had a lot of difficulty using because of how it was styled by the designer. This is not how the form plugin-by-default works. They did a ton of intentional styling to make it this challenging to use.
So in this image, we have two rows. On both rows, it says “your name” in one field, “email address” in the second field. In the top row, there is a background color. “Your name” is big and bold, and it has a underline for the whole field. This looks like an input field. I have seen this styling on many, many input fields on the internet.
In the second row, again, it says “your name.” It has a very washed-out look. It’s a light-gray text. It’s a very light-gray border. It looks like an inactive field, so, of course, what I did was I tried to click on the top field, because that is bold. It’s eye catching. It looks exactly like an input field, but that was actually the label. That was the label for the field. The thing below it was the actual input field. This is not a good user experience when your user is repeatedly clicking on something that looks like an input field, but it’s not.
So how can this kind of design be avoided? Well, it can be avoided with instructions. We tell the designers that all input fields need clear labels. Well, it was a clear label. “Place any instructions before the form field.” There weren’t any specific instructions. That’s just putting in your name. We don’t need a whole ream of information about this.
“For any required field, make sure that ‘required’ is in the label.” OK. It was a star, and that was added with a CSS property that was not going to be very easy to determine that it was required. “And then put a border color on all of our form fields, and use the assigned border color.”
Now, of course, if I’m giving out an assignment, I used my handy tool and I got border colors that meet the WCAG guidelines, and then I tell them exactly what to avoid, so this is the thing that we want to check to make sure they didn’t do.
So the first thing is we made sure there’s no placeholder text. Well, the previous form had placeholder text, so I got to remove that. “You’re not allowed to put borders or decorative styling on labels.” Well, there were a lot of borders and decorative styling on labels, so all of that has to get removed, and of course, the “submit” button should clearly say what it should do.
Also, since I’m handing out the work, I also include the example. Here’s an example of what it looks like, so here we have a clear label. We clearly state the required field. We have a nice, clear border around the input element, and the “submit” button tells me what it’s supposed to do.
Then we have this same set of inputs, but we removed all of the styling. We added the word “required” where it was necessary. We removed all the placeholder elements, and now we have what people expect from a standard form. They see a clear label, they see a very clear and obvious input box, and now people can actually get through that and understand the form and complete the form.
So combining things together. It’s important to understand what people are skilled at and what people are not skilled at.
I work with a design service on a regular basis. They do not have accessible designers. They don’t have people who’ve gone through 100-plus hours of accessibility training and practice and learned everything. Those aren’t available, so I need to provide the colors and the fonts to them. I need to provide the specific list of what they are to do and what they are to avoid, and I need to provide text content for them and images or specific instructions on what text to use.
Like if I need three paragraphs of Lorem Ipsum here. OK, fine. That’s the text for them to use. They’ll use it. If they need to go source a photo, I give them, “OK, I want a dog playing with a kid.” So they’ll source an appropriate photo.
Of course, most graphic designers are not UI/UX designers, so they do need to have a wireframe. One of the ways that I frequently provide them with a wireframe is, I will record a video walking through some example websites, so there I say, “All right, I like this top section.” “Here in the header, make sure to include our logo over here.” And I highlight exactly what parts I want them to copy and what parts I want them not to copy.
The last time I was delegating out an E-commerce homepage, I got back very close on the first to go, and that’s because I delegated all of these with instructions. I got my fonts and my colors built in just a couple of minutes, and then I walked them through the example of what I wanted and what content to put in there. It took me about 30 minutes total. This saved me a ton of time and effort, and the designer also enjoyed it because they knew exactly what was expected.
The next thing is when presenting designs to clients, because we have clients. Or if we don’t have clients, we have stakeholders, we have managers. We have someone we have to show this to at some point, so here, what we want to do is make it clear that the purpose of the design phase is to hit 90% done. The reality is, when we take our design and we implement it, we’re going to need to do a little tweaking, a little adjusting. The content is always going to change. Trust me, they will always change the content or the images, something will change, so we don’t need to get to completely done. We don’t need to get to perfect. We just need to get most of the way there, and then get going on the process.
When we’re sending out the information to our designers, they need a whole lot more information than just, “Use a particular font.” Like, I’m not just going to tell them to use the Montserrat font. I’m going to break it down. I’m going to tell them what the heading font is, if the body and the heading are the same, whether or not I’ve got an accent font. I’m going to give them the specific sizes and font weights for headings one through four.
The reality is, even on really, really big websites, I don’t use h5 or h6 for basically anything. When you actually look at the way a website should be laid out, it should be laid out like a table of contents, and the heading should make sense like a table of contents. We don’t go from h1 to h6. There’s a whole lot of settings in the middle, and when you actually break down the website like this, most of the time, you never actually use h5 or h6, and I haven’t used an h5 or an h6 in probably two years, a legitimate use of it. I’ve seen plenty of themes try and use them for other things, but in actual use where it should be applied, it’s not there.
Make sure they know their font sizes, their font weights, line heights, paragraph spacing, and letter spacing. Most of the time, I only add letter spacing to the body font, but occasionally, with certain heading fonts, especially if they are narrow fonts, I will add a little bit of font spacing to the headings. I’ve found that just a little bit of spacing can make a huge difference in readability.
Colors. I have seen so many people come to me with a palette of two colors, maybe five colors, and they’re, like, “Here’s the color palette for the whole thing.” And I look at it and go, “We’re going to need a few more colors.” [chuckles]
Most websites use multiple background colors. They will frequently have a heading font color, and this may or may not be the same as their body font color. They basically always want their links and their link hover to have colors. We need to have border colors, and usually, there’s icons and other accents to be incorporated into the site, and those have a number of colors, and of course buttons and button hover states.
So if we have both dark and light backgrounds, which, as you can see from the example site, we have lots of different background colors being used at different points. We got dark backgrounds, light backgrounds, bright backgrounds, a couple different colors of light backgrounds. We got a lot of different colors. You need all of the information for both the light backgrounds and the dark backgrounds, so it’s important to be very specific when you’re giving out all of these instructions.
Again, we give them the rules for their work, and this helps to remove the ambiguity and the decision making.
Decision fatigue is absolutely a real thing. People become fatigued when they have to make too many decisions. When they’re just following a checklist, it reduces their fatigue and it saves that decision making for things that they are much better suited for.
Some examples of things that I do in the instructions are, “No text over an image, no carousels or sliders.” “All the buttons will have this background, this border, and this text color.” “You will put exactly one h1 on each page.” “You’ll set your line spacing for your body text to 1.5.” The reason for 1.5 as one of the WCAG criteria is, your website must be able to be adjusted to have line spacing of 1.5. Well, honestly, 1.5 line spacing is quite easy to read, so why don’t we just do it that way to start, and then we have it taken care of?
People aren’t perfect. Our designers aren’t perfect. We aren’t perfect. No one’s perfect, so it’s important to use those same checklists to review your design when you’re done. Did they use the correct fonts? Was the correct line and letter spacing used? It was all in the instructions, and I have usually assigned my VA, or virtual assistant, to go through and do these checks for me before I look at the design, and then did they use any items on the not-allowed list? Again, it’s a specific list of things they’re told to avoid, so my virtual assistant can just check through and see if there’s something from there.
So to kind of sum up before we get to the questions, tools and procedures are really, really important to speed up the design process and produce accessible designs. The better and more robust the tool, the faster our process can get.
Even many designers without an accessibility background can produce good work. I have delegated it out. I have seen it happen. They can do a good job even without having the background by following the instructions, and we showed some examples of these tools, and some examples of procedures.
All right, so do we have any questions from the question area?
>> PAOLA: Yes, we do.
>> GEN: OK.
>> PAOLA: I’ll put myself back in, so Dee [phonetic] asks: “I’m getting a lot of client pushback when I suggest not to use sliders. What can I offer as an acceptable alternative?”
>> GEN: Generally speaking, the alternative to a slider is a static image, and there’s actually some research by the Norman Nielsen [phonetic] group, if I remember right, which actually shows that sliders have a much lower interaction rate than a static hero section. People honestly just don’t interact with sliders.
I remember seeing one article. The website had a giant slider, 100-pixel font, advertising their sale, but because it was a moving slider, the person who was asked to review the site literally couldn’t see it. They didn’t happen to glance at the slider at the right moment, so their determination after reviewing the page of the website was that there was no sale.
The question that was asked to them was, “Is there a sale? If so, what is the sale?” And their response was, “There’s no sale.” They couldn’t find it.
People are also used to these sliding images being advertisements. They’re really often used for advertisements, and when something looks like an ad, people just stop looking at it.
>> PAOLA: Yes. Sliders just get very confusing. I’m the kind of person that every time I see a slider, I’m just like, “Do I click on it?” “Do I look for an arrow?” “Do I look for the dots at the bottom?” I just move on. I can’t deal with them. [laughs]
We do have another question: “Do the top-paid search companies that sell the plugins for making your websites accessible, like Handicap Guy Icon [phonetic], are they real? Do they help? And do the checkers on their sites that run a check on URL real or just something they do to convince you that your site is not compatible?
>> GEN: OK, so basically you’re asking about automated testing and automated remediation? That’s basically the question?
>> PAOLA: That’s what I think.
>> GEN: OK, so the answer is, automated testing can test for approximately 30% of the WCAG criteria. That means that automated testing cannot test for 70%. They can’t tell you if you passed, failed, or if it went totally screwy. They have no idea what’s going on with the other 70%.
Additionally, they can’t fix the other 70%, or know if they screwed it up, so when you can only tell whether 30% passed or failed, then when you go and you try and fix things, you only know whether you worked on that 30%. You have no idea if your fix may have totally screwed up the other 70%.
I have seen quite a few situations where those automated tools totally screwed things up. They turned a menu that worked into a completely unusable menu for keyboard users. They can cause a lot of problems to that 70% that they can’t even test for, so they have no idea if they’re screwing that up completely.
>> PAOLA: Yes. Melanie posted a comment about that, says: “No plugin is going to fix code, color contrast, or other issues.” 100% agree with that.
Erica [phonetic] asks: “Are videos bad too?” Like, copy stays with a video in the background?
>> GEN: Having copy on top of a video background is so incredibly difficult to read. Additionally, videos that go on for more than five seconds are required to have a “stop” button, and trying to actually implement a “stop” button on a background is really difficult.
So the general answer is, if you have text, don’t put it on top of a video. The only text that should be on top of a video is something like captions. Captions belong on top of a video, but otherwise, if you have actual content you want people to read, giving them a moving background is basically telling them, “Don’t read this content.”
>> PAOLA: Yes. We do have another question from Derek. He says: “Would you recommend using a color contrast grid such as…” And I’ll post the link in the chat. I don’t know if you have access to it. It’s called Contrast Grid EightShapes. I’ve never seen that one, I don’t think.
>> GEN: There’s tons of these contrast grid out there.
>> PAOLA: Yes, there’s a lot of them.
>> GEN: OK, so this contrast grid is fine. The problem is it’s very difficult to understand. You frequently have no idea what on earth you worked, so people will start with some of these tools, and then in about five minutes, they’re, like, “Wait, what did I even use any of this for?” They frequently forget what is going on.
Now, this does allow for some labeling, which can help, but it’s only producing the labels in one column. It doesn’t produce them in the second column. Or it reduces the labels in the rows, but not in the columns. Well, that’s fun. The grid moves around when it gets focus. That’s an issue. It’s not supposed to move when it gets focused.
Although, frequently, these things just end up being confusing more than anything else, because this is a ton of information to try and understand and process.
>> PAOLA: Yes. It can be overwhelming to see that many things in one page.
>> GEN: Exactly. I found that those grids are just very difficult to comprehend.
>> PAOLA: We have another question. Gina asks: “What are your thoughts about pop-up windows?”
>> GEN: [sighs] [chuckles] So modal windows or lightbox windows or pop-up windows can be used, but it’s very important that they properly grab the users’ focus and keep the users’ focus until they’re dismissed, because they are blocking content. Many of them don’t properly get the users’ focus.
So someone might be using keyboard navigation, a pop-up window shows up, and they are still interacting with what’s behind the pop-up, and they can’t even access the pop-up. It’s possible to do them well, but they are definitely a challenging element to work with.
>> PAOLA: I agree. Karen asks: “Is there a checklist of all the things we’re talking about here, and everything we need to do for accessibility?”
>> GEN: Of course, there’s a checklist. It’s called WCAG. It’s impossible to read. That’s pretty much my answer. I do have some how-to guides and information on my site that are much more specific and closer to the instructions that I showed for the form. “Do the following items. Don’t do the following items.”
>> PAOLA: And by “your site,” you mean the slides and links where you have…
>> GEN: Yes. Just this big giant URL.
>> PAOLA: OK. Just making sure everyone knows what it is. I think I posted it a couple of times in the chat. I’ll post it once again.
>> GEN: There we go. OK.
>> PAOLA: Yes, and someone mentioned in the chat earlier that WCAG 2.2 got released today, so that’s interesting.
>> GEN: Oh, OK. It got released today.
>> PAOLA: Yes.
>> GEN: When I had checked at the beginning of the month, which was a whole four days ago, they hadn’t officially released it yet.
>> PAOLA: Yes. I had been checking, and it was the proposed version that you could see so far.
>> GEN: Yes. Which I highly doubt that it’s had any real changes from the proposal. Maybe a semicolon or something.
>> PAOLA: [laughs] I don’t see any more questions in the chat, so I think we can wrap up the meetup.
Thank you so much, Gen, for your talk. Where can people find you?
>> GEN: Again, [laughs] the link.
>> PAOLA: Everything is on the link, and there you can find Gen.
Thank you so much, everyone, for participating. Thank you so much, Gen, for your amazing talk, and thank you so much IvyCat for sponsoring today’s event.
Thank you, everyone. Have a great rest of your day. Bye.
>> GEN: Bye.
>> CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple podcasts, Google podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple podcasts. Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. Steve Jones composed our theme music. Learn how we helped make 1000s of WordPress websites more accessible at equalizedigital.com.