Question 165782 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I view alt text on images in WordPress theme Kallyas?

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

Tags:

2

Answers


  1. 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.
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search