Images and Alt Text Best Practices

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