This episode is a recording of a June 2023 WordPress Accessibility Meetup where Gen Herres provides practical guidance on how to meet accessibility standards while still achieving project deadlines. If you would like to watch a video recording from the meetup, you may do so on the Equalize Digital website here: Web Accessibility on a Deadline: Strategies for Meeting Standards: 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
- Accessibility on a Deadline Slides
- The Baltimore WordPress Group
- WordPress Plugin: Max Mega Menu
- Kaya Theme on GitHub
- Accessible 360 on GitHub
- WordPress Slider Plugin: Soliloquy
Transcript
>> CHRIS HINDS: Welcome to episode 023 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 June 2023 WordPress Accessibility Meetup where Gen Herres provides practical guidance on how to meet accessibility standards while still achieving project deadlines. 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/023.
And now, on to the show.
>> AMBER HINDS: Gen is the owner of Anphira, hopefully I said that right, and organizes the Baltimore WordPress meetup group. Gen has been featured in podcasts, she won the “2022 Member of the Year” award in the Admin Bar [phonetic], which is a fabulous Facebook group, for anyone who doesn’t know. They’ve been named the number one WordPress community by… I can’t remember where that came from actually. I don’t know if you know, Gen.
>> GEN HERRES: I don’t remember either.
>> AMBER: Yes. But it’s something that a bunch of people go and vote on, and they got voted number one WordPress community. It’s a fabulous Facebook group. Gen provides just incredibly valuable advice there, and in many other Facebook groups. I always see her providing a lot of thoughts around a variety of things, from business ownership to, building websites, and accessibility.
So I’m very excited to have Gen here to speak today. Thank you, Gen. Welcome.
>> GEN: Thank you.
>> AMBER: I’m going to stop sharing my screen so that you can start sharing. While she’s doing that, just a little housekeeping item, we have the Q&A module turned on in Zoom. It is helpful for us if you can put questions in the Q&A. I will try and watch the chat, and we’ll also pose those to her at the right time. But it’s helpful for me if they go in the Q&A, because sometimes they get buried in the chat. So thanks so much.
>> GEN: All right. “Accessibility on a Deadline,” which is a topic near and dear to my heart is “Deadlines.”
I’m Gen. I have been a WordPress developer for over a decade now. I work with building sites, managing sites, maintenance for sites, and I’ve dealt with literally hundreds upon hundreds of WordPress sites. At one point, I was working primarily for an agency, and literally managed over 200 websites, in terms of keeping them all up and running, and monitored, and up to date.
I no longer work for that agency, but I now do work for a few other agencies, white label. I organize the Baltimore WordPress meetup. I work on my own side projects, building now accessibility tools. And of course, I run my company, and still managed to get the dog walked at the end of the day.
If you want to know a little more about the Baltimore WordPress meetup group, we are of course on “Meetup.com.” Just look for “Baltimore WordPress.” And we do have a number of meetups, including things like, we just had a mini-accessibility audits for Global Accessibility Awareness Day, where I brought over Victoria Chen [phonetic], who is a blind screen-reader user, and we went through a number of different websites, and the recording is listed on our meetup and posted on YouTube if you want to see a little mini-accessibility audits.
So about this topic of accessibility on a deadline. I work with a wide range of clients from literally nine-figure businesses to small little solopreneurs, and people of all different backgrounds. I work with agencies, I work with various different people at agencies of all different levels. So I delegate work to graphic designers and virtual assistants. I work with copywriters, project managers, agency owners, business owners and marketing teams.
Just before we get started, I will use the word WCAG a lot. WCAG means Web Content Accessibility Guidelines, and these are created and maintained by the W3 organization, which basically maintains the standards for the web.
Why did I decide to go with a deadline-focused topic? It’s because it is the top thing that I deal with in my business. I offer two types of accessibility packages. The first is ongoing accessibility, in which we try to prioritize the biggest wins we can get first. The other is a one-day build. And if it’s not done during that one-day build, it’s probably not getting done. So it’s important to get accessibility at the very beginning and avoid doing any rework in the future.
In an ideal world, we would have everyone involved with a project trained in accessibility. We would have our business owners, our project managers, our graphic designers, our developers, our virtual assistants, our copywriters, and our website testers, everyone along the process would have at least some accessibility background. And we would be able to get accessibility tested and included at every point, we would have detailed guidelines, we would have detailed procedures. So that when we talk about discovery, copywriting, design, development, quality assurance, launch, and continuing improvement once the site is launched, we would have accessibility injected at all of these points by people who were fully trained. Unfortunately, that world doesn’t exist, and in reality may never exist.
So what happens in the real world is that we are lucky if even one of the people that I mentioned before: business owners, project managers, graphic designers, developers, virtual assistants and copywriters, if even one of those people has any accessibility training; because for the most part, none of them do. And what happens since they don’t know about something, they tend to have some fear about it, especially because they’ve seen other people share horror stories. And of course, what do you actually remember of the stories you’ve heard in life? You tend to remember the bad ones.
You’ll hear 10 stories; nine of them were good, one of them was bad. Now, which one of those 10 stories are you probably going to remember the most? It’s the bad one.
The reality is, as humans, to survive, it was very important for us to remember things that went poorly in life, because doing those again could wind up with us dead. So we tend to have a memory that is focused on what went poorly, and then we tend to share what went poorly with everyone else. So even when people have almost no knowledge of accessibility, they are immediate with providing pushback against it.
So the first pushback item that I usually hear is, “I don’t have time to learn it.” And so, like usual, when I deal with pushback, I have a process to deal with it. And the first thing I do is, I acknowledge their concern is completely valid and completely correct. They do not have time to fully learn accessibility prior to getting started on their project.
For example, their project may have, you know, 10 hours allocated for their job. And most accessibility courses are 10 to 20 hours in length. And to become actually proficient in accessibility, it takes a lot of practice, frequently 100-plus hours. So of course, they don’t have time to learn it.
The next one I get is that it’s too confusing. And, again, I completely agree with them. When you are brand new to a topic, going to the WCAG guidelines can be downright terrifying.
For example, when we just look at the “Understanding WCAG” documents that are officially published, they are at college-reading level in most cases.
In fact, I’ve seen many people with PhDs have difficulty trying to understand what these “understanding” documents are asking for.
For example, “Understanding documents provide detailed explanations for Web Content Accessibility Guidelines, WCAG, and success criteria. They are informative, not part of the normative WCAG standard. For information, see about WCAG understanding documents.” That little snippet is from the WCAG understanding page. There are large words, long sentences; and quite frankly, I had to go look up the definition of normative, which “Dictionary.com” was not particularly helpful, so I had to go look up two more definitions to even figure out what some of these sentences mean.
When we have such high level, such complex content in the, “here’s how to understand it,” of course people are going to be turned off. Of course they’re going to find this confusing. So we need to deal with that.
The next one is, “I need this content done today.” For many people, when they’re given an assignment, they literally need to turn something around that day. They only have a couple hours. They are usually stressed, frustrated, and they just have to get the product done. And so we either need to find a way to get some accessibility into the product they’re going to produce or there won’t be any accessibility, because it has to be produced today.
Again, this is not the ideal world; this is the real world, and getting some wins is better than getting no wins. As of course, we all know the earlier that accessibility happens, the less rework there is. So what we want to do is try and get accessibility introduced as early as possible in the content-creation process. That way, we can avoid having to do rework later. Because the reality is, most of the time, a project does not have the time, budget, or quite frankly, inclination to do rework later.
So stress. Whenever people are learning something new, they tend to become stressed. It’s just a normal part of human life. People get stressed, and when they are stressed, they do not respond well to being asked to do more work.
Just think for yourself about the last time you felt stressed. You were probably anxious, you were easy to irritate, things that during a normal time when you’re just feeling calm wouldn’t even bother you can now irritate you so, so much. You become forgetful, you skip steps. It’s just overall a poor experience. So when they’re already in a stressed state, they do not respond well to being asked to do additional thinking and problem solving. They want answers basically handed to them in a done-for-you type of state. So we’re either going to work with people and hand them things, or the things aren’t going to get done, because that’s just life.
What I’ve done to work on acknowledging and solving these push backs, is I acknowledge people’s challenges. I agree with them. I tell them they are completely correct. Their feelings are completely valid. The challenges are very real. And this, of course, puts people a little bit more at ease. They’re, like, “Oh, good, you agree with me.” And now because they are more at ease, they are more willing to listen to the next thing that I’m going to tell them, which is, “You don’t have to do the scary, hard thing that you’re worried about. We have a system. You just have to be able to follow directions.” And they think, “Oh, OK. Well, I can follow directions.” “All right, I don’t have to make decisions, I don’t have to do all the hard things that I was scared of.”
Next, the best thing we can do is try to give them a system that actually saves them time. Because if you can save them time, they are going to use this system over and over and over again because you just made their life better. So of course they want to do it more often.
So the first one is the, “I don’t have time to learn it.” Well, the good news is they don’t have to. You don’t actually have to read the whole WCAG guidelines in order to do quite a bit of accessibility and incorporate quite a bit of accessibility into your processes. The answer is simplified and streamlined instructions. Don’t give them options; give them specific answers: “Here’s the list of items that you need to do.” “Here’s the list of items you need to avoid.” And then give examples.
Regarding the “It’s too confusing” push back, we need to make a system. A system so that they don’t have to do the thinking and the understanding.
I can get my dog to do a number of different tricks. She doesn’t understand why I’m having her do those, but she does them because she gets rewarded for it. So whenever possible, we want to remove the decision making and just have them do the work. Because they will be rewarded by being paid, so they do it.
Then, of course, the “We need the content done today.” So what we want to do is make a process that actually makes using accessibility stuff go faster, make their work more accurate, more reproducible and more consistent. And, of course, this will help build their confidence about accessibility. They’re, like, “Oh, that wasn’t a traumatic experience in my life. That was actually kind of pleasant. I actually got on with my day faster.” So they will go ahead and start using it. And then they’ll use it again.
All right. Are there any questions so far, Amber?
>> AMBER: No.
>> GEN: All right. Systems and solutions. We love systems and solutions.
>> STEVE: 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: So the first thing I like to do when I work with clients and I want to get them on board with a topic is, I asked them questions that are incredibly hard to say no to and incredibly easy to say yes to. So I asked them, “Do you want to be nice to your future self?” This is a question that basically everyone is going to respond, “Yes. Yes, I do want to be nice to my future. I don’t want to be mean to myself in the future.” And then the next question is, “Would you like to save money?” And every business owner out there will say, “Yes. Yes, I would like to save money. Saving money is good.”
Now that you’ve gotten them to say yes to a couple of questions, you tell them how they’re going to do these two things. And since they already agreed to do them, you have much less friction going forwards. So when you give them the content guidelines to follow, they go, “Right. I’m doing this because I want to be nice to my future self and I want to save money. So I’m doing this task.” You’ve basically already had them argue your point for you in their own head.
Also, of course, we love checklists. I’m sure Amber loves checklists in her business. And so we give checklists that can be read and understood and checked off by people who don’t have extensive training. One of the things that we do is, we put limits and boundaries. So when you’re working on learning a new skill.
I have an extensive background in social dance in a number of different styles, from a variety of swing styles to ballroom, to tango, to country line dance, to a whole bunch of different things. And one of the things that they always start off introductory classes with is boundaries. “We are just going to do these couple of things.” “Anytime you encounter this situation, you will immediately do this.” And then they practice it several times.
So we don’t give people the list of, “Here’s 25 options of something you could do.” We say, “If this, then do that.” And we have them practice it. And we give them those nice, clean boundaries that let them know, “OK, I don’t have to freak out about a situation. If I get in that situation, I just do what I’ve been told to do. Excellent.”
Remember, most people that we deal with are used to working within limitations. When we delegate work to a copywriter, what do we do? We tell them what tone of voice we want them to use. Is this friendly, between buddies, or is this a professional presentation? We tell them what lengths to write. Are we talking 300 words or 3000? And we tell them what kind of an audience they’re writing to. Are we talking to a middle school group? Or are we talking to Army lieutenants? Who are we talking to? And then copywriters work within those boundaries. The same thing with designers.
When we go and we give a designer an assignment, we tell them, “Here are the brand guidelines that already exist. You need to use these.” If we have print work, it’s very common. We tell them the rules of the printing company.
Now, let’s say Amber’s making T-shirts for the WordPress Accessibility Day, she will tell the designer if the design needs to be this size, it needs to be a vector format of this type, it has to be a single color, because we’re not paying for the expense of printing 20 colors.
So we give them guidelines and rules on a very regular basis. So they’re used to doing this. They’re very comfortable with it. We shouldn’t feel bad about giving them what they are used to having; we should feel good about it. And of course, with VAs or virtual assistants, we constantly tell them what tools they need to use and what timelines they need to follow, because they have to work into our systems. So all we do is, we just give them their limits. This removes the ambiguity and the decision making, which removes a lot of the stress.
So some examples of things that I give to designers. I tell them, “You’re not allowed to put text on top of an image.” Are there circumstances under which text over an image can be allowed? Of course. But in general, it becomes one of those more difficult situations, so I just tell them not to do it. And you know what? They can follow those instructions. They can incorporate that into the design. I tell them that all buttons will be a certain background, a certain border and a certain text color.
OK, they’re used to following style guides, we just give it to them. I just tell them that no carousels or sliders are allowed. They are a very dicey point. They can be made accessible, but frequently, they will not be done without extensive knowledge to be made accessible. So I just tell them not to do it. I tell them they have to use exactly one h1 Heading. I tell them that they need to make the spacing for body text 1.5. I just give them the specific instructions to follow.
So as an example of a designer, I work with a service called Floxie [phonetic] on a regular basis. These designers do not have accessibility experience. So I need to understand their limitations and provide them specific instructions on what is outside their skill set, so that they can produce something for me. So what I do is, I give them the colors and fonts that have already been checked for accessibility. I tell them, “Here’s a list. This is what you use.” “OK, fine.” They use it. They’re used to receiving specific instructions on colors and fonts. I give them the list of user-interface elements they can use and the list of things they can’t use.
Again, they’re used to dealing with what’s allowed and what’s not allowed, because all sorts of different brands have all sorts of different rules. I provide them the text content and photos, or I give them very specific instructions if they’re going to source the photo for me, such as, “I want someone of this gender, of this ethnicity, in this type of a setting smiling.” I give very specific instructions and, of course, provide a basic wireframe, because they need to know the overall structure that they’re going to use.
So I do this on a regular basis. And I recently just sent off to my designer their instructions for an e-commerce homepage. And it took me about 15 minutes to fire off the instructions, because I already had the color palette for the brand, which had already been checked for accessibility, and I was actually using an existing website from another company as the kind of wireframe. So I was able to just create a quick video of instructions and just talk through it. And the whole process took me about 15 minutes, and I got back something quite close to what I have was looking for, and with the accessibility rules followed, because they were just written out bullet-point style.
When we’re working with clients, what we want to do is provide options, defaults, and a deadline. When clients are just told, “Make the decision by X date,” they tend not to do it. They put it off, they procrastinate it, and then you don’t have a decision. But if you give them a specific list of choices and tell them that a specific choice on that list is the default, so if they don’t make a decision from this list by the deadline, the default will automatically be selected, you are much more likely to get them to actually make a choice. Because, for one, they have a limited number of options. And two, they’re already told what the default is. So they’re told, “This is your choice. And if you don’t like your choice, well, make one.” I find this works much better.
So one thing that I do is, I give them a list of font examples. So I am showing a web page here, which has font examples on it. And this shows a number of fonts from the website fonts, which means we can trust that these fonts are basically installed on pretty much every device out there. And then also a selection of fonts from Google Fonts, which, of course, we would have to load in. And in order to be GDPR-compliant for those in Europe, which is a European privacy law, we would need to locally load those Google Fonts.
Now, what I have here is a list of different fonts and examples of the font. I’ve used some text that people are not familiar with. These are called pen grams, and they are sentences that use every letter in the English language in the sentence. So they’re kind of weird.
So “Jinxed wizards plucked ivy from the big quilt.” It’s a weird sentence; it’s not text that we’re familiar with. I have to pause and think about it for a moment, and that means that clients also have to pause and think about it for a moment. And when they have to actually read the text instead of just seeing text that they already know, they actually make much better decisions about what text is readable. When they’re just reading text that they know by heart, they tend to make very poor decisions on readability, because they are only looking at the aesthetics. They’re not even attempting to read it because they already know it.
So clients who tend to want to pick a fancy cursive font, when I give them these sentences in their fancy cursive font, they’re suddenly like, “Whoa, I can barely read this.” And that is exactly the answer I want them to have. Because your customers can barely read your text, because they don’t know it already.
So I give people this text which has a bunch of sentences they’ve never seen before. Has their numbers, their letters, all of the symbols, the quotes, italics, bold, and a number of letter combinations in English, I-L-L-I, which tend to be difficult to read. And I also throw in a number of commonly-confused letters in combination, so that you can see them side by side and tell, well, can you read it or not.
Again, this is text that people are not used to seeing, so they can actually say yes or no on whether or not they can read it.
So I’ve had great response from clients trying to go through this, because it’s a limited list, and they can see what it actually looks like.
So the next part is, of course, getting accessibility early in our process. And on the topic of tools, we want to have tools that give yes/no answers. There’s a website called Contrast Ratio. It’s been around for quite a while. I’m sure many of you are familiar with it. But this is confusing for clients and for people new to accessibility.
You compare two colors and you get back a number that’s colored, which is confusing for a lot of people, because they don’t understand what that colored number in the middle means. “Is this good, or is this bad?”
In the image example I have, I’m comparing white and grey, hex color codes FFF and 777. And it gives a result of 4.47 contrast, which, if you hover, says “Passes AA for large text above 18 point or bold above 14 Point, and AA for user interface components and graphical objects,” which leads me to ask the question that most clients ask: “What on earth are graphical objects? And what is 18 point font?” These aren’t numbers that people are usually familiar with, these aren’t phrases that people are usually familiar with.
So one of the things that I’ve done is, I’ve built a tool which explicitly says, “OK,” or “There’s an issue.” It gives you that kind of yes/no type of situation. “This is OK.” “This has an issue.” And it explains, then, in more detail, what “OK” and “issue” mean. So if the contrast is too low. If this is allowed for icons and large text. If this meets AA. If this meets AAA. And also, I have included if contrast is too high. While not officially in the WCAG guidelines, there are a number of people who have difficulty if contrast is in fact too high.
For example, people with Irlen syndrome, when they see contrast that is too high, the letters will literally bounce in front of them, or wiggle, or move in some other way. Also, people who just are tired, stressed, have a headache, too high contrast can make that worse.
So in this image example, it says that, “Below is a grid of color schemes and their contrast ratios. Explanations for the grid are listed after the grid.” So what it does is, it shows the type of color we have. So if this is being used for a heading or for text or for links, and it says whether this is OK or has an issue. And then it gets into some more detail about when those can be used. So this kind of information helps people who don’t have a lot of familiarity with the WCAG guidelines.
The next thing that I’ve always wanted from tools and haven’t been able to find is easily outputted savable information. Most of them, you’re, like, “Great, I just use the tool. I solved it. Now I have to go copy and paste everything into some other location individually. Every single item one by one, and remember why I put it there in the first place.” So one thing that I do is, I explicitly list out all of the selections that were made in a way that is usable by designers and developers, and you can copy and paste the whole thing in one go.
Here’s an example. This tool outputs everything as CSS variables. Now, your first question is, “But do designers know what CSS variables are?” Probably not. But they are written out in a human-readable way. It’s listed as, “Background color 1.” OK. Your designer can understand that this is the background color, and then it gives a hex code, and designers are very familiar with hex codes. Or the heading. It says, “Heading color.” This is something that designers easily understand, even though they don’t read CSS.
So let’s play with the tools a little bit. Before I hop over to that, Amber, is there anything in the questions?
>> AMBER: No, not yet.
>> GEN: OK. So I am over on the website, and we’re going to start with quick colors. The links for all of this will be included in the follow-up and at the end of the presentation.
At first, it has instructions on what to do, so let’s just go ahead and give it a go because that’s fun. So what you do is, you select your background colors. Because when we create website designs, I found that it’s very common to have about two to three background colors for when you have a light background.
For example, if you’re looking at a page, you might have a background on the header, there might be a background on the footer. And it’s very common to do kind of the white, light grey alternating backgrounds. Then we specifically asked for heading color, text color, link color, link hover color, borders, accents, and then of course button colors. And this way, they’re actually labelled and listed out as what these are actually used for.
A lot of the tools, sure, you get eight colors, but you’re attempting to remember what any of the colors you inputted were used for in the first place. And then it outputs a nice grid of all the different colors, how they actually look, and whether or not they meet the different types of contrast.
So here in the border and accent colors, which are frequently used for icons, you don’t have to meet the same standards that you do for text.
For example, if I come here under the link hover color and I make it a bit lighter, you’ll see that now the link hover color is listed in this table as having an issue. It only meets contrast for icon or large text. It doesn’t meet contrast for regular text, which is your link hover is going to of course be in your body of your website. So it needs to pass for regular text. And then there’s a detailed explanation here. And of course, it outputs all of the CSS variables for easy copying.
I’ll give a quick pause for any questions?
>> AMBER: No.
>> GEN: Fonts. So the next thing is, people are always asking, “But I want to visualize the fonts. I want to see what they actually look like in a block of text.”
If you have a client and you try and send them over to Google Fonts, they get completely overwhelmed; one, because there are too many choices; and two, because there’s too little information there. It’s not good at context. You don’t get to see the fonts paired. You don’t get to see what paragraphs look like. So we set this up so that I’ll put in a couple of options.
I am choosing a heading font of Tahoma, body font of Verdana, and an accent font of Merriweather. And then I pop in, and I’ll just use the defaults for everything else. And then here I can actually see and just do a screen print of this for a client, and they can actually see what their headings, their body, their accent fonts, what they actually look like in the context; including bold, italic, small text, large text, tables, buttons, block quotes, lists, links, a whole lot of information, so that they can make a much more educated decision about how content looks.
I just saw a question pop into the Q&A. Did I forget focus colors? Or is there a reason… “Why have you not put focus colors in this tool?”
The answer on the focus colors is that most of the time, designers do not put any focus into designs, as they’re not put into a focus state in the design. It is normally handled at the time of development. Pretty much no designers I’ve ever seen even know what a focus state is, so they won’t know how to put it into their design.
Dino [phonetic] asks, “When it comes to setting expectations on digital assets, say on a website, what level the most of your clients get to after a one-day build? And how much time does it get to 80 to 90% of accessibility as a generalization?”
On a one-day build, we will normally pass automated tests, which, as some people probably know, means that you’ve passed about 30% or so of the WCAG level AA criteria.
There was a study by DQ [phonetic], which said that of the actual issues that show up on a typical website, automated testing can actually usually hit about 50%, as a number of elements simply don’t exist on most websites. So there’s a number of WCAG criteria that you just don’t even need to check because they don’t exist.
As far as getting to about 80 to 90%, of the WCAG level AA accessibility, we will probably get to somewhere between 70 and 80% of the accessibility on a one-day build, partially because we specifically do not go for certain elements. And that automatically removes some of the WCAG criteria. And…
>> AMBER: So you do one-day website builds?
>> GEN: Yes.
>> AMBER: When you do those, you’ll intentionally limit what…
>> GEN: What they’re allowed to do, yes.
>> AMBER: What the design or the functionality is. Like, this might be it. So you might even be, like, “We’re not going to put carousels on, because –
>> GEN: Correct.
>> AMBER: – There’s not a way to… That’s what you’re saying?
>> GEN: Yes. So I say, I automatically just don’t allow carousels. No, that’s not happening. So that automatically removes the associated criteria.
So when dealing with the deadline problem, one of the best ways, as I mentioned in the slides, is just put limits, put boundaries in, and just don’t allow stuff that is difficult to make accessible.
>> AMBER: And assumingly, that’s the trade-off, that when you’re having those sales conversations with clients, you’re saying you want this thing built in a day, and the best way to achieve that goal is to limit how, “fancy” or whatever word you want to use.
>> GEN: Exactly.
>> AMBER: And then they make the decision, “OK, yes, we either move forward, but it’s more simple.” Right? It’s that… What is it, good, fast, cheap –
>> GEN: Exactly.
>> AMBER: – Triangle? And they have to just make that decision?
>> GEN: Yes. So basically we say, “Well, do you want to spend basically the entire rest of the day on having a fancy carousel or do you want five more pages built?” And they’re, like, “Five more pages. Thank you.”
>> AMBER: Yes, that’s awesome. That makes sense. So there were a couple of follow-up on the focus state, which Mark [phonetic] said the focus is essential to pass several success criteria.
>> GEN: When I do rapid builds, I only use one specific theme, and it handles all of the focus stuff. I’ve tested it with a whole bunch of stuff. It handles all of the focus states. They’re big, they’re bold, they’re obvious. So that’s already kind of handled. I don’t ask my designers to specifically try and deal with focus states, because most designers have honestly no idea what a focus state is. I would have to explicitly point out in the instructions with a number of visual examples, exactly what the focus states are.
Again, since I normally build with a specific theme, and the theme already handles the focus states, I don’t want to spend time trying to teach a designer about something that my theme already handles.
>> AMBER: Yes. I think that goes back to creating… Well, a little bit like what you’re saying about limiting scope. Like, you just have a default focus state, and that’s just going to be the focus state on every website you build, and you’re not going to custom color it, let’s say.
>> GEN: No.
>> AMBER: Which is kind of been our approach. And this sort of goes to… Someone had said, “Doesn’t the browser handle focus?” And we’ve typically been not setting a color on focus and allowing the browser to do it. Because like in Chrome, it has the double-color focus by the defaults. So it’s, like, blue and white, so it works on a light or a dark backgrounds. But if you set a color, now you get in the land of you have to define a color, like, “This is our light color, and this is our dark background color.” And you have to, like…
>> GEN: Do a lot of extra work, yes.
>> AMBER: A lot of extra work. So, like, we’ve kind of [inaudible]. We do have our designers sometimes do focus state in designs, but we’re always working like we have our designer.
>> GEN: Yes, but your designer also has a significant amount of accessibility training.
>> AMBER: Yes.
>> GEN: And I am working with designers who have none. And the reality is, they’ve never even heard of focus state. So asking them to try to think about it or design for it is really a huge ask of them. And I’ve now created another element for the client to look at, when, quite frankly, the client doesn’t need to look at it.
The focus needs to pass success criteria, it needs to be obvious. I do not want the client actually thinking about what it looks like, because you know how clients can be. They just narrow in on this one thing that looks different from what they’ve seen before and they become obsessed about it.
>> AMBER: “Why is it blue and not green?”
>> GEN: [chuckles] Yes, right? Like…
>> AMBER: This idea of designing focus state, I think it’s probably better for accessibility to not, and to consistently use the same focus states regardless of what the brand is, or what, like… So as long as you know, as a developer, what elements need focus, I don’t know if you have to have a design that shows that, because I think it’s better… That was part of why we made the decision to not define colors on our focus state and allow the browsers to set the colors. And we always make them two pixels solid line with the two pixel offset. We aren’t, like, “Well, on this website, they’re going to be dashed. And on this website…” Right? Like…
>> GEN: Yes.
>> AMBER: I think it’s better for accessibility if it’s consistent.
>> GEN: Yes.
>> AMBER: Yes.
>> GEN: And again, since I would usually work with designers who have no prior experience, you’re asking someone who has no prior experience to think about designing this new thing that, quite frankly, they’ve never even heard of before. You are probably not going to get a good result out of that.
>> AMBER: Yes. Doug [phonetic] asks… And then I’ll hide myself so you can continue. He was curious what theme you’re using when you said…
>> GEN: The theme is Kaya. It’s available on GitHub, and I can put a link in the notes.
>> AMBER: That would be awesome. Thank you.
>> GEN: Just going to slide. There we go. All right. OK.
So we had actually basically gone to the fonts, we had done some sizing. One of the things that I have put in is, you can only run your heading sizes up to a certain point, you can only reduce them down to a certain point. I just don’t allow you to try and put in a body size of 12 pixels. And the reason why I’ve put pixels here and not rems is because most people, especially designers, are most familiar with seeing font size, and then thinking about font sizes in pixels. So here they get to set them based on pixels, because that’s what they’re used to. And they can also attempt to, you know, type in 12 and it’s going to not really allow that. I need to double check my JavaScript on that, apparently.
This is still an alpha testing. So if you do find errors, there is a contact support at the top to annotate errors. And then, of course, I have font weights so that you can adjust your font weights within reason. You cannot put in a 100 weight that is hairline, and incredibly light, and extremely difficult to read. And I’ve added font spacing by default. For most fonts, if you add just a little bit of letter spacing into them, they become significantly more readable.
I was showing a friend on Open Sans, which is an extremely common font, and I was showing her the letter combos, and she was, like, “I can’t differentiate those letters at all,” you know, in a normal 16-pixel font size. And then we added .02 eams, of letter spacing. And she’s, like, “Oh, wow, I can read everything now. That is so much easier.”
So I do recommend always putting a little bit of font spacing in, and testing the font spacing, and adjusting it as needed for different fonts. Because, as you know, all fonts are a little bit different.
OK. So now is the question slide.
>> AMBER: Sorry. Took me a minute to get myself back up here, apparently.
I don’t know if there are any other questions, but I have a few. But I’m going to say, if anyone wants to put them in, feel free to add question.
Alan [phonetic] did ask why we can’t save the chat. And that is a limitation in Zoom webinars. I know people have asked. You can do it in meetings, but can’t do it in webinars. I’ve tried many times to adjust our Zoom settings, and unfortunately we can’t. But all of the links will be available. When we post the recap, we’ll make sure to include those in. Or the other thing you could maybe do, which is a little annoying, but you can quickly open them all in new tabs. [chuckles].
So I’m curious if you could just tell us… I know some people might be interested in this, like, the website in a day process, what that looks like. And how has that changed since you started thinking about accessibility? I know you mentioned a little bit about just, like, including more notes for your designers and your copywriters and those sorts of things.
>> GEN: Yes. So the first thing that happens at the beginning of the whole thing is, getting these colors and fonts decided very quickly upfront. So having something like this, which is a really fast tool, is this allows the client to just quickly see, and we just make a fast decision, “OK, here’s what. Set. Move forward. Go ahead and start implementing it.” And then we get to the WordPress instal, which we get in, we load. We have a specific list of, “This is the theme we’re going to use.” It’s going to automatically have a child theme. We will immediately install some certain plugins, and then we will install a few other plugins from a shortlist.
So I know this plugin is good for this type of content. And it will always be used because I’ve already tested that one.
So for example, on menus, I’m going to install Max Mega Menu, because it is generally the best at getting menus up, running and accessible. I’ve tested it. Is it absolutely perfect? No. Is it workable and usable for basically everyone? Yes. I’ve had it tested by several different screen-reader users, keyboard nav, several different browsers, and it works. I have a process. It gets to an accessible state. Is anything perfect? Probably not. But I don’t have forever to spend deciding on things.
I have a specific table plugin that I use if we’re going to use tables. I have a list of exactly what settings that plugin is going to get and how it’s going to be filled in so that my assistant can just pop everything in and doesn’t have to think. We just get it done quick and go.
I have a, basically, content creator guidelines, which list out how to write for accessible content basically. So that tells you what length sentences to use to vary them. Whether or not to use acronyms, whether or not to use contractions, exactly what to use, and what not to use. And it itemizes all of that stuff out. So that I can give that to the client well in advance when they’re writing stuff. So they can read it, go to the appropriate section, and just go ahead and pop into that stuff.
>> AMBER: Are the clients typically providing you contents on stuff in advance of the day that you are doing their website day?
>> GEN: Normally, they are responsible for the written content being ready to go. If the written content is not ready to go, then they will be there that day writing the content?
>> AMBER: [chuckles] Yes. Filming where they can get their website in a day.
>> GEN: Exactly.
>> AMBER: Yes. You mentioned Max Mega Menu, which I put a link in there, and that sort of reminded me that earlier when we were talking about carousels, someone asked if you knew of an accessible carousel.
>> GEN: On GitHub there is an accessible carousel. I don’t remember the exact link. We had a discussion on the Facebook group of accessibility about carousels and sliders, and someone had suggested it, so I saved that link. I don’t have it handy at the moment.
>> AMBER: So I thought the person who shared that, they were using a version of Owl Carousel that had been modified to be made more accessible, I think. Or it was Slick. It was one of those two.
>> GEN: Yes. Let me see if I can find it in my random notes file.
>> AMBER: But neither of those are specifically a plugin, so that would be more like if you’re going to custom code a carousel for a client.
>> GEN: Yes. The one on GitHub is not actually a plugin. I don’t have an accessibility plugin, or a very accessible carousel plugin that I can think of off the top of my head. And again, a lot of those plugins, it depends on what settings you pick.
For example, I have an accessible table plugin, where if I use these settings, the table is accessible. Yes, it has 50 other possible combinations of settings, and with those it might not be.
So similarly with certain carousels, if you use a certain set of settings, you may get an accessible result; but if you use other settings, you may not. So I did find the accessible slick carousel. I’ll drop that in the chat.
>> AMBER: Is that the same one Eric just posted?
>> GEN: Yes, that’s the same one Eric just posted.
>> AMBER: OK. Yes. And so we’ve used before, I’ll post the link to it, Soliloquy, which is “SoliloquyWP.com.” There’s a free version on “Wordpress.org.” I know that all of their…
I was just talking with Raghavendra [phonetic] actually about this, who was a previous speaker at our meetup who’s blind, because he’s looking for a carousel. So he was going to go test it, and I told him to come back and tell me what do you thinks. He’s also going to look at the editing experience, and I told him I thought this one might work, from an editing experience, for him. Because it’s sort of like you add the image, and then if you want text or something on it, you edit it in, kind of like the same way you would edit alt text, like, there’s a box inside of the image. It’s not like one of those drag-and-drop carousels where you can do things.
I know that all the buttons on these are real buttons and they have good accessible names on them, so that might be worth checking out if someone wants it.
Although, I think, circling back to what you’re saying, if you’re trying to achieve it on a deadline or with a tighter budget, like, really being strict about what tools you use, and using those same tools every time.
>> GEN: Yes.
>> AMBER: Yes. Jean P [phonetic] was wondering what are your thoughts on accessibility, “…accessibility fonts, such as Atkinson Hyperlegible?”
>> GEN: Having talked with a number of people with different disabilities, the answer is, different fonts are better for different people. Some people, for example, like some of the dyslexia fonts, who have dyslexia.
I talked with one woman who has dyslexia and she honestly hates the dyslexia fonts, but she uses them with the Chrome extension for large blocks of text. Because when it gets to be a big block of text, she just can’t read it otherwise. So she either needs to use a screen-reader key combo to read it out to her; or if she’s in a situation where she doesn’t want it being read out to her, then she switches to the dyslexia font just to read that, and then switches back, because she honestly doesn’t like the font very much.
In terms a number of other fonts that have been created to be accessible, again, it is so much, “This font is going to be better for these people. That font is going to be better for other people.”
For example, I hate reading large blocks of text in Arial. A lot of the letter combinations just get so squished and tight. I will literally change the font on someone else’s website, because it’s just so tight. But you’ll hear a lot of people say that Ariel is an accessible font.
Personally, if I just had to pick a default font to period use, it’s going to be Verdana, because I personally find that much, much easier to read.
>> AMBER: So I like that you have here the confusing letter combinations, where showing the words, “Willing, billing, drilling” that have the I-L-L-I inside of them. I think I’ve seen a number of studies that actually say most of those dyslexia font, like scientific studies, don’t actually improve readability, including for people with disabilities. So I’m hesitant to recommend them to clients, especially when it’s, like, “Why not go with a system font?” That’s my preference [inaudible], because I think it helps for page speed. [inaudible] extra fonts.
I feel like what you’ve done here is really nice, because then it’s sort of, like, you don’t have to choose a dyslexia font per se, as long as you have spacing appropriate. And you’ve chosen something where you can differentiate different letters or numbers. So I like this.
>> GEN: Yes. Again, letter spacing is just so important, which is why I’ve added the body font and why I’ve added the font spacing. If you’re using…
>> AMBER: [crosstalk ], like, if you change it, [inaudible].
>> GEN: So if I hop over and use Arial and Helvetica, which are really squished-together fonts… And PT Sans is also a little bit of a narrow font. So I will pop to these and I will turn the letter spacing down to zero. And you’ll see here that this text is really quite tight, and it feels a bit smushed together. And now I’m going to increase the font spacing on these, the letter spacing, and see how much easier the lettering gets to be to read.
>> AMBER: Yes, that really doesn’t make a difference.
>> GEN: On the Arial and Helvetica, it really makes a big difference, I found. Just adding a little personal space to the letters so they’re not jammed on top of each other.
>> AMBER: Yes. Look at that. I think too, like, looking at the… This is a great example of the ambiguous. So I think that says, “T, capital I, lowercase L?
>> GEN: Yes.
>> AMBER: The lowercase L… And maybe this one is the PT sans, I’m not sure, but it’s…
>> GEN: This is PT sans, yes.
>> AMBER: It’s barely different to me, at least on my screen and the size that I’m seeing.
>> GEN: Whereas if I pop over to Verdana for the accent font, you’ll see here you get a lot more differentiation between the letters.
>> AMBER: Yes.
>> GEN: Where that capital I has got the little cap on the top and the bottom so that you can really see the difference between the I and the L. And the 1 has the little curvy tail and a little bit wider bottom, so you can differentiate the 1 from the capital I.
>> AMBER: Yes. So Mark asks: “When you say ‘accessible,’ do you mean that it passes all WCAG AA criteria?”
>> GEN: I guess my question is, what context?
>> AMBER: Yes. I don’t know.
>> GEN: We’ve been using a lot of different contexts.
>> AMBER: Yes. Generally, at least for us, when we tell clients, “accessible,” that’s what we say. We’re not attorneys, so we don’t ever tell them that we’re building them an ADA-compliant website, or Ontarians with Disabilities Act-compliant website, because I don’t know about laws, and I’m never going to promise them that I’m complying with laws.
So that’s what we generally mean when we’re talking to them. But I caveat that with, “We promise accessibility of things we build.” So headers, footers, pages, where we’ve put all the content in as part of having a design, but we never tell someone we’re giving them… And I don’t know if this is the same for you, but we don’t ever give them a 100% accessible website, because we’re frequently, like, importing in blog posts that they wrote previously. And unless they’re paying us to go look at them and fix them, I have no idea. They could be missing alt text on their images, like, there could be a lot of stuff. You know, they could have highlighted the word “here” and made it a link. [chuckles]
>> GEN: Yes. I have a similar thing. So especially with when I do the one-day builds, the clients are also in there frequently doing some of their own editing to help get the content populated, as it also gives them a chance to use the WordPress editor, so that they can put in some other blog posts, so that they know how to use it, they can ask questions about how to use it. And they can then go duplicate that five times. And there’s nothing like repetition to help build a habit. So of course I can’t guarantee what the client is inputting.
>> AMBER: Yes. Someone asked what brought both of us to the web accessibility space. I can share my story later, but do you want to share your story, Gen? Like, how did you get interested in accessibility?
>> GEN: Probably a discussion on a Facebook group. I honestly don’t really remember what it was.
>> AMBER: Yes. Well, that means that you saw it on Facebook and decided to explore it.
>> GEN: I see a lot of things and go explore them.
>> AMBER: [chuckles] Yes. That’s awesome. My short answer is just that we got hired to build a website for a university. And they’re, like, “It will have an accessibility audit before it launches.” And I was, like, “Oh, OK. Got to learn about that.” And there was a little bit of a learning curve. But then I think… Yes. We started hiring people with disabilities and people who were blind and use screen reader to tests our work, and that really brought it home for me, I think.
>> GEN: Yes. I guess there’s another question. “Once carousels are out the door, what alternative presentations achieve what the client wants and makes them happy?”
I guess, for me, frequently, I’ll just do something like… One of the most common uses of a carousel is testimonials. So I will do three columns, and I will put three testimonials there, and then a button/link to go to the testimonials’ page to read more. Or if they really want more testimonials to be available, I’ll use something like toggle area, so that you can basically click to read more testimonials. And then it’ll expand down the toggle to content, and then you can read another six, for example.
>> AMBER: Yes. Or another thing on that is you could just say instead of having one carousel of testimonials, we’re going to intersperse them throughout the page. So there’s only ever one at a time, but they still get the same three or four or whatever you would have in the carousel as they scroll. Yes.
So the combination of reading research from Nielsen Norman [phonetic] Group, which does a lot of user-experience research, and they have found that most people don’t engage with carousels, and they don’t click on them.
I’ve even run Hotjar on our website, which, if you’re not familiar with it, it’s a software for recording user sessions, and I have literally watched when we had videos, or we had, like, testimonial carousels… And we still do have some of those. No one clicks on them. Like, maybe it’s enough. This is an interesting conversation we had, which is, does it matter that nobody read the second, third, fourth testimonial? Because they saw the first one and they just know there’s more? You know what I mean? So they see the little dots and they’re, like, “OK, well, there’s more of these, but I don’t care.” It’s enough to say that there’s more than one bust.
I just don’t see people really engaging with them. And so I think coming up with other unique design themes is helpful.
>> GEN: Yes. I find if you actually… One site, we’ve done the just three testimonials and then, “Click to read more.” No one ever clicked the button, but you did see from their mouse hovering that they did hover over all three of the testimonials, because they were short. We’ve shorten them up just a couple sentences. And they did actually, with their mouse, show that they actually went over all of them. They glanced at the button and move down. Because the mouse hovers on the button and then just goes down the page.
>> AMBER: So it’s like the same thing. It’s enough for them to be, like, “OK, there are more people that are happy, right?” Yes.
It’d be interesting to know, like, from Amazon or whatever, right, how many people just read the top and the worst, and never bothered to read all of them.
>> GEN: Most, I’d say.
>> AMBER: Yes. They’re just, like, “OK, that gave me what I needed.” So.
Mark said, “I think when it comes to accessibility, many people mean different things.” So circling back on the accessibility topic. “For example, there’s no way to make things accessible to every person, but we can meet specs. Also, someone can say this is accessible to herself or a blind friend.”
>> GEN: I think that’s more a statement.
>> AMBER: [chuckles] Yes.
>> GEN: In terms of the alley, a11y, that’s just the abbreviation. 11 characters were removed from the word “accessibility,” so it becomes a11y. We use the same thing with internationalization. It becomes I18N, because 18 letters got removed between I and N?
>> AMBER: Yes. I don’t know when he was asking that question, what do you mean when talking about L and Y accessibility, if he’s wondering, like, in your context, are you measuring against WCAG or are you going for something else?
>> GEN: Generally speaking, I’m measuring against WCAG, but I’m also trying to provide something that people can use.
When I do my introduction to accessibility talks, I start out with, “OK, who is a person? Everyone raise your hand if you’re a person.” “OK, who’s had a headache sometime in their life? Everyone raised raise your hand if you’ve had a headache.” “OK. When you had a headache, things were not great, right? You were short tempered.” And then people will frequently say, you know, other things that they experienced when they had a headache and how that was very challenging, and things that were harder, and they couldn’t focus. And I’m, like, “OK, you have now basically just listed off a whole bunch of disabilities. Things that are disabilities for people. So now let’s try and focus on people, real people just like you who have problems.” And that’s, like, “Oh, wow, we just said yes, like, five times to having these problems. I guess we better pay attention now.”
>> AMBER: I love that. I love that. So I feel like I really appreciated doing this. You talked about a lot of ways to make it relatable. You know, whether it’s, no one understands what 18 point font is. [laughs] Even I had to Google it and be, like, what is [inaudible]
>> GEN: I had to go look it up, because I don’t remember.
>> AMBER: Yes. Like, every time. Or just relating accessibility or disabilities to experiences that we all have in our life all the time.
So thank you very much. I think that was all of our questions. Do you just want to remind people where they can find you if they want to follow up?
>> GEN: Yes. Let me just escape, because I just updated the slide. So I’ve got some links and the slides will be available as well. So just some information about me is on my website. The Kaya theme which I maintain is available on GitHub, and the tools that we listed off during the presentation are here as well.
>> AMBER: Great. Do you mind throwing a link to the slides in the chat right now?
>> GEN: Sure.
>> AMBER: Thank you so much.
>> GEN: There you go.
>> AMBER: OK. Thank you, everyone, for attending. As a reminder, we’ll be back for a… Oh, wait, I got to find the date. [laughs] I’m not going to remember.
>> GEN: June 14th.
>> AMBER: Yes. On Wednesday, May 14, for Accessible –
>> GEN: June.
>> AMBER: – fluid typography. It’s May. June. It’s June 1st now. [chuckles] Wednesday, June 1st. [stammers] All right, I’m going to let someone else say this. [chuckles]
>> GEN: Wednesday, June 14th is the next meetup for the WordPress Accessibility Meetup group.
>> AMBER: Thank you, Gen. [laughs] Apparently I cannot handle things speaking well today.
So we’ll be back then. And feel free to reach out if you have any questions to Gen following her presentation.
Thanks so much.
>> GEN: Yes. Find me in the meetup group and in the Facebook group.
All right. 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.