Seeing is Believing Part 3: But what if they can't see?

If you followed our advice in the first two articles in this series, you’ve got some splendid images for your page or post now, and they’re properly sized to make the biggest impact without slowing your page load time too much. Great job! But you’re not quite done yet, unless you want to expose yourself to potential legal problems.

As Wes wrote in his terrific, if terrifying, post on getting a compliance letter from a lawyer, one in four Americans has a disability, and you have an obligation, moral as well as legal, to serve him or her just as well as you serve the other three out of four who don’t have disabilities. And to make sure you’re doing it: lawyers could help the disabled bring costly suits against your business for not being accessible, and they do so at an average of more than one lawsuit in America per every working hour of the year, according to UseableNet.

So what does “accessible” mean in terms of those great images you found? You may make a building accessible by building a ramp up to the door because someone in a wheelchair would have a difficult time getting into it otherwise. With your images you need to tackle a similar difficulty of access, though less in this case for people in wheelchairs, and more for people with blindness or visual impairments. The ramp to your images is called “alternative text” and it describes the image in case the person can’t see it. Let me show you how to include it.

If your website is pure html, your image will look something like this:

<img src=”/images/roadrunner.jpg” >

That’s an inaccessible image. You’re missing the alt text, which needs to be added in an alt attribute, like this:

<img src=”/images/roadrunner.jpg” alt=”black speckled roadrunner with legs spread running across a highway”>

That alternative text description won’t show up to most viewers of your site unless they have images turned off in their browser. But if a person with blindness or other visual impairments is going through your page with their screen reader, that’s what they’ll get, so you want it to provide the same information sighted visitors would get.

If you’re using a platform like WordPress, Wix, Squarespace, or any of the dozens of other website builders, when you upload the image there will likely be a spot where you can include alt text. If a web agency manages all that for you, you’ve got the easiest job of all: when you provide the images to them, just make sure to also provide alternative text, and they’ll be certain to put it in where it’s needed.

So that’s alternative text for you, making your images accessible. Easy! The next part is also pretty easy, but also very important: properly attributing the images you use to their creator. Remember back in high school how your English teacher was always harping on you to cite your source if you ever used someone else’s words in your paper? Remember how Mrs. T.S. always pointed out that the maximum penalty for a copyright infringement was $150,000 and six months in the clink? When you muttered under your breath that nobody was likely to prosecute a high school student, it didn’t seem to mollify her, possibly because she understood that someday you’d outgrow such dubious scholastic protections. And here you are!

Using our Quick and Dirty method of content creation, you’re on track to avoid plagiarism in your text, but not attributing your images to their source may be copyright infringement which can even more easily land you in jail, and now you probably don’t have your youth to save you, so let’s figure out proper attribution to keep you as far away from the slammer as possible, shall we? It’ll depend upon where you got your images exactly how they’d like you to attribute them, but generally it’ll be by including at least the photographer’s titles of their photos and their names, ideally with links back to the original work, and their portfolios of work, respectively.

If the image you’re using is licensed under Creative Commons, you’ll have to use the TASL method: Title, Author, Source, License, so it’ll look like this:

“Fast Food / Roadrunner” by Nick Chill Photography is licensed under CC BY-NC-SA 2.0

Ideally, that should go directly under the photo, though you could also put it somewhere else on the page as long as it’s easy to find. Best practice is probably right underneath the image, though, as that makes it most obvious. In a website platform like WordPress, you should put this information in the caption field as you upload the image, and make sure it’s set to display the caption. If you’re building your site with straight HTML, use the <figcaption> tag inside of a broader <figure> tag that includes both your image and figcaption, so it looks like this:

<figure>
<img src=”/images/roadrunner.jpg” alt=”black speckled roadrunner with legs spread running across a highway”>
<figcaption><a class=”https://www.flickr.com/photos/26256233@N04/3023580056”>”Fast Food / Roadrunner”</a> by <a href=”https://www.flickr.com/photos/26256233@N04”>Nick Chill Photography</a> is licensed under <a href=”https://creativecommons.org/licenses/by-nc-sa/2.0/?ref=ccsearch&atype=rich”>CC BY-NC-SA 2.0</a></figcaption>
</figure>

If that looks daunting, and not like anything you’ve seen before, don’t worry about it. Your site is probably set up so you don’t have to use all that. Just get the attribution information to your web development firm and they’ll know what to do with it.

The result of what they do with it, or what you do if you undertake this on your own, is to keep you out of jail in the case of the copyright infringement, and to make your site more broadly accessible to people who might otherwise have trouble making sense of your site. Yes, you’re required to do it, but you’re broadening your audience at the same time. I call that win-win, and all it takes is a little bit of effort on your part.