On my website, I included images. I am currently displaying the copyright information for the images as a title attribute on the image tag.
I have recently found out that mobile browsers cannot display tooltips, meaning that the copyright information does not display on mobile. This is an issue.
I was wondering if there was a way to create a black bar at the bottom of the photo with the image's title attribute displayed on in?
UPDATE: Nevermind. I have decided that I will implement the figcaption element for all future images. Thanks for all of the answers though.
You can use <figure> element to mark up a photo in a document in HTML 5.
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
Here is a link on W3Schools.com to show you how it works!
Hope this help!
Related
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
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.
Good morning to everyone,
After a series of attempts and research I was able to find this example that definitively solves the possibility of creating a multimedia gallery (images, selfhosted or not videos, iframe and so on).
https://codepen.io/makshh/pen/ONMVMm
It's based on photoswipe then I should insert a description in the image. I read the documentation and inserted the tag correctly but it's previewed below the thumbnail and not in the slider.
Eg:
<div class="col-md-3">
<div class="photoswipe-item">
<a href="https://www.w3schools.com/css/img_fjords.jpg">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Image description" class="img-responsive">
</a>
<figcaption>dummy description</figcaption>
</div>
</div>
At this point I tried to encapsulate (as per documentation https://photoswipe.com/documentation/getting-started.html) the image in the tag but nothing to do.
Do you have any idea how to correctly insert the caption for each image / video?
Thank You in advance anyone who can help me
Regards
Ale
These are my 2 images elements and I have added the title and alt attributes:
<img src="images/dog.jpg" title="dog" alt="Picture of a dog">
<img src="images/dog-house.jpg" title="dog in house" alt="Picture of a dog in it's house">
So how do I make these 2 images accessible and is this enough for an image to be considered accessible?
Going by your <img> tags you have posted, I am going to recommend you things that will help your webpage with be more accessible to screenreaders.
Don't provide an alt text for images with captions and decorations
If your images are grouped with a caption already describing them or are used for decoration only. In these cases, alt text may seem redundant or unnecessary. In situations when an image is already explained with text content or does not add meaning to a page, the <img> still needs an alt attribute, but it can be set to an empty string. Here's an example:
<img src="visualDecoration.jpeg" alt="">
Don't write alt tags for the sake of SEO
Stuffing your alt tags with keywords is likely to hurt your search engine ranking rather than help it, as you may be viewed as spam.
Keep unique alt tags
Along with keyword stuffing, using the same alt tags and keywords for multiple images may appear as spam. Each image should have a unique alt tag.
This is how you can access the image in html. But make sure that the folder and the image are correct. For example if the image is in folder than the src should be folder/image.jpg. If the image is together with the html pages than just add the image.jpg in src.
<img src="images/dog.jpg" alt="Picture of a dog">
<img src="images/dog-house.jpg" alt="Picture of a dog>
I have a basic custom Pin it button. This picks up images inline to the page, but it's not picking up images using the HTML5 picture element with srcset.
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" />
Here's an example of the picture element in use, where the button is not working:
<picture>
<img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg">
</picture>
A very stripped down demo to play with that illustrates the problem: http://codepen.io/michaelpumo/pen/eZyddp
Any ideas?
Update: I might actually have to add that my usecase is a bit more complicated than this. The above is a simplified / stripped down version to illustrate the point. I'm lazy loading these too you see.
Please use the following. It works.
<picture>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" data-pin-description="Hello World">
</picture>
I thought src and description should be there for Pinterest.
When I am testing my page in IE7, all the image have a tooltip corresponding to the text of the alt in the image tag..
<img src="Myimage.jpg" alt="No pic" />
When I hover my mouse on the displayed pic in IE7, I get a tooltip "No pic" corresponding to the text of the alt .How do I fix this ?
IE6/7 treats the alt attribute as though it was a title attribute - but only if there's no actual title attribute set.
You can workaround it with a blank title:
<img src="Myimage.jpg" alt="No pic" title="" />
You can try adding an empty title tag
<img src="image.jpg" alt="nopic" title="" />
The answer has been posted already (empty title tag).
However, (in reference to one of the answers) alts are supposed to describe the image for 508 compliance reasons and if the image doesn't show up, so you should change the alt text to describe your picture.
I would have made a comment on the original post but SO doesn't allow me to yet.
The actual question here is why are you using alt the way you are? If your image is simply decorative, you should have an empty alt attribute. look at the W3CS definition of the alt attribute.
http://www.w3.org/QA/Tips/altAttribute
On this occasion is suspect youd actually want:
<img src="Myimage.jpg" alt="" />