How can I allow alt text to be viewed on my images (wordpress theme kallyas)

Question

I'm trying to update my company's website to be more ADA friendly by ensuring all images have alt-text assigned. However, when I add alt text on the Wordpress CMS, I'm not able to view it in the HTML. Please see attached screenshots for reference.

I would greatly appreciate any help that any one can give me on where to look on the server and what to add to ensure that my alt-text will be displayed.

This is the code snippet for the icon I reference in the screenshot:

<img data-src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png" class=" lazyloaded" src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png">

Screen shot of alt text added in wordpress media library

Answer 1

Well there are two ways of doing this, when you have the attachment ID. I am going to answer with the best and recommended way.

Use the function wp_get_attachment_image from WordPress core.

You can use it in this way.

echo wp_get_attachment_image( 49, 'thumbnail' );

Where 49 is the id of the image and and thumbnail is the size.

Output:

<img width="150" 
height="150" 
src="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg"
class="attachment-thumbnail size-thumbnail" 
alt="Test Alt Text" 
loading="lazy" 
srcset="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg 150w, http://checkout.io/wp-content/uploads/2021/06/profile-300x300.jpg 300w, http://checkout.io/wp-content/uploads/2021/06/profile-60x60.jpg 60w, http://checkout.io/wp-content/uploads/2021/06/profile-110x110.jpg 110w, http://checkout.io/wp-content/uploads/2021/06/profile-100x100.jpg 100w, http://checkout.io/wp-content/uploads/2021/06/profile.jpg 538w" 
sizes="(max-width: 150px) 100vw, 150px">

Benefits of it.

• You get your alt text for your attachment.
• You get loading="lazy" which is a recent update in WordPress.
• You get srcset.
• As this is a WordPress core function you will be automatically be compatible with all the image feature updates that comes, be it a SEO or a performance update.

Answer 2

If you added the Alt-text to the image in the Media Library after the image was already inserted into the page, then the Alt-text will not update on the image on the page. You would need to reinsert the image or go to the page it appears on and add alt="" with the Alt-text inside that, adding it in code view.