I may have to put on my code dog cone of shame for finding out I was missing a feature in the SPLOT themes that should have been there a long time ago. But shame is for silly humans, so I just shook it off, and went about fixing it.
This came about in conversation with Clint Lalonde as he was prepping to use the SPLOTbox theme for part of the BCcampus Studio20 event this week. It’s worth seeing for all the submissions so far, but you might not return. That’s okay.
Clint messaged last week with a question that came from Arley Cruthers who is part of the Studio 20 facilitating team.
Hey new SPLOT question. If someone shares an image, can they add alt text?
And as of that time… the answer was “no.” I thought some about the way such images are used- they are displayed as featured images in SPLOTbox, TRU Collector, and TRU Writer. So in the flow of a screen reader, they come before the title and text. I could have suggested it was not needed since those elements should explain it. But on a little more thinking, thought, why not see what it takes to add this?
I started first with TRU Collector to see what it took. I just had to add an extra field below the image uploader:
Since the images uploaded are made into featured images, I don’t even need to add extra custom fields to the post. WordPress images have their own meta data field ready for using.
When images are uploaded, we get an ID number for it $wFeatureImageID when added to the media library, so adding the alt description is a matter of adding or updating another post meta value
|
1 2 |
// update featured image alt update_post_meta($wFeatureImageID, '_wp_attachment_image_alt', $wAlt); |
And nothing needs to be done differently on the template that displays the image since the theme uses the_post_thumbnail() which just uses the text we saved in the alt tag.
You can try this out now at http://splot.ca/collector — or see my test example https://splot.ca/collector/743/. To see it, you may have to… view source.
That’s one SPLOT down.
Next up was TRU Writer, and pretty much the same process. There’s a new field on the writing form:
I will leave the inspection up to you on this example at https://splot.ca/writer/2020/790
And last to get the overhaul was the one where it all started- SPLOTbox. This one was more complex because:
- It uses a variety of media. Images can be uploaded like the other two, but media is also entered by entering URLs like for flickr or YouTube ot Giphy, et al. And it also accepts images from direct URLs like https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Dog_for_Senior_Dog_Food_Diet_Wikipedia_Page.jpg/1024px-Dog_for_Senior_Dog_Food_Diet_Wikipedia_Page.jpg
- The media are not displayed as featured images, they are displayed like them if they are uploaded.
I started out creating some picky logic to determine if the uploaded media was an image (as audio files can be uploaded) or if the URL entered represented an image. It worked but maybe not elegantly.
Then I thought about other media types like audio or video. What can the site do to help visitors who cannot hear or see? I’m not about to do transcripts. But rather than trying to make special cases for different media types, I ended up making the field always visible.
If the media is an image, then you would want to enter a text string suitable for an image alt field, a description that can be a substitute for the image. But if it is a video or audio or something else, then it’s still useful to provide some kind of summary of what the media includes if say, one cannot hear and audio file or see a video. To make it more useful, any URL can be included that can link to a transcript or something else with more information that can help someone who is unable to see or hear the item.
I considered the accessibility approach where you place this alternative description in a div shoved way off screen as invisible content. But why hide it?
And finally for this site, I decided to display this information with the other metadata at the bottom. In this theme, the alternative text is always visible.
So for an image, whether it is uploaded, or loaded from a direct URL, or an embeddable site like flickr- the media description is added to the img tag as standard alt text. Here’s an image example:
If you peek at the source you should find the alt text. But it’s also now at the bottom of the page (I also styled this post meta a bit):
But let’s try a different kind of media. I created another example using a URL to an mp3 file, a podcast recording from my work with OE Global. In this one, I have a one sentence summary, and I entered a URL for a link to the transcript (I coded this so all URLs entered become links)
Like all alternative text, the value happens in the way people use it. The site here is a container.
I am not sure if this is the best way to go. One could say the entire entry ought to include enough information to serve as an alternative.
But I am also eager to see how this approach differs as the media description is always visible.
All three themes are available now in github with the new features. They are extremely lightly tested. I could use feedback on how it works! Try them out now:
- TRU Collector with Alt Text Support http://splot.ca/collector (or get the theme)
- TRU Writer with Alt Text Support http://splot.ca/writer (or get the theme)
- SPLOTbox with Media Description / Alt Text support http://splot.ca/box (or get the theme)
Testing this will help as I’d like to have the auto-updated versions available on Reclaim Hosting brought up to speed too.
Thanks again for Arley Cruthers who brought this up and Clint Lalonde for sharing. And while I am thanking Clint, check out the How to SPLOT in 60 Seconds video he made for the workshop.
Can you make me more of these for the other SPLOTs?
Alt we go now. And this has also spawned a new SPLOT-based activity that might unfold soon.
Featured Image:
