Join Anne-Marie Concepción for an in-depth discussion in this video Adding alt tags to images and objects, part of InDesign CS6 to EPUB, Kindle, and iPad.
We're looking at the contents of this document exported to EPUB, so it's a short version of this History of Art. Now you have it open in TextWrangler we're looking at the main text, I didn't chunk up into separate HTML files. What I want to call your attention to, and I know it looks sort of gobbledygook to you probably, you don't worry about it we'll be discussing each of these elements in detail in an upcoming chapter on editing the CSS and HTML. But right now I want to talk about something that you're going to do in InDesign before you export, and that is to add alt tags, and I thought it would help for you to actually see an alt tag in the wild.
So take a look at this line that I have highlighted here. Do you see it's an image? And the source of the image is img53_format.jpg. So this is telling you that there is an image right after this paragraph. This is in the file name for the image in the EPUB and then following that on the next line is an alt tag called img53.jpg. Alt stands for alternate. With the purpose of alternate tags next to every image tag in an EPUB is for people with visual handicaps who are using a screen reader to have that screen reader be able to describe the image to them.
So the screen reader would read this aloud and the outside also was painted. And then it would say image, img53.jpg, and it would go onto the next thing Figure 2 The Anchorites, and that's not really useful. It would be better if they would say image, and then they would actually describe what this image is. Like further up we actually have a good image alt tag for the one the cover, image it's MonaLisa_fmt.jpg. The alt tag is simply picture of Mona Lisa, now that's a lot better.
It's not only good for people with visual problems, but it can also, theoretically, help you in your marketing, because search engines do index the alt tags on web pages. If you look at the source of any web page, every image will have an alt tag, a dumb one or a long and interesting one, it's really up to the web designer. But search engines include that text so that when you're searching for a phrase, if there is a web page that has that alternate text attached to an image that will come up as a hit.
And I can certainly see search engines indexing EPUBs in the future, so it's always a good idea to include good alt tags in your documents. Now this one was added manually the one for img53 was one that InDesign added itself. You will not be able to get invalid EPUB, it won't path validation if you have no alt tags. So InDesign makes sure to add an alt tag to every image automatically. But the one that it uses is the actual name of the image img53.jpg. Luckily since version CS5.5 there is a way to add your own descriptive alt tags within the InDesign interface.
You use this handy dandy new dialog box called Object Export Options. So like if you look at the Mona Lisa one, and it's here it is selected, Do I have it selected? Yeah, it's a group, and I'm going to double-click it so I only have the Mona Lisa selected. Go to Object > Object Export Options, and you'll see here in the Alt Text field that I have chosen custom, and I have added picture of Mona Lisa here. And let's look at that img53 one, we'll jump right to it, it's this picture here. If I select it and go to Object > Object Export Options, its blank.
So this is the default setup for any image in InDesign is that it's saying it's going to pull the text for the alt tag From the Structure. And this is actually, we're referring to XML structure, but this is not XML workflow. So when it gets exported to EPUB, those files are XML based and so it's just going to pull the name of the file name as the alternative text. But what you could do is you could switch to Custom and type your own descriptive text right here, or you could poll and choose one of these XMP fields.
So what are those about if I choose like XMP:Title, it says it's not there, it's a Metadata property. And ah-ha! If you have used Bridge at all, then this should be familiar. Let's take a look at how you would add it in Bridge, and I'm going to click Done here and then right-click on this image and choose Reveal in Bridge. Now bridge is the free program that comes with every Creative Suite program, gets installed by default, you can't turn it off. All of the Creative Suite programs have hooks into Bridge, you can see like the little Br button up here that means start a bridge.
It's kind of like an alternative to the Finder or Windows Explorer and in fact I have a really good video here, if I say so myself, on lynda.com. 10 Things every designer should know by Bridge, you should check it out. And in Bridge we can add metadata, we can add text to those XMP fields. I wish that we could do so in Mini Bridge. If you choose Reveal in Mini Bridge, InDesign will go ahead and find you that image in Mini Bridge but there's no way to add or even view the keywords and metadata here in Mini Bridge and a horribly missing feature in my opinion so.
Not useful to us right now, instead we'll just right- click and choose Reveal in Bridge, and there it is. So in Bridge we can come over here on the right and these fields here are the XMP metadata fields. Most people when are pulling information for alt tags will use either the Headline or the Description field. What you don't want to do is repeat within the caption, because that would be really stupid, right for someone who is using a screen reader to have it repeated twice. So if your workflow is pulling the actual captions from the description field which is pretty common, you might want to use something else, like may be the headline and then use that for your alt tags.
Unfortunately there is no alt tag field here. Why there isn't? Don't ask me. But let's say that under Headline I'm going to add this is a--I'm looking up here at the larger picture--grayscale image of a group of spooky guys, there we go. Then I click right in here, and I say yes Apply that metadata to this image. Now we jump back to InDesign, and you could see that it is out of date because that metadata is saved with the image itself. So I'm going to update it, and now I can come here and go to the Object Export Options and choose pull this from the Headline, there it is grayscale image of a group of spooky guys.
And now if I export this to EPUB, let's go ahead and do that, and we'll replace the existing one, we'll use the same default as before. So there is our book, now you don't actually see the alt text here. Where did that image go? There it is. You don't see the alt tags here, this is actually metadata that would only reveal itself if you're looking at the source code or if somebody is using a screen reader. But we can peek at it, let's close the old one in TextWrangler and drag the new one on to TextWrangler.
There is our file, so make this larger, and we want to go down here to img53, there it is source img53 alt grayscale image of a group of spooky guys, there we go. So you can go through your InDesign documents image by image, assign a keyboard shortcut to Object Export Options that would make life a lot easier and then go ahead and type in your own custom alt tags or pull from an XMP field. Now that last option, if your company is organized enough to have a photo editor or somebody in charge of corralling all the images and applying keywords perhaps in an image database or something like that, then you'll find this free script that I found very useful.
Of course I have to show you script, and I'll have a link to the script in the PDF that anybody can download. But if you have the exercise files it's in the exercise folder for this video, and I have already installed that my EPUB folder, it's called ApplyALTfromXMP.jsx. On here is one of those first key .DS_Store files at the Mac always get, I'm just going to right-click and choose Delete, I can't stand looking at it. Yes I want to delete that, okay. ApplyALTfromXMP double-click it, and you'll see that you can choose which XMP field your company uses for it's alt text, Description, Headline, or Title or if you're using XML From Structure, let's say they we're using Headline, and then you can choose if there's any images that already have alt text if you want to Overwrite them, I don't want to, and then I'll just click OK, before that notice that little ad for InDesign Secrets it's because the guy who wrote this, Marijan Tompa, wrote it because I asked him to, and then I wrote a post about it on InDesign Secrets, so don't forget to check that out, and you want to OK, and it says it found three images that had XMP data in its headline, and it went ahead and added those.
So if your publications have lots of images, you probably do have somebody in charge of adding these fields to every image in an image database. In that case, using the script will help you tremendously in adding alt tags to your files and InDesign. And even if you're not that organized or you just have a few images, it is far easier to add alt text to your images with the New Object Export Options dialog box right in InDesign rather than down the road and searching for these things in your HTML files.
- Understanding the differences between ebook formats
- Best practices for InDesign file preparation
- Managing the content flow with Layout order and the Articles panel
- Using free InDesign scripts to automate EPUB productions
- Optimizing images, charts, and tables
- Opening and examining EPUB files
- Editing important CSS and HTML tags
- Including drop caps, pull quotes, and text wraps
- Enriching your EPUBs with video and embedded fonts
- Acquiring an ISBN for ebooks
- Converting EPUBs to Kindle format (MOBI and KF8)
- Distributing ebooks with resellers and aggregators