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