SEO and Accessibility: Technical SEO

We hope you enjoyed our SEO and accessibility series. Cooper demonstrates how the technical SEO methods you use across your site may help make it more perceivable, operable, intelligible, and resilient in the last session.

Video Transcription

Hello, Stridec aficionados. This is the newest installment of Whiteboard Friday.  I’ve been doing SEO since 2016, and I currently work for a big outdoor store, where I assist with the implementation of our technical SEO plan. Thank you very much for joining us for this SEO and accessibility webinar series.

I hope you’ve acquired a fresh perspective and learned some new techniques for generating content that not only resonates with your audience and does well in search, but is also accessible to a wider audience. We’ll speak about technical SEO and accessibility today.

Technical SEO and accessibility

Let’s get started. We discussed the Web Content Accessibility Guidelines last time, and you may recall that the four WCAG principles are perceivable, operable, intelligible, and resilient.

Perceivable

Because your day-to-day operations, your day-to-day work stream entails making sure that the pages, content, and experiences you’re generating are accessible to search engines and perceivable by search engines, you’re probably most concerned with perceivable as a technical SEO.

When we go over SEO suggestions or audits, I hear a lot of recurring themes, such as the header tag being baked into the picture and therefore invisible to a search engine, or the material I’m generating being accessible to bots but not to people. These are difficulties with perception at the most fundamental level. I want you to evaluate if you can apply that mentality to your whole audience. So, at a basic level, are all of your individuals who want to engage with your service, product, or experience able to perceive what you have to offer?

1. Styles

Some of the things you could be thinking are comparable to what you’ll observe in this audit, such as: Is all of my text displayed on the page? Is the text active? Is it native to the website, in which case I may pick it and copy and paste it, or is it baked into the picture and inaccessible to assistive technology, browsers, and other tools? You could also be wondering if the colour contrast between my backdrop and text is correct.

Is the spacing between my layout components clear and crisp? If anything seems a little hazy, or if it’s not apparent whether something is available to both a search engine and a user, go back to the drawing board and find out how to make both of those things function effectively.

2. Rich media

We also prefer to include photos, text, video, and audio in the pages we create for our clients. It’s critical that the rich components we’re placing on the page, now that we’ve gotten past the fundamental text and style elements, are also perceivable by all of your users. There are a few things we can do to help make this happen. Giving pictures a text alternative and something that is in addition to the imagery will help them be read by a screen reader and comprehended by someone with a visual impairment.

Also, labelling things with human-friendly names such as “DSC1352.JPEG” can aid search engines and assistive technologies in recognising and understanding what the image is. In terms of on-page context, it’s also critical to include images on sites that offer value. You want to provide some more material to educate a user, either to give them a better sense of what you’re talking about or to offer them more context on what you’re talking about. Not only to show up in Google image search, but to add value.

What about video, for example? As a result, video is a little different. A video consists of a sequence of moving pictures. So, whenever I consider movement, I ask myself, “How can I ensure that if a user wants to halt this movement, they can?”

When it comes to accessibility and providing a great video player experience for every user, having clear playback controls is critical. There are also synchronous alternatives for those text options. We discussed the use of text alternatives in pictures. Text alternatives must also be available for videos, but they must be timed to match the video. They won’t make sense in context else.

Then ensuring that they can be distinguished. This is true for both video and audio. We want to be able to tell the difference between the foreground and the backdrop. You need to be a little bit more crisp, a little bit more clear on those two differences if your video seems muddy, if your audio sounds muddy, and it takes me straining my ear or straining my eyes to see that material and comprehend what’s going on.

Then there are text transcripts. Just as you require closed captions for videos, you need a written transcript for audio so that I can access it if I’m in a noisy environment and can’t hear the audio, or if I don’t have my headphones connected in or if I need to use assistive technology.

As a technical SEO, you’ll notice all of these problems while examining code, and you should be aware of them.

If you don’t have these items on your website, I’d encourage you to ask those tough questions, such as: Hey, is there a text alternative to this image? How would a person with a visual handicap or an auditory disability gain access to these things?

3. Page structure

Page structure and semantic HTML are discussed in numbers three and four. So it’s less about whether or not something is perceivable and more about whether or not it’s comprehensible.

It’s a graze of the understandable, but it should also be a little about perspective. As you can guess, a search engine could be perplexed by a website with a number of H1s, right? Okay, there are a lot of H1s on this page, they say. I’m not sure what this page is supposed to be about. Adding structure and cascading headers to indicate parent-child connections will make your material easier to understand. It will be simpler to comprehend what is going on.

4. Semantic HTML

The same may be said about semantic HTML. We have a tendency to use a lot of divs and spans, as well as unidentified components, in our HTML. However, by marking them up in more appropriate ways so that we understand what they mean and what those tags contain, whether it’s navigation, forms, or tables, adding that extra layer of information and understandability will allow search engines and assistive technology to parse through those things and perceive the things you’re putting on your pamphlet.

Operable

So, we’re able to comprehend the information. But how can we be certain it’ll work?

1. HTML sitemaps

Build an HTML sitemap and include breadcrumbs on your website are two SEO tips I frequently see folks follow. There’s a good chance you’ll get some resistance if you do that. We all know how crucial an HTML site map is for SEO and the discoverability of pages deep inside our website’s structure.

Breadcrumbs, as we all know, are also very essential for discoverability. Both of these features aid users who utilise assistive technology in navigating the website. If your menu doesn’t include all of your website’s pages, or if it’s unclear, or if you’re using JavaScript or another technology that my tech stack doesn’t support, you may use the HTML site map.

2. Breadcrumbs

Then, using breadcrumbs, I can go up and down a certain page, such as a product search page on an e-commerce website, without having to return to the menu and filter through each and every menu item again. So these two are really crucial for navigation, particularly for those who navigate with a keyboard and assistive technology.

3. Develop keyboard-first

Then, and this is a non-SEO point, but it’s still relevant, create your website and experience keyboard first. Because of a mobility handicap, an impairment, or a lack of technology or hardware, not everyone has access to a mouse or the capacity to operate one. So make sure you work on your keyboard first, and you’ll be able to encompass more of the individuals you’re trying to encapsulate in your audience.

Understandable

1. Language

Understandable. So, when it comes to international SEO, we talk about how vital it is to utilise HTML on our website to indicate the page’s language while dealing with other nations and languages. It aids search engines in delivering the correct results in the right context, which might be national or worldwide. It also aids screen readers in reading your information in the appropriate language.

2. Navigational layout

After that, there’s navigational layout and interstitials to consider. Although I believe they are quite prevalent, no one like a website with a complex navigation or layout. The easier you make it for people to convert or do what you want them to do with this website, whether it’s learn, purchase, or participate in a service, the more likely they are to do it. That’s simpler when the navigation and layout are simple, and we’re not using various phrases to express the same thing in different locations. For those who use assistive technology, it’s even more crucial.

3. Interstitials

Nobody enjoys interstitials, those annoying pop-ups that prevent us from browsing the remainder of the page. They are also disliked by Google. But, especially for individuals who use assistive technology, if we don’t treat pop-ups properly, we’ll wind up with a situation where users are trapped in a keyboard trap and can’t get out of the interstitial, or they don’t even realise an interstitial is present on the page. As a result, it’s critical to use interstitials with caution.

Robust

Last but not least, there’s tough. How can we know that the material we’re putting on the page will work on a wide range of devices and scenarios?

1. Validation

Using appropriate HTML is a great way to start. You may utilise a validator and examine your HTML, CSS, and JSON-LD files. You’ll have a much better experience and everything you produce will be more digestible if you write the proper code, especially if you use semantic HTML and provide meaning to that code.

2. Responsive

Is your website mobile-friendly? This is something you should already be doing. However, if you aren’t, check to make sure it works on a mobile, desktop, and tablet device, and that the layout remains the same, if scaled or re-imaged in a different way.

3. Interactable

Make sure it can be interacted with. Is your website’s technology capable of allowing a visitor to zoom in because they have a vision handicap or changing the colours? It ought to. If you accomplish these three things from the bottom, I believe it will do a lot of the hard lifting for you and you will have to do a lot less work because you’ve put in the structure and basis to be accessible.

That’s all there is to it when it comes to technical SEO and accessibility. There are some validation tools on the right-hand side if you have any additional queries. But thank you so much for taking the time to listen to Whiteboard Friday on accessibility and SEO. I hope you take this information and use it to become more inclusive in your SEO practices in the future.