0

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

mplungjan
  • 169,008
  • 28
  • 173
  • 236
elleohtea
  • 1

2 Answers2

0

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.
bhanu
  • 1,730
  • 3
  • 12
  • 30
0

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.

Colleen Gratzer
  • 1
  • 1