{"id":45,"date":"2013-06-05T22:26:16","date_gmt":"2013-06-05T22:26:16","guid":{"rendered":"http:\/\/engage.augsburg.edu\/mannj\/?p=45"},"modified":"2015-12-30T11:23:53","modified_gmt":"2015-12-30T16:23:53","slug":"alt-text","status":"publish","type":"post","link":"https:\/\/engage.augsburg.edu\/mannj\/2013\/06\/05\/alt-text\/","title":{"rendered":"Alt Text"},"content":{"rendered":"

How to set the alt text for an image<\/h2>\n

When you upload an image or are selecting an image to embed, the screen looks like this. See the “Alt Text” field on the right.<\/p>\n

\"\"<\/a><\/p>\n

Or if you are editing an image already embedded on your page, the screen looks more like this, and you can see the “Alternative Text” field in the top center.<\/p>\n

\"\"<\/a><\/p>\n

In either of these cases, update the text field and click the “Update” or “Insert Image” button, whatever completes your action in that case.<\/p>\n

What is alt text?<\/h2>\n

Let me start with a clarification. This post is about something called the alt attribute, which in WordPress is always referred to as Alternative Text.<\/p>\n

I call Alternative Text “alt text” for two reasons:<\/p>\n

    \n
  1. It’s shorter.<\/li>\n
  2. “alt” is how Alternative Text looks in HTML. Ex. <img src=”image.jpg” alt=”fluffy bunnies”><\/li>\n<\/ol>\n

    Alt text is text that represents a non-text element, such as an image. In other words, it’s the text alternative. If you want to know more, read about alt attributes on Wikipedia<\/a>.<\/p>\n

    How do I know what to say?<\/h2>\n


    \nPretend someone is reading a web page to you. When they get to an image, they have to describe it. That description is the alt text. Two rules to keep in mind:<\/p>\n

      \n
    1. Be brief. Sometimes you will want a long description, but brevity is a good rule of thumb. Instead of “a picture of the Norwegian flag flying on a flagpole” you could just say “Norwegian flag.”<\/li>\n
    2. If your image has text, make that text your alt text. Remember, imagine the images are removed and text is put in their place. If your graphic that says “Register for this event!” then you would want that to be the alt text.<\/li>\n<\/ol>\n

      Why is it important?<\/h2>\n

      Screen readers<\/h3>\n

      Not everyone can see a screen. Not everyone can use a mouse. Screen reader software helps these users navigate web pages, and they depend on alt text to know what’s in an image, or where a linked image is going.<\/p>\n

      Image disabling<\/h3>\n

      Some people disable images in their browser and view web pages in text only. Instead of an image, they will only see what you have put as your alt text.<\/p>\n

      Links<\/h3>\n

      If your image links somewhere, you need good alt text. This is important for screen readers and SEO (see next point). Pretend you are making a text link to the same location. What would your text link say? Make that your alt text.<\/p>\n

      Search Engine Optimization<\/h3>\n

      Remember that computers do not know what an image is,\u00a0although they are slowly figuring it out<\/a>. You see a picture of a person reading a book, a computer sees a set of 1s and 0s. The alt text lets a computer (like a Google crawler) know what or who is in the picture.<\/p>\n

      Let’s get technical<\/h2>\n

      At the beginning I said the proper term for alt text is “alt attribute.” By now you know what the “alt” part means, but what is an attribute?<\/p>\n

      HTML is made up of tags that define each section of content. Some examples are<\/p>\n