foreign
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 visit our
website at www.equidocs.co
okay I'm going to jump into Equinox talk
a little bit about how um how we can
provide alt text for images using the
equidox interface
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 um 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
um 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 is how does
this image relate to the document that
is around it so when you see different
images you might you might be wondering
like how 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 that 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 and the context in which they're
surrounded by 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
um 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 is 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
um so when you open up the document and
you arrive in inside here you can see
that um 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 uh 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 an artifact so that
you're basically removing the
responsibility 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
checkbox and 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 the uh
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 the image properties I
see the alt text field and I can type in
my description so I will type in equidox
logo
um 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 not 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 um
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 uh 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 in 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 ever used equidox before if
you're looking at this for the first
time
um if you're 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
uh 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
in it 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 pages
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 uh 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
so let's move forward here into
my internet's sleeping on me
thank you
there we go okay
so
um one other thing that we wanted to
make sure that we talk about today which
is something that I see a lot when
working with different clients and
helping them with their documents
um 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
um so I see this happen a lot when
working with different with different
clients where they will actually type in
things like image of picture of photo of
graphic of
um 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
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
um so if you have for example a very
famous painting perhaps it's worth
taking the time to type out painting of
uh 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
um talking more about alt text short
descriptive and relevant so what does
the what does the end user need to know
what the the reader I should say
um 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
um winter time 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 rowboat there's five different ores
one of them's wearing red they're
holding a flag whatever it may be you
don't necessarily need to go that
granular with it it just really depends
on the context so keep that in mind
again
so um 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 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
Delaware
maybe you type in a long description
something like famous painting
by
artist name I can't remember the name of
the artist but you go into more detail
about the actual image and perhaps you
know you want to go and describe this
more you know the year that it was
painted 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
um 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 uh the HTML
export
okay so again we have another image here
a very famous logo of course
um 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 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 to be
more descriptive of the sort of the
colors that are used the the short
caption that's used I'm loving it for
example
um 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
logo and that is going to be an
effective 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 a a
cooking 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 that is all
relevant
um in in relative to the document that
it's currently located in and that
should be considered when writing your
alt text as to 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 it
might not be detailed enough in fact it
definitely isn't detailed enough to just
call this image image of a dog so
sometimes diagrams uh have a lot of
unique information located inside of
them there is no necessarily uh you know
textual context for them
um 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
different harnesses like for leashes uh
that a dog could wear and there's
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 uh 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 for this
diagram
so your image for your example for your
alt description here might be a diagram
of a dog harness
um
including the shoulder strap
connector ring
belly strap
chest strap
and d-ring
you can 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 but it's very important
to make sure that you're including
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
um you know clearly this is a pie chart
and you uh as the remediator it's 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
um 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
um and you could type out the actual
percentages of the individual
um you know flavors of of ice cream for
example that people are that people
describe as their favorite so
um this would just be as simple as
typing out uh you know pie charts
uh 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 um 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 fields
um here the next page I believe is a
more complicated sort of chart where we
have a a bar charts which can actually
contain a bit more data than your
standard pie charts they can even get a
lot more complicated than this
um 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 uh
document creation process when you're
dealing with uh pipe 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 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
um 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
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 in
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 uh in 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
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 or 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 so you've
essentially manually created 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 to
listen to for the end user
um so that's that's just another example
that I see a lot
I also want to make sure that we talk a
little bit more about this images tab
um where
um 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 are 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 type out an
ALT description for a little tiny blue
wavy Square thing on the bottom right
hand corner of your document maybe it's
100 pages long and you forget to tag
this on one single page well that's
going to be um creating Flags if that
document were to 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 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 and that's a great
way of of handling your images right
here in one sort of swoop
um 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 it's not important for you
to go through and type out the same logo
description on every single page it gets
completely redundant so that's an
example of when you could hit the hide
all zones button on uh basically you're
going to hide all of the zones and you
can maybe provide the description for it
on the very first instance of it but
then you're basically relieving yourself
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 it one time so that's another way
of using this images tab to 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
so this is uh we're right up against 230
now so that the time did fly by there
um Tammy are there any questions about
the uh any of the topics that we covered
today or
um is this a good place to break for the
day
someone asked a question about
hyperlinks attached to images and I
think Ryan was typing in on an answer
but it might be quicker for him to
answer verbally if he's still here
I've actually already answered that
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
I um
I think I like all right so don't
someone asked what to do for images with
hyperlinks attacked 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
I believe that I think we've answered
all the other questions
yes
yes 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 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 uh 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
revisit our website at
www.equodox.co so thank you very much
everyone and have a great rest of your
day
for more information about how equidox
software company can help you with PDF
accessibility email us at equidox sales
at equidox.co or give us a call at
216-529-3030 or visit our website at
www.equidocs.co