Five Biggest Website Mistakes Presentation

Presented at WPCreatorCon by Bluehost on January 12, 2023

Quick Links

The title slide for the presentation, Five Biggest Website Mistakes.

Slidedeck for “Five Biggest Website Mistakes”

Presented to Bluehost WP CreatorCon

View a PDF handout with slides and speaker notes.

Site Audits

Cover page of a Site Audit Report by RadiateWP — Click to see a sample

Mistake #1

*Only 15.53% of the websites we reviewed got this right (and this number is going down)*

The first mistake is in the area of accessibility. Alt text, also known as “alternative text,” is a way to describe the content of an image on a website. It is important because it allows people who are blind or have low vision to understand what is depicted in the image because it is read by the screen reader. However, our review of websites found that only 15.53% of them correctly used alt text for their images. It is crucial for website owners to ensure that all images on their site have properly formatted alt text to provide an accessible and inclusive user experience.

Sample Image

Alt Text for the Sample image

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

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.

A Tale of Two Buttons

The button above is a screenshot of a button. It is not a clickable button.

Doesn’t Meet WCAG-AA

Meets WCAG-AA

Additional Accessibility Information

Tab Navigation

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.

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

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

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

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.
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.
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.
Tota11y Bookmarklet – An accessibility visualization toolkit created by Khan Academy. This can be saved as a bookmarklet into your bookmarks on your browser by just dragging the button into your bookmarks.

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.
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.
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.

Mistake #3

Termageddon is a website privacy policy service that updates your policy statements when laws change. This service can be used by any website or content management system.
Other Privacy Policy Generators – a blog post by Neil Patel called “5 Privacy Policy Generator Options For Your Website“

Mistake #4

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.

Quick Tips for Improving Page Speed

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

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

Bonus Information

Website conversion is about more than just getting someone to click a call to action button on your site. It is about developing a comprehensive and cohesive strategy that aligns the actions you want your website visitors to take with your long-term goals for the website.

Know/Like/Trust/Convert

Know – Your user needs to first learn (or know) about you and what you do. The know pages will be your service or product pages. It describes what you do so that the user can see if the service is what they need.
Like – After they know what you do, they must like you. In general, people do not do business with people they do not like. The about us, about our team, or maybe even “Our philosophy” page will serve as a way for them to begin to like you.
Trust – Knowing and liking are not enough, you need to earn their trust with testimonials or case studies. They need to have a level of trust in you that you will take care of them. Once they trust you, then you have a much better chance of getting the conversion.

Want a Free Site Audit?

Click the button below to get a free website audit report with valuable feedback.
The report will be emailed to you within 15 minutes.

Start Now