Inclusive UXR: Alt text

Representation and identity captured in text alternatives for images of people.

Text alternatives for images, commonly known as alt text, are critical for users who do not consume websites visually to experience images on the web. To be useful, alt text should succinctly describe the purpose of an image. But what about descriptions of people?

As a Sr. Accessibility Designer, I partnered with an inclusive user research team at a leading US pharmacy to investigate how we might communicate identity (race, ethnicity, gender identity, disability) and representation in alt text of people to non-sighted users.

Some information is removed or modified due to confidentiality


Research problem

Good, meaningful alt text succinctly describes the purpose of an image – in other words, it’s more than pure description. 

Writing alt text for images of people can be more complex and involved. What was the intent of the person who chose this image? What are they doing? Is there historical context that is important to understand the image that would be available to users who consume images visually?

For example, inclusive healthcare options like reproductive health (instead of using women’s health), include healthcare services for transgender men, non-binary people as well as cisgender women. If the images contain people, would it be beneficial to describe gender identity in the alt text? Would gender-diverse screen reader users feel represented in the image? If representation is important to sighted users, why are we denying non-sighted users this information?

Questions

  1. When the primary purpose of an image is to communicate an inclusion/representation, how might we communicate that inclusion/representation to non-sighted users?
  2. What words can we use to respectfully capture identity in alt text for people?
  3. If the purpose of alt text is to describe useful, meaningful context, when is it appropriate to describe a person fully? When does the description become a burden for non-sighted people using screen reader assistive technology?

My role

  • Writing the script and protocol
  • Usability test moderation
  • Building a prototype in Figma that is accessible to screen readers

Method

We created 1 Figma prototype of our company’s clinic landing page, utilizing 6 different clinical images of people varying in roles (provider, patient, nurse, etc.), age range, race, and gender identity. Each image has 2 prewritten text alternatives in varying level of detail: 

A masked healthcare provider with curly brown hair and wearing a white lab coat gently takes the blood pressure while glancing up at a calm patient who is smiling back.

Elaborate with lots of detail

alt = “A feminine-presenting provider with golden brown skin and dark curly hair wearing a mask while taking the blood pressure of a feminine-presenting fair-skinned patient. Patient is calm, smiling and not wearing a mask”

Just enough detail

alt = “A provider with golden brown skin and dark curly hair treating a fair-skinned patient with short red hair”

Workshopping the ideal alt text

Participants were tasked with writing their preferred alt, pulling out the words that resonate or feel important to include, while subtracting or adding additional missing words.

In collaboration with Fable, we recruited 6 users that use screen readers (NVDA, JAWS) to participate in our virtual study.

We asked users to interact with the page and provide their initial reaction and feedback for each image. The first alt text users encountered had more elaborate detail in the description, then the same for an alternate option that has just enough detail to compare. During this process, we asked questions like:

  • Can you give us your overall thoughts about alt text for images of people? When do you encounter them? What makes them useful or not useful for you?
  • The first time you visit a website, how do image descriptions contribute to your experience? What about when you return to a website you are familiar with – does alt text still help you use or understand the page?
  • Is the description meaningful?
  • How do the 2 initial alt texts compare?

After our participants have provided feedback, we tasked them to workshop an ‘ideal’ alt text for the image, where they would pull out the information that was useful to them and add/subtract any additional detail. This exercise was exciting for the participants as they got to participate creatively. While they were constructing the ‘ideal’ alt text for people, we asked them questions:

  • Why do you prefer this version (the participant version) over the others?
  • Why did you decide to keep [x] feature when revising? Why did you decide to change/omit [x] features of the description?
  • What were the features that you felt were necessary to the description?

Key findings

  1. Participants appreciated that alt text described the person(s) fully, which was often a new experience for them. However, their initial instinct was that they didn’t want to like the longer descriptions of people, because often times long alt text can be distracting and annoying. Participants seemed conflicted because they liked the level of detail in person descriptions, and appreciated the inclusion. 
  2. All participants expressed delight that they were able to access fuller descriptions of people. Often times, they only get “a person” as the description, which leaves a lot of room for imagination. However, they rarely chose the more elaborate alt text descriptions, as they contained too much information that was hard to remember it all. 
  3. Surrounding context matters. Descriptions of people that were more sparse or had just enough info when the headings and body copy did not indicate that a full description of people was needed. For example, a heading: “Virtual Care Options” paired with a picture looking over someone’s shoulder to a provider on a virtual video call, describing the 2 people fully would be overkill here. The purpose of the image is to showcase virtual care options. However, in cases where the heading indicated inclusion, like “Reproductive health,” participants appreciated fuller descriptions of people here, and said that things like age, gender identity, and race felt important in the description. 

Impact

  • Images containing people will no longer be marked as decorative and will require more conversation with content writers, designers and accessibility consultants
  • Content writers will add appropriate levels of detail in their descriptions

Next steps: Deeper dive

  • Kicking off a deep dive research project to understand the balance of describing a person inclusively/respectfully with overall alt text length
  • Establish recommendations to be presented to over 300 designers, content writers and other stakeholders. 
  • Collaborating with established initiatives on the inclusive design team: Gender inclusion crew
  • Partner with content writers on writing effective standards across the board and provide training