[Estimated read time: 4 minutes]
Do you know anyone who is visually impaired? Maybe they have low vision or color blindness, or are fully blind. Think about how they use the Internet. Close your eyes, or at least squint really hard, and try to find today’s news or interact with your friends on Facebook. It’s a challenge many of us don't think about every day, but some of what we do in SEO can affect the experience that people with visual impairments have when visiting a page.
Accessibility and the Internet
Visually impaired Internet users are able to navigate and use the web using screen readers like VoiceOver or Jaws. Screen readers, much like search engine crawlers, rely on signals in the code to determine the structure and the context of what they’re crawling. The overlap in what search crawlers look for and interpret versus what screen readers look for and interpret is small, but the idea is the same: Where are the elements of this page and how do I understand them?
The SEO overlap
While it’s important to understand where SEO and accessibility (a11y) overlap in order to optimize correctly for both, it’s also important to note that optimizing for one is not necessarily akin to optimizing for the other. In other words, if you’ve optimized a page for search engines, it doesn’t mean you’ve necessarily made it accessible — and vice versa.
Recently, web accessibility expert Karl Groves wrote a post called The Accessibility & SEO Myth. Mr. Groves knows the world of accessibility inside and out, and knows that optimizing for accessibility, which goes far beyond optimizing for the visually-impaired, is very different overall, and much more complex (strictly from a technical standpoint) than optimizing for search engines. He’s right — that despite the ways SEO and a11y overlap, a11y is a whole different ballgame. But if you understand the overlap, you can successfully optimize for both.
Here are just some examples of where SEO and accessibility can overlap:
- Video transcription
- Image captioning
- Image alt attributes
- Title tags
- Header tags (H1, H2, etc)
- Link anchor text
- On-site sitemaps, table of contents, and/or breadcrumbs
- Content ordering
- Size and color contrast of text
- Semantic HTML
If you’re developing the page yourself, I would challenge you to learn more about the many things you can do for accessibility beyond where it overlaps with SEO, like getting to know ARIA attributes. Take a look at the W3C Web Content Accessibility Guidelines and you’ll see there are far more complex considerations for accessibility than what we typically consider for technical SEO. If you think technical SEO is fun, just wait until you get a load of this.
Optimizing for accessibility or SEO?
Chances are, if you’re optimizing for accessibility, you’re probably covering your bases for those technical optimizations where accessibility and SEO overlap. BUT, this doesn’t always work the other way around, depending on the SEO tactics you take.
Thankfully, the Converse site has a pretty descriptive alt attribute in place!
Consider a screen reader reaching an image of a pair of women’s black Chuck Taylor All-Star shoes and reading its alt attribute as "Women’s black Chuck Taylor All-Stars buy Chucks online women’s chuck taylors all-stars for sale." Annoying, isn’t it? Or compare these page titles with SEO and accessibility in mind: "Calculate Your Tax Return" versus "Online Tax Calculator | Tax Return Estimator | Tax Refund/Rebate." Imagine you just encountered this page without being able to see the content. Which one more crisply and clearly describes what you can expect of this page?
While it’s nice to know that proper technical search engine optimization will affect how someone using a screen reader can contextualize your site, it’s also important to understand (1) that these two optimization industries are, on a bigger level, quite different, and (2) that what you do for SEO where SEO and a11y overlap will affect how some visitors can (or can’t) understand your site.
Marking the 5th Global Accessibility Awareness Day https://t.co/QiJyAM8xGW 05/19? Let us know how Globala11yawarenessdayAtGmailDotCom #gaad
— GblA11yAwarenessDay (@gbla11yday) March 14, 2016
For Global Accessibility Awareness Day on May 19, I’ll be collaborating with some experts in a11y on a post that will go into more details on what aspects of SEO + a11y to be keenly aware of and how to optimize for both. I'll be sure to find as many examples as I can — if you've got any good ones, please feel free to share in the comments (and thanks in advance).
Educational resources & tools
In the meantime, to learn more about accessibility, check out a couple of great resources:
- W3C Techniques for WCAG 2.0
- ARIA attributes
- Web Accessibility Evaluation Tools List
- Web Accessibility Tools & events from the Paciello Group, a well-known accessibility agency
- Also check out The Paciello Group’s blog. It’s digestible bits of good info
- Ted Drake’s “css toys for professional web developers“ blog, heavy on accessible dev & accessible infographics!
Great post. I do work in both accessibility and SEO and I'm so glad to see the two being discussed in relation to each other. Shame this site isn't accessible, though. Also interesting how some of the images on this page don't have alt text themselves! Tip: add null alt text to decorative images and other images that provide no meaning in context to the content. Otherwise screen readers and other assistive technologies will read them as "image" or something similar, leaving users with vision disabilities guessing if the photo is decorative or if it conveys important information that they can't access.
Obviously optimizing for Search engines. Cant we say that accessibility is a part of SEO because everything we do online for better business is intangibly or tangibly goes to SEO? I think that better or improved accessibility will lead to some extend of improvement in SEO.
Laura you made it very clear to understand the relation and correlation between the two.
Accessibility has a much much broader technical scope than SEO. You're optimizing for the visually impaired, people who some sites might trigger seizures, people who don't have the ability to type or to use a mouse, people with cognitive and neurological disabilities, etc. Where SEO and a11y overlap is small, and like you said, better accessibility might lead to search engines also better understanding the site. Accessibility is way bigger than SEO though, so you couldn't really say the same thing the other way around.
As an SEO, I personally believe it's important to understand that some of the things we do for SEO are also affecting how those with disabilities find and understand our content as well. Real people vs search engines! :)
Oh got it! As per you the main difference between the both: Accessibility is for Real people (Physically fit or not) and SEO is for search engines. Ultimately both of them goes to Real people.
Now I understand and agreed that Accessibility has a much broader technical scope than SEO.
If you think SEO is fun now and after you got a load of this, wait until Augmented Reality basically makes most of this ( if not all and then some ) mandatory. We're just starting to mature and grow up from throwing info online and leaving it at that to taking pride in what we want seen by hundreds or thousands.
Care about all people using your content and you'll end up attracting more traffic and users for more reasons than just to read and learn.
Showing your users you care is akin to giving them a hug or handshake while saying " good morning ".
Hi Laura,
To feed the discussion, I would like to share a lecture I gave at CSUN in 2012 on Accessibility and SEO in PDF files.
I created some PDF files with and without respected accessibility exigences in them and after a few days, searched with Google :
https://fr.slideshare.net/vincentfrancois/pdf-acc-s...
Thanks Laura, great read!
I have a client whose target audience is those whom are visually impaired and we have always had a hard time with tailoring the website so they can get more use out of it. I'm definitely going to give this some further thought and perhaps test to see what affects user engagement.
Looking forward to reading Part 2!
Hopefully some of those resources help. Optimizing for a11y is pretty interesting, although I bet it's tough to just jump straight into it for a client. It helps, if you have the budget, to get a few visually impaired folks to come in and try out a few tasks after you've built an alpha, because even when you think you've optimized it, people who use the site with different screen readers and devices will often find loopholes you haven't considered. Sometimes it's more cost-effective to do those focus groups up front than to go live and have to retrofit when you think you're done. Check this out: https://www.afb.org/info/afb-research-projects-archive/research-methods/focus-groups/235
Thanks for the post Laura! Looking forward to read the second part!
Also forward to read the second part. Laura !
Great idea to settle a place to discuss about the overlap between these two activities. It will permit to discuss, create and share good practices!
As you ask for examples, I'll submit one I encounter for one of my client, related to travel industryt. The website displays some purely decorative images of destinations, beaches, cocktails or other images.
As an accessibility expert, my recommendation is to be sure to give them an empty alt attribute, because they are decorative images and we should not bother screen reader users with desciption like "Cuba", "Cocktail at Cancun" or " Beach of Coco"...
But for SEO reasons, they are filled with text in order to be indexed in Google Images and seems to attract peoples by this way.
What do you think about it? What other readers of this post think too?
My first idea is to stick to the WCAG first (alt="") and maybe to create some honeypot pages to attract people through SEO. But I'm an accessibility expert, not a SEO one, and may probably miss the whole picture...
Ooh that's a good one Vincent. From my own personal SEO standpoint I would require a descriptive alt for images that we think might attract qualified visitors to a page via image search or via images in universal search results. Some types of searches skew towards very visual/image-heavy search results, so an imahe may be a way someone would discover your website through search.
The crocus bulb example on the W3.org page on decorative images is a great example: https://www.w3.org/WAI/tutorials/images/decorative... - it recommends that the alt attribute should be null because the image doesnt provide any additional context next to the crocus bulbs text link. From an SEO standpoint, if this was our lovely crocus bulbs page, we'd want to alt attribute that image with "crocus bulb" because look at what shows up in search results for "crocus bulb". Images.
In cases like this, would the ARIA role='presentation" markup work for both?
Dear Laura... What do you mean about "If you think technical SEO is fun"
Meaning, if you enjoy the job of optimizing for search engines, you might really like learning about accessibility too. :)
Hi Laura!!
Exact!! In addition to proper adaptation of SEO for people with visual people, this adaptation may even be more important to improve the user experience (which in turn influte in SEO)
Hi Laura,
Continuing the same discussion here in Montreal with our SEO expert, we found a possible elegant solution to the issue of replacement texts on decorative images. The issue was:
1. They are decorative images that should have an empty alt attribute, following the WCAG 2.0.
2. These images, with some keywords in this alt attribute, can be indexed by search engines and drive some visitors to the pages.
The 1. conducts to loose the indexation. The 2. is noise to the already there blind user through his screen reader.
We suggest to use WAI-ARIA there, with a aria-hidden="true" property around the images, hiding them from the screen reader and letting Google and others indexing them.
What do you think about it? Does any one already tried this? If yes, what was the results?
Thank you.
Very interesting idea! Quite creative - I love it. Although I think hidden text via several means could work to a degree, there's a caveat: With hidden text & Google, the hidden text may be indexed, but it doesn't get the same weight as text that is not hidden. So it's possible for something to appear in search results for the hidden text, but I don't know how much it would contribute to actual positioning in rankings. Not as much as alt text. Sounds like it would definitely be doable though.
I had put some more thought into it too, and for decorative images I'd recommend the same as for A11y - leave the alt blank. The example I use on the following accessibility post I'm putting together is using a decorative image of clouds on a health insurance site. You can give the clouds image an alt attribute like "affordable health insurance" for SEO but 1) People aren't looking for images of affordable health insurance and 2) Even if they were, they're probably not going to click on some clouds.
In the instance where you have an image and text as a link, the a11y recommendation is to leave the alt empty on the image so as to not be repetitive. I've though about this some more too - and I believe (and recommend in the next post) that that be followed. Reason being - the anchor text already links to the page with the keywords in it, and the image itself, maybe it's of a black widow spider (on a page about California spiders) - you want the destination page to rank for black widow spiders, not the California spiders page. Use alt attributes of the images of the black widow spider on the destination page, so your black widow spider image that appears in search results will take people to that destination page (not the California spiders page where that particular image link is). I hope that makes sense. It seems logical to me and should work for both industries if people can let go of over-optimization. :)
What do you think?
Great post Laura, it's really a challenge to optimize a webpage for SEO and accessibility (a11y). Thanks for sharing.
This is a fantastic article in the fact that you are pointing out that as SEO's the game is changing in terms of usability and the crisp importance of needing not only to market products, services,ect but also make it accessible to everyone. The shoe example was perfect and although it was not filled with a bunch of random "for sale", "best", or other terms that can commonly be used to push a product, it did a better job by simply stating what the image was.
I think that when optimizing a page if you consider someone only using a text reader to view the site you worked on tactics will change greatly. Thank you for this contribution and to the evolution view on SEO.
Imagine how bad it was for people with disabilities back in the days when keyword stuffing use to be all the rage. It's no wonder that industry isn't fond of SEO. Yikes. :)
There definitely are things that a person can do that both improves the SEO and the Accessibility of a website. A couple of summers ago, I watched around 300 videos on YouTube, and turned on the closed captions. If the closed captions were indexed for those videos, that wouldn't be a good thing for them. Most of the videos I watched, with the exception of a State of the Union Address had transcription problems. These mostly involved things like incorrect or misspelled company names and location names. There is the capability to correct the closed captions for videos on Youtube. Videos on the pages of a product site can be something that really sells a product to customers, but it could also help with SEO and Accessibility if care and attention are given to them.
In many ways optimizing a website for good accessibility will also help SEO. The classic example being ALT tags for images. They serve the purpose for accessibility as well as will help your page get ranked in image search. Good article . Eagerly awaiting part 2
What You Should Know About Accessibility + SEO, Part I: An Intro
https://moz.com/blog/accessibility-seo-1
Hi again, Laura,
Right outside our meeting about the subject, I would like to share a new questions about A11y and SEO overlaps we just encountered, the SEO expert and me, the accessibility expert.
We are working for an air carrier and the page permitting to book a flight displays some pretty pictures of the destination countries.
Should we give these pictures descriptive replacement text or empty ones?
From an accessibility point of view, theses pictures does not bring any information (and if they do, this information is already written in plain text besides). So they do have to be considered as decorative images, with an empty replacement text.
A blind user with a screen reader won't have to listen to useless (or repeated) information.
From a SEO point of view, these pictures are content that will be indexed by Google and as such may attract visitors looking for these images in search engines and drive them to the air carrier page. They should be given a replacement text to be correctly and efficiently indexed.
A blind user with a screen reader will have to listen to useless (or repetitive) information as he is booking.
The conflict comes from the fact that the page serves two different purposes :
1. It permits to engage the booking a flight process.
2. It attracts visitors from outside through images search engines.
If we consider only the first purpose, the accessibility rule prevails.
If we consider the second one, we should not miss opportunities to show our offers, giving replacement text to help indexation of our content.
An analogy is the situation of a human customer, physically booking flight at a wood desk, facing a vendor. It may describe the two purposes like this:
1. The customer books his flight. He don't want to be bothered by supplemental information about how pretty is the destination he already decided to flight to.
2. The vendor, while his customer is filling the booking form, may be interested to show to peoples passing by that they should do the same thing, that the destination is a pleasant one, that they have direct, or cheap, or comfortable, or secure flight to get there...
Are we bothering the true, actual, customer, in order to get some other after?
Aren't we able to build pages that may fill the two purposes - actual booking AND attracting future potential customers?
I'm pretty sure we are not the only ones to have this question. I look forward to ear you all about your solutions.
Thank you.
This is such a great question. I'd say that airport analogy might be better paralleled as Rand, who is currently perfectly happy self-booking his flight to Saba Island and doesn't want to be bothered vs Dr. Pete, who sees all these great pics of Saba Island and needs to know how to get there. Rand's experience is on-site while Dr. Pete's experience is during the research & discovery process.
One thing I'd rule out right away is how realistic the idea of getting image search traffic to the site is. For a celebrity site with pictures of Adele, I'd argue it's more important because not only do people go to image search for celeb pics, celeb queries often have photos in the regular universal search results. It could be a search traffic driver. For a site that helps you pay your parking tickets online I'd kill the idea of alt attributes for SEO over accessibility - image search is not a realistic search traffic driver there (people aren't going to image search in droves to find out how to pay their parking tickets).
So if you had the same situation on a nature site that helps people identify the different types of spiders in their region, what would you do? Last weekend I looked up "black widow spider" in Google to find a site where I could identify the spider and see how poisonous it's bite was. That site probably made ad impression money off of me. But what if it had the same alt attribute issue you describe? What would you do there?
The example you give is a good one. Unless there's another alternative (a great thing to research for the next post - thank you!), it may come down to having to make a judgement call.
I'd be *very* interested in learning of alternatives or judgement calls made around this issue in the past.
Sorry, a little late to reply to this. HTML5 provides for figure/figcaption elements. These elements allow images to be associated with the surrounding text. So you could assign null (alt="") text to your images to avoid duplication. This solution should satisfy your SEO needs. However, since many screen readers will ignore images with null alt text, this doesn't help users of assistive technology. You would then use an ARIA attribute such as describedby to prompt screen readers to recognize the image. The caveat here is that not all screen readers support ARIA yet but that is changing.
Hi Laura,
My question is that Is SEO technically dead?
Sweet article man!
Hi Laura,
I suggest you an interesting article fron Dequeue about boosting of SEO by accessibility practices.
https://twitter.com/ConsBoreale/status/739817820607774720
Hi fergytoo,
The images we are talking about are not clickable at all.
From a accessibility point of view, we surely have to leave the alt empty as they are decorative ones. This is only for the SEO that we are looking for a mixed solution. In order to provide a mid-term that does not change everything to fast. And as you know, peoples are more used to worship Google than their human brothers... ;-)
Right, I was getting this confused with a project that I've been testing all morning that has hyperlinked images. So sorry for the confusion!
My gut still says to steer away from using ARIA hidden for images and other visual content unless absolutely necessary. There are other types of assistive technologies other than screen readers; having the images available could be beneficial to some (sighted) users. There could also be UX reasons not to hide images that I'm not thinking of at the moment. In your case, it seems to me that if you use descriptive names for the decorative images and if the surrounding context is sufficient, you should be good to go for SEO purposes. Just my two cents, of course. If you can, please post results of any screen reader testing you do.
AKA fergytoo - just changed my screen name :-)
Hi Laura,
The aria-hidden="true" property comes from WAI-ARIA, that means it is only related to the accessibility layer of the operating system of the user's device.
The code is only hidden from adaptive technologies on the client's side, not hidden from all users. I'm surely not in Google's mind, but if the accessibility rules and needs are well understood, there is no reason to weight it less.
I totally agree with your cloud for insurance sample. In the case we are working on, the images and SEO texts are better linked: they are images from points of interest in some destinations for a carrier's website.
Hey Vincent and Laura,
My understanding is that using the hidden role on images that are otherwise focusable can cause assistive technologies to focus on nothing when using a keyboard because they will still be in the tab order. Also, ARIA isn't fully supported yet for all browser/screen reader/assistive technology combos. In any event, I'm not sure why you would want to go to all that trouble when you could use null alt text on the purely decorative images, give your images descriptive names, and use surrounding text or captions to adequately describe the content of the images. In this way, you're avoiding the annoyance of the images being interacted with by assistive technologies while providing enough fodder for search engines. I wouldn't think it would be necessary for search engines to rely on alt text alone to derive meaning of an image.
I'm sure it's just a matter of time until Google can judge accessibility and affect rankings for its visually impaired users.
Accessibility does aim at making the web content usable and available for visitors as many as possible, such as those who tend to be limited in their digital activities by a disability. In a sense, search engines are impossible because blind people cannot ‘see’ images, JavaScript, and video content. The ability of having web page content mechanically interpreted & rendered is therefore of great importance to both users of assistive technologies and search engines.
Wow Really very informative post, I never think before how those people interact with internet. Really though!!
But it's something like optimizing our website for Google voice search.
Yahoo has a really cool accessibility lab at their headquarters in Sunnyvale, with open visit hours I think on Wednesdays? (If anyone is interested I can find out). You can go in and get hands on experience trying to navigate the web and apps simulating all kinds of different disabilities. My team and I went *three times* just because there's so much to learn and interact with, and the team there at Yahoo is really great. Ted Drake, who is at Intuit and used to be at Yahoo, has a great blog with a lot of really helpful video content at last-child.com.
As far as i think if basics are done right the accessibility factor follows websites by itself, I can be wrong but this is what I have observed over years.
Tnx
Pulkit Thakur
Good post Laura, I have to recognize that I have never thought about the relation between SEO and accessibility (a11y), but after reading the post I have sense that improving accessibility you improve SEO
A typical example of how a tool for accessibility may be misused via SEO is to examine the title attribute. Title attribute is a means of giving extra information about elements of a webpage. And it’s significantly different from the title-element which is applied to offer search engine results links and is also displayed in the header area of the web browser.
A very interesting post, we are expectantly waiting for the second part of your post
Totally agree Laura! Accessibility should be done in all the webpages, as many people could get in, the better for the company, and it's a really smart whay to imporve SEO. Such a pitty that's still a long way, but it's always nice that people like you share their knowledge. Can't wait for second chapter!
Awesome post thanks so much for sharing!