the Power of Just A Little Javascript
i'm currently using bearblog for this blog, and i quite like it! it's a nice, minimal platform that offers me just enough to make me happy. so far, the only thing that i'd complain about is the way it handles images, or rather image alt text. the alt text you attach to an image is shoved into the image alt attribute, but not anywhere else (like the title attribute), making it invisible to some users (who aren't using a screen reader, for example).
if this were my own site, i'd write something to direct the markdown parser to wrap images in <figure> elements, and add the alt text as a <figcaption>, as i quite like how that looks. but i can't do that here! all the parsing is done in a place that i have no control over. but that's okay -- i know javascript!
usually, for static sites like this, i'm not a fan of adding javascript. it usually bloats the user experience more than it helps it, and i don't think there's much point when just serving an html file is good enough (as bearblog does). however, there is absolutely a case to be made for adding Just a Little Bit of Javascript to a website. this is one of those cases!
i added just a tiny bit of script to the footer of the page:
document.querySelectorAll("img").forEach(function (n) {
n.outerHTML = "<figure>" + n.outerHTML + "<figcaption>" + n.alt + "</figcaption></figure>";
});
this is pretty old-style javascript! i'm trying to maximize compatibility here, so i'm not using arrow functions or templates, just good old fashioned string addition. and it works! if i add an image to a post, the alt text displays underneath the image!
preddy neato! i find this to be a reasonable solution -- if you don't have javascript enabled, or you're reading this in an rss reader, the image will still have alt text. and if you do, you get the prettier version instead! win-win.