There are a variety of items you may see being used on websites, but their day has come and gone. The continued use of these items may be negatively affecting your mobile users, search engine optimization (SEO), Google ranking, accessibility, and more.
These items are certainly “doable” on a website, but they are no longer desirable. The list includes the following:
- empty top menu level items
- third level menu items
- hidden emails
- text on images
- “click here” and more.
One of the things Google is looking for is a quick and responsive website. The longer it takes your website to load, the less likely it is to pop up when someone looks for your website. Above is an older example of the use of a slider.
- Is the first image really the most important thing you want your users to know about?
- Statistically, no one waits around for the slide choices to go by.
- With sliders it is difficult to read the text over the image and it is difficult to get the image to fit well since they need to be a very specific size.
- Creating slides to go in the slider is also a time intensive process e you are losing valuable employee/volunteer time on a product that is inaccessible and ill-advised.
The SEO experts agree sliders aren’t worth It
It gets worse, because sliders all contain images and a mechanism to load and rotate those images, your website load time is slower. Don’t just take our word for it. Leading industry experts Yoast and CXL have talked about their downside for quite sometime.
While slider images at the top of your website may seem to be a good idea to bring eyes to the things you want to show off; studies show that most people don’t sit and wait for those sliders to rotate through. The reality is that 99% of visitors never see more than the first picture.
Slider accessibility nightmare
There are major accessibility issues are sliders:
- Screen readers get stuck in a loop as the items rotate
- Keyboard only users can escape them
- Screen readers and keyboard users have tremendous issues clicking on any links in them
Empty Top Level Menu Items
Top level menu items are the introduction into the content that’s then broken up into more detailed items that drop down from the top. Essentially it’s a waterfall of related information.
In the example below from our own website, you can see how this concept of a top level item and a dropdown works. We have a top level menu item that talks about the importance of having an accessible website. We then have a dropdown that highlights that we do accessibility audits.
Sometimes, however, there is no need for a dropdown because everything you need is in that top level item. Some classic examples would be Contact, Resources, Donate. You wouldn’t want users to click on “Donate” only to have an item dropdown to click on the word “Donate” again. It’s poor user experience. You want those items clickable on the top line.
Empty top level menus items result in an SEO mess as well as an accessibility nightmare. Google looks at the top menu items and their text to determine what your website is about. If that page is blank, or if Google doesn’t see anything important there, you are less likely to rank well in search.
The empty top menu items also create issues for people needing keyboard and voice controls. Their software will skip right over empty items.
Third Level Menu Items
Third level menu items are dropdowns from your your main dropdown (see the image above). They make it difficult to access that part of your menu structure and users will often not dig through your menu to find them. They are also particularly difficult for mobile phone users.
Consider the item as not necessarily needing to be on the menu and linking it to text in a related main level dropdown.
Click Here and Massive URLS
When Google evaluates links one of the things it looks at is the text that the link is connected to, or the anchor text. If that says “click here” it doesn’t tell Google (or users on your website) anything about what is on the other end of that link. The same is true if you link to a URL that says “get your tickets here https://www.eventbrite.com/e/christmas-light-show-tickets-132175357051“
Best practice is to create links that naturally incorporate information. Alternatively, a button with a strong call to action like “contact us” can be used. See our three examples below that illustrate this point
NOT RECOMMENDED: Putting in the entire URL
NOT RECOMMENDED: Saying “Click here.”
BEST PRACTICE: Natural Text
Text on Images
When it comes to the images you use on your site, you want to make sure they are accessible to everyone who comes across your site. Frequently the kind of graphic that you would use on a poster is not suited to the web at all.
You need to be sure all of your images have alt text for the same reason. If a screen reader can’t read it, Google can’t read it. For both screen readers and Google the image below is just a blank space and none of the information is available.
Additionally, users on mobile have extreme difficulty reading text ton images as that test does not size proportionately. Try looking a the graphic below on mobile, and you will see what we mean.
Massive amounts of writing on images means accessibity failures:
- Google can’t see anything. It’s a big blank in search. No one searching will find this info.
- No one can translate this info using online translation if English isn’t their first language.
- Mobile users have tremendous difficulties reading the info. They have to enlarge the image and scroll back and forth to read it.
- If the image contains vital info like dates, phone numbers, directions, links, etc. No one can add that to their calendars, make a quick call, interface with a maps program, etc.
Bolded Text vs Headers
Screen readers do not indicate that a font is bolded, so by using bold text alone to indicate the start of a new section, people using them are not able to tell that a new section has started. Read our more detailed article on bolded text
Bold and Italics
Bold and Italics should be used sparingly. The goal is to give the user the best experience possible on your website and using these typefaces can make it difficult for users to read, especially when you are using them on a large portion of text.
For an example, look at the above paragraph. It’s very rough on the eyes. Nothing is really stressed because too much is stressed. If your website fonts have the correct proportions and color contrast, they are accessible and there is no need for excessive bolding.
Never miss another article from us. Sign up today to receive our monthly newsletter to learn more about website accessibility, best content practices, and more.