Get alt value automatically from src attribute

Published
Updated

Javascript Accessibility HTML

I'm sometimes lazy when it comes to accessibility on web projects. No matter how hard I try, I'm usually adding aria-label and tabindex and role attributes later than I'd like.

The repetition is also frustrating. If you're anything like me, you enjoy writing code because it helps you avoid repeating the same tasks over and over. That said, some things are just too important to skip, namely image alt attributes. When I discovered why alt is so important, I realized I had yet another detail to manage for better SEO and accessibility on my web projects.

Today, let's look at how to solve that problem by adding accessible alt attribute values to our img elements with vanilla javascript. Check out the example HTML below.

<div class="gallery">

    <div class="gallery__item">
        <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/_images/wboc-2-media-approved-preview-1521054875.jpeg?crop=1.00xw:0.870xh;0,0.130xh&resize=1080:*">
    </div>

    <div class="gallery__item">
        <img src="https://media-cdn.tripadvisor.com/media/photo-s/09/3a/1b/8a/sesame-chicken-yum.jpg">
    </div>

    <div class="gallery__item">
        <img src="https://4.bp.blogspot.com/-ehuFRO8kWgM/V3yvBqhyLvI/AAAAAAAAwQY/-eaVSQkLFs8ioHS53M_Hjxj7DJuj-pWFQCLcB/w1200-h630-p-k-no-nu/pei-wei-summer-salads.jpg">
    </div>

</div>

We have a delicious-looking gallery of asian-american food here. You (and people with screen readers) probably had some difficulty figuring that out though, because the actual image titles come after a long, nonsensical string of characters that CDNs and servers need, but aren't relevant for humans.

We want to isolate just the image titles. To help us do that, we'll use some fun native javascript methods that honestly sound like dance moves: split(), shift(), and pop(). First, let's grab the img elements with document.getElementsByTagName().

const images = document.getElementsByTagName('img');

for (let image of images) {
    // do stuff
}

Next, let's make sure the image doesn't already have an alt value already set.

if (!image.alt || !image.alt.length) {
    // do stuff
}

After that, we can get the src value, and convert URL-formatted characters with decodeURI(). This will replace an encoded character like %20 with a standard space.

let src = decodeURI(image.src); // https://cdn.com/media/my-beautiful-image.jpg?format=small

From here, we can isolate the title by splitting the URL into chunks between forward slashes with Array.split() and returning the last one of those chunks with Array.pop(). We'll also use Array.split() again to separate the file name from the file extension and return the former with Array.shift(). Finally, we can replace dashes with spaces, and we're done!

for (let image of images) {

    // skip images with alt already set
    if (image.alt && image.alt.length) continue;

    let src = decodeURI(image.src); // https://cdn.com/media/my-beautiful-image.jpg?format=small
    let name = src.split('/').pop(); // my-beautiful-image.jpg?format=small
    let title = name.split('.').shift().replace(/-/g, ' '); // my beautiful image

    image.alt = imageTitle;

}

I hope this little bit of vanilla Javascript takes the headache out of alt attributes and helps you improve SEO and accessibility on your web projects.

Thanks for reading! If you like this, share it with your friends.