Episode 1 Transcript

Hi, welcome everyone to the No Stress Web Success Podcast. I’m your host, Lisa, and I’m the founder of Five Penny Web Studio. This is Series A, Accessibility for Humans.

We created this podcast for busy nonprofit executive and marketing leaders who are managing their own websites and need a better understanding of website accessibility and WCAG guidelines. Our tagline is “seen, considered, crafted.” And it isn’t just branding. It’s what accessibility is: making sure your users are seen, that they can perceive your content; considered, that they can understand and use it; and crafted for—it’s built with care, so it works for everyone, including people who rely on assistive technology.

Here’s the big deal for this podcast. We’re going to break down WCAG into one to three success criteria at a time, using short explanations and very practical “what to look for” guidance. At the end of each episode, I’ll tell you how you can easily apply what you’ve learned to your own website, starting with a basic evaluation of your home or contact page. You don’t need to fix everything at once. You just need a way to know what matters first.

So today, we’re going to start at the beginning: what WCAG actually means in plain language, and how you can spot high-impact issues on your own website.

To begin, why does accessibility matter? According to the World Health Organization, one in six people globally live with a significant disability. Whether it be vision, hearing, mobility, cognitive, or simply not having access to updated technology, these users can struggle using websites not built for them.

In this episode, we’ll start with success criterion 1.1.1, Non-text Content—the one about making sure non-text content like images, icons, and logos still communicates the meaning to everyone, not just sighted users.

By the end of this episode, you’ll know what the rule is trying to accomplish, where it typically breaks on nonprofit and marketing websites (especially those built in WordPress), and one quick self-check that you can do today.

All right, let’s get started.

In plain terms, this is about one thing: every meaningful image or non-text element needs an equivalent text alternative, or a clear way to perceive its purpose. That includes things like logos, icons that convey meaning, buttons with images, and any decorative-looking element that actually tells the user something.

This one can easily be found on your home or contact page, or really any page on your website. Home often has a hero image, icon blocks, and “what we do” visuals. Contact pages often include map embeds, icon blocks, CAPTCHA images, social icons, and forms. If any of these elements do not have the right text alternatives, the visitor may miss what they’re supposed to do, or how to do it.

Imagine for a moment you have a vision impairment. You would likely use a screen reader to maneuver through websites. Even users with some level of deafness or a cognitive impairment may use a screen reader as well. You’re relying on that screen reader to read the site to you for interaction, and if it’s not coded correctly, you can miss some very important steps.

So here’s what we want to look for:

• Hero section images – These are meaningful images that should have helpful alt text, not just “image.”
• Logos – They should be treated as meaningful content, either with alt text that states the purpose or marked as decorative if redundant.
• Icon-only buttons and links – Must have accessible names that explain what the action is.
• Contact forms – Actual labels are textual, not just placeholder-only text that gets replaced.
• CAPTCHA / security images – Ensure there’s an alternative describing what it is or how to complete it.
• Map embeds – Ensuring that the embed has a text description or a fallback link.
• Decorative images – If the image is purely decorative, it should be ignored by assistive technology.

Some of the common WordPress problems that break this include having an image block with generic text like “banner,” “logo,” or even blank, when that image is actually meaningful. You want users using a screen reader to be able to hear what that is and know that it means something to the content on the website.

Social icons often have links without accessible names. Again, they need to know that the Facebook icon is actually an icon that leads to your Facebook page—not just “an icon.”

“Read more” buttons that are image-based or icon-based without a descriptive label are another common issue. On your contact page, a map embed without a meaningful description or a fallback means users are not going to fully understand what’s there.

Here’s a quick self-check you can do. If you’re using Google Chrome, go to Add Extensions and find the accessibility extension named Silktide Accessibility Checker and install it. Once you enable it and click on it, it will give you a floating icon along the right-hand side of your browser. Once you open up the homepage (or whatever website page you want to test), you can click on this icon and it opens a slide-in menu from the right. It’ll give you a lot of accessibility resources.

This tool, along with the WAVE browser extension, are two of my favorite go-to tools. I like Silktide because it has a screen reader tool, and even though it’s not as detailed as an actual screen reader like JAWS or NVDA, it does serve the purpose for testing quick jobs without the expense.

When your homepage is open and Silktide is enabled, go through the screen reader tool and click through your site with the arrow keys. Silktide will give you instructions on how to follow the process, but listen as it reads your homepage to you. When you land on your homepage, can you understand the page message without seeing images? Click through your key navigation and feature areas. Do the icon links announce what they do? Do you hear words like “graphic” or “image_234”—something meaningless? That’s your sign that alt text and accessible naming is missing.

Here’s a quick fix you can do. If you manage your website yourself, go to your media library (whether it’s WordPress or another CMS framework or platform) and find the location for each of your images’ alt tags. Make sure you have an accurate but brief description of each image in use—something that explains it or its purpose without being too long. It’s that simple. One quick fix with big impact.

Our idea is that you shouldn’t have to necessarily redo your entire website. Sometimes a redesign is necessary, but we can make small changes that impact users in a big way, and that’s what we’re trying to achieve here. If you can make things just a little bit easier for somebody who may be colorblind or may have a hearing disability, then these changes will make a difference to them. They can access your website, they’re going to feel more comfortable there, and they’re going to return to your website—and that’s what we want.

So, a quick overview of what we went through:

1. Alt tags are very important. Remember, have something meaningful—not just “image_something_something”—but make sure that it explains what’s there so if they can’t see the image and they hear it read to them, they know what’s supposed to be there.
2. Contact forms: Make sure your labels are actual labels and not text placeholder text that’s going to get replaced when they start typing or filling in the entry.

If you can do these two things on your website, it will make a huge difference. A lot of people don’t realize it, but alt tags are one of the most common missing items in non-compliant websites.

If you want more of what we’ve talked about today, you’re welcome to visit our website at fivepennyweb.com. We talk about different coaching opportunities. We have different support plans. Sometimes you just need to ask a question. We’re always open to comments. And if you think there’s something that should be covered, if you have a question about accessibility or websites in general, leave us a comment, let us know. We’ll be happy to answer it.

And in the meantime, I will see you in our next episode. Bye-bye.