Everyone should do this.

When you add an image to a blog post — a photo, for example — there's something very simple you can do to make the web a better place: you can add Alt Text to your image. From here on I'll talk about photos, as they're the most likely images most people will add.

Alt text replaces the photo

Not everyone can see photos you upload. One key group of people who won't see your photos is those who are blind. Others could be those folks on very slow or expensive Internet connections, or when there's some kind of mistake and the photo just doesn't show up.

It's only polite to tell people what the photo represents if they can't see it for themselves.

You do this by adding Alt Text, which is really easy.

Alt text is sometimes called Description

Sometimes folks refer to Alt Text as a Description, maybe because more bloggers are likely to understand that term.

The key thing to remember is that alt or alternate text replaces the photo, it doesn't just describe it.

Here's the difference: imagine you've made a website about elephants and you have cute little elephant buttons to go to the top of the page, or the next section. 🐘 You'd describe the elephant as being big, grey, with a trunk and so on. But the point of these particular elephants is to go to the top of the page or the next section, so the alt text would be: Top of page or Next section. The alt text replaces the picture. The distinction's a bit blurrier with photos on a blog, but I owe it to you to clarify that point in this tutorial.

How to add Alt Text in the iOS app

  1. Add a photo to your Micro.Blog post in the usual way. After the photo's attached tap once on it. Choose Add Description from the choices that appear. Another window appears titled Accessibility Description.
  2. Enter your Alt Text and finish by tapping the Add button. The Alt Text is sent along with the photo. Micro.Blog then adds the correct coding for the photo and the Alt Text to your blog post.
Add a photo in the iOS Micro.Blog app.

Add a photo in the iOS Micro.Blog app.

Add Description in the iOS Micro.Blog app.

Add Description in the iOS Micro.Blog app.

Here's part of the coding Micro.Blog created from my actual blog post. I've broken it up to fit well on this page: 

<p><img 
src="https://miraz.me/uploads/2019/31b6cf987a.jpg" 
alt="White horse standing in the sun near a tree 
in brown coloured paddocks."></p>

The Alt Text I supplied has been added to the coding for the image.

Now if the photo somehow goes missing the Alt Text will show up instead.

Alt Text is visible because the image is missing.

Alt Text is visible because the image is missing.

How to add Alt Text in the web interface

  1. While writing a new Post in the web interface add a photo using the camera icon button. The file name of the photo appears below the composing area.
  2. Post your blog entry. The post is published and the blog entry disappears from view.
  3. Click the Posts link at the top of the page. A page showing your recent blog entries appears.
  4. Scroll down until you see the Edit button for your post.
  5. Click the Edit button. Your post is opened up and able to be edited.
  6. Enter appropriate Alt Text following the example above. See also the screenshots below.
  7. Click the Update Post button to update your blog post to include the people-friendly alternate text.

This rather long-winded procedure is how it works as at June 2019. With any luck half a dozen steps will be removed. It's good Internet citizenship to include Alt Text.

Using the web, I've added a photo to my blog entry.

Using the web, I've added a photo to my blog entry. Then I Post the entry.

Use the Posts link at the top of the page to see a list of your latest posts.

Use the Posts link at the top of the page to see a list of your latest posts.

Edit the post and add Alt Text.

Edit the post and add Alt Text — it's missing in this screenshot.

Edited post now includes Alt Text.

The edited post now includes Alt Text. Watch the syntax colouring which will alert you to coding mistakes.

Alt Text is not a caption

Sometimes people say something like: I added a Description but it's not showing up. Alt Text (Description) doesn't show up if the picture does.

If you hand-code a blog page with HTML or perhaps Markdown then you can arrange the text and photos as you wish, including putting text captions below photos. If you use the iOS app or add your blog entry via the web interface then photos are simply put at the end.

These tutorials have been hand-coded in HTML with pictures placed where I want them.