What is alt text, and why should you make it a priority in your web content?
Here’s a quick, real-time demonstration to explain what it is, how it works and why it’s important for both search engine optimization (SEO) and accessibility. The demo is already underway. It began a moment ago, when you first clicked to find out what this post is all about.
The instant you clicked, you launched a series of behind-the-scenes instructions that control how you experience the content of this page.
If you’re reading this text with your eyes, what you see is controlled by a set of commands that make up the page. These are written in HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). That’s the visual expression.
If you’re listening to the content, HTML is what provides information to the screen reader you’re using. That’s the audio expression. So far, so good. Either by sight or by sound or touch, you’re accessing the post. Welcome!
But what about the photograph that follows this paragraph? That’s where alt text comes in, as part of the HTML instructions meant to tell you what an image is if it can’t be rendered or if you’re using assistive technology for impaired vision. Here’s the photo:
And here’s the verbal description: A child kicking a ball outside on a paved ground. If you check the HTML source code of this page, you’ll find what’s called a tag that reads, alt=”A child kicking a ball outside on a paved ground. ” The words within the parentheses are the alt text.
Search engines, such as Google, rely on automated programs known as web crawlers that scour the web and return with information about the pages they encounter. That information influences how a page is ranked in searches and its position (higher or lower) in those results.
Like a meta tag, alt text provides one more bit of information about the web pages you create and the content you include. When you’re making a new page using a content management system (CMS), you rarely work with the HTML code itself. Rather, there’s a field for providing descriptions for the visual elements, whether photographs, illustration, charts, graphs or something else.
There are some definite do’s and don’ts for writing alt text, starting with do be specific and don’t try keyword stuffing. Check the Moz website for a thorough explanation of OK / Better / Best best practices. Put simply, your goal is to write the alt text the way you’d describe an image to a friend during a phone call.
Yes, effective SEO is important. But the reason alt text exists is for effective communications. The international group that publishes web standards — the IETF or Internet Engineering Task Force — first published this “alternative attribute” for HTML in the mid-1990s. Alt text is not a big new technology development for 2021.
What has become increasingly urgent is an emphasis on accessibility, and you’ll want to review Usability & Web Accessibility from Yale University for a better understanding of image accessibility. The Web Accessibility Initiative even provides a comprehensive decision tree for understanding how to use alt text in a full range of situations.
CEL’s web development team can help you too. Send us a note. When you assess the lifecycle of a website, you may find opportunities for enhancing the accessibility best practices you’re already doing. Don’t wait for an Office of Civil Rights (OCR) complaint that your website, social media feeds, or emails are not ADA compliant. Be proactive and inclusive by mastering Alt text. We’re always happy to talk through accessibility and new engagement strategies.
As for alt text, we’ll leave you with one more image. How do we have it tagged?
Published on: August 4, 2021
