In both the Intro To HTML 5 And CSS and Intro To WordPress And CMS Fundamentals courses at the Cisco Academy for the Vision Impaired, we stress the importance of adding rich media to sites you design and build, even if you are totally blind. The web is a rich place, and its denisons have grown used to, (and like), all of that rich content. But how do you find images for a site if you are totally blind and cannot usually take the pictures yourself, and you don’t have a dedicated team of light slaves (sorry sighted people, we love you, but that’s just what we call you sometimes), to beta test the pictures you take, or you don’t have the money to use a service like this to have all the images you need described for you? (Protip: Use that service the next time you need to take a picture for a job interview. They’ll give you accurate, objective descriptions of yourself, and once you have a good picture, you can use that on resumes as well, or have it cropped to use as a social media avatar).

Fortunately, all hope is not lost. There is a reliable way to find good free images for your site that are easy to use. It will take a little work on your part, and you need to be familiar with your screen reader, but it’s definitely worth it. This method has been tested with Jaws 14 and 15, and Internet Explorer 10 and 11. Your milage may varry with other screen readers and other browsers.

We use Flikr for this, because it’s free and has lots of images that are released under the Creative Commons license. You’ll need a Yahoo ID for this, because you sign into Flikr using that ID and password. Here are the steps you need to take to start finding images:

Plan Your Images

Before you can do any searching, you need to plan what kind of images you need. What kind of images will butress your content and add flare to it. what kind of image will evoke the kind of feelings or thoughts or associations you want for your readers. For instance, if you manage a cooking site, and you’re posting a recipe for the most amazing cake ever, then an image of a scrumptious cake is what you want. Or, if you’re managing a site about beekeeping, then a picture of cultivated beehives or honey extraction is what you need.

1. Go to the advanced search page on Flikr.
2. Type keywords in the search box for images that you need. Also, make sure to type words you don’t want to show up in the search in the appropriate boxes. For instance, you might want roses, but not pictures of the band Guns and Roses, so type guns in the box for words you don’t want to show up in your search.
3. Check the box that searches for photos only if you don’t want other kinds of images, and check the box that narrows your search to photos and images released under the creative commons license.
4. Press the submit button and wait for results.
5. Look through the page of results and pay attention to what tags are applied to
   the photos and what kind of comments people make about the pictures.
   Tags are keywords people use to describe the photo. Comments can tell
   you more about what the picture is like and how well people like it.
6. 7. When you find one that is highly rated and sounds like what you want, press enter on its link. Its link is usually a long random string of
   letters and numbers.
7. Do not download from this page since it defaults to a huge full screen
   picture that is 1024 by 768. It’s not what you want for a website.
8. On that page, look for and press the actions button. It’s after the
   follow and fave buttons.
9. Now comes the screen reader magic part. There is a silent menu
   that comes up once you press the actions button. You will need to use
   your JAWS cursor or object nav in NVDA to find the view/download all sizes button. Click that
   button with the key that’s next to the numlock key on a full-sized
   keyboard, the left mouse button.
10. Once you click this, you’ll need to use your JAWS cursor again to
    click the view all sizes button. It’s on the same line as the download
    button, so you’ll need to be sure you click on the correct button.
11. You’ll reach a page with multiple sizes for your chosen image. For
    icons, you’ll want the smaller format, the square or the thumbnail. For
    a regular image to use on the website, try one of the medium sizes,
    around 320 by 240 or in that neighborhood. Don’t go higher than 500.
12. When you press the link to download the size you want, it’ll take
    you to a page where the download starts.
13. This is very important. When the download finishes, immediately go
    to the folder with your file and give it a real name. By default the
    photo has a name that is a long string of random numbers and letters. If
    you don’t give it a better name, you’ll forget what that file is six
    months down the road. Call it something like “pink rose icon” or “red
    mountain bike medium” and make sure to keep the original file extension
    of .jpg.
14. Now hit your back button twice. Tab to the link where you would
    follow a person’s photo stream. Press your context key and choose copy
    shortcut. This copies the URL for the person’s photo stream to your
    clipboard.
15. The price for being able to use someone’s photo is that you must
    give them credit. People either do this by using the caption attribute
    in the img tag or by providing credit as an aside in the article where
    the photo is posted. You could also use space in your footer tag to
    provide attribution.
    Attribution consists of letting your viewers know who took the photo as
    well as posting the link to the person’s photo stream on Flickr. It’s
    not required, but I also send the person a message on Flickr to thank
    them for sharing the photo.
16. This process works equally well using HTML or a WordPress site. Just
    do the attribution inside the caption area when you upload a photo to
    the WordPress post where the photo will be used.

We used Flikr in this tutorial, but there are tons of websites that offer creative-commons images that you can use throughout your content. As you spend more time creating content and adding images, the process becomes a lot easier and you’ll be following it like it’s second nature.

Your Turn

Now I’ll turn it over to you. If you don’t take your own pics for your site, what sources do you use to find images? Are they free? Are they paid? And if you’re a screen reader user, what accessible sources of creative-commons images have you found? Why not share your findings in the comments below?