- View Offline
- Dragging and dropping anchored objects
- PDF enhancements
- Linked text
- Mapping styles to export tags
- Using the new Articles panel
- Adding alternate text
- Exporting to EPUB, PDF, and XHTML
Skill Level Intermediate
Printed products created from Adobe InDesign stand by themselves. They are visual pieces of artwork that explain themselves. There is text, photos, and other graphics that make the overall product cohesive and visually rich. Global electronic formats, such as XHTML, EPUB, and tagged PDF files, on the other hand, can be made more accessible to various electronic devices such as phones, tablets and other browsers, as well as a variety of different users namely those with visual impairments.
These users may require assistitve devices that read the data aloud to other users. the fact of the matter is, however, that if the electronic content is not prepared correctly the message will not be conveyed to the end user. InDesign CS5.5 improves the ability of designers to add additional information to a file Called Alternate Text, that can describe images, and also provides more control, over what content actually gets included in the electronic formats.
I'm beginning this file, with the brochure_alternate file open on my computer. And I'm going to begin this video by doing a quick export to show you how this works. So I'll go to the File menu and I'm going to choose Export. And I'll go ahead and Export this to an HTML file. And I'm going to leave the name at the Default, and I'll just go ahead and click Save. And in the HTML export options dialog. I just want to make sure that View HTML after exporting, is chosen. And I'm going to leave the rest of the settings at their defaults. So I'll go ahead and click OK, and once this is finished it's going to open up in my web browser.
And you'll see that I have a number of different images here. But once again, for somebody who is visually impaired, and is using an assistive device such as a screen reader. The only way they're going to get any information about this image is if there's some alternate text in here. I'm going to go to the view menu and I'm going to choose view source. And I'm simply going to scroll down to my first image tag and we can see that right now.
This is the first image, we can see that there's several attributes in here but the one that I'm concerned about is the Alt attribute. And the InDesign's pretty smart because it knows that this image exported to a HTML file is going to need alternate text and, so what it does it puts the name of the file in there. So, at least it's putting something in there but for somebody that's visually impaired this is going to mean next to nothing. So I'm going to go ahead and close this. I'll quit out of my web browser and I'm going to go back here and I'm going to do a couple of things to help.
With this issue, so the first thing I'm going to do is on page one make sure I have page one selected in the pages panel and I'm going to press Cmd+A on mac or Ctrl+A on windows. And then I'm going to choose the Object menu and choose Group. And the reason that I'm doing this is because I want to add alternate text to this main image as a hole. So I'll go to the Object menu and choose Object > Export Options. Now, the first thing I'm going to do because I really want this whole page to export as one image, I'm going to go to the EPUB and HTML button and I'm going to turn on custom Resturization.
And I'll set to size relative to page width, resolution to 72, and I'll change the format to P and G. That looks pretty good, and in my custom image alignment, I'll set this to centered and maybe add two m of space afterwards, getting to the other portion of what we need to do to this image is the adding of alternate text to this image. Once again, alternate text is designed to describe this image.
So, in the alternate text button I could chose a source from structure. This only applies if you already tagged all of your images using the XML panel inside of InDesign. Now, I'm not going to use that because I haven't done any of that but I'm going to click on this Drop Down menu and I'm going to choose Custom and in this dialog I'm just going to type image of snowboarders and the kids snowboard camp 2011. Now, I'm going to come over here to the tag PDF button because when I export to a PDF file, the same rules apply.
When somebody with an assistive device is reading the PDF file, if there has been no alternate information included, they might as well be looking at a blank slate, because there's no information aside from the file name that's going to be included. So, in the actual text source, this is similar to alternate text, but this is very useful in cases where we have just a logo. And we want to type the content of the logo even those this logo is actually artwork, it actually is reading something.
So, this would be useful to set it to custom, and we can simply type what the logo is saying. So I'm going to type kids, snowboard, camp 2011. Now, the nice thing about this dialog, is that it's not mobile. Which means I can navigate to other images inside of this document. So I'm going to go ahead and click on this image, and now we're back to square one we don't have any alternate text for this image.
But what I do want to show you is that in addition to choosing from structure and custom we can also choose XMP meta data for these images. Now, I'm just going to click Done for a second to show you something. With this image selected, I'm going to come over here to my Links panel and this is the link to this image. So, I'm going to right-click on it and if you're using a Mac without a two button mouse, you can also Ctrl+Click on this, and I'm going to choose reveal and bridge, and this is going to now display that image.
It's going to highlight it in the bridge, and if I look in the lower right corner of the Adobe Bridge Application I have a Metadata panel. If I scroll that a little bit there is a section called, IPTC core. And you'll notice that in the description field I've tied in what I would like to be used for the alternate text, and this can have multiple purposes. And to edit the metadata in the bridge I just click inside of here and I can type literally whatever I want. I really don't want that content, so I'll just remove it, and then I'll click the check mark to apply it.
Now, this where it really helps me in InDesign. I'm going to go to the File menu, choose return to Adobe InDesign, and with this image selected I'm going to go back to Object > Object Export Options. In the all text source I'm going to change this to from XMP description and the minute I choose that the text that is being pulled from this actual file is going to appear in this field, notice it's grayed out because I can't edit it it's being pulled directly from the file. I'm going to click on this image, do the same thing from XMP description notice that this alternate text is being pulled in automatically. This is a great tool that's been added to Adobe InDesign CS5.5. In the tagged PDF section, I can also grab the actual text source from the XMP if I choose to.
So this is a really, really useful tool that's been added. I'll go ahead and change this one as well, and then I'll click Done. Now, I'm going to go to the File menu and choose Export. Leave the format to HTML, although this alternate text will apply when going to both EPUB and a tagged PDF format. So I just keep it at HTML, click the Save button and replace my previous file, make sure I'd use the HTML after exporting, and click Okay. When this opens in my Web Browser, not only will I see that this front cover, or this main image has been combined, but in addition if I go to the View menu and choose View Source.
I go to the first image in my File, so I'll find the first image tag, and you'll see right away that for this image, I have Alt Text. That's exactly what I typed in, much more descriptive than just the File name. Scroll down a little bit further to my next image tag, and here you can see that the alternate text is exactly what was pulled from the XMP metadata. As you can see, InDesign CS5.5 goes a long way in making it easier to add additional information to a file. That will make it easier for users of assistive devices, to correctly read and interpret your content.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.