{"id":24474,"date":"2017-10-09T11:00:05","date_gmt":"2017-10-09T16:00:05","guid":{"rendered":"https:\/\/getflywheel.com\/?p=24474"},"modified":"2023-04-20T16:32:12","modified_gmt":"2023-04-20T21:32:12","slug":"why-use-alt-tags-for-accessibility-instead-of-seo","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/","title":{"rendered":"Why you Should use Alt Tags for Accessibility (Instead of SEO)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Accessibility can be a controversial subject. Proper accessibility habits sometimes conflict with established (or at least common) practices in other aspects of the web development industry. Nowhere is this more true that with the alt attribute and SEO.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">More commonly referred to as an \u201calt tag.\u201d The alt attribute on images are a popular target for additional SEO optimization. It makes sense \u2013 search engines crawl alt tags when they are present. But more often than not, your images shouldn\u2019t even have an alt attribute at all.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Images as Progressive Enhancement<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/09\/alt-tags-accessibility-camera.jpg\" alt=\"Guy looks at a camera \" class=\"wp-image-24555\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.0 Guidelines<\/a> are clear on whether or not an image should have a non-text alternative. Non-text content (images, video, audio, etc.) should have an alt attribute or \u201ctext alternative that serves the equivalent purpose.\u201d You may think that settles the debate and that all images should have an alt tag where we can add in some SEO terms. It\u2019s not quite that simple.\u00a0The WCAG guidelines provide a specific exception for decorative images:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The WCAG guidelines provide a specific exception for decorative images:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u201cIf non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The tricky part is defining \u201cpure decoration\u201d because we\u2019re venturing into opinion territory. In this writer\u2019s opinion, nearly every image you add to web content is for decoration. Even graphs and charts should be described by their accompanying text instead of an alt tag. Images are a progressive enhancement for the text-based medium that is the web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML as a language was written to be forward-compatible, meaning the original text-based browsers will still be able to process modern HTML5 pages. Those browsers just ignore elements they don\u2019t understand, including images. Since HTML is the true language of the web, keep that in mind when creating content for it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We could, and I expect we will, debate the idea of images as progressive enhancement for days. But once you accept the concept, you need to answer the alt tag question. What should your decorative images have as their alt attribute?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Empty Alt<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/09\/alt-tags-accessibility-code.jpg\" alt=\"A computer with code on it \" class=\"wp-image-24556\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For the longest time, I defaulted to just not including an alt tag on my images. While this does the job of not having a text alternative for something that doesn\u2019t need it, it doesn\u2019t signal to screen readers and other assistive technologies that the image can be safely skipped over. For this you need a blank alt attribute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The blank attribute should be implemented like so:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The empty alt tag is important here. When assistive technologies come across it, they know to skip over the image completely. They treat it as if it doesn\u2019t exist instead of announcing an image that lacks a description. This leaves the user blissfully unaware of the image instead of being left to wonder how to describe it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What About SEO?<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/09\/alt-tags-accessibility-google.jpg\" alt=\"someone types on a computer \" class=\"wp-image-24554\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">SEO experts are likely shaking their heads by now, and that\u2019s okay. alt attributes are one of the instances where SEO and accessibility disagree. It\u2019s important to realize the purpose of the alt tag is very specific. It exists to provide a text alternative for the image in question. The alt attribute itself is an assistive technology; it does not exist to improve your SEO.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are other ways to improve your image SEO, including naming your image files in ways that help their ability to be found and indexed. I\u2019m not an SEO expert, so I won\u2019t pretend I know them all. What I can tell you is you are making your site less accessible by including alt tags where they aren\u2019t needed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping it Up<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The concept is simple, but it may take a while to get used to. Just remember, when writing your content, even with SEO in mind, describe your images in your actual content. Use the images as an enhancement to your text, not a requirement. Your SEO information and keywords belong in your content, not your image metadata. This way, having an empty alt attribute won\u2019t seem so weird.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility can be a controversial subject. Proper accessibility habits sometimes conflict with established (or at least common) practices in other aspects of the web development industry. Nowhere is this more true that with the alt attribute and SEO. More commonly referred to as an \u201calt tag.\u201d The alt attribute on images are a popular target<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","resource-topic":[910],"resource-role":[899],"resource-type":[916],"class_list":["post-24474","resource","type-resource","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why you Should use Alt Tags for Accessibility (Instead of SEO)<\/title>\n<meta name=\"description\" content=\"Proper accessibility habits sometimes conflict with common practices in other aspects of the web development industry.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why you Should use Alt Tags for Accessibility (Instead of SEO)\" \/>\n<meta property=\"og:description\" content=\"Proper accessibility habits sometimes conflict with common practices in other aspects of the web development industry.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-20T21:32:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/09\/alt-tags-accessibility-camera.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/\",\"name\":\"Why you Should use Alt Tags for Accessibility (Instead of SEO)\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-10-09T16:00:05+00:00\",\"dateModified\":\"2023-04-20T21:32:12+00:00\",\"description\":\"Proper accessibility habits sometimes conflict with common practices in other aspects of the web development industry.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Why you Should use Alt Tags for Accessibility (Instead of SEO)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why you Should use Alt Tags for Accessibility (Instead of SEO)","description":"Proper accessibility habits sometimes conflict with common practices in other aspects of the web development industry.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Why you Should use Alt Tags for Accessibility (Instead of SEO)","og_description":"Proper accessibility habits sometimes conflict with common practices in other aspects of the web development industry.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-04-20T21:32:12+00:00","og_image":[{"url":"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/09\/alt-tags-accessibility-camera.jpg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/","name":"Why you Should use Alt Tags for Accessibility (Instead of SEO)","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-10-09T16:00:05+00:00","dateModified":"2023-04-20T21:32:12+00:00","description":"Proper accessibility habits sometimes conflict with common practices in other aspects of the web development industry.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/why-use-alt-tags-for-accessibility-instead-of-seo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Why you Should use Alt Tags for Accessibility (Instead of SEO)"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/themes\/wpengine-breakthrough\/images\/fallback\/default-grid-resource.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Site Owner","topic":"<strong>Topics:<\/strong> SEO","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/24474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=24474"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=24474"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=24474"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=24474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}