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:

Screenshot of the TRU Collector form with a red box around a new form field to enter Alternative Description for Image

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

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:

Screenshot of the TRU Writer form with a box around the new entry field for entering an image description.
Available now for you to try at http://splot.ca/writer/write

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:

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:

https://splot.ca/box/2020/262/

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):

screenshot of the display of an item n SPLOT box, a box at the bottom includes the same alt text "Media Description: A dog stares at a multicolored rope dangled in front of his face"
The alt text is shown too as “Media Description”

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)

The media description for this audio example inludes "Media Description: Interview about open education in Japan with Katsusuke Shigeta, Associate Professor in the Information Initiative Center at Hokkaido University. See transcript https://podcast.oeglobal.org/wp-content/uploads/2020/09/oeg-voices-002-katsu-shigeta_otter.ai_.txt"
Example media description for an audio file

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:

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:

The Alternative Route need a Alternative Route
The Alternative Route need a Alternative Route flickr photo by cogdogblog shared under a Creative Commons (BY) license

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Leave a Reply

Your email address will not be published. Required fields are marked *