[Alt]ered States
Making photography on the web more accessible
Apr 30, 2021 – by Matt Soria
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
— Tim Berners-Lee, Inventor of the World Wide Web
As a web developer I’ve spent a lot of time paying attention to accessibility on the web. And I’ve been a stickler for adding quality alt text to images. In short, alt text is copy added to code via the ‘alt‘ attribute of an image. It provides both humans and machines an alternate means of understanding the content of an image. It’s meant to be short but descriptive, a sort of at a glance summary. There’s a lot more to it that is worth reading about, but I’m going to focus on a recent experience that changed my understanding of it.
My small epiphany came from Instagram, of all places. I recently discovered they added a feature that allows you to add alternative text to your photos (I later found out it was added back in 2018). “This is cool!”, I thought. But when I navigated through the several barriers between me and the edit screen (scroll to bottom of image edit screen, tap small gray “Advanced Settings” text, scroll to bottom, tap “Write Alt Text”), I paused. For quite a while.
How would I describe this photograph to someone who couldn’t see it? It felt so challenging! I’m a former photography student, and in the four years I talked about my photos ad nauseam, I realized I’d never attempted to fully describe a photo as if it weren’t pinned up on a board for all to see.
After several rounds of select all > delete, here is what I came up with for this image:
A landscape-oriented image showing a man in a pale blue denim shirt and blue denim jeans, cropped just below the neck and just above the knees, holding a wooden walking stick that has several names of mountains and peaks carved into it. The man’s hands are old and weathered, and the stick has various colored thread and tape wrapped around it. He is standing in the middle of a dirt trail that leads off into the background surrounded by tall green pine trees. Below the image a handwritten caption reads ‘Bill — Paradise Lake Trail. July, 2020’
This definitely felt like a big improvement compared to “Photo by Matt Soria. May be an image of 1 person.”, which is what Instagram would have defaulted to, but it still had a long way to go. If you want to understand why it’s important to pay attention to alt text, even on Instagram, I recommend you try browsing through Instagram (or any website for that matter) with a screen reader.
Questions Lead to More Questions
After this discovery, I started taking time to write alt text for the rest of my images. It was very eye-opening and helped me form a deeper appreciation for accessibility, and to grow as a photographer. Trying to capture in writing everything contained within an image (composition, light, tone, emotion, subject matter) really makes you consider what’s essential. Describing the composition forces you to consider more closely how your image is structured. Describing the tone and emotion in an image makes you ask “how does this image make me feel?”.
Ideally, making this part of my practice will eventually lead to making these careful considerations when I’m behind the camera. Noticing these elements is inherent to the photographic process, but distilling them down to a few written sentences has brought their meaning and purpose into sharper focus (no more photo puns, I promise!).
This led me to my next question:
Should this be how we write alt text for photographic images on the web at large?
Or perhaps even more to the point:
Can we help create a richer experience with photography on the web for folks using assistive technology?
The established standard for writing effective, accessibility-minded alt text is to keep it short, avoid redundancies (ie: “an image of…” or repeating the caption) and describe the image in a way that conveys the same information a person would glean from it visually.
I do think this is how we should approach alt text for images that are included as supplementary content — images that appear alongside text for added context, or included as a visual break in a design, or even simple head shots or logos. But what about on sites where photographs are the main content, like a portfolio site? That short, at a glance alt text doesn’t get anywhere close to communicating everything that people get by examining an image with their eyes.
While photography is a visual medium, why shouldn’t we aim to provide a great experience for those who are sight impaired, or folks using assistive technology for any number of reasons?
Alt Auditing
In figuring out how I could provide a great experience on my own photo site, I was curious how other photographers handle alt text on their sites. I spend a fair amount of time browsing for inspiration, so I figured I’d start inspecting the code to get a sense for how they were handling alt text, and take note of my findings. Manually inspecting each site was slow and tedious, so I took a short detour and built a browser extension to speed up the process.
I named it Alt Audit, and it works on any chromium-based browser (Chrome, Edge, Brave, etc…). It scans a page for any alt text and compiles it into a list, making it easier for someone to review. It also provides insights like the percentage of images with alt text and flags alt text that seems unhelpful (ie: alt text that is likely a file name).
With the help of my trusty new tool I went on an auditing spree and have collected insights for over 100 photography websites so far. The overall picture? From my (albeit limited) sampling, it’s not good. 75% of the sites I audited had no alt text at all or alt text that was entirely unhelpful or counterproductive (like file names). Only about 4% of all of the audited sites had helpful, accessible alt text on a majority of the images found. Conducting these audits was illuminating, but not entirely surprising.
But we can, and should do better.
But how?
I still don’t think I’ve found a clear answer, but I think I’ve found a good starting place. With further testing and exploration I think we can get much closer to providing a richer experience to all visitors, not just those with (good) sight.
A New Approach
So what about that super long, thorough alt text I’ve been experimenting with? After sharing and discussing it with some really smart folks in the web development community, and in the Web-A11y Slack Group (if you’re interested in joining, send me an email) it was pointed out that this also might not be ideal. For one thing, some screen readers have a text limit that could cut short a lengthy description. It could also lead to a frustrating browsing experience where a visitor using a screen reader doesn’t get the choice to engage with a particular image, they’re forced to.
When a sighted person browses a gallery of images, it’s likely that they scan the page, scrolling past some images that don’t quite catch their interest, and then pause to spend time on an image that they want to experience on a deeper level. They’re able to get that quick at a glance information for each and have the option to choose which images they want to experience more fully. Ideally we should provide the same opt-in experience for someone browsing with a screen reader or other assistive technology.
The idea I’ve been experimenting with is adding the standard at a glance description as the alt attribute of an image, and providing the full description in the markup adjacent to the image, in an element that can be toggled, like details. This would allow the visitor an opportunity to opt into, or skip over, the more immersive experience.
The goal with this approach is to provide an optimal browsing experience for all visitors. This probably means not forcing a long paragraph onto a visitor who only wants to take in the image visually, while still providing it for those who want it. This is why I like the details element — it gives us a semantic, browser-native way of toggling a long description, and is generally accessible out of the box (though it is not without faults).
I put together a basic, mostly unstyled prototype of this concept in a CodePen. If you have thoughts on how this starting point can be improved upon I encourage you to fork that pen and test it out! I’ve included an image caption in my example as well, which may introduce a design challenge — how do you present the caption and “image description” toggle in a clear, uncluttered way?
The Takeaways
As I said before, this is an experiment. A theory being tested. I expect our approach to this challenge will evolve fairly regularly. But I’ve already collected a handful of takeaways:
- Punctuation is helpful. Adding commas and ending your alt text with a period can help a screen pause at the end, achieving a more natural-sounding cadence.
- For a long description, refrain from mentioning things that aren’t directly represented in the image, like unseen light sources or objects obstructed from view. Remember, the aim here is to provide the same information that would be gleaned from viewing the image.
- Different screen readers have their own rules and behaviors, but generally a screen reader will cut off alt text that is too long. The range is around 120 – 150 characters.
- Taking time to consider how to write impactful descriptions has really made me think about the fundamental challenge as an artist: what am I trying to say, and how do I communicate that effectively?
What's Next?
I’m working on ways to start incorporating this new way of thinking about accessible photography on the web into our work here at Firebelly, as well as my own work. My effort will remain a theory until it’s tested by folks using assistive technology, so if you or someone you know is interested in collaborating on this effort, please drop me a line — I’d be thrilled to hear from you!
There is a lot we can do to help make the web a more accessible place and offer a richer, more enjoyable experience for all. It might just start with you auditing your own site for alt text (with my new handy tool). It might mean adding alt text to your posts on Instagram if that’s something you use. Whatever it is, stay committed to learning and be willing to adjust your practice where it makes sense.
A little thought and an open mind will go a long way.