Melissa Rice (00:00:00):
I’m your host, Melissa Rice. Today is our 36th episode of SEO for Bloggers. We’re covering a ton of topics today that will navigate the landscape.
Arsen Rabinovich (00:00:11):
Literally, so excited!
Melissa Rice (00:00:13):
I know! Okay, let me start over. We’re covering a ton of topics today that will navigate the landscape of usability and accessibility in the blogging sphere. With us today, we have our seasoned experts, Casey Markee of MediaWise and Arsen Rabinovich of TopHatRank.
Filling in for Andrew, we’re excited to have Heather Wilkins of NerdPress. I’d also like to introduce our very special guest and knowledgeable accessibility professional, Natalie MacLees. Hi, Natalie.
Natalie MacLees (00:00:42):
Melissa Rice (00:00:44):
Natalie, would you like to share a little bit about yourself and what you do and how you came to be an accessibility expert?
Natalie MacLees (00:00:49):
Sure. I’m currently co-founder and COO at the N Squared, a small software company. We are currently working on a product called AAArdvark, which will be launching in about two months, which will make accessibility testing on our websites easier and faster.
How I got to be an accessibility expert is I started building websites in 1996 and very early on in my career I got a job at Penn State University. Penn State was then and is still now a leader in web accessibility. I had tons and tons of job training thrown at me for how to build websites in an accessible way.
Then after I moved on from that job and started working other places, was shocked and dismayed to discover that other agencies and companies did not share that vision. I became the defacto accessibility advocate and expert training everybody. Telling everyone why they should build thanks to be accessible and I carried that with me when I started working for myself.
Melissa Rice (00:01:57):
Awesome. We’re honored to have you. Thank you.
Natalie MacLees (00:02:00):
Melissa Rice (00:02:02):
Just as a reminder to our audience today, we will have a Q&A at the end, so please feel free to drop any and all questions in the Q&A section, which you can find below. As always, continue to chat us in the chat box and let us know where you’re tuning in from.
We’ll kick this right off. Natalie, first question going to you. Can you help to explain to our audience what exactly usability and accessibility is?
Natalie MacLees (00:02:30):
Sure. There’s some overlap between the two. If it was a Venn diagram, there would be a little bit of overlap between the two circles, but they are generally two separate concepts. When we talk about usability, we’re focused on all users in general and we’re looking at things like how learnable is the interface.
Like when someone encounters your website or your web application for the first time, how quickly can they learn their way around? How quickly can they learn how to find content, accomplish tasks, et cetera? We’re also looking at how efficiently can they accomplish those tasks.
Do they have to waste a lot of time doing tedious side things or dealing with other problems in the interface or can they just move along and do things quickly and efficiently? How often are they making mistakes and making errors and recovering from those errors?
If they leave the website or web app for they go on vacation, they don’t use it for a couple of weeks, they come back, can they quickly recover their memory on how to use it because it’s memorable? Is that something they can come back and pick up again?
Then finally, are they happy using it? Are they satisfied with the experience of using the website or the web application? The funny thing about design is we don’t notice it when it’s good. We just take it for granted when something just works. We only notice bad design. Good design is mostly invisible.
Arsen Rabinovich (00:04:09):
Very, very true.
Natalie MacLees (00:04:12):
The best case scenario for usability is no one’s complaining and it’s just silence.
Melissa Rice (00:04:19):
Natalie MacLees (00:04:19):
You’re not going to really get anybody but other designers raving about how usable something is.
Melissa Rice (00:04:24):
The unsung heroes.
Natalie MacLees (00:04:31):
Yes, exactly. Accessibility breaks down very nicely into four key principles which are outlined in the web content accessibility guidelines and they create the acronym POUR, P-O-U-R. The first one is perceivable, which is to ensure that everybody can perceive your content for people who can’t see, people who can’t hear. People who might be colorblind and can’t perceive color. They can still get access to the information that you’re sharing.
The O is for operable, which means they’re able to operate the website or the web application. If somebody can’t use a keyboard, they can’t use a mouse, they use a screen reader, they’re still able to navigate through the website, find content, add products to the cart and checkout. Everything that the website can do can still be accomplished.
Then the U is for understandable, which is where we see the biggest overlap with usability because how quickly can someone understand the interface and know what they need to do. If somebody has cognitive disabilities or reading or learning disabilities, can they still get information from the website and understand what it’s all about?
Then, the R is for robust, which just means is the website built well enough that it will work no matter what kind of device somebody is using to access it? If you’re on a mobile phone, a tablet, a desktop, a laptop, if you’re using a refreshable rail display, a screen reader, it works with all of those devices with no problem.
Accessibility and usability often go hand in hand. A good example is closed captions on video because those are really helpful for people who are deaf, which is an accessibility concern, but they’re also just helpful for anybody who’s trying to watch a video in a busy Starbucks and they can’t hear it that’s where it becomes a usability issue.
Making sure that the language on your site is simple and straightforward is really helpful for somebody with learning or cognitive disability, but it’s also helpful for non-native speakers of the language. Also, just helpful for all of us who are busy and distracted and don’t want to spend a lot of time rereading texts to make sure we understand it.
It is possible to build something that’s very usable and not accessible and vice versa, so you have to be careful. Usually, the two do go together and compliment each other nicely.
Melissa Rice (00:07:06):
Best friends. Could you elaborate a little bit on how accessibility and usability impact search?
Natalie MacLees (00:07:16):
Sure. There’s a good amount of overlap with accessibility in search because in both cases you’re trying to communicate your content to a machine or a computer or a robot. With accessibility, you’re trying to communicate with assistive technology that people might be using to access the website. Obviously with SEO, you’re dealing with the SEO crawlers.
Some things that could help both is like correctly using heading tags for your sections and subsections of content that helps crawlers understand what your page is about and how the information is organized. Does the same thing for assistive technology for people who might be using it correctly.
Using lists like unordered lists or ordered lists for lists of items, making sure your images have alt texts, ensuring videos or audio has transcripts or captions. Then when we get to that robust principle from accessibility, ensuring mobile responsiveness will help because Google does check to be sure that your website is mobile-friendly.
Clear and straightforward text content helps everybody all the time ensuring that the website works with keyboard only, so you don’t rely on a mouse. You can navigate through, you can add something to the cart, you can check out, you can do anything that you would do with without using a mouse.
That’s helpful for SEO because of course, SEO crawlers aren’t using a mouse, so they won’t be able to get to content accessible with mouse only. Then ensuring that you have good meta descriptions and page titles. In many, many ways making your website accessible improves SEO, which makes it not just the right thing to do, but also a smart business practice.
Then, as far as how you usability impacts SEO, there’s less direct overlap with accessibility than with accessibility in SEO. More usable sites, people are going to be happier using them. They’ll have a lower bounce rate and more time on site, which is going to help having that mobile usability will help boost your ranking.
Faster load times helps everybody, makes the site more usable, makes it feel more responsive. Then just having your content be really well organized and high quality contributes to a better user experience, but then also helps SEO.
Melissa Rice (00:09:54):
Excellent. Heather, next question is going to go to you. In your experience, what’s the most common usability and accessibility issues across food blogs?
Heather Wilkins (00:10:05):
There are a few and I think we’ll probably hear them again and again. Natalie already mentioned some of them links, not underlining links or making it really apparent that a link is a link descriptive text for links. Links that say read more or click here, or see all aren’t great because they’re not telling the visitor where they’re going when they click the link, so you should have really descriptive text and links.
Low contract contrast texts, when the text is a really close color to the background, it makes it really hard to read. That’s a big one we see really often. Headings, which is something that Natalie mentioned, headings out of order can make it really difficult because a lot of screen reader users use headings to move through the content.
If you use headings for decorative purposes instead of actual headings, that can cause issues for accessibility. Again, Natalie also mentioned navigation. Being able to tab or use keyboard navigation is a really big one we do see. Then the final one is missing or poor alt text for images.
Your images, your alt tech shouldn’t be your Pinterest description or keyword stuffing. It should describe the image for someone who’s visually impaired, so that they can see that in their mind basically.
Melissa Rice (00:11:21):
Perfect. There was a lot of questions from people registering about that and I really appreciate the insight. Arsen, can you please explain the best way to ensure that hyperlinks are user accessible?
Arsen Rabinovich (00:11:34):
I’m going to post a few links into our chat for reference. There’s a lot of documentation out there. Look, WordPress out of the box, well, I don’t want to say out of the box, majority of the themes that you’re using right now already doing this for you.
A few things that you have control over, you want to avoid using anchor text, like click here more, read more, find out more, click for details. You want to try to avoid, including the actual URL as the clickable part of the link, so make sure you have descriptive anchor text.
Obviously, you want to make sure it’s stands out that it’s consistent across all of the links on the page, color-wise, font size. You want to underline it, you want to make sure that it’s a different color than the rest of your text. Yeah, there’s a lot. I’m going to paste a few things. There’s documentation directly from Google and here comes that link. I think Casey already posted that.
Melissa Rice (00:12:36):
Right on top of that.
Arsen Rabinovich (00:12:37):
Then, there’s recommendations from WCAG that I’m going to post in here also. That’s what you want to follow.
Melissa Rice (00:12:47):
We’ll get a little bit more into details too going forward. Heather, how many links are too many in a single post? Is there a number?
Heather Wilkins (00:12:56):
There is no such thing as too many links in a post. You should use as many as you need. I think for links, the most important thing is to follow those accessibility standards and that Arsen just mentioned making it apparent there links making the text descriptive and useful, not the see all read more. It is not about numbers, it’s about making the links themselves accessible.
Melissa Rice (00:13:19):
Perfect. There’s a lot of people asking that question too.
Casey Markee (00:13:22):
We’ll add onto that. It’s funny because Google does not come out and say much about this, but they actually do. I actually did find a quote from them on this. I’m going to paste it over, it’s really interesting. You can take a look and basically this is an old citation that John Mueller was asked and that was in 2021.
It’s basically common sense, every page has a finite amount of page rank or authority as we call it. I know that Arsen specifically likes the concept of Link Juice. I know that he has Link Juice every day. It’s a nutritional supplement for him. He loves it.
Arsen Rabinovich (00:13:54):
It’s a pre-workout juice.
Casey Markee (00:13:55):
It’s a pre-workout, same here. I love me some Link Juice. It’s always, we want to watch how we’re linking on a page. We always want to make sure that the links are there for a purpose. What we don’t want to do is stuff a page with too many links. People always ask, “Well, how many links is too many?”
Well, it used to be a hundred. Google actually for many years said, “Hey, if you got 100 links or more on a page, it’s too many.” Then of course that was a decade and a half ago, but this is a great citation here, pretty relevant last couple of years, where he talks about specifically that there is such a thing as too much.
You really need to be thinking as you’re linking. We talk about this in all of our resources. We want to link naturally from the top of the post to the bottom, but we want to do it when it’s helpful for users. I don’t need to have every instance, I’m going to use Tasty Links. Many of you’re familiar with Tasty Links, which is a very common affiliate tool that’s been around for a while, very popular in the food and lifestyle niche.
I have been seeing huge abuse by Tasty Links lately where literally every instance of say salt has been hyperlinked in an article. Guess what? Yesterday it was 26 examples of salt being linked in an article. That’s the kind of stuff that we’re talking about when there’s too much linking going on.
We don’t need to make sure that everything, especially when we automate linking, we get into spammy situations like that. Please, if you’re using something like Tasty Links, dial it down just because you have 26 examples of salt or what’s the other one? Cinnamon on a page doesn’t mean that we need to link every one of them to an affiliate link on Amazon. The life you may save may be your own, so watch that.
Melissa Rice (00:15:32):
Wise words from Casey. Thanks, Casey. Natalie, you touched on a little bit earlier about alt text, but how detailed do you need to be to describe a picture for alt text?
Natalie MacLees (00:15:50):
Depends on the type of image and generally speaking, there’s three kinds of images. One is decorative images, which are just there to look pretty like a floral border or like a fancy separator or something like that. Those should not have alt texts at all. They should have an empty alt attribute.
We have functional images, which means something happens when I click on it. It takes me to another page or it adds an item to a cart or something like that happens. For functional images, the alt text should describe what’s going to happen when I click the image.
Then finally, the third kind is informational images, and those are information that, I’m sorry, images that convey some kind of information to the user. For those you do need to be really concise and keep the length of the alt text to around no more than 150 characters.
Casey Markee (00:16:47):
Which is a lot, that is a lot.
Natalie MacLees (00:16:52):
That’s a lot. To be clear, that’s not a technical limitation, it is a usability limitation. Alt text is a little unwieldy to deal with in a screen reader and when it gets too long, it really impacts the user experience for screen reader users, that’s why you want to keep it short.
As for how much detail you need, you want to give the relevant details based on the context in which the image is used. If I’m writing an article on how to make meringues and I have a picture of what the egg whites look like when they’re whipped to stiff peaks, and I have with that picture, I’m going to just spend my time in the alt text describing what the meringue looks like.
What properties of it am I looking for. I’m not going to talk about what color the mixer is, what color the bowl is, what’s sitting on the counter beside the mixer. Is it a granite countertop? I’m not going to talk about any of those things. You’re going to just focus on the relevant information in that image.
Casey Markee (00:17:55):
That’s a really good answer. On that topic, the blind have no concept of terms like closeup or top view or side view, or things like that. We don’t necessarily need to be including that kind of detail in an alt text ever, and I see that all the time. When you’re putting your alt text together, as Natalie has said, focus on the general consensus area, the main viewpoint of the image.
There are many times when you’re doing process shots that you might get off track and note there’s other things in the background. Unless this is a hero image or this is a image of the ingredients, then you don’t need to get that much in detail for alt text in general.
Natalie MacLees (00:18:38):
You also don’t need to say image of, or picture of.
Casey Markee (00:18:44):
Image of picture of, top view, side view, we don’t need any of that stuff.
Melissa Rice (00:18:48):
Awesome. Casey, I’ve got a two part question coming up here. First part is should bloggers go back to update older posts to make them more accessible? If so, do you have any recommendations on how to start or how they can do this?
Casey Markee (00:19:04):
Well, alt text is a ranking factor. Alternative text is a ranking factor, especially considering how poor alt text is when we do the general audit. If you’re going back and making changes on your post, and you will generally be doing a lot of that. If you’ve had an audit with me, we’re going to go back and update the quality of the content and the presentation of the content.
That involves accessibility, things like using correct headings, making sure that they’re sequential, making sure that our links are correct, making sure that our alt text is detailed but not spammy. Little things like including a period at the end of the alt text so the screen reader knows, “Hey, the alt text is over.”
That might be novel to some of you, but that’s what needs to be done. Now would I have you go back through the entire site and add periods to the end of your alt text? No, because that’s not a good use of your time. If you’re going to be in the post anyway, and I just felt to do that, this is something that I would start making an internal list to do.
With regards to how we would approach it’s a marathon, not a sprint. When people go back through and start updating their content, accessibility should be at the forefront of their mind. Making sure that we fix those color contrast issues, making sure that our headings are correct and sequential.
Making sure that we’re not using capital case when we should be using title or sentence case, making sure that our links are discernible, all of that definitely.
Melissa Rice (00:20:24):
I think you answered a little bit of the second part of the question, which was if they should go back and update the older alt tag descriptions.
Casey Markee (00:20:32):
Yeah, I know there’s some tools around there out there that will allow you to automate a lot of this. They are relatively pretty bad, I mean, you’ve seen some of these AI tools, these AI tools that come in and write these incredibly bad anchor techs or these incredibly bad alt texts.
You’re like you’ve just got to go through and make sure that you’re physically reviewing the output every time. I mean, they’ve gotten better, but they’re still pretty bad. You would never want to just go ahead and have something go through automatically generate all of your alt texts without you having the final say or reviewing those physically to see how they come across.
Natalie MacLees (00:21:05):
Those tools miss the context of why the image is there and then describe the wrong part of it.
Melissa Rice (00:21:12):
So unfortunate. I think Carol had chatted you something. Casey, just to be clear, they should add a period to the end of alt text.
Casey Markee (00:21:21):
Yeah, absolutely. Alt text and whether you’re using NVDA, I always pronounce it NVDA the NVDA or Jaws, which are the two screen readers, both of them look at the, they know the alt text is over when they see a period.
Melissa Rice (00:21:37):
Got it, thank you. Heather, what are the best practices for making the recipe card accessible?
Heather Wilkins (00:21:44):
Well, first I want to start with a plugin that has accessibility in mind. The developers are aware of it and on top of it. One example is use a recipe card that uses fraction symbols because if you think about one/half with a screen reader that if it’s a symbol, they’ll actually read one half instead of reading in that awkward manner.
The good recipe card plugins supports fraction symbols rather than the just the typed out text. Another thing is recipe acronyms, avoid doing TSP or TBSP or OZ, spell it out. Just because a lot of screen readers will read OZ instead of ounce or TSP literally instead of teaspoon for example. Then, a lot of the recipe card plugins give you the option to customize your recipe card.
Be really aware of things like font sizes and underlining your links in your recipe cards because some of them have the option to set that and your theme won’t take over and add the underlined to your text. Make sure your color contrast is good, your text sizes are good.
Make sure that it’s all consistent throughout the main body of your content as well as into the recipe card. You want it to make sure that it’s not jarring. There are links in the body and then there aren’t underlined links in the recipe card.
Melissa Rice (00:23:03):
Excellent. Arsen, this was a big one for people opening links in separate tabs. When is it a good practice?
Arsen Rabinovich (00:23:12):
Almost never according to Casey. I’m going to post an article that Casey wrote on Search Engine Land here, and we specifically want to look at section four of that article. Don’t do it now, but in short, everything should be open in the same tab unless there’s a special reason like it’s an affiliate link.
Everything should be open in the same tap, always. Casey will shake your fist. Shake your fist, Casey, there you go.
Casey Markee (00:23:44):
Again, I’ve tried to summarize it. It’s funny, I remember this coming out and thinking, “That DM Casey Marquee, now he wants us to do all this.” I’m like, “Whoa. Hey, let’s slow your role. This isn’t me, this is WCAG coming out and saying we’ve changed the guidelines in December.”
I’m just the sucker who noticed it and decided to talk about it in the Search Engine Land article. Just understand that I’m doing you a favor, now you know what the best accessibility practice is. I for years was totally fine having all external links open in new tabs, but it makes sense. We want to eliminate tab fatigue.
We want to make sure that we’re uniform across our recommendations and this works out. Here is the direct link to the W3.org guidelines talking about this new change. You can take a look at that yourself, but this isn’t anything new. I try to make it as clear as possible in the article. If you have an internal link and you have an external link, we should open them up in the same tab.
The only difference is we find that users tend to affiliate links opening in new tabs because it’s a lot easier for them to ignore them, so there you go. That’s the best usability argument you’re ever going to get to making sure that your affiliate links continue to open up in new tabs because that’s better for your audience.
Arsen Rabinovich (00:25:03):
It’s also a good practice to let your readers or your visitors know that a link is going to open in a new tab.
Casey Markee (00:25:10):
Yeah, exactly, and that’s covered in there too. That’s why many of you’re familiar with the Blog Fixer. The Blog Fixer was really kind. I reached out to him. I asked him, “Hey, just to let you know the recommendations have changed. I know you have a very popular link target fix.”
He was really quick about updating it, testing out an automated fix that allows you to add a little notice, so that if the links are opening up in a new tab that the user is aware. I applaud him for doing that. Chris is his name. He did a great job and if you’re looking at a way to automate this, look at his fix.
It’s the only other option out there that’ll do this or you can buy a plugin like WP External Links. Heather’s familiar with that. I know that they use that in-house. That allows you to set your own little icon so that you can let people know when a new link is opened up in a tab. You can go in and make these changes sitewide on your own schedule.
Melissa Rice (00:26:06):
Okay, moving forward. Natalie, excuse me, if blogger use alt text to describe what’s in the image, should they also try to add a few subtle keywords here or there?
Natalie MacLees (00:26:21):
Know alt text has lots and lots of potential to help with SEO, but I would like to remind everyone that alt text is for people first and robots second. That said, it’s okay to put in a keyword here and there if it’s relevant to the image, the context, the image is used in the content on the page.
If it sounds natural in the out text, remember screen reader users are going to hear that alt text read out loud, so read it out loud so you can hear how it sounds. Does it sound natural? Limit yourself to no more than one maybe two.
Melissa Rice (00:27:00):
I think somebody asked in the chat if they should put the title of the recipe in there. That’s not necessary.
Casey Markee (00:27:08):
No, unless you can naturally insert it. This is a strawberry cheesecake sitting on a table with three slices cut out of it. There you go, that’s totally acceptable.
Melissa Rice (00:27:25):
Perfect. Also, Natalie, what is a good process to perform these regular accessibility audits? Are there any specific guidelines or tools for testing the desktop and more so mobile version of a food blog for accessibility?
Natalie MacLees (00:27:42):
One thing I would start with is that accessibility is not a one-time task. It’s not something that you’re going to do an audit, fix all the problems, and you’re done with it forever. Accessibility tasks will be ongoing as long as you are adding an editing website content to the site.
For performing regular audits, I would say to be clear about what your goal is, because getting to where 100% of your pages meet 100% of the web accessibility guidelines is not realistic. You’d want to decide what will be tested. You’re going to have to make some tough decisions based on your budget.
If you hire a professional to conduct a manual accessibility audit, it will cost between $100 and $300 per page that gets tested. Maybe you just want to start by doing your top 50 pages or your top 100 pages, and then you can work on others later on. Decide if you’re going to hire someone, if you’re going to try to do it yourself.
Then, my biggest recommendation would be to hire people with disabilities to do some testing on your site. The World Institute on Disability and then WebAIM, which is Web Accessibility In Mind, both offer services where you can work with them to hire people with disabilities to try out your site.
To settle that beforehand for the audit and audit consists of both automated and manual testing and you would want to do the manual testing on different devices. Then also, doing real live user testing with users with disabilities because I as a tester can go in and I can open up a screen reader and test a page with a screen reader, but I’m not an everyday screen reader user.
I don’t use a screen reader the way somebody who relies on one every day uses it. I might miss some important issues that somebody who uses a screen reader all the time would find. At the end of an audit, you’re going to have a to-do list, you want to prioritize it, assign all the tasks, set deadlines, because if there’s no deadlines, it will never happen, fix all your issues, retest.
You can monitor with automated testing on an ongoing basis and then decide when you’re going to revisit manual testing. That’ll depend on how big your site is, how often you update content. It might be as often as once a quarter. It could be as infrequently as every year or even every other year.
As far as guidelines that you’ll use, you use the Web Content Accessibility Guidelines or WCAG, probably 2.1 AA is generally the accepted standard for accessibility. Common things that you would look for. We’ve already mentioned some of them. Color contrast, alt texts, make sure audio and video have captions or transcripts. Make sure you can go keyboard only.
Make sure on mobile elements are large enough to be topical, right? You can hit something really small with a mouse on a desktop, but your big fat finger on a screen needs a lot more space. Make sure your text is of a size that it’s readable the images scale to the screen.
For tools for automated testing, of course, I would be remiss if I didn’t mention my own AAArdvark launching in two months. There’s also other great tools that are free ACTS from the queue, WAVE, and Lighthouse, which is built right into Chrome.
For screen readers, the most common screen reader that people use is Jaws, but it is unfortunately not free and it only works on Windows. It’ll cost about $100 a year. NVDA is free, works on both Mac and Windows. Then, on mobile devices you have a Voiceover on iOS devices, TalkBack on Android devices included already on the device for free.
Of course, all Mac desktops laptops have voiceover on them as well. For manual testing, there are unfortunately not a lot of tools for manual testing, which is one of the main reasons that we’re building AAArdvark is it will help you with that. I do like a tool called ANDI, which is from the Social Security Administration of all people.
It does really help if you just need to go through all the images on a page and check their alt text and make sure it’s good. It makes that really fast and easy to do. Then the ACTS tool from the queue I mentioned earlier, actually has a pro versions that does have some help for going through and doing manual testing.
When you’re testing on mobile devices, if you have an iPhone for example, and you’re working with a Mac laptop, it’s already built in that there’s a way to connect that device to your desktop, which will help you to debug and find issues a lot better. There’s the packages and things you can download to make that work with any platform.
Then there’s also plugins for different CMS systems that you can install that will run some automated accessibility checks, tools, guidelines, audits, all of it.
Melissa Rice (00:33:08):
From the sound of it, a lot of it’s free.
Natalie MacLees (00:33:11):
There are a lot of free tools, yeah.
Casey Markee (00:33:13):
I pasted three of the most popular free options for you that you can install on your browser in the chat. The WAVE accessibility tool, the ACTS dev tools extension, and of course the Lighthouse Chrome extension, which has a lot of built-in accessibility options there along with the page speed options.
Definitely check on those, those are free. Everyone should be aware of them. I know we’ve shared them previously in other webinars.
Melissa Rice (00:33:37):
We’re also going to have our recap posted in about a week. We’ll have everything that Natalie discussed linked there too. Moving on, Heather, this is pretty popular. Is there a list of website colors that should be avoided at all costs? A lot of people want to know.
Heather Wilkins (00:33:57):
The answer is no and there’s a couple reasons why. In accessibility it’s more about the contrast than the actual colors. For example, you could have a very, very light gray color on a white background that would be unreadable for most people, but you take that very light gray color and put it on a black background and it’s probably fine.
Contrast, especially people with low visibility or low vision issues, the contrast is actually the bigger issue. Really, the one thing you really want to focus on is contrast and WebAIM, which we’re just talking about, has a good contrast check tool and it’ll check for both the WCAG AA and AAA standards.
You put in your background color and your foreground color, that’s where your contrast comes. If you think best contrast is a white black background with pure black text or a black background with pure white text, it’ll give you a ratio and it has nice little indicators that say pass or fail for those different standards.
It’s a really simple tool to use. I highly recommend that one. I think the other thing that a lot of people think about with colors too is colorblindness. You think red green, you think blue-green colorblindness. I actually have an interesting story with Andrew.
One of our team members mentioned in a tool that we use, it’s a charting tool that we use that we share with clients quite often that our only information or the only indicator of certain information was color, the color of the lines. Some of them were blue and some of them were pink, so it could be affecting users who are colorblind.
Andrew started doing some testing and his dad happens to be colorblind, so he’s sending his dad these different versions and actually his dad got really frustrated because the first version was the best version. Different colorblind conditions affect people differently.
For example, I have blue green colorblind family members, and they can see the more vivid colors, but it’s the lighter colors, like two light green shades look great to them. The contrast is going to be more important there because even if they can’t see the green color, the contrast between the background and the foreground is still going to be more apparent to them.
I think pretty much it’s all about the contrast. For links using underlines and other accessibility, if they can’t see red, they’ll still see the underline. It’s sticking with the other accessibility, but there’s not really any, don’t use this red color, don’t use this green color. Contrast is definitely the most important issue.
Casey Markee (00:36:27):
That was interesting about you’re talking about the graphs there. I think one of the easiest ways to get around that is just don’t use three solid lines. You have maybe a dotted line and you have one that’s very hyphenated and you have three different kinds of lines that’s not independent upon colors at all. Just from a viewpoint there.
Heather Wilkins (00:36:48):
Different shaped dots and stuff and that actually annoyed him even more because the first one was fine, even though he’s colorblind, he could tell the difference.
Casey Markee (00:36:58):
He could tell the difference. Got it.
Melissa Rice (00:37:03):
Arsen’s a little colorblind, aren’t you, Arsen?
Arsen Rabinovich (00:37:05):
Melissa Rice (00:37:08):
Do you see a lot of gray?
Arsen Rabinovich (00:37:09):
This blue shirt is great.
Melissa Rice (00:37:11):
Casey Markee (00:37:12):
Your blue shirt, fantastic, yeah.
Melissa Rice (00:37:16):
All right. Casey, what are the best practices for creating user-friendly navigation menus on food blogs?
Casey Markee (00:37:25):
Common sense, we just try to make sure that we’re not overloading them with too much in the window. Especially, we’re always optimizing for mobile first. When we can have menus that pop out, we want to make sure that they’re not overwhelming with too many choices.
We’ve mentioned tab navigation before. We just want to have to make sure that every menu that we launch is tested so that we can tab through the menu on a screen rater or on our keyboard. A lot of people are very smart. I give full accolades to Feast Design. I give full accolades to CultivateWP.
They do a very good job in making sure that their menus are design with this kind of accessibility and tab navigation in mind. We just want to focus on making sure that we don’t change what people expect. I’ve been seeing a bad trend lately where people are moving their menus to the right hand side of the screen.
They’re moving their about me section to the left hand side of the screen, which is not the normal viewing experience for users. Then people come to me and ask, “I just had a site redesign, why am my site not doing well?” Well, you just change, you move your entire right bar to your left and you’ve confused a lot of people.
People don’t like to get through all that extra space to get into the main content of the page. Please listen to me, folks. If you’ve got a site design coming up and you previously had a common right side navigation with your photo and maybe a sidebar and you’ve decided, “Hey, we’re going to try something new.”
Switch that to the left, expect to have problems because that’s not commonly accepted by users as they navigate content online.
Heather Wilkins (00:38:59):
I think that’s an excellent point. I used to do web design and a lot of users would come to me and want something really unique and different. I try to talk about it because people see no expected patterns. Like this is supposed to be on the left and the menu’s supposed to be on the top.
This is supposed to be here, the search button’s supposed to be here. When they don’t see that, they’ll get frustrated and leave your site. I will, because it’s so ingrained in me as a designer where things should be, they should be and if they’re not there.
Like Natalie was talking about how easy is it to use, how is easy is it to remember when you come back to this strange configuration on your site.
Casey Markee (00:39:39):
Simpler the menus, the better. I know that we tend to want to have on mobile, some of the most popular sites out there have five links on the mobile menu, that’s it. They have a home link, seasonal link, a link to the recipe index, a link to the about me page, and there’s a subscriber email offer.
It’s five links done and they have incredibly high conversions. Then we have a lot of other bigger bloggers who feel that they need to have these monster menus where every possible category is within a link. We don’t need to do that. As long as your content is within three links on mobile, you are going to be fine, that’s what all the data shows.
If you can provide a link to your recipe index and then your recipe index provides one to two jumps to everything else on the site, folks, you are good to go. Don’t reinvent the wheel if you don’t have to.
Melissa Rice (00:40:26):
Good point. I think that was a lot of concern for people that were registering for this episode. It’s like this balance between the aesthetic that they want and the function. Natalie, I know you’ve got something coming out later, but are there any other emerging technologies or trends in web design that bloggers should consider to enhance accessibility?
Natalie MacLees (00:40:49):
Yes, I would definitely keep an eye on the AI and machine learning space. There is so much as yet unrealized promise there. I have seen many attempts, nothing I could recommend using yet. Hopefully, we get there soon. There’s the automated accessibility checkers, for example, can only identify about 30% of possible accessibility problems and the rest has to be tested manually.
There’s so much promise there for AI to learn how to do some of that testing for us and to help move things along is probably the technology that I’m most excited about. Then, as far as trends, there’s a definite trend toward customization or personalization of an interface.
Where you’ll see things like offering both a dark mode and a light mode, which is wonderful for aesthetic reasons, but also great for accessibility because people might have a preference for one over the other based on vision impairment or just preference that might help them. They might read better with one or the other.
You could even consider offering other color schemes like a high contrast color scheme and a low contrast color scheme, for example. Then another fun trend is variable fonts, which if you’ve used traditional web fonts, if you have the regular weight, and the bold weight and the italic, it’s a separate file for every style.
You very quickly run into a case where you’re loading 12 or 20 font files on a website to get the coupon. A variable font file is one single small file that has all the styles, weights, everything all built into it. As a designer, you get a lot more options for what you can offer people in the UI.
We also, for accessibility reasons, get a lot more options we can offer users without impacting performance of a site. One user might prefer a really lightweight font, another one might read better with a bold font. To be able to offer them that ability to personalize and customize that interface is really helpful for accessibility.
Melissa Rice (00:43:08):
I’m such a fan of the light and dark mode, so I’m glad you did that. Sometimes it’s like for work stuff, I like the light mode. For social doom scrolling, maybe dark mode.
Natalie MacLees (00:43:24):
Just fits better.
Melissa Rice (00:43:26):
It matches my mood, but thank you so much. I felt like that really touched. Last question before we get to the Q&A. Casey, I’ll let you start off with this, but question both you and Natalie, can you give us a little bit more insight on the bill California AB-1757 and what it might mean for bloggers?
Casey Markee (00:43:53):
Went ahead and pasted over a couple of resources, but for those of you who are not aware of this, it is a house bill that’s been working its way through for the last several months and it basically tries to criminalize, and I don’t use that term, not lightly, it basically wants to criminalize web designers.
Their inability to put together 100% basically valid accessibility proof websites, which as Natalie and I has already mentioned, is basically impossible. It is impossible to have a site that is 100% ADA compliant because compliance changed depending upon the audience in question.
It’s just like the WCAG, those are guidelines, we want to adhere to them as close as we can, but when something is a guideline, there’s no way for us to really make sure that it’s not a moving target. The problem here is that the authors behind this bill are extremely naive in what they can and cannot enforce.
Also, it’s going to put a lot of this, really, they’re putting a standard on web designers and site owners to fix issues where they are not necessarily going to be able to fix those issues. What’s happening is this is something to be aware of. It’s working its way through and I would urge you to read it. Send a letter to your representative and tell them to kill this bill because it is terrible.
I’m not a fan of a lot of the stuff that goes on in California, especially in legislator. This will be a very bad, this will kill web design in California specifically. You could get the fees go up to something like $25,000 for every example of a site that you could get sued for not being compliant based upon these guidelines.
I’m not being dramatic about this. It is a bad thing. It could really destroy an entire industry, so to speak.
Natalie MacLees (00:45:43):
I think for me, there’s a good intention there that they want more websites to be accessible, which I completely agree with. I agree with the shifting some liability to the people who built the websites and/or the people building platforms that people build websites on. I think that’s an important thing to do.
The way this bill is approaching things, it doesn’t even make sense, and it’s pretty obvious that there’s not a whole lot of knowledge of the web design industry or the accessibility industry going into it. I did read just this morning that the bill has been extended, and it won’t be voted on this year.
It’ll be extended to next year, but it’s still not dead. That’s something that we need to be aware of. The most recent amendment to the bill, which came out about two weeks ago, said that all websites have to be certified by somebody holding the CPWA certification from IWAT.
There’s less than 600 people with that certification and millions of websites that need to be certified, this kind of thing. That just doesn’t make any sense.
Casey Markee (00:46:52):
Note to self, if you’re looking for a new career path, get that certification. immediately.
Natalie MacLees (00:46:59):
Casey Markee (00:46:59):
Get that certification. Just let me be the first to tell you I will have that certification by next year, and I’ll start to all of you a very standard fee and I’ll make it easy for you. Good times.
Natalie MacLees (00:47:10):
You’ll unfortunately with that certification be asked to put your name on a site saying it is 100% compliant, 100% of the pages are 100% compliant which is impossible.
Casey Markee (00:47:18):
I’ll also be moving to a non-extradition country when I provide those services.
Arsen Rabinovich (00:47:26):
I’ll also be charging to put Casey’s name on people’s websites.
Casey Markee (00:47:30):
Casey approved, good times.
Natalie MacLees (00:47:37):
Good intentions, but just terrible execution.
Casey Markee (00:47:41):
Very, very good way to put it. Yes, the road to hell and all paved with good intentions.
Melissa Rice (00:47:49):
Casey was again, the bearer of bad news, but do not shoot the messenger.
Casey Markee (00:47:52):
Yes, that’s right.
Melissa Rice (00:47:57):
Let’s preserve these next nine minutes or so to some Q&A. I’ll go from most upvoted. Starting with Jackie, “Panelists, what is your opinion on adding the estimated reading time into recipe posts?”
Casey Markee (00:48:15):
Wasted time, and the reason I say that is we’ve done heat map studies and no one even notices it. There’s also the, “Oh my gosh, this is supposed to take three minutes to read, it took me eight. I’m an idiot, I’m never going to come back to this site again.”
Melissa Rice (00:48:29):
Oh, no, self-esteem issues.
Casey Markee (00:48:31):
Yeah, so if you have poor self-esteem issues, you’re not going to want to see a reading time. Look at the pressure you’re under. “Oh my God, this thing says I have to read this in six minutes. Let’s do this. Let’s do it.
Arsen Rabinovich (00:48:44):
Melissa Rice (00:48:47):
Okay, right on. Let’s see, Tammy is asking, “How much of the usability is taken care of by the site’s theme? Are there factors that the site owner is responsible for?”
Heather Wilkins (00:49:01):
I think ultimately as a site owner, your business owner, ultimately you’re responsible for your site being accessible. If a theme developer advertises their theme as 100% accessible, then maybe that’s mis-advertising. It probably is. Which I consider some of the most accessible themes available, has a really great article about the accessibility
Casey Markee (00:49:26):
Definitely paste that over. Thank you.
Heather Wilkins (00:49:29):
They talk about the theme fee specifically can address about 20 to 30 of maybe a hundred issues. You’re looking at 20% to 30% of your accessibility issues being addressed by a theme that’s done very well for accessibility, so other themes probably don’t do quite as well.
The theme also is not responsible for all of your themes content. Your theme may be responsible for the CSS that underlines your links, but the theme doesn’t put the individual headings in your content in the proper hierarchy order and use headings properly. The theme can’t add your alt text.
A well done theme can get you part of the way. The same with plugins, plugins like recipe card plugin. If it’s done well, it can help you get there, but there’s a lot as a theme or a site owner or content writer that you have to be responsible for, be aware of and follow best practices.
You definitely want to look for themes and plugins that get you as far as they can for accessibility, but they cannot do it all.
Melissa Rice (00:50:25):
Do you guys have any suggestions off the top of your head? Anybody? Nobody. We’ll have to dig into that later for the recap. Thank you, Heather. Next question is from Joanne. We might have touched on this actually a little bit earlier, but there was a comment.
She says that, “The meta description is written for Google to understand what the page was about. I had been thinking that the meta description was written to entice the reader to click. Should we be thinking of meta descriptions more like image alt text?”
Casey Markee (00:50:54):
I think it’s a combination of both. I think you can easily entice the user to click on your meta description by telling them what’s on the page. If you’re looking for the most fantastic beef stroganoff recipe you’ll ever have, and mine’s ready in 15 minutes as opposed to 25, this is the recipe for you. There you go. You could do things like that and cover both of your bases, it’d be just fine.
Melissa Rice (00:51:18):
Thank you, Casey. Janice asks, “How do you test to determine if your site is navigatable via keyboard only?”
Natalie MacLees (00:51:29):
You can put your mouse on the other side of the room and hit your tab key a lot.
Casey Markee (00:51:36):
That’s right. Keep hitting your tab key.
Natalie MacLees (00:51:41):
Keep hitting your tab key. You click a link by hitting the return, the enter button, and you would click a button, like to submit a form, for example, with your space bar. There’s a little bit of a learning curve to learn what all the keys are, but tab to tab forward through the document shift tab to go backward through the document.
Make sure you can see where the focus is. You should see some kind of ring around each of your nav items as you tab across them, and that you can get to everything and do everything that you would if your mouse was on your desk.
Melissa Rice (00:52:16):
As somebody who loves keyboard shortcuts. I like that.
Natalie MacLees (00:52:19):
Melissa Rice (00:52:22):
Very cool, next question. Let’s see how much time we have. Five minutes, that’s great. Mary Lou asks, “What is the best way to update alt text and to make sure the descriptions pull through to the post?” I think Casey, you might have covered this a little bit.
Casey Markee (00:52:39):
Sorry, I’m just going to answer this one really quickly here. The question was what again? How do you make sure that the alt text comes through to the post?
Melissa Rice (00:52:47):
Casey Markee (00:52:48):
That’s a good question because we have been having issues. It doesn’t matter if it’s a feasting or others where sometimes they’ll just put in the alt text into the image field as they’ve uploaded the image, and for some reason it’s not getting pulled over from the gallery to the page.
I tend to just ask people to insert the alt text at the page level. When they insert the image into the page, look over right onto the right hand side, see if that alt text field is empty, fill it in, click save. Done.
Melissa Rice (00:53:21):
Natalie, I think you might’ve mentioned something to help Heather’s question here, but she asks, “Is there any good AI help out there for those of us who have historically neglected alt text?”
Natalie MacLees (00:53:35):
I’ve not seen one yet that I would recommend, to be honest. They’re trying, they’re trying hard.
Melissa Rice (00:53:39):
Natalie MacLees (00:53:42):
Maybe six months, maybe another year we’ll have something. Where they really fall down is they don’t get the context of the image, and so they end up describing just the wrong parts of the image. It doesn’t make sense and it’s not helpful.
Casey Markee (00:53:55):
Exactly. I will say, and I’m going to put my name on this one, this is pretty good. I’m going to go ahead and paste it over. This is alttext.ai, and you just have to play around with it. It actually will describe what’s in the image, and it’s pretty handy. I think I gave it 10 images and it got 8 correct.
I’ll take 80% all day. If you go in, just understand that that’s what you’re looking at. If you’re lucky to get 70%, 80% of the generated alt text be acceptable, you’re good. I would be shocked if it was much higher than that. I mean, we’ve seen a lot of tools out there that is 40% or 50%, that’s pretty bad. Just a lot of work for you.
Melissa Rice (00:54:38):
I think this question might’ve been answered by some other attendees, but what would you recommend? This probably should go to Casey instead of Tasty Links, I know you had some stuff to say about Tasty Links.
Casey Markee (00:54:49):
No, no, they’ve answered it easy affiliate links. That’s the only other option on there, you guys are good to go.
Melissa Rice (00:54:55):
Okay, cool. Mary Lou came back with another question. “What are your thoughts on the page? Speed accessibility checks and scores?”
Natalie MacLees (00:55:05):
Oh, the ones that are built into Google search pencil?
Melissa Rice (00:55:10):
Casey Markee (00:55:11):
Thoughts on the page, speed? Yeah, she’s probably thinking of Google PageSpeed Insights.
Natalie MacLees (00:55:16):
They’re okay. They’re okay as a start, but keep in mind that they’re only going to be able to identify 25% or 30% of accessibility issues. You’re still going to have to do manual checks on your page to make sure. Even if you have a perfect score there, you could still have some pretty serious issues on your page that you need to check for manually.
Casey Markee (00:55:35):
I believe that the main issues it focuses on is the sequential appearance of headings on the page, whether or not there’s color contrast issues and whether or not ARIA is in existence. That might be it, there might be one or two other issues, but that’s a small subsection of issues you’d have there.
Natalie MacLees (00:55:53):
Casey Markee (00:55:54):
Be aware of as you’re going through a page.
Natalie MacLees (00:55:56):
Color contrast can be really tricky. If you’re putting text over images or text over gradients. You’re going to have to check those manually and will be able to do those.
Melissa Rice (00:56:07):
Yes, the gradients, I shake my fist a little, that gradient. I think we’ve got enough time to get through all of these. Next question from anonymous guest, “Can you update alt text directly in the media section on WordPress, or do you have to go into each separate post to update?
Casey Markee (00:56:30):
We just answered that. You have to see how your site is addressing that. In many cases, you’re totally okay uploading an image to your media gallery with putting in the alt text at that time, and then when you insert that image into a post in the future, it will pull that alt text, but it’s not 100%.
Heather can speak to it. She sees it happen all the time. I know that that’s a common complaint. Even with it’s a Feast or a Genesis or some other custom site. It is really strange because sometimes we’re able to reproduce it, no problem, and sometimes we can’t.
My advice is common sense, insert the image into the post. Look onto your right hand side at the alt text field. If it’s empty, then you need to fill it out again.
Melissa Rice (00:57:14):
Heather Wilkins (00:57:15):
One thing we see is if they’ve edited the alt text in the post already, that it won’t pull in the media library alt text, so you’ll get a disconnect. It should hopefully pull in from the media library. Like Casey said, if you upload it to the media library and put it in the alt text, it should come in, but it may not always do that.
Melissa Rice (00:57:33):
Thank you. I think we can get the last one in. We’re just a minute past the hour here. “This may be a silly question, but including missing alt texts for the top three posts won’t affect the post Google ranking, correct?” Like the question.
Casey Markee (00:57:52):
The answer to that is it depends. Did we say, did we have an in depends today, Arsen?
Arsen Rabinovich (00:57:57):
No, not today. Andrew’s not here.
Casey Markee (00:58:00):
Didn’t have any it depends today because Andrew’s not here. The question is any change you make to a page can affect the page’s ranking, period. If you want to add alt text to it because you know it’s be more useful for users, great. You want to take your chance and not worry about it’s in the top three.
If it’s a top three post, we call those unicorns. Maybe you’re okay letting it slide this time, and if it happens to drop maybe four or five in the future, then if you want to be 100% comfortable, then you can go in and make the change done, but it’s really up to you.
Melissa Rice (00:58:32):
Carol, squeeze one last question in. Let’s just knock it out while we’re here. “After filling in the alt text, describing the image, but Yoast tells you it doesn’t have the keyword in it. What do you do?”
Casey Markee (00:58:42):
You ignore Yoast and then you go outside and do a happy dance or whatever you want to do. Yeah, you don’t-
Melissa Rice (00:58:48):
Live your best life.
Arsen Rabinovich (00:58:53):
Live your best life.
Natalie MacLees (00:58:53):
Arsen Rabinovich (00:58:53):
Cover the part of the screen with your hand and move on.
Melissa Rice (00:58:58):
Love it. All right, everybody. Just a quick update before we let you guys go. Don’t forget about our SEO Summit coming up soon, very soon. It’s almost already October 4th through fifth. Just a reminder, there’s still some tickets available, so you can go ahead and use our TopHatRank code THR199. Correct, Arsen?
Arsen Rabinovich (00:59:20):
Melissa Rice (00:59:21):
Casey’s comes with a free drink. Casey, what’s your code?
Casey Markee (00:59:24):
Correct. If you use my code, you get a free drink. Not kidding, it’s drink coupons included, that’s MW199. So if you use my code, you get a free drink and hey, it depends on if it’s top shelf or not. We’ll cross that bridge when we get there.
Melissa Rice (00:59:41):
As long as it’s not watered down.
Arsen Rabinovich (00:59:42):
Then because of me, the second drink will always also be on Casey.
Casey Markee (00:59:47):
That’s right, because of Arsen. The second drink is on me as well. Good times.
Arsen Rabinovich (00:59:53):
I have negotiated that for everyone.
Casey Markee (00:59:55):
Yeah, you’re good to go. It’s going to be very pricey. Couple of days in Brooklyn. It’ll be enjoyable.
Arsen Rabinovich (01:00:05):
Awesome curriculum put together. We’re working with the presenters, with the speakers to make sure that the presentations are specifically catering to recipe publishers. A lot of new information about AI, about tips and tricks, crawlability, accessibility. We’re covering everything.
Definitely check out that landing page on the Tastemaker site, read about the presenters, read about the curriculum. This is a deep dive definitely.
Melissa Rice (01:00:33):
Very, very true. Well, thank you Natalie for joining us. Heather for coming in and saving the day for Andrew.
Arsen Rabinovich (01:00:40):
Heather Wilkins (01:00:43):
Thanks for having me.
Casey Markee (01:00:44):
Natalie, thank you so much. Heather, you’re now permanent. We don’t need that Andrew guy, I don’t know.
Arsen Rabinovich (01:00:50):
Casey Markee (01:00:52):
He can enjoy his day off.
Melissa Rice (01:00:54):
I miss Andrew.
Casey Markee (01:00:54):
Enjoy his spa day. I know that’s what’s going on.
Arsen Rabinovich (01:00:56):
That’s what he’s doing.
Melissa Rice (01:00:58):
Alleged spa day.
Casey Markee (01:01:00):
Alleged. Bye, everyone.
Melissa Rice (01:01:03):
All right, y’all. Bye everybody and thank you.
Arsen Rabinovich (01:01:04):
Melissa Rice (01:01:04):