A Picture is Worth 125 Characters

Oct 27, 2020

Generally, alt-tags follow a few guidelines:

Braille keyboard.

One Step to Building More Accessible Communication


Dr. Casey Boyle

Director of the Digital Writing & Research Lab and Associate Professor in the Department of Rhetoric & Writing at UT Austin

October 27, 2020

Dr. Boyle will be leading a free webinar on the same topic, Writing for Access, on November 11, 2020.

This year marks the 30th anniversary of the Americans with Disabilities Act (ADA), a law that makes it a crime to discriminate on the basis of disabilities.  The ADA is perhaps most recognizable for ensuring that architectural features of buildings and other built-spaces are made to be accessible, for instance, or those who may need to use a chair or read Braille to use an elevator (among many other interventions). Of course, the law is much more comprehensive than merely adding a ramp to a door, as it also includes sections on employment regulations, public services, and even communication. Communication is something that all of us encounter every day of our lives when interacting with someone else, working with a team, or communicating to the public. What does it mean to make communication accessible? Why must we make communication, especially digital media, accessible?

Communication is accessible not only with writing that is direct and clear but also through writing that is built well. Just like a ramp or wide doorways makes a building more accessible for more people, so too does the architecture of communication make that communication more accessible for more people. A lot of this architecture is invisible to most of us–the encoding of a website, styles in a document, descriptions of images. Yet it is precisely this invisibility that renders what many of us see for those who cannot.

To understand this invisible architecture, consider this: most of our everyday communication and writing are born digital in some way. Even paper documents most likely were composed on a computer in a word processing program like MS-Word or Google Docs. In fact, we don’t even really need to print out these documents anymore, because they are circulated through email, text, websites, or a shared drive online. When we write documents through a word processor or on a simple website, we typically pay no mind to the digital structure of that document–that is, how the text is styled or encoded. When we compose a document with no regard for attributing styles to headings, sub-headings, body text, or adding in image descriptions, we make it harder for those who rely on screen readers to “see” the document as it may appear for many of us on a screen. Further, we make that document less navigable for all when we fail to identify its components. This problem often happens when we use an image to convey meaning. Images, they say, are worth one thousand words, so they are often great ways to provide a rich example or to illustrate an idea or, simply, to provide a mood. For our clients and customers who may not be able to see that image, writers have to build ways in.

One element of that document’s structure is the “alt-tag” or “Alt Description.” Practically, these items are short but meaningful descriptions of an image and its purpose for the document. Technically, alt-tags are an attribute in HTML code that describes the image in words for screen readers or to take the place of an image if a connection won’t allow a browser to fully download the image. While developed for HTML websites, this function is now present in all kinds of digital documents including word processors, PDFs, slide decks, and, more recently, in social media. For websites, the code will look like this:

<img src=“image.jpg” alt=“image description” title=“image tooltip”>

What that architecture represents is a tag <img>, which has three attributes. The first attribute calls upon a particular image file to be loaded (“image.jpg”); the second (“alt=”) offers an alternative option should the image not load or material for a screen reader to read in place of the image; and the third (“title=”) offers supplemental information that would not be acceptable for providing access or an alternative description in place of the image. The added benefit to using alt-tags is that the practice increases SEO (search engine optimization) for your site. That benefit however, should always be a secondary aim as providing access to people should always be your main goal.

  1. They are descriptive: These descriptions should be specific enough to explain the image and its purpose without getting lost in details.
  2. They are short: Generally, alt tags are no longer than 125 characters.
  3. They are direct: Do not use phrases “image of…” or “picture showing…” because alt tags assume what is being described is an image of some sort.
  4. They repeat text: If the image includes necessary text, repeat that text in the alt-tag.

These are just a few general guidelines, so more specific cases may require different approaches to alt-tags. Let’s take a look at one such example below. 

Here’s a few attempts at writing alt-tags for the image above:

Poor: alt=“dog”

Fair: alt=“Dog on a boat”

Great: alt=“Small French Bulldog alone on a kayak in water”

It’s easy to see (read?) why the poor version is poor. That version identifies an object of interest but nothing else. The fair version is okay and could work for a lot of descriptions if a dog on a boat is the only thing in the image of interest. The great version, however, gets specific without drowning in details. It identifies a breed of dog, names a type of craft, and locates that duo in a scene all in fewer than 125 characters. Again, these descriptions will vary and sometimes need not be at all that detailed. The main point is to help the communication reach more people.

It is important to remember that alt tags are just one way to build communication to be more accessible. Other techniques include writing in a readerly way (not relying on unexplained terms and concepts), balancing paragraph length and pace, attributing style to differering textual elements (headings, body paragraphs, lists, etc), ensuring good color contrast between text and background, and, as seen in this post, providing alternative image descriptions. Each of these elements takes time to practice, but exercising these techniques will make you a better communicator.

The most important argument for building access into our communication is that it provides a way in for those who may not be able to access that communication otherwise. There are other reasons as well, however. What I have found is that building my communication to be accessible helps me better understand what I am communicating. Thinking about how to structure a document so that it can be read by a screen reader helps me pay attention to keeping paragraphs at a reasonable size, writing alt-tags for images compels me and my team to think through an image’s purpose in the message, and composing captions for videos reminds me not to bloviate the next time I record. Each of these exercises are not extra tasks but have become integral to writing itself.

Alt-tags are one step towards building more accessible communication. If we use an image in a paper, on a website or social media post, or with a slide deck, then we should also take the time to describe that image and why. I’ve always been dubious that any image is worth a thousand words, but I’d propose that any image is well worth 125 characters if those characters will allow for even one more reader–a client, a customer, a citizen–to be able to see what I am saying.

Casey Boyle is a professor of rhetoric and writing at The University of Texas at Austin. He and his rhetoric and writing colleagues are developing new HDO Certificate Programs focused on digital storytelling, writing for social change, collaborative writing, writing for small business, and several other topics. Subscribe to our mailing list to be notified when these programs launch.

 

 

UT Austin