Alternative text is 10% science and 90% art. There are some hard-and-fast rules1, but also a lot of areas where you just have to use your judgement. Headshots on nonprofit websites are a great example to learn more about the nuances of good alt text.
“Alternative text” or “alt text” is the hidden text that represents an image in HTML. If you care about equity and inclusion (and legal compliance), then you must write alt text so that folks who are blind or low-vision have equal access to information convey with images. Alt text also helps folks when an image fails to load and search engines seeking to understand photos.
In WordPress trainings with nonprofit staff, I often find us having a long conversation specifically about writing alt text for photos of staff and board members on. Why is this hard? Well, headshots represent real people who are beautiful, complicated, and diverse.
Here are five things I consider when writing alt text for headshots. Some people may disagree with parts of this advice, which I think is fine. What is most important is that we’re focused on communicating in an accessible and equitable manner since there is no objective answer to “how to communicate to people.”
1. Don’t be redundant
When writing alt text, you don’t need to identify that something is an image. The screen reader software that reads a webpage aloud to a person who cannot see it well or at all will identify when it’s reading alternative text, usually by saying the word “image” or “graphic” followed by the alt text.
Other ways to not be redundant:
- Don’t repeat information that’s written elsewhere on the page like a full name, job title, or pronouns.
- If you’re using a visible caption for the image, consider that supplemental to the alternative text rather than a replacement or duplicate.
My general rule of thumb for alt text is this: Alternative text’s purpose is to communicate to another person. It should be the answer to the question “If this image weren’t on the page, what would be lost?”
2. Include some humanity
In some situations, you may want to focus on a pretty literal description and in others a more expressive description might be the right call. Use your judgement, and do your best.
Headshots are an opportunity. They are a place where you can bring in some personality and fun. Again, think about why the image is on the page at all. It’s probably there to communicate a feeling and vibe as much as it is to show a person’s literal appearance.
And many people who can’t see the image will appreciate this. I often think about Léonie Watson’s words about alt text and emotions:
A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor…
Léonie Watson, “Text descriptions and emotion rich images”
3. Be intentional about describing identities
Many of the organizations I work with do real work to analyze, acknowledge, and change how our identities can privilege or expose someone to institutional and interpersonal discrimination due to structural biases in our society. Our visual appearance matters whether we want it to or not.
When it comes to describing a person’s appearance and perceived identity, it’s most important to be intentional about what you choose to include or exclude. But if you’re not describing your visual appearance or identity markers, interrogate why.
4. Put the important stuff first
As a rule, alt text should be as short as possible. I usually aim for a few words to one sentence. (Anything beyond ~5-10 words is “long” alt text.) But there times when you can’t keep it short.
As Léonie Watson also mentions in their article, screen reader users can always choose to stop listening and skip the remainder of the alt text (just like anyone can stop reading this section and skip to the next).
If you choose to write longer, more detailed and emotive alt text, be sure to “front-load” it by putting the most important information first. That way, people can get the gist and move on if they choose to.
5. Have people write their own alternative text!
Headshot alternative text provides an amazing opportunity to educate people about website accessibility and empower them to describe themselves. Whether over email, at a staff meeting, or at a board retreat, writing alt text for your own headshot is a fun and informative activity!
When doing this, quickly introduce why alt text is important (equitable access!), brief alt text guidelines (keep it short, communicate), and then have each person take a first pass. Sharing your personal alt text can sometimes lead to really meaningful conversations!
Example: What I do on this site
In the sidebar of my site, I have a formal headshot that accompanies the “About” information. Here’s the alt text I have written:
Mark is a white man with short light brown hair and stubbly facial hair. He’s wearing a collared blue shirt with a small white floral print in this formal portrait with a stark white background.
Alt Text for headshot
There’s more than one way I could have approached this, but here were a few thoughts:
- Since it’s a formal portrait, the focus is really on what I look like. This is a business site, and so communicating that this image is a little buttoned up (literally!) aligns with the purpose of the image.
- I’m comfortable describing my identity and want to acknowledge it. It’s not described in writing anywhere else on the page, so this image is the only place that does that.
- I love that shirt and I tend to almost always have some level of stubble or short beard, so those are little bits of details about me that feel relevant to the viewer.
Every choice you make on a website matters and impacts the experience of visitors. Alt text for the people who represent your organization and do the work deserves great care and is an opportunity to celebrate our individuality.
I’ll leave the last word to Haben Girma, a deafblind human rights lawyer:
- If an image is linked, the alt text describes the link, not the image. If an image contains text, the alt text needs to be that text. The alt text decision tree is your friend. ↩︎