The author’s views are entirely his own (except for the unlikely event of hypnosis) and may not always reflect Mosi’s views.
We hope you enjoyed this series on SEO and accessibility. In the final section, Cooper will show you how site-wide SEO strategies can help make it more perceptible, manageable, understandable, and powerful.
Hey, Cinema fans. Welcome to the latest issue of the board on Friday. I’m Cooper Hollmaier. I have been involved in SEO since 2016 and today I work for a large field salesman, helping to make our technical SEO strategy a reality. Thank you so much for participating in this series on SEO and accessibility.
I hope you’ve got a broad perspective and new tips for creating content and content that not only resonates with your audience, works well in search, but is accessible to more people. Today we are talking about technical SEO and accessibility.
Technical SEO and accessibility
Let’s dive in. Last time we talked Web Content Accessibility Guidelinesand you may remember that the four principles of WCAG are perceptible, usable, understandable, and powerful.
As a technical SEO, you are probably best perceived because your daily work, your daily workflow includes the belief that the pages, content, and experiences you create are available to search engines and perceived by search engines.
In many cases, when we visit SEO recommendations or SEO audits, I hear a lot of common topics, such as the header tag being baked into the image and so the search engine can’t see it or the content I produce is visible to robots but not to humans. These are problems of basic perception. I want you to take that mindset and consider applying it to your entire audience. So can all your people who hope to interact with your service, product, or experience be able to perceive all the things you offer at a basic level?
Some things you might think would be similar to what you would see in this audit, such as: Is all my text on the page visible? Is this active text? Is it page-specific, so can I select and copy and paste it, or is it baked into an image and inaccessible by assistive technology or browsers, or what do you have? You may also be wondering: is the color in contrast to my background and text, is it the right contrast?
Is there enough clarity and sharpness between my layout elements? If things seem a little blurry or it’s not quite clear that something is accessible to the search engine and the user, go back to the drawing board and figure out how to make both things work well.
2. Rich media
We also like to add images, text, video and audio to the pages we build for our customers. It is important that these rich elements, now that we have passed the main text and style elements, the rich elements placed on the page are also perceptible to all your users. There are a few things we can do to achieve this. For images, it provides an alternative to text and offers something that, in addition to that image, is for the screen reader to see and understand for the visually impaired.
Naming things with human-friendly names versus “DSC1352.JPEG” helps both search engines and assistive technology see this picture and understand what it is. In the context of the page, it is also important that you place the images on value-added pages. You want to enlighten the user with some additional content to make them feel a little more or give context more of what you’re talking about. Add images for value, not just for display on Google Image Search.
What about the video? So the video is a little different. The video contains a series of moving images. So every time I think of a movement, I think to myself, “How can I make sure that if a user wants to stop that movement, he can do it?”
Clear playback controls are crucial when it comes to both accessibility and a great video player experience for each user. In addition, synchronous equivalents to these text alternatives. We talked about images with text alternatives. Videos must also have text alternatives, but they must be synchronized with the video over time. Otherwise, they make no sense in the context.
Then make sure they are distinguishable. It’s the same between video and audio. We want to make sure that the foreground and background are easily distinguishable from each other. If your video looks blurry, if your sound feels blurry, and I need to strain my ear or strain my eyes to see this content and understand what’s going on, you need to be a little sharper and a little clearer between the two.
Then transcripts of the text. Just like you need closed captions for videos, you want to get a transcript of the text for the audio, so if I’m in a loud place and I can’t hear the sound or I don’t have headphones connected or I need assistive technology, I have access to that sound.
These are all things you see when you look at code as technical SEO and you should be aware of it.
If you don’t have these things on your website, I would authorize you to ask these questions, for example: Listen, is there an alternative text to this image? How does a visually impaired person get, how does a hearing impaired person access these things?
3. Page structure
Three and four deal with page structure and semantic HTML. So it’s a little less about whether it’s perceptible and if it’s somehow understandable.
It’s kind of understandable grazing, but it should also touch on perception a bit. As the page has a bunch of H1s, the search engine can perceive a lot of confusion, right? They’re like, okay, this page has a bunch of H1s. I’m not quite sure what this page is about. Adding structure and cascading headlines to mark the relationship between parents and children will help you understand your content a little better. This makes it easier to understand what is going on.
4. Semantic HTML
Same thing with semantic HTML. We tend to add a lot of divs and spans and unrecognizable elements to our HTML. However, by labeling them in more appropriate ways so that we understand their meaning, we can understand what these tags contain, be it navigation or forms or tables, provided that this extra layer of information and comprehensibility allows search engines and assistive technology to analyze, perceive that you put on your page that are different from each other and offer a richer experience.
Okay, so we can perceive the content. But how do you make sure it’s up and running?
1. HTML sitemaps
A few SEO tips that I see people often do are create an HTML sitemap and add breadcrumbs to your page. In many cases, you may get a setback. An HTML sitemap is crucial for SEO to have these pages deep in the hierarchy of our website.
Then the breadcrumbs allow me to screen up and down a specific, let’s say it’s a product search page on an e-commerce website, without having to go back to the menu and then re-screen each individual menu item. So these two are crucial for both navigation and especially for people who navigate with a keyboard and use assistive technology.
3. Develop the keyboard first
Then develop a non-SEO, yet important and similar thing first with your website and your experience keyboard. Not everyone has a mouse or the ability to use a mouse due to a lack of mobility, disability, or lack of technology or hardware. So make sure you develop the keyboard first, and you kind of encapsulate more of the people you want to encapsulate with your audience.
Understandable. So in international SEO, when it comes to different countries and different languages, we talk about the importance of using the HTML on the page to indicate the language of the page. This helps search engines deliver the right results, perhaps in a national or international context. It also helps screen readers read your content in the right language.
2. Navigation layout
Then I think navigation layout and interstitials are pretty common, but no one likes navigation or confusing website layout. The easier it is for you to do this, the easier it will be for people to convert to this website or do what you are looking for, whether it is learning, whether it is buying or offering a service. It’s easier when navigation and layout are smoother, and we don’t use different words to mean the same thing in different places. This is even more important for people with assistive technology.
Interstitials – No one likes these pop-ups that prevent us from browsing the rest of the website. Google doesn’t love them either. However, people with assistive technology in particular, if we do not treat these pop-ups correctly, will end up with a scenario where users may be trapped by the keyboard and unable to get out of the interstitial, or they may not realize that even the interstitial is placed on the page. Therefore, it is important to be very careful when using interstitials.
Last but not least is robust. How can I ensure that the content on my page is compatible with many devices and scenarios?
Just using proper HTML is a great way to do that. You can use a validator to view your HTML, CSS, and JSON-LD. Creating the right code, and especially if you use semantic HTML, but also the meaning of that code, will give you a much better experience and everything that your building is better digestible.
Is your website responsive? You should do it already. But if you don’t, make sure it works on your mobile device, desktop, and tablet, and the layout stays the same, maybe resized, or changed differently.
Make sure it is interactive. If a user wants to zoom in because they have a visual impairment or want to change colors, does your technology allow your website to do so? It should. If you do these three things at the bottom, I think it will do a lot of hard lifting and you will have to do a lot less work because you have built in a kind of framework to make the foundation accessible.
This is technical SEO and accessibility. If you have more questions or want validation tools, here are some on the right or you can catch me on Twitter @cooperhollmaier for more advice. But thank you so much for listening to the board and accessibility with SEO. I hope you accept this and become more and more involved in doing SEO in the future.