Add something similar to Alt Text to Elementor Background images

[Community]

Thanks to Adam at www.rivmedia.co.uk for this, check out their Elementor Services

Although Alt text cant be used with background images, because the background images are inserted with CSS.

We requested for the aria-label for background images to be added a few years back so we could then dynamically fill the images with the alt text.

This may or may not be beneficial for SEO, but in my opinion it adds descriptive text to background image for easier identication and categorisation for search engines. Which can't be a bad thing.

This is how we've done it, although its still in beta. If it works for you then great, but othe

Create a folder in your child theme called /js/ ( you may have one already, use it if you have )

Upload a file to your new child theme folder called : background-aria.js

The path should then look similar to this :

[/B]https://your-site.com/wp-content/themes/your-child-theme/js/background-aria.js[B]

In the file put :

document.addEventListener("DOMContentLoaded", function (){function applyAriaLabel(){// Select all elements with the data-settings attribute containing "background_background"
        const bgElements = document.querySelectorAll("[data-settings*='background_background']");
        bgElements.forEach((element) => {
            const bgImageUrl = getComputedStyle(element).backgroundImage;
            if (bgImageUrl && bgImageUrl !== 'none'){const imageUrl = bgImageUrl.slice(5, -2); // Extract the URL without 'url()' syntax
                fetch(`/wp-json/wp/v2/media?per_page=100`)
                    .then(response => response.json())
                    .then(data => {
                        const image = data.find(img => imageUrl.includes(img.source_url) || img.source_url.includes(imageUrl));
                        if (image && image.alt_text){// Set the aria-label if alt text is found
                            element.setAttribute("aria-label", image.alt_text);
                            console.log("Aria-label set:", image.alt_text, "for element:", element);
                        } else {
                            console.log("No matching image found for URL:", imageUrl);
                        }
                    })
                    .catch(error => console.error("Error fetching image alt text:", error));
            }
        });
    }
    applyAriaLabel();
});

Then in your theme functions.php

function enqueue_background_aria_script(){wp_enqueue_script(
        'background-aria',
        get_stylesheet_directory_uri() . '/js/background-aria3.js',
        array('jquery'),null,
        true
    );
    // Localize script to add REST URL base for images, in case we need it
    wp_localize_script('background-aria', 'wpApiSettings', array(
        'root' => esc_url_raw(rest_url()),'nonce' => wp_create_nonce('wp_rest')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_background_aria_script');

Note, if this doesnt work for you. Try reuploading the image to your media gallery, adding the alt text and then re-adding it to your elementor background. Sub note, this hasnt been tested with background overlay backgrounds yet.