Alt text, short for “alternative text”, is text in the metadata of images that shows up either when the image doesn’t load, or for screen readers. If you’ve ever had an email full of images have the space replaced with, say, a coupon value, you’ve seen alt text.
While it appears simple, alt text requires time and effort to get the hang of.
Why should you put in alt text?
In short, it makes the graphic content of your website readable. This is useful for:
- SEO
- People with slower/limited internet connections
- Individuals who use screen readers
If you’re in Ontario, you might be facing down the legal requirements of AODA, which requires all graphic information to be accessible in text. This is in accordance to WCAG, the international standard for web accessibility that is becoming the norm worldwide. While this is a laborious task, it reaps many rewards outside of disability circles.
By utilizing alt text to the maximum capacity, you can reap a rich keyword benefit that won’t visibly clog up the page (but don’t overdo it, as Google will still penalize you for keyword stuffing), and make your site available to a larger demographic.
Implementing alt text on a WordPress site is as easy as installing Yoast (for SEO) and allocating the hours to writing the material.
How to put in alt text
Simple images: describe the image in the “alternate text” window provided when you go to edit an image on your website. Sometimes, you need to go into the image’s properties to find this window. If the image has a caption associated with it, make sure the caption and image are vaguely related— the image might not be read with the caption!
Complex information: Diagrams that show a company’s organization, pie charts, and other images that present information graphically must also have alt text provided. It can be tricky to know how to tackle these, because usually you do graphics to make complex information more easily digestible.
For things like pie charts or flow charts that don’t show many steps, you can still describe the image in the alt text window. Just be extremely clear what information leads to others. For pie charts, descriptions should include what it’s for and the percentages per allocated slice. An example is:
Pie chart for [diagramed information] displaying: 49% of funds went to rent, utilities, maintenance; 32% to programs; 16% to staffing; 3% other.
Flow charts can be done much the same way:
Chart shows [item] at head, displaying four branches labeled 1, 2, 3, 4. Down the 1 branch, we have items A, B, and C. Down the 2 branch, we have L, M, N.
For larger pieces such as infographics, consider having a transcript of the whole chart that is available at a well-described link, such as “Click here for transcript of infographic.” (making sure your links are descriptive out of context is also required for WTAG compliance!)
Regardless of how you write the descriptions, making sure to include key terms you want to rank for (when appropriate) will boost your overall SEO. It is a heavy time investment, but the rewards are numerous— including people knowing your company is thinking about multiple types of web users.
Image credit: oatawa