There has been a lot of interest in website accessibility in the craft community recently, so I have written this tutorial to help everyone who is having trouble figuring out what to write in the alt text for their images, and for those who want to know why alt text is important.
Alt text is important for a few reasons. Not only for screen readers, but also for website SEO (search engine optimisation), and for anyone whose internet connections are faulty or very slow.
You may be asking, what is image alt text? Basically, it’s a piece of code that sits on a web page with your image that describes what the image is. People can read it if they’re using a screen reader or the image hasn’t loaded, and search engines can read it so they know what your picture is.
I’m going to start with some information on alt text, and how to add it to your site if you’re coding it yourself, or if you’re using WordPress.
Writing Alt Text, the Basics.
What Alt Text Is and How to Write It
If you’re writing the code for your website yourself, or just want to know what makes good alt text on a general website, Moz’s article on Alt Text for images is a great place to start. If you’re not writing the code yourself you can ignore what the code looks like and concentrate on the sections about writing the descriptions, and why alt text is important.
How to Add Image Alt Text in WordPress
A lot of websites are run using WordPress because it’s easy for the owner to add new content. I am assuming that you are using the latest version of WordPress and know how to upload an image.
Image alt text is used in several areas in WordPress, not only within posts and pages, so it’s best to always use the “best practice” method I’m going to outline below, rather than the just adding it within your post/page. This will mean your image will always have alt text, and you’ll still be able to tweak it inside the post/page specifically for the context of your article (if writing on a computer).
Go to your media library and upload an image. You’ll see the upload box with a tiny thumbnail of your image underneath. Click on the link on the right that says “edit”.
In the top text box write the title of your image. Under your image in the box named “Alternative Text”, write your alt text.
When you write your post or page, you can now add the image and the alt text will already be in place.
If using a computer rather than the mobile app you can edit the alt text to fit specifically with what you’re writing if you need to. The alt text of the image within the post/page will change, but the alt text you wrote when you uploaded the image will still be there and will be used in thumbnails throughout your site. For example, if you have “Related Posts” at the bottom of your posts.
To edit the alt text when inserting it into your post/page, click on the image. On the right hand side you’ll see the alt text under the title “Image Settings”. If you edit the alt text there, it will change on the post/page only, but the original alt text will still be in place if you use the image again.
Note: If you go into the media library and add alt text to files you have already used in a post or page, the alt text will not be automatically inserted into your post/page. You will need to use a plugin to copy them over. Make sure to backup your database first.
Writing Alt Text Specifically for Craft Sites
So, now you have a good idea of what alt text is, why it’s important, and how to add it to your site. How does the way we write it differ on a craft website? It’s all about context. I’m going to use images of knitwear as examples, but this information applies to writing the alt text for any craft photo.
Example 1: A vintage knitted pullover.
To start with, let’s look at an image from a vintage knitting pattern.
If we were writing alt text for a website that was not about a knitting pattern, we would probably write something like “Smiling woman leaning against a rock on a sunny day”, or something similar. Since we’re writing the alt text for a knitting pattern, that doesn’t tell our visitors what they need to know. Our visitors want to know about the garment.
Because we want to keep the number of letters limited to about 124, we first need to ask ourselves what information the text on the page will reveal. (Here is the pattern for the marguerite pullover shown in the photo).
If we look at the pattern, we can see the size of the garment and the gauge are noted, (which will tell us the thickness of the yarn needed), so we don’t need to mention any of those things in the image alt text.
What information is missing from the page text, but we can see in the image?
- It’s a garment for a woman.
- It has short, puffed sleeves.
- It has a crew neck.
- It’s close fitting and not loose.
- It has a row of intarsia flowers across the top.
These are the things we need to include in our image alt text.
Here is how I would write the alt text for this photo.
Woman in a close fitting knit top with crew neck, short puffed sleeves & a row of intarsia flowers across the chest & sleeves.
You can use a website such as the free online character counter to save time when trying to reduce your letter count.
Let’s do another one. This time we’ll have an extra decision to make.
Example 2: Socks
Let’s go through the same steps as we did for the first pattern. This time, instead of looking at a page that has the full pattern on it, we’ll be looking at the Borealis socks pattern listing in Su’s Payhip shop.
The pattern listing has a lot of information on sizes, yarn and the way the socks are knit, so this time there’s very little information missing that we would need to add. Instead of adding missing information, let’s see if the photo adds any detail to the information that has already been given, plus anything specific to this photo.
- We know the socks fit lots of different foot sizes but there’s no mention of the length.
- We know there’s a cable up the front but we don’t know where it starts and stops.
We’ll definitely add both of those to the alt text.
Mid-calf length socks with a wide cable pattern up the front that goes from the ribbed cuff to the toe decreases.
We’re still a few letters short of the maximum number. Is there anything else we can add? What about the colour? We could add that they’re blue, but should we?
Let’s think for a moment. Who do we write image alt text for?
- People who use screen readers.
- People with a slow or temporarily faulty internet connection.
- People who have their browsers set to not show images, for whatever reason.
- Search engines.
What value would adding the colour of the socks in the photo have? I can think of three.
- People who can’t get the images to load will know the socks in the photo are blue.
- People who want to knit socks for someone who likes the colour blue will know the yarn recommended in the pattern is probably available in blue (whether the knitter in question is sighted or not).
- Search engines will know that the socks are blue, and will be more likely to return your page as a result if anyone is looking for blue socks.
So is adding the colour essential? No. But if you have room, you might want to add it. Just don’t add the colour in your image alt text at the expense of other, more important details.
Having taken everything into account, here is the alt text I would write for this particular photo:
Blue, mid-calf length socks with a wide cable pattern up the front that goes from the ribbed cuff to the toe decreases.
Example 3: A tutorial photo
Tutorial photos can be tricky to write alt text for, especially when you’re trying not to go over 124 characters. The most important thing is to try and not rely totally on images in your tutorial, but use them to enhance your written information.
Here is a tutorial I wrote on how to remove the ribbing from a knit garment (you’ll need to take a look at the tutorial to fully understand the information below. Don’t worry, it’s short): How to Remove Ribbing from a Garment Knit from the Bottom Up
I have tried to put all of the information on how to remove the ribbing from the garment in the text of the tutorial, and have added the photographs as a secondary source of information. That way, the alt text in the images only needs to describe what the image are, and not contain instructions.
Here are the photos from the article and their image alt text.
Alt text: Darning needle threaded with a length of yarn being used to capture the stitches so they don’t unravel.
Alt text: Cutting the stitches a row or two above the stitches that have been threaded onto yarn.
Alt text: Live stitches threaded onto yarn, ready to place onto the knitting needles.
Alt text: Knit 1, purl 1 ribbing on a knitting needle.
Having said all this, sometimes “as shown in the photo” is the best we can do in order to explain something, but try not to resort to that unless it’s your only option.
Some Helpful Links on Adding Alt Text on Social Media
How to add alt text to images on Tumblr (only works in the app, not on desktop).
At the time of writing this post, Reddit did not have a way to add alt text to images.
I hope this information has been useful. I have one last article to write on website accessibility (who are we making websites accessible for), and then I’ll return to uploading craft patterns, tutorials, news about my projects and sharing lots of things I have found interesting online by other craft makers.
Now if you’ll excuse me, I learnt a few things I didn’t know while doing the research for this post, and I have some image alt texts to fix…