Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
By now, you're probably itching to get started and actually working with some images on your pages. However, before we do that, there is one more little detail we need to take care of. Dreamweaver allows us to set Accessibility Preferences for several types of objects, images among them. By setting those Preferences before we begin working, we can control how Dreamweaver responds when we place an image on our page. Although, just how strict you are with accessibly standards is a personal decision, and often driven by the type of site you are working on, there are certain baseline standards that need to be met when designing Web sites.
At a minimum, each of your images should have Alternative Text. Alternative Text often referred to as Alt tagging your images, allows screen readers, and other devices to offer brief descriptions or comments regarding the images on the page. This text can be as short as one word or longer if required, although it's not recommended that you go past a single sentence. The basic idea behind alt text is that it should offer a brief description of the image or pass along some meaning, especially if the image is a link or represents data of some type. After placing an image on the page in Dreamweaver, you can select the image and enter the alt text using the Properties Inspector.
However, in a busy environment and often pressed for time, it's not uncommon for designers and developers to forget to Alt tag their images when they are placed. This area is often compounded by the amount of images on the page, and sometimes goes unfixed. I'd venture to say that missing alt text is probably the most common accessibility error. Fortunately, Dreamweaver's Accessibility Preferences allows us to have Dreamweaver prompt us for alt text each and every time an image is placed on the page. This gentle reminder helps make sure each time an image is inserted, that we type in some alt text.
So let's set our Accessibility Preferences and see them in action. So to set your Preferences you are just going to go to Edit, and choose Preferences, and if you are on the Mac you are going to go to Dreamweaver and choose Preferences, and you want to go to your Accessibility category. Now I am betting that you already have a checkmark right here where it says Images. The reason that I say that is because that is the default setting in Dreamweaver. So unless you went in, and turned that off, I am betting that's turned on. You just want to verify that indeed images does have a checkmark beside them.
I am going to go ahead and click OK. Now, I am just going to switch over to my Assets panel because I'm looking for a specific asset. I'm looking for the flag_photo.jpg. So the flag_photo.jpg is going to go right here, right before the sentence, are you looking for an exciting adventure? So I am just going to drag and drop that right there to, are you looking for an exciting adventure? As soon as I let go of my mouse, up comes our Image Tag Accessibility Attributes. I am going to go ahead and alt text this. I am just going to type in, in the Alternate Text Area right here, The Great State of California, and I am going to put the exclamation point there, because I am pretty excited about that.
Now, there is a Long Description field here, and if you have an image that is a pie chart or a graph, or something that contains some more information of that, then you can enter in to your alt text. You can point that to another file that has descriptive information about that image. All right. I am going to go ahead and click OK, and sure enough, there is my image. We need to make sure that the text is going to flow around it. So let's apply a Class Style to that. Select the image, and the Class pulldown menu in the Properties Inspector is right here on the right-hand side. Grab that, and we want to use one of the classes that is up top, articleImage.
That is going to format that, so that the text wraps around it. Perfect! More importantly, take a look in the Properties Inspector right here. This is our alt text, The Great State of California. So if you for some reason forgot, or if you just change your mind, and you want to change what's typed in there, at any point in the cycle, you can select an image and go ahead and enter in that alt text for it. Okay. So I mean that was pretty easy, but you know what? Even with Accessibility Preferences turned on, you could ignore them, and you could just continue to place your images right on the page without entering any alt text.
But with this dialog prompt, that the Preference is giving us, you're less likely to forget or ignore this extremely important property. Now, it may seem annoying at first, and hey! I'll even grant that it might seem annoying from then on, but the truth is if it's going to help me create more accessible Web sites, it is definitely worth the brief intrusion into my creative process.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.