How web accessibility best practices can improve website SEO

SEO tips for developing more accessible websites

Imagine this: You’re scrolling through a series of blog posts and reach the end of the page. Here, the text says, “Read More”, directing you to a longer list of content. You click through and continue enjoying the blog posts. But if you were a visually impaired user, you’d be relying on a screen reader to navigate the content on this page. Your screen reader would reach the end of the page and get stuck, saying “Read More” on an endless loop. You’d have no idea what the “more” was. Why? A coder failed to add in a small snippet that would prompt the screen reader to say “Read more about blogs” rather than just “Read more.”

Such a small, minor detail may seem like an easy thing to overlooking in coding, and it is. But for a visually impaired person, this “minor” detail is the difference between being able to use a website to access meaningful content and being trapped in an endless loop.

Is your website accessible and SEO friendly? Remember, search engines are, in a sense, “blind”. Just like a visually impaired user, Google’s web crawlers cannot “see” images, video, or JavaScript content. A web crawler’s job is to interpret and process content. But it can’t do this if it can’t “see” the content. Here’s how to fix five of the most common website accessibility problems.

Global Accessibility Awareness Day is Thursday, May 16, 2024

On Thursday, May 16, 2024 we celebrate Global Accessibility Awareness Day (GAAD), a day to get people talking, thinking and learning about the importance of digital accessibility. Too often, there’s a mistaken belief that creating an accessible website requires an expensive overhaul from a web design and SEO company. In truth, all it takes is a few simple tweaks to make your website more accessible, user-friendly, and SEO-friendly, too.

Google is committed to supporting a more accessible web through the Google Accessibility program. On Google’s microsite dedicated to accessibility, you’ll find information on a host of tools and research initiatives. These include:

• Web Content Accessibility Guidelines (WCAG)
• FCC Video Programming Accessibility Advisory Committee (VPAAC)
• Voluntary Product Accessibility Template (VPAT)

Helping developers, designers and businesses around the world fix accessibility issues. Now, you can do your part, too.

Creating a website that’s accessible to all visitors doesn’t have to be a time-consuming, resource-intensive process. In fact, building accessible sites is a smart SEO strategy, too.

Accessible sites make web content available and usable for as many individuals as possible, including visually impaired individuals who cannot “see” images, text or video content. Pages that are structured for accessibility clearly communicate their topic, contain meaningful and relevant links, informative images, and logical navigation.

Read more about… what?

Here’s an even better option: fix the bad link text problem from the beginning, no code required. Generic text such as “Read More” or “Click Here” is just that: generic. This text provides no real information to either the reader or the search engine about the destination page. Boost your SEO and make it actually say something, such as “Read More About How to Make Your Website Accessible in the next article.” Learn how adding a call-to-action on every webpage improves your inbound marketing.

Just say no to text images.

Text in an image is still just an image. In general, there’s no reason to use an image of text in place of actual text. When you do use images, be sure that the alt text paints a clear picture. While it’s tempting to think of alt text as an afterthought, don’t. Without this text, neither the search engine nor a visually impaired user will know what images are on your page. The alt text doesn’t have to be complicated. All that’s needed is a simple description of the image and the title.

Alternative texts (alt text) should also include important keywords of the image. There’s no need to stuff in the keywords. Just like with regular website page copy, be concise and get to the point. For example, for an image of the Golden Gate Bridge at sunset, a sufficient alt text caption would be “View of Golden Gate Bridge San Francisco CA sunset.”

Spell out what’s required in a required field.

A long-time design trend with websites has been using an asterisk to denote which input form fields are required. Asterisks are a terrible default requirement option for several reasons, even if you aren’t visually impaired! Firstly, colorblind visitors who cannot see red or green text often cannot tell which form fields are mandatory and which are not. They get stuck scrolling through form fields trying second-guess what they’ve missed.

Burying form-field related error messages within the form field are also a mistake. The screen reader will be forced to read the entire screen again and only mention the error once it reaches the incorrect box. Instead, a better practice is to include an error message at the top of the page so the error is mentioned first, saving the user time and frustration.

Simplified, accessible input forms are in a developer’s best interest, too. The easier the form, the more likely that the form will be completed, boosting conversion rates.

Don’t hide your best content.

When organizing content on a web page or multiple pages, keep in mind that a screen reader will render content to a user in one long sequence. If you do not include layout, column or menu cues, your reader won’t know how to find this information.

Accessibility and page layout, a cue like “in the box to the right” is essentially meaningless. Instead, use sensible navigation terms that contextually reference your page layout. Site Improve suggests alternative text that reads “You can find more information in the box to your right with the heading ‘Information about…’” This phrase contextualizes the information within the page layout for navigation ease.

Use real heading tags.

Structure your content within the page with actual heading tags, not headlines that are styled to look like them. Within your CSS stylesheet, set clear visual parameters for a heading tag appearance. This way, your headings will look visually appealing to your site visitors and also relay relevant information to search engines.

The heading text and keywords you choose for H1 heading and H2 sub headings matters for search engine ranking and accessibility. For visually impaired users, this text will be used to provide an overview of the page. If all you do is bold text using a formatting menu rather than a stylesheet, you’re missing out on major SEO benefits from meta keywords and enhanced website accessibility.

An accessible website means that your web page content and back-end design make it easy for anyone or anything (including Google search bots and assistive technologies) to crawl and understand the site. These five important on-page SEO tips will not only make your site more SEO-friendly, but also boost accessibility, too. That’s a win-win-win.

Hire ThePixel to build your next website!

Since our founding in 2008, we’ve created and launched many types of business websites. Over the last decade and we’ve learned a thing or two! That’s why we’re masters of our craft, let us help you build the website of your dreams – one that generates traffic, leads and conversions.

Are you ready to start? If yes, contact ThePixel and one of our representatives will guide you through the website phases and how the process works either by a Zoom Meeting or phone.