SEO and Accessibility: Technical SEO [Series Part 3]

We hope you’ve enjoyed this series on SEO and accessibility. In the final installment, Cooper shows you how the technical SEO strategies you implement across your site can help make it more perceivable, operable, understandable, and robust.

Video Transcription

Hey, Moz fans. Welcome to the latest edition of Whiteboard Friday. I'm Cooper Hollmaier. I've been doing SEO since 2016, and today I work for a large outdoor retailer helping our technical SEO strategy come to life. Thank you so much for attending this series on SEO and accessibility.

I hope that you've gained a broad perspective and new tips and tricks for creating content that not only is resonating with your audience, performs well in search, but is also accessible to more people. Today we're going to talk about technical SEO and accessibility. 

Technical SEO and accessibility

Let's dive in. Last time we talked about Web Content Accessibility Guidelines, and you might remember that the four principles of WCAG are perceivable, operable, understandable, and robust.

Perceivable

As a technical SEO, you're probably most concerned with perceivable because your day-to-day operations, your day-to-day work stream involves making sure that the pages, the content, the experiences you're creating are accessible to search engines and perceivable to search engines. 

A lot of times when we go through SEO recommendations or SEO audits, I hear a lot of common themes, like the header tag is baked into the image and so a search engine can't see it, or the content I'm producing is visible to bots but it's not visible to people. These are issues with base level perception. I want you to take that mindset and consider if you apply that to your whole audience as well. So can all of your people that are hoping to engage with your service or product or experience, are they able to perceive all the things you have to offer at a base level?

1. Styles

Some things you might be thinking would be similar to what you would be seeing in this audit, like: Is all of my text on the page visible? Is it active text? Is it native to the page, so can I select it and copy and paste it, or is it baked into the image and unreachable by assistive technology or browsers or what have you? You might also be thinking: Is the color contrast to my background and my text, is it the right contrast?

Is there enough clarity and crispness between my layout elements? If things seem a little bit fuzzy or it's not quite clear that something is accessible to a search engine and a user, go back to the drawing board and figure out how to make both of those things work out well. 

2. Rich media

We also like to add images, text, video, and audio to the pages that we're building for our customers. It's important that these rich elements, now that we're kind of past the basic text and the styling elements, the rich elements we're putting on the page are perceivable by all of your users as well. There's a couple of things we can do to make that happen. For images, giving them a text alternative and providing something that is in addition to that imagery will help it be seen by a screen reader and understood by someone who has a visual disability.

Also naming things with human-friendly names versus "DSC1352.JPEG" is going to help search engines as well as assistive technology see that image and understand what it is. On-page context, it's also important that you put images on pages that add value. You want to enlighten a user with some additional content to give them a little bit more of a feeling or give them some more context on what you're talking about. Add images for value, not just to show up in Google image search. 

What about video? So video is a little bit different. Video has a series of moving images. So every time I think about movement, I think to myself, "How can I make sure that if a user wants to stop this movement, they can?"

Having clear playback controls is crucial when we're talking about accessibility as well as having a great video player experience for any user. In addition, synchronous equivalents for those text alternatives. We talked about images having text alternatives. Videos need to have text alternatives as well, but they need to be synchronized to time with that video. Otherwise they won't make sense in context. 

Then making sure that they're distinguishable. This is the same between video and audio. We want to make sure that the foreground and the background are easily distinguishable from one another. If your video feels muddy, if your audio feels muddy and it takes me straining my ear or straining my eyes to be able to see that content and understand what's happening, you need to be a little bit more crisp, a little bit more clear on those two distinctions.

Then text transcripts. Just like you need closed captions for videos, for audio you want to have a text transcript, so if I'm maybe in a loud place and I can't hear the audio or I don't have my headphones plugged in or I needed to use assistive technology, I'm able to access that audio. 

These are all things that you'll be seeing as you're reviewing code as a technical SEO and you should be aware of.

If you don't have these things going on, on your website, I would empower you to ask those questions, the hard questions like: Hey, is there a text alternative to this image? How will a person with a visual disability, how will a person with an auditory disability access these things? 

3. Page structure

Three and four are about page structure and semantic HTML. So this is a little bit less about is this perceivable and is it kind of understandable.

It's kind of grazing the understandable, but it should be a little bit about perception, too. Having a bunch of H1s on a page, as you can imagine, a search engine might perceive as very confused, right? They're like, okay, there's a bunch of H1s on this page. I'm not really sure what this page is about. Adding structure and cascading headings to signify parent-child relationships is going to help your content be a little bit more perceivable. It's going to be easier to understand what's happening. 

4. Semantic HTML

Same thing with semantic HTML. We tend to put lots of divs and spans and unidentifiable elements in our HTML. But by marking them up in more appropriate ways, so that we understand what their meaning is, understand what those tags contain, whether it's navigation or forms or tables, providing that extra layer of information and understandability is going to allow search engines and assistive technology to be able to parse through those things, to allow them to perceive the things you're putting on your page that are different from one another and provide a richer experience.

Operable

Okay, so we're able to perceive the content. But how do we make sure that it's operable? 

1. HTML sitemaps

A couple of SEO recommendations that I often see people making are build an HTML sitemap and put breadcrumbs on your page. A lot of times you might get some pushback from that. The HTML site map is super important we know for SEO, for discoverability of those pages deep in our website's hierarchy.

We know that breadcrumbs are also pretty equally important for discoverability. Both of these elements help users with assistive technology better navigate the website. The HTML site map allows for if your menu doesn't include all the pages on your website or if it's confusing or you're using JavaScript or some other technology that's not accessible to my tech stack.

2. Breadcrumbs

Then breadcrumbs allow me to parse up and down the particular let's say it's a product search page on an e-commerce website without having to go back to the menu and then parse through every single menu item again. So these two are super important for navigation but also especially for people who are navigating with a keyboard and using assistive technology.

3. Develop keyboard-first

Then a non-SEO thing but important nonetheless and relatable, develop your website and your experience keyboard first. Not everyone has a mouse or the ability to use a mouse because of a movement disability or because of an impairment or because of a lack of technology or hardware. So make sure you develop keyboard first, and you're going to kind of encapsulate more of those people that you're looking to encapsulate with your audience.

Understandable

1. Language

Understandable. So we talk about in international SEO, when we're dealing with different countries and different languages, how important it is to use the HTML on our page to signify what the language of the page is. It helps search engines provide the right results in the right maybe national or international context. It also helps screen readers read your content aloud in the right language.

2. Navigational layout

Then navigational layout and interstitials I think are pretty common, but nobody likes a navigation or a layout of a website that's confusing. The easier you make it, the easier it is for people to convert or do what you're looking for them to do with this website, whether it's learn, whether it's buy, whether it's engage in a service. That's easier when the navigation and layout is streamlined and we're not using different words in different places to mean the same thing. It's even more important for people with assistive technology. 

3. Interstitials

Interstitials, nobody likes those pop-ups in our face, that don't allow us to browse the rest of the website. Google doesn't love them either. But especially people with assistive technology, if we're not treating those pop-ups in the right way, we're going to end up in a scenario where users may be in a keyboard trap and they can't get out of the interstitial, or they don't understand that an interstitial is even put up on the page. So it's important to be very mindful when using interstitials. 

Robust

Last but not least is robust. How do we make sure that the content we're putting on the page is compatible for a large variety of devices and scenarios? 

1. Validation

Just using proper HTML is a big way to do this. You can use a validator and you can look at your HTML, your CSS, and your JSON-LD. Creating the right code and especially when you're using semantic HTML as well providing meaning to that code, you're going to have a lot better experience and everything your building is more digestible. 

2. Responsive

Is your website responsive? You should be doing this already. But if you're not, make sure it's operating on a mobile and a desktop and a tablet device and the layout stays the same, it's just maybe resized or re-imaged in a different way.

3. Interactable

Make sure it's interactable. If a user wants to be able to zoom in because they have a visual disability or they want to be able to change the colors, does your technology on your website allow them to do that? It should. If you do these three things on the bottom, I think it's going to do a lot of heavy lifting and you're going to have to do a lot less work because you've kind of built in the framework, the foundation to be accessible.

That's technical SEO and accessibility. If you have more questions or want some validation tools, there are some on the right-hand side here, or you can hit me up on Twitter @cooperhollmaier for some more advice. But thank you so much for listening to Whiteboard Friday and accessibility along with SEO. I hope that you take this and you become more and more inclusive in the way that you're doing SEO in the future.

Video transcription by Speechpad.com

Resources

• HTML sitemaps
• WCAG
• Markup validation
• Rich results tests
• International Association of Accessibility Professionals