SEO and Accessibility: Technical SEO [Series Part 3]

Join Shop Free Mart! Sign up for free!


The creator’s views are totally his or her personal (excluding the unlikely occasion of hypnosis) and could not all the time mirror the views of Moz.

We hope you’ve loved this sequence on SEO and accessibility. In the ultimate installment, Cooper reveals you ways the technical SEO methods you implement throughout your website can assist make it extra perceivable, operable, comprehensible, and sturdy.

Photo of the whiteboard with handwritten notes on how technical SEOs can focus on accessibility.
Click on the whiteboard picture above to open a bigger model in a brand new tab!

Video Transcription

Hey, Moz followers. Welcome to the most recent version of Whiteboard Friday. I am Cooper Hollmaier. I have been doing SEO since 2016, and immediately I work for a big outside retailer serving to our technical SEO technique come to life. Thank you a lot for attending this sequence on SEO and accessibility.

I hope that you have gained a broad perspective and new suggestions and tips for creating content material that not solely is resonating along with your viewers, performs nicely in search, however can also be accessible to extra folks. Today we’ll speak about technical SEO and accessibility. 

Technical SEO and accessibility

Let’s dive in. Last time we talked about Web Content Accessibility Guidelines, and you may keep in mind that the 4 ideas of WCAG are perceivable, operable, comprehensible, and sturdy.

Perceivable

As a technical SEO, you are in all probability most involved with perceivable as a result of your day-to-day operations, your day-to-day work stream includes ensuring that the pages, the content material, the experiences you are creating are accessible to engines like google and perceivable to engines like google. 

Quite a lot of instances after we undergo SEO suggestions or SEO audits, I hear a number of widespread themes, just like the header tag is baked into the picture and so a search engine cannot see it, or the content material I am producing is seen to bots however it’s not seen to folks. These are points with base stage notion. I need you to take that mindset and contemplate in case you apply that to your complete viewers as nicely. So can all your folks which can be hoping to have interaction along with your service or product or expertise, are they capable of understand all of the issues you must provide at a base stage?

1. Styles

Image of handwritten list of style changes including native text, no keyword stuffing, and color contrast.

Some belongings you may be pondering could be much like what you’d be seeing on this audit, like: Is all of my textual content on the web page seen? Is it lively textual content? Is it native to the web page, so can I choose it and copy and paste it, or is it baked into the picture and unreachable by assistive expertise or browsers or what have you ever? You may also be pondering: Is the colour distinction to my background and my textual content, is it the proper distinction?

Is there sufficient readability and crispness between my structure parts? If issues appear slightly bit fuzzy or it isn’t fairly clear that one thing is accessible to a search engine and a person, return to the drafting board and work out the right way to make each of these issues work out nicely. 

2. Rich media

Image of handwritten list of rich media improvements.

We additionally like so as to add pictures, textual content, video, and audio to the pages that we’re constructing for our clients. It’s vital that these wealthy parts, now that we’re form of previous the fundamental textual content and the styling parts, the wealthy parts we’re placing on the web page are perceivable by all your customers as nicely. There’s a few issues we are able to do to make that occur. For pictures, giving them a textual content different and offering one thing that’s along with that imagery will assist it’s seen by a display reader and understood by somebody who has a visible incapacity.

Also naming issues with human-friendly names versus “DSC1352.JPEG” goes to assist engines like google in addition to assistive expertise see that picture and perceive what it’s. On-page context, it is also vital that you just put pictures on pages that add worth. You need to enlighten a person with some extra content material to provide them slightly bit extra of a sense or give them some extra context on what you are speaking about. Add pictures for worth, not simply to indicate up in Google picture search. 

What about video? So video is slightly bit totally different. Video has a sequence of transferring pictures. So each time I take into consideration motion, I feel to myself, “How can I make sure that if a user wants to stop this movement, they can?”

Having clear playback controls is essential after we’re speaking about accessibility in addition to having a fantastic video participant expertise for any person. In addition, synchronous equivalents for these textual content options. We talked about pictures having textual content options. Videos have to have textual content options as nicely, however they should be synchronized to time with that video. Otherwise they will not make sense in context. 

Then ensuring that they are distinguishable. This is similar between video and audio. We need to ensure that the foreground and the background are simply distinguishable from each other. If your video feels muddy, in case your audio feels muddy and it takes me straining my ear or straining my eyes to have the ability to see that content material and perceive what’s occurring, it’s worthwhile to be slightly bit extra crisp, slightly bit extra clear on these two distinctions.

Then textual content transcripts. Just such as you want closed captions for movies, for audio you need to have a textual content transcript, so if I am perhaps in a loud place and I can not hear the audio or I haven’t got my headphones plugged in or I wanted to make use of assistive expertise, I can entry that audio. 

These are all issues that you will be seeing as you are reviewing code as a technical SEO and you have to be conscious of.

If you do not have these items occurring, in your web site, I might empower you to ask these questions, the arduous questions like: Hey, is there a textual content different to this picture? How will an individual with a visible incapacity, how will an individual with an auditory incapacity entry these items? 

three. Page construction

Photo of hand drawn images comparing different page structures.

Three and 4 are about web page construction and semantic HTML. So it is a little bit much less about is that this perceivable and is it form of comprehensible.

It’s form of grazing the comprehensible, however it needs to be slightly bit about notion, too. Having a bunch of H1s on a web page, as you may think about, a search engine may understand as very confused, proper? They’re like, okay, there is a bunch of H1s on this web page. I am probably not positive what this web page is about. Adding construction and cascading headings to suggest parent-child relationships goes to assist your content material be slightly bit extra perceivable. It’s going to be simpler to know what’s occurring. 

four. Semantic HTML

Same factor with semantic HTML. We are likely to put a lot of divs and spans and unidentifiable parts in our HTML. But by marking them up in additional acceptable methods, in order that we perceive what their which means is, perceive what these tags include, whether or not it is navigation or varieties or tables, offering that further layer of data and understandability goes to permit engines like google and assistive expertise to have the ability to parse by means of these issues, to permit them to understand the belongings you’re placing in your web page which can be totally different from each other and present a richer expertise.

Operable

Okay, so we’re capable of understand the content material. But how will we ensure that it is operable? 

1. HTML sitemaps

Photo of hand drawn HTML sitemap example.

A few SEO suggestions that I typically see folks making are construct an HTML sitemap and put breadcrumbs in your web page. Quite a lot of instances you may get some pushback from that. The HTML website map is tremendous vital we all know for SEO, for discoverability of these pages deep in our web site’s hierarchy.

We know that breadcrumbs are additionally fairly equally vital for discoverability. Both of those parts assist customers with assistive expertise higher navigate the web site. The HTML website map permits for in case your menu would not embody all of the pages in your web site or if it is complicated otherwise you’re utilizing JavaScript or another expertise that is not accessible to my tech stack.

2. Breadcrumbs

Photo of hand drawn breadcrumbs example.

Then breadcrumbs enable me to parse up and down the actual as an instance it is a product search web page on an e-commerce web site with out having to return to the menu and then parse by means of each single menu merchandise once more. So these two are tremendous vital for navigation but additionally particularly for people who find themselves navigating with a keyboard and utilizing assistive expertise.

three. Develop keyboard-first

Photo of hand drawn computer and keyboard.

Then a non-SEO factor however vital nonetheless and relatable, develop your web site and your expertise keyboard first. Not everybody has a mouse or the power to make use of a mouse due to a motion incapacity or due to an impairment or due to a scarcity of expertise or . So be sure you develop keyboard first, and you are going to form of encapsulate extra of these folks that you are looking to encapsulate along with your viewers.

Understandable

1. Language

Photo of handwritten HTML code specifying LANG=

Understandable. So we speak about in worldwide SEO, after we’re coping with totally different nations and totally different languages, how vital it’s to make use of the HTML on our web page to suggest what the language of the web page is. It helps engines like google present the proper ends in the proper perhaps nationwide or worldwide context. It additionally helps display readers learn your content material aloud in the proper language.

2. Navigational structure

Photo of hand drawn web page examples.

Then navigational structure and interstitials I feel are fairly widespread, however no one likes a navigation or a structure of an internet site that is complicated. The simpler you make it, the simpler it’s for folks to transform or do what you are searching for them to do with this web site, whether or not it is study, whether or not it is purchase, whether or not it is interact in a service. That’s simpler when the navigation and structure is streamlined and we’re not utilizing totally different phrases somewhere else to imply the identical factor. It’s much more vital for folks with assistive expertise. 

three. Interstitials

Photo of hand drawn page with an

Interstitials, no one likes these pop-ups in our face, that do not enable us to browse the remainder of the web site. Google would not love them both. But particularly folks with assistive expertise, if we’re not treating these pop-ups in the proper means, we’ll find yourself in a situation the place customers could also be in a keyboard lure and they can not get out of the interstitial, or they do not perceive that an interstitial is even put up on the web page. So it is vital to be very conscious when utilizing interstitials. 

Robust

Last however not least is strong. How will we ensure that the content material we’re placing on the web page is appropriate for a big number of gadgets and eventualities? 

1. Validation

Photo of hand drawn example of JSON+LD validation.

Just utilizing correct HTML is an enormous means to do that. You can use a validator and you may have a look at your HTML, your CSS, and your JSON-LD. Creating the proper code and particularly while you’re utilizing semantic HTML as nicely offering which means to that code, you are going to have loads higher expertise and every part your constructing is extra digestible. 

2. Responsive

Photo of hand drawn image of web pages resizing for mobile, medium screens, and large screens.

Is your web site responsive? You needs to be doing this already. But in case you’re not, ensure that it is working on a cellular and a desktop and a pill system and the structure stays the identical, it is simply perhaps resized or re-imaged otherwise.

three. Interactable

Photo of hand drawn web page with arrows to indicate different interactions available.

Make positive it is interactable. If a person desires to have the ability to zoom in as a result of they’ve a visible incapacity or they need to have the ability to change the colours, does your expertise in your web site enable them to try this? It ought to. If you do these three issues on the underside, I feel it should do a number of heavy lifting and you are going to must do loads much less work since you’ve form of constructed within the framework, the muse to be accessible.

That’s technical SEO and accessibility. If you might have extra questions or need some validation instruments, there are some on the right-hand facet right here, or you may hit me up on Twitter @cooperhollmaier for some extra recommendation. But thanks a lot for listening to Whiteboard Friday and accessibility together with SEO. I hope that you just take this and you turn into extra and extra inclusive in the way in which that you just’re doing SEO sooner or later.

Video transcription by Speechpad.com


Resources



Source hyperlink Internet Marketing

Join Shop Free Mart! Sign up for free!

Be the first to comment

Leave a Reply

Your email address will not be published.


*