Puppy looking at pictures on a computer with the title of the presentation (Three or More Biggest Website Mistakes and How to Fix them by Carol Stambaugh
| | |

Three Common Website Mistakes

Links open in new tabs

Three (or More) Common Website Mistakes and how to Fix them

Co+Hoots Mesa

06/24/25

Presented by: Carol Stambaugh

RadiateU Logo Website Consulting, Web3 and AI

About this Presentation


  • Slides link in the sidebar
  • More than a slide deck.
  • Detailed notes and resources can be found in the “Bonus Information” sections.
  • I will pause for questions at the end of every section.

About Me


QR code for link to this presentation
White Westie dog laying down.
Pomchi with a halo.
  • Owner of RadiateU
  • WordPress Community Volunteer
  • Basketball Mom, Volleyball Mom, Retired Swim Mom, Semi-retired Mom Taxi
  • Keeper of the family passwords
  • Dog lover
Black Poodle

RadiateU and Site Audits


  • We conduct Site Audits as a part of our service to our clients
  • Since our inception, we have worked with over 275 websites, each receiving a site audit.
  • We love WordPress and we dig Site Audits.
WordPress logo

Question: How do we know what the biggest Website Mistakes are?


Answer:

We do a lot of Website Audits

233 Website Audits
3295 Recommendations
WordPress logo

What is a Site Audit

Site Audit Report Contains

  • User Experience (UX)
  • Accessibility
  • Performance and Security
  • Content Form and Copy
  • Legal
  • Conversion Optimization
  • SEO/Online Visibility
  • Technical WordPress Review

Accessibility

Why is this important?

Photo by Carol on chatgpt.com

Accessibile Sites

Are better for everyone!

Photo by Carol on chatgpt.com

Mistake #1 – Alt Text Images

Only 15.53% of the websites we reviewed got this right.

Photo by Carol on chatgpt.com

The Fix

  • Add Alt Text for each image as if you are describing it to someone who cannot see.
  • No keyword stuffing
  • Describe image accurately, use keywords ONLY if appropriate
  • Limit to 16 words if possible
A cheerful Keeshond puppy sits on a wooden floor with a yellow pencil in its mouth and a spiral notepad placed beside its front paw, appearing ready to write.
Photo by Carol on chatgpt.com

Alt Text

a screenshot showing how to add alt text on a WordPress site.

Bonus Information

Tips for Writing Alt Text


  • Relevant – In this situation, the T-shirt that the person is wearing is notable and worth mentioning because it is a WordPress logo and we talk about WordPress websites. So it is worth noting the shirt. In other instances, it may not be worth mentioning the clothing. 
  • Repeating Text – If the image has text on the image that is repeated in text nearby on the site, DO NOT put that text in the alt text because the screen reader will read it twice. 
  • Decorative Images – Each image with the exception of decorative-only images needs alternate text (alt text) to describe what the image is about.
  • Image of – Don’t say “an image of”. It gets repetitive. It is assumed that this is an image. However, it is acceptable to say, “a screenshot, or illustration, or professional headshot” because those describe the type of image and give the user an idea of what the image is. 

In Summary

Be descriptive, yet as concise as possible. Also, think about what it would sound like if a screen reader was reading this to you.

Mistake #2 Color Contrast

Only 58% of the websites we reviewed had adequate color contrast.

A black Newfoundland puppy with paint splatters on its fur holds a brush in its mouth, sitting among colorful paint cans with a red splash on its forehead.

Photo by Carol on chatgpt.com

Color Contrast Ratios

  • Large Text (18 px or higher) – 3:1
  • Regular Text (below 18 px) – 4.5:1
Screenshot showing how the color contrast checker looks.

https://webaim.org/resources/contrastchecker/

A Tale of Two Buttons

Side by side screenshots showing how a slight change in background color can increase contrast for wcag 2.0 tests.

Bonus Information

Color Contrast

When it comes to web design and accessibility, color contrast ratios are an important consideration. The contrast ratio between text and its background should be high enough to ensure that the text is legible and easy to read for all users. For large text (18 pixels or higher), the recommended contrast ratio is 3:1, while for regular text (below 18 pixels), the recommended contrast ratio is 4.5:1. These guidelines help to ensure that text is clear and easy to read.

Common Accessibility Issues

  • Alt Text
  • Color Contrast
  • Tab Navigation
  • Content Hierarchy
A playful Pomchi puppy runs across a green grassy field in a park, its mouth open in a happy expression and its fluffy coat bouncing with each step.

Photo by Carol on chatgpt.com

Bonus Information

Tab Navigation

screenshot of a website showing how tab navigation moves through web page.

All websites should allow a user to fully navigate the site on a keyboard without using a mouse. This means that all dropdowns are accessible by “tabbing” through the site.

WARNING – A common issue is pop-ups where the pop-up is unable to be closed with a keystroke and requires a mouse click.

Bonus Information

Content Hierarchy

Content hierarchy refers to the structure and organization of a website’s content. When the website’s content uses headings in the proper order, it makes the website more accessible to users who rely on a screen reader.

Content Structure in Proper Order

Screenshot of text that shows headings in proper order.

The above text is a Screenshot that shows headings in proper order.

Content Structure Out of Order

A screenshot of headings used in an improper order.

The above text is a screenshot of headings used in an improper order.

Bonus Information

Accessibility Tools and Resources

  • The A11y Project – a community-driven effort to make digital accessibility easier. Their color contrast evaluation tool is particularly helpful. 
  • WebAim  – an excellent resource for training and technical assistance regarding website accessibility.
  • WordPress Accessibility Plugin – For those using WordPress, you can find this plugin on the WordPress plugin Repository. Wave is an extension that can be added to Firefox and Chrome that will test a web page for accessibility issues including color contrast.
  • Divi Users Accessibilithy Plugin – For those using Divi, you can download a helpful plugin directly from Github that helps improve the accessibility features of the Divi theme. 
  • The Web Content Accessibility Guidelines (WCAG) has three levels of compliance. Learn more about what is involved with A, AA, and AAA levels of compliance.
  • Accessibility Checker – Plugin that runs automated checks on your WordPress site.
  • Accessibility Insights for the Web is a browser extension tool that conducts a scan and shows accessibility issues on a site.
  • The mission of UsableNet is to make the digital world more accessible and usable. We aim to make websites, apps, and other digital platforms more accessible, inclusive, and user-friendly for everyone. 
  • WAVE Tool (Firefox and Chrome Extension) – This extension can be added to your browser to evaluate web accessibility from within your browser

Color Tools

  • Accessible Color Matrix – This tool lets you enter the hex code of your color palette and see how many accessible color combinations you have using your color palette. This is a great tool for designers and brand creators. 
  • Image Color picker is an online tool that allows you to upload images and pull together color palettes. 
  • Color lovers is a website that allows you to browse many different color palettes and to create, save and share color palettes you create. This is a free resource that requires you to log in. 
  • Hex Color Tools is a site that lets you enter a hex color code and then show darkened or lightened shades of the same color as well as show complementary colors.
  • Color Picker Extension is an extension that can be added to Firefox and Chrome that will open a small window under your mouse and allow you to see the hex color code of the color on your website.
  • Accessible Colors is a website that allows you to add your current color foreground and background and it will suggest colors that match closely that will give meet the AA or AAA WCAG guidelines.
  • A11y Rocks is a very similar color palette accessibility tool that lets you visualize your color combinations and gives you the actual color contrast of each combination. 
  • HTML Color is another site that helps with identifying the hex color codes.

Bonus Information

Accessibility Policy

Mistake #3 – Legal Requirements

The average score for the Legal section of our websites is 41 out of a possible score of 100

A Saint Bernard puppy dressed in a black judge’s robe sits at a wooden courtroom bench with a gavel beside its paw, posing in front of an American flag and leather chair.

Photo by Carol on chatgpt.com

Privacy

Is Driving the Web

Photo by Carol on ChatGPT

Four Legal Audit Points

The average score for this section was 41.28/100.

Screenshot of the RadiateU footer showing all of the legal policies.

I am in WA or AZ, and we don’t have these laws so I don’t have to worry about it.

False

Photo by Carol on chatgpt.com

Legal Policy Options

  • Internet Privacy Attorney – Very Expensive and quickly becomes out of date.
  • Termageddon DIY – Termageddon is the longest running privacy policy generator listed as a vendor by the International Association of Privacy Attorneys.
  • Other online policy generators – There are a number of options available.

Bonus Information

Legal Resources

Mistake 4 – Page Speed

Only 15.7% of websites audited passed the Google page speed test.

A joyful Beagle puppy runs through a sunlit green field with its ears flapping, chasing an orange ball, symbolizing speed and playfulness.

Photo by Carol on chatgpt.com

Website Performance

Getting your website to Perform

Photo by Carol on chatgpt.com

Quick Page Speed Tips

  • Work with your hosting provider
    Plugins like WP Rocket and Jetpack Boost
  • Limit Image Size – Resize & Compress
    Image plugins like Smush-it, EWWW Image
  • Optimizer or Cloudinary
  • Limit Embeds
  • Cloudflare
fawn pug jumping on water

Photo by Bruce Galpin on Unsplash

Bonus Information

Page Speed Resources

Website page speed is important because it can affect the user experience of your website. If a website takes too long to load, users may become frustrated and may leave the website before they have a chance to engage with the content. In addition, page speed is a ranking factor for search engines, so a faster website may have an advantage in search results over slower competitors. Page speed is also a VERY complex art. There are multiple factors that contribute to a site’s page speed so it is important to know that there is not one magic pill that solves everything.

  • Work with your hosting provider – Your hosting provider is your partner and can be a tremendous help for you when it comes to something as complex as page speed. For example, Bluehost offers a great simple caching solution that you can access through your settings. 
  • Cloudflare – Cloudflare is a service that helps to improve the performance and security of websites. It works by acting as a middleman between a website and its visitors, routing traffic through its own servers, and providing various features to optimize the website’s performance and protect it from cyber threats.
  • Page Speed/Caching plugins – If you do not want to use the caching system through Bluehost, there are plugins like WP Rocket and Jetpack Boost.
  • Limit Embeds – Limit the number of embeds on your website, as they can slow down the page load time.
  • Limit Image Size – Resize & Compress images prior to uploading.- TinyPNG is a web-based tool that you can use to compress your images. Image Optim is another resource that offers both a downloadable app and a web-based service for compressing images.
  • Image Plugins – Plugins like Smush-it, EWWW Image Optimizer, or Cloudinary can help manage some of the compression of images already uploaded to the site. These have both free and paid plugin options.

Mistake 5 – Conversion Optimization

80% had a primary CTA

A happy black poodle puppy sits next to a miniature shopping cart filled with colorful dog toys, in front of a laptop displaying a website with pet products, inside a cozy, well-lit room.

Photo by Carol on chatgpt.com

Conversion Optimization

Is the primary CTA consistent with the
page goals and the website goals?

Photo by Carol on chatgpt.com

Know * Like *
Trust * Convert

  • Know Pages
  • Our Services or Our Products
  • Like Pages
  • About Us – Staff or team pages
  • Trust Pages
  • Testimonials or Case Studies
Pomchi laying in front of a pillow that says, "This is my spot. -the dog"

Trust Factors

An Example

Bonus Information

Know/Like/Trust/Convert

We like to look at websites through the lens of the “Know/Like/Trust/Convert” methodology. Your user needs to first learn (or know) about you and what you do. Then they need to read about you and like you as a solution, product or a service. But
knowing and liking is not enough, you need to earn their trust with testimonials or case studies. Once they trust you, then you have a much better chance of getting the conversion. Understanding and designing each of these pages with those goals in mind can help increase your website conversion rate.

The know pages will be your service or product pages. The Like pages will likely be the about us, about our team or about our mission/philosophy. The trust pages will include testimonials and case studies

And then
there is SEO…

A smiling Corgi puppy in glasses and a tie sits at a desk with a laptop showing an SEO graph.

Photo by Carol on chatgpt.com

A New Challenge Has Arrived

Photo by Carol on chatgpt.com

Bonus Information

The Challenges of AI

Search – You have probably noticed that Google search returns their AI answer at the top BEFORE any search results. This is changing the game for SEO. Some people are calling it the great Google rest.

AI Web Builders – There are many different products and services out there where you can have AI build you a site in minutes. This presentation gives a brief glimpse at the complexities and intricacies of a performant website.

AI is a tool to use,
it should not do the work for you.

Quck Tips
for SEO

  • Choose a Keyword and use it wisely
  • Add keywords, if appropriate to:
  • Keyword in Image Alt Attribute
  • Keyword in Title
  • Keyword in Meta-description
A realistic photo of a golden retriever puppy lying on a hardwood floor in a sunlit living room, looking directly at the camera with its tongue out and a happy expression.

Bonus Information

Search Engine Optimization

SEO stands for Search Engine Optimization and it is the art and science of optimizing your website to rank higher in search so that you can increase the traffic to your site.

Quick Tips for SEO

  • Choose a Keyword and use it wisely. It is no longer advised to “keyword stuff” your pages and posts.
  • Use the keyword throughout the page or post in a way that the content makes sense. If using the keyword makes the sentence awkward, do not use it.
  • Add keywords, if appropriate to your image alt attribute, title, and meta-description.

SEO Resources

Core Web Vitals

  • Largest Contentful Paint (LCP)
  • Largest Contentful Paint (LCP) measures how long it takes for the main content of a webpage—like a big image or headline text—to become visible, giving users a sense of how quickly the page is actually loading.
  • First Input Delay (FID)
  • First Input Delay (FID) measures the time between when a user first interacts with a page (like clicking a button or link) and when the browser actually responds, showing how quickly the site reacts to input.
  • Cumulative Layout Shift (CLS)
  • Cumulative Layout Shift (CLS) measures how much visible content unexpectedly moves around on the screen while the page is loading, helping to capture how visually stable the experience feels to users.

Cumulative Layout Shift Example

Recap

  • Alt Text
  • Color Contrast
  • Legal Requirements
  • Page Speed
  • Conversion Optimization
  • SEO
A fluffy white Samoyed puppy rests its paws on a car window, gazing sadly at a silver car driving away down a tree-lined street.
Photo by Carol on chatgpt.com

The “Slides”

Thank You!

I appreciate your feedback and any tips for improvement!
Name (Optional)
Email (Optional)
Please let me know what's on your mind. Have more question? Ask away.

Where to find me…

A German Shepherd puppy with a black and tan coat sits attentively on vibrant green grass in a sunlit park.  The background features softly blurred trees and a bright, natural atmosphere.

Photo by Carol on chatgpt.com

https://radiateU.com

CarolStambaugh

@CarolStambaugh

Three Common Website Mistakes

Co+Hoots Mesa

06/25/2025

Find me at

[email protected]

Twitter/X Url