Equidox Webinar Wednesdays – Images and Alt Text

Learn more about tagging images with Equidox and adding alt text in this live demonstration. Bonus! Includes tips on best practices for creating alt text for images in PDF documents. Hosted by our own Dan Tuleta.

Images and Alt Text Best Practices

Images cannot be understood by screen-reading technology.  Any image in a document or on a web page should be labeled with Alt Text (alternative text) to explain to the reader what is being portrayed.

Video transcript

 

Transcript

Equidox by Onix

Reach everyone

Hello everyone, um, welcome to Equidox Webinar Wednesdays

Today we’re going to be talking about tagging images and alt text best practices

So, many of you may have been on our previous webinars, but we do again

Thank you for for attending today and for your time and attention this afternoon.

Just before we get started just keep in mind that if you have any follow-up questions,

Or would like any more information regarding Equidox. You can certainly reach out to us at EquidoxSales@onixnet.com

Or visit our website at www.equidox.co.

Okay, I’m going to jump into

Equinox, and we will talk a little bit about how

How we can provide alt text for images, uh using the Equidox interface

Uh, so the first thing I want to do is uh, just jump into a sample document here

And many of you who have used Equidox before are probably familiar with this. So this might be a little bit of a review.

But it’s always good to talk about best practices for writing alt text.

And also how to sort of streamline your approach to doing that within Equidox.

So when you arrive at the document detail page of the PDF document…

The images tab is the third tab in

From the from the left and if you ever select this images tab what you’ll see

in your document

Is a consolidated list of images.

That are currently located in the document. So

You are then responsible as the remediator of this document to provide alt text for these images

Now one thing that’s important to remember

about alt text is the context within the document

so that’s a big theme that we’ll be talking a lot about today is the context for…

How does this image relate to the document that is around it? Um, so when you see different images

you might…

you might be wondering like how in depth do I need to go in describing the–whether it’s people or objects or logos?

It really does depend on the context of the document and what the actual publisher of that document was trying to convey.

now

since I’m here on the images tab within Equidox I’m looking down this list of images and I’m seeing things that look like

You know, logos. This sort of looks like a sort of a black background image

I have little gray squares here.

I’m

Not really able to tell exactly what’s going on with these images in the context in which they’re surrounded.

By simply looking at these thumbnails,

now if you are familiar with the document,

if you do know exactly what these images are and what they represent you are able to use this images tab…

And then provide your alt text right here from within the same location.

So you can really streamline your approach to to tagging these images by using the images tab.

So providing your alt text it might be just a few words.

It might be a full sentence.

But you can just go right down the line and start typing in your alt text.

And then the key to remember is to save your image properties when you’re done adding alt text here from the image…

from the images tab.

So there’s a button at the bottom to save the image properties and then there’s also a button

in the top right-hand corner as well.

There’s a lot of different ways to utilize this images tab…

and perhaps I’ll just return to this on a different document, but I actually want to get into

this specific document to

get a little bit more context as to what these images actually are, and what they represent, so we can start providing all text

So in this case I’m not really able to determine you know, what does this black background mean? What does this gray square mean?

I’m going to actually jump into the document to take a look at them.

So when you open up the document and you arrive in inside here, you can see that

that black background that we were seeing on the first on the images tab is very clearly

sort of just the background image for this entire slide, which is the slide deck that we’re using today.

and

since

I’m, not really going to be able to describe this image and provide any real value to the to the document…

This is an example of an image that you are welcome to hide and artifact.

So that you’re basically removing the

responsibility, uh or your responsibility of providing all text for it.

So in this case what we want to do to get rid of this…

this black background image.

Is we’re going to actually just hide it by pressing the hide zone button, and then i’m going to unselect the visible check box.

You’ll notice that the actual sort of pink zone that was previously located on top of that black background has now… disappeared from view

this is indicating that we have artifacted that image and we no longer have to provide an alt text for it.

Now down here. We have an image that we might find more valuable

because this actually is our logo and perhaps

this is something that is worth describing with a description.

So in this case, we want to provide an alt text for this image.

So I’ll select the image and then over here on the left-hand side. The image is probably image properties

I see the alt text field and I can type in my description. So I will type in Equidox logo.

And maybe even a little bit further I can type in accessible

pdf remediation

Okay, so now I’ve provided that alt text for that image.

and now that is exactly what a screen reader will read when the uh when the end user

Navigates to this figure within the PDF.

Let’s take a look at the next page and get into some more images as well.

Now this is an example. Uh, this document here is an example of where we have uh, what we really wanted to explain was

the frustration that an end user who is

Blind or low vision that they might experience working with documents that don’t have alt descriptions for their images.

If you’ve ever

had a internet connection issue

Or maybe it’s uh, you know, your phone has bad service or you have a website that’s just not behaving properly.

And you know that there’s something going on in this image. You can’t see it though. It won’t render.

Maybe there’s like a joke on Facebook and you have to be able to see the image to understand the joke.

And it will not render because of your internet connection or because Facebook is down or something like that.

Well, that can be very frustrating.

So that is exactly what would happen for everyone who is blind or low vision or is unable to visually

see the images if there is no alt text for them.

So keep that in mind when you’re working on PDF documents and think about.

How frustrating it would be to have no context as to what these images are throughout an entire PDF document.

So that’s why it’s very important to take the time to go through and make sure that you’re providing alt descriptions for images.

So in this case, this is just a gray sort of uh sample image where

you may have seen this before like on an email or a website that doesn’t load the images properly.

So, in this case, I’m not actually going to provide an alt description for this again.

I’m, just going to choose to hide it and mark it invisible.

And then down here. Um, we have another image in this document.

where

this is just part of the… sort of.. uh

the

The template for this slide deck where you have this sort of blue wave down the bottom right-hand corner.

Now again, this is an example of an image that is not actually adding any value to the page. It’s just simply there

to take up some space.

To make the page look a little bit nicer. We don’t have to go through and provide alt text for this type of image.

So again, I’m able to hide that zone and mark it invisible.

Now if you’re wondering, um, if you’ve never used Equidox before if you’re looking at this for the first time…

If you’re wondering the difference between alt text and long description, um, so the difference here is…

long description applies only to HTML.

So keep that in mind when you are working on documents think about which format you are going to be exporting to.

If you’re going to be exporting to PDF and PDF only the only actual alt text

that you type into the alt description field that is what’s going to be attached to that image when you go to export the document.

Anything that you type into long description, it has no place in the PDF environment, so it will not be exported.

This is for HTML purposes only. So if you are exporting to HTML you can provide a long description, which can be

additional context for the image… or it effectively works the way like a caption would work where it will actually visually appear

on the HTML page. So we can talk a little bit more about that in just a second.

So let’s take a look at the next page here.

And uh, here’s another example of images where

they could be compiling a document and located inside of a document where you have, uh

different layers of images. Three separate images they’re not rendering properly again.

It would be your responsibility to as the remediator to make sure you’re providing the proper alt text.

So this page is somewhat similar to the first one except you can imagine the frustration that there would that you would have

if you’re working, uh with a document and there’s three images on it, uh,

three images on a single page and you do not know what’s located in any one of them.

It would be very frustrating to try to understand the entire context of the document. So

this is just

reiterating the point that it’s very important to make sure that you’re going through when you’re working on documents to describe images

with the proper alt text. This is one of those manual parts of PDF remediation. Where

there is really no way to automate it. You have to take the time to provide a proper alt text for images.

Um, so let’s move forward here into…

my internet’s sleeping on me…

There we go.

Okay

so

Um, one other thing that we wanted to make sure that we talked about today.

Which is something that I see a lot when working with different clients and helping them with their documents.

Is alt text syntax.

so

Keep in mind that when an end user is interacting with the document

the the screen reader is going to announce the zone type.

Whether it be an image or a graphic zone.

So I see this happen a lot when working with different clients.

where they will actually type in things like “image of” “picture of” “photo of” “graphic of”

These are… this is information that’s completely redundant the end-user knows

that the element that they are currently located on is an image.

So typing in “image of” is just providing them useless information because they’ve already been told that it’s an image.

So you’re just basically having the screen reader read “image image of”

Uh, you know, uh painting whatever it may be.

so

um

This is something to keep in mind when you’re going through and writing alt text.

Now sometimes the actual type of image that it is can be relevant.

So again thinking about the context for these images.

So if you have for example a very famous painting

Perhaps it’s worth

taking the time to type out painting of

Starry Night by Vincent Van Gogh.

Or in this case you have an old

photograph of Edgar Allan Poe.

So perhaps it’s relevant depending on the document to include the fact that this isn’t this is a photograph of Edgar

Allan Poe rather than a sketch or a portrait drawing… whatever it may be so it just depends on the type of document.

But it might be important to include that type of information.

But in most cases it’s simply typing out “image of” or “picture of” is not actually adding value to the end-user.

So just always keep in mind the type of document that you’re working on.

And the context for which those images sit with on that page.

Okay, so

talking more about alt text…

Short, descriptive, and relevant. So what does the uh, what does the end-user need to know what the reader I should say?

so

Here we have obviously a very famous painting of Washington crossing the Delaware.

So again, it’s just important to keep in mind. What is the context within the document?

Is this a document about famous old boats?

Is this a document about…

wintertime in Delaware?

Is it about George Washington?

Is it about the Revolutionary War?

um..

So all of these things may be important and when you’re deciding how you’re writing that alt text.

So always think about context and what does the end-user actually need to know about this image that adds the

the right value to the document rather than giving them a bunch of fluff information that they don’t actually need.

You don’t necessarily need to go through and type out that there’s you know 22 people on this row boat…

There’s five different oars, uh, one of them is wearing red…

They’re holding a flag. Whatever. It may be you don’t necessarily need to go that granular with it. Um, it just really depends on

the context so keep that in mind. Again, so

what I mentioned before about long description…

versus alt description…

If you are an Equidox user you’re probably aware of our HTML preview page where if you press this button up here you will see

The HTML preview of the document..

Of the page that you’re working on.

Um, so what I want to mention here about the long description is if you type in an alt description for the image…

So let’s just say it’s “George Washington

Crossing

the Delaware…”

Maybe you type in a long description something like “famous painting…

“By uh

Artist name? I can’t remember the name of the artist, but you go into more detail about the actual image.

Um and perhaps, you know, you want to go and describe this more, you know the year that it was painted…

Uh, which museum it’s currently hanging in… whatever it may be.

When you look at the actual preview of the document.

You will see your long description actually populate here on the HTML preview page.

The alt description is not visible, but it is in fact attached to this image when you go to export it.

But this is the difference between long description and alt text. The long description is only going to appear in the HTML

And it’s just a way of adding additional context additional information.

Or effectively a caption for the image.

So that is something to keep in mind when you are using Equidox to tag your images.

anything that goes in here is only going to be for the

HTML export.

Okay, so again we have another image here a very famous logo, of course

so this is another example of when um,

you know if you are just

Quickly describing an image. You can probably just say “Mcdonald’s logo”

and

Most of the time everyone is going to know exactly what you’re talking about.

The the golden arches are world famous and you don’t necessarily need to go through

And write out the fact that it’s a red square with an M shaped, uh yellow

You know sort of symbol with “I’m loving it” underneath.

This is all pretty much implied by simply saying McDonald’s logo.

However, if it’s, for example, a marketing document where

someone is going in in depth into sort of the logic behind designing logos, perhaps it’s more important to

be more descriptive of the sort of the colors that are used the short caption that’s used “i’m loving it,” for example.

So again, it just depends on the context of the image and what is important about it within the document that it sits.

So again, you can type in

“McDonald’s”

“Mcdonald’s logo” and that is going to be an effective

um, alt description for an image such as this. I don’t need to write out “picture of McDonald’s logo.

And then

we also have again, you know as you’ve probably noticed on every page..

This uh, this small little graphic here that’s embedded in the template of the of the powerpoint…

Which I’m going to go back to the images tab.

Towards the end here and I’m going to explain what you can do with these sorts of things.

Um, so another image here we have another example of uh, sort of this child in the kitchen, um, so…

How does it relate to the content? Well, it depends on the document that it sits in. So

Is this a document about excited children? Is this a document about kitchens?

Is this a document about cooking… or?

Whatever it may be. Maybe it’s you know about parenting from home or homeschooling during a pandemic. Um,

you know kids making messes in a kitchen, whatever it is that should that is all relevant

um

and in relative to the document that it’s currently located in and that should be considered when writing your alt text syste.

And what detail are you going to go into about this image?

Here is an example of another piece of… another image where the alt text

tt might not be detailed enough. In fact, it definitely isn’t detailed enough to just call this image of a dog.

so sometimes

diagrams

Have a lot of unique information located inside of them.

There is no necessarily, uh, you know textual context for them.

You know, you can see that there is text in fact inside of this image.

But a screen reader is not able to uh to read these different

pieces of this diagram until we’ve provided that detail for the screen reader in the alt text field.

So if you arrive at an image like this and you just type out “dog,” or

“drawing of a dog…”

or “dog diagram…”

That is not enough context to explain what this image is about.

So this image is clearly about uh, different, uh harnesses like for leashes, uh that a dog could wear.

And there’s very distinct detail provided in this diagram where it’s explaining the various different

parts and pieces of the harness that goes around the dog’s shoulders and neck.

and

You know

It’s up to you as the remediator to make sure that you are conveying this information in the alt text for this diagram.

So your image for your example for your alt description here…

Might be “a diagram of a dog harness.

“Including the shoulder strap

“Connector ring

“Belly strap… chest strap

And D ring.”

Um, you can go into even further detail by explaining their location with on the strap or how this maybe goes over the

dog’s head. Uh, but uh, it’s very important to make sure that you’re including well, uh relevant information about the specific diagram

as it relates to this image.

Moving on to the next page here…

Here we have an example of a chart. So

this is again

A different type of image there is very distinct information located within a chart like this.

so

You know clearly this is a pie chart.

and

You as the remediator

It’s your responsibility then to make sure that the actual data that is inside of this pie chart is conveyed through the alt text.

So in this case, it’s a pretty simple pie chart. There’s you know, it’s not too complicated. You only have um five separate

Uh variables here of strawberry, chocolate, vanilla, cookie dough, and mint…So you would go through the alt description.

And you could type out the actual percentages…

Of the individual, um, you know flavors of ice cream, for example.

That people describe as their favorite. So

This would just be as simple as typing out, uh, you know “pie

charts of favorite ice cream.”

And then maybe uh, you could go into the detail of “vanilla

15″

So on and so forth. So you don’t need to watch me type out all the different

All of the different flavors, but that’s basically the logic of it where you would go through and make sure that you’re providing this information

Into the alt text of that image.

Typing it in over here in the alt text field.

Here the next page I believe is a more complicated sort of chart where we have a bar chart.

Which um can actually contain a bit more data than your standard pie charts. They can even get a lot more complicated than this.

So it might be important in this case if you

don’t want to overload the alt description for the image…

meaning that you don’t want to sit here and type out a five-paragraph essay…

It can be very helpful if you have any say on the sort of designing of documents or

document creation process when you’re dealing with uh pie or bar charts such as this…

It can be very helpful to also provide a a table version of that. Same data. So tabular data.

It’s fast to remediate in Equidox, as we would have learned in our previous webinar going over tables…

So you can remediate it very quickly using Equidox if you have tabular data to represent the same information in this bar chart.

So you could go through and type out in your alt description all of the different data

located in this bar chart which would take a little bit of time because there is a lot of information in here…

Or if you do have the option of having that tabular data…

You can always mark this with a high level description basically keeping the image there indicating that this is a bar chart about sales

Such and such depending on the context of the document…

And then make sure that you’re indicating that the table that is to follow

has all of that same information located in it. Because this is an easier element to interact with for a screen reader user.

Um, they’re able to navigate this table and gain all of the data from from this from the same chart down here.

But it’s just in a much more concise and easy to work with format if it’s in a table.

Okay, and then one other image type here that I wanted to make sure that we covered

Are I see these quite a bit, but a lot of times you’ll have sort of

infographics. And oftentimes this will be the entire page itself will be an infographic.

And whenever that’s the case if you have an infographic,

it can be very difficult to take this image which as you can see contains a whole bunch of text.

And to try to plug that into a single alt description,

you’re going to be plugging this alt description with a lot of data and it’s very hard to

to navigate, uh decipher all of it as it’s being read aloud to that end user. So what you might do

in a case like this, is when you have a lot of very densely spaced data and information in an infographic type of layout…

And believe me infographics can get 10 times more complicated than this one….

But what you might do…

is hide the zone by hitting the hide zone checkbox, and then also marking it invisible by unselecting the

visible button. This is effectively artifacting that image.

So now we’ve essentially removed the image.

But now we can use a different zone type to sort of break this dense and full of information

type of image into more

digestible chunks. So we can create smaller zones such as this. And once I’ve drawn the zone I can press G

On my keyboard and change the zone type to graphic.

And then i’m able to actually type out smaller

and more concise alt descriptions, breaking this infographic into multiple graphics.

So I could type out multiple descriptions about this graphic if I just start typing, uh, if I just start creating graphics like this

I’m pressing G

and from here I’m able to

break down this information into smaller chunks.

Which makes it a lot easier to work with.

Um, so what you’ll see when I go to press the preview. I haven’t yet typed in any alt descriptions for these graphics…

Um, so that would obviously be your responsibility as the remediator to make sure you’re providing alt descriptions.

But if I go to the preview

you will see that I have a series of small squares which these are representing the graphic zones that I just created.

Um, so you’ve essentially manually created um a series of smaller images.

And then you’re able to provide that alt text to

the different images breaking it into smaller pieces rather than typing out all of this information into a single alt text which would be

far too many characters for an alt text and too complicated to listen to for the end-user.

So that’s that’s just another example that I see a lot.

Um, I also want to make sure that we talk a little bit more about this images tab.

Where

Going through we were able to see that, for example,

there were a lot of these images here. If you see this little blue wave there were quite a few images where

They weren’t actually adding value to the page. There’s no reason to go through and type out alt descriptions.

So these are examples of when you could very quickly especially if you’re familiar with the document…

you could very quickly make these decisions to come through here and hide these zones.

And just artifact these images so that you are not having to then provide alt descriptions for them.

So this is a way of using the images tab to be very efficient with your time.

And then again, it’s very easy to forget to

yype out an alt description for a little tiny blue wavy square thing on the bottom right-hand corner of your document.

Maybe it’s a hundred pages long and you forget to tag this on one single page. Well that’s going to be

creating flags if that document would ever be audited or reviewed for accessibility after the fact so…

It’s easy to forget.

So make sure that you are either starting your process here on the images tab or ending your process here.

This is a great place to to revisit at the end of your remediation just to do a quick scroll through.

And make sure that you don’t have any of these big red warnings saying no alt text.

That’s a good indication that you’ve forgotten one of these images.

So make sure that you go through and hide it and mark it invisible and once you’ve done all these changes.

Make sure that you are saving your image properties.

Um, and that’s a great way of handling your images right here in one sort of swoop.

The images tab is so helpful again because you are able to address everything together.

um

So sometimes I’ll see examples where it’s 100 pages long.

And every page has one image on it and it’s the same logo that appears on every page. if that’s the case,

it’s not important for you to go through and type out the same logo, uh description on every single page.

Um, it gets completely redundant. So that’s an example of when you could hit the hide all zones button.

Uh, basically you’re going to hide all of the zones. And then you can maybe provide the description for it on the very first instance

of it.

But then you’re basically relieving yourselves of having to

type out that alt description on every page. And then of course

you’re not going to forget it…

as you’re tabbing through and going through quickly and then on page 82 you forgot to tag at one time…

um, so that’s another way uh of using this images tab

to

double-check your work… to handle everything right up front.

And then to do sort of bulk artifacting where you have those repetitive logos that seem to never go away.

They’re there on every single page.

Um, so this is uh, we’re right up against 2:30 now. So that the time did fly by there!

Tammy, are there any questions about the any of the topics that we covered today? or um

Is this a good place to break for the day? Tammy: Um

Someone asked a question about hyperlinks attached to images and I think Ryan was typing out an answer…

But it might be quicker for him to answer verbally if he’s still here

Ryan:I’ve actually already answered that.

Tammy Oh, okay. Um, all right then, um,

If you wanted to just quickly read that answer because now, of course, I’m sure people are curious..

Dan:I um

Tammy: I think I want all right, so

someone

Asked what to do for images with hyperlinks attached…

Attached and what Ryan wrote was “a link zone can be wrapped around an image or figure…

To create a hyperlinked image. The output will contain a link tag which contains the image with alt text nested inside it.

This allows both the images,

Alt text and the link destination, or link alternative text if you included that, to be read instead of choosing one or the other.”

Tammy:I believe that I think we answered all the other questions.

Yes.

Dan: Okay, great. Well, um just to remind everyone um that we are hosting these webinars. Um,

whether it be a monthly or bi-monthly basis, um

but this has been our our third one and we have another one coming up soon. So keep, um, keep that in mind.

I’m sure the invites will be sent out.

But we do appreciate everyone taking the time today to join us.

To learn a little bit more about, uh, best practices for all texts and for how to do that quickly and efficiently in Equidox.

If you have any other questions, please feel free to reach out to

EquidoxSales@onixnet.com or visit our website at www.equidox.co

So, thank you very much everyone and have a great rest of your day!

END OF TRANSCRIPT.

Tammy Albee

Tammy Albee | Director of Marketing | Equidox Tammy joined Equidox after four years of experience working at the National Federation of the Blind. She firmly maintains that accessibility is about reaching everyone, regardless of ability, and boosting your market share in the process. "Nobody should be barred from accessing information. It's what drives our modern society."