I was wondering what is the best way to implement the title and alt on a linking image.
An img-tag can have both the title and alt attributes, an a-tag can only have the title attribute.
When linking an image what is the best way to implement the title-attribute?
Should I put it on both the img and a-tag or just one of the two?
they have a different approach. the title-attribute adds a description to the element, the alt-attribute behaves as an alternative textual presentation of a image.
<a href="..." title="Click here for more information about VanGogh">
<img src="vangogh.png" alt="Famous painting of VanGogh" />
</a>
Related
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 JS that will be handling videos and there are anchor tags with an icon in them on the page which, when clicked, will open a video. How can I make this more accessible through aria?
HTML:
<img src="myimage.png">
You have to set an alt attribute on the img. aria will only be useful for supporting screenreader users which only covers less than 1% of the population.
See H30: Providing link text that describes the purpose of a link for anchor elements
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
<a href="myvideo.webm" class="video">
<img src="myimage.png" alt="insert something descriptive here">
</a>
I am just learning HTML. I have a confusion on using image and alt in learning HTML. When I use alt it doesn't go to the alt image.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
When I try to use my own example, or image, it doesn't work.
The alt attribute specifies an alternate text for the image, if it cannot be displayed.
The alt attribute is required in HTML4 and the page will not be valid without it.
Checkout at this link an example: example.
<img src="http://www.1341234123412312/ic_mountain.jpg" alt="Image not found" style="width:200px;height:128px"/>
alt isn't a tag, it's an attribute. It doesn't specify an alternate image, it defines the alternate text of an image if it cannot be displayed. In most cases it's used as hover-over text.
Like henriquedsg89 mentioned the alt ATTRIBUTE is used to display alternate text. An example of it's purpose would be if a blind person can't see the photos. Instead the browser will read the alt attribute out loud.
alt is attribute, and used to display the image description. if image is not displayed because of some case.
<img src="/img.jpg" alt="Image not found">
Given the following link to an image:
Title
What is the most semantically sound method for indicating the location of a thumbnail?
The best I could come up with so far is using data- attributes like so:
Title
However, it doesn't seem very semantically sound. Is there a better or more correct way to do this?
Why not use an <img> element? You can give it a class to indicate that it's a thumbnail and hide it with progressive enhancement if you need to. That way, the thumbnail of the image will be shown in the absence of JavaScript/CSS:
<a href="path/to/img.jpg">
<img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
Title
</a>
Or am I being too naïve?
Title
Simple and keeps the original path intact while just adding a suffix to indicate that the image is a thumbnail. We use this all the time on our sites and it makes things easy.
I want to know what the difference is between alt="" and name=""
Would it be better to put the filename within the alt tag, or the description of the photo?
What makes better sense, both from SEO and validation stand-point?
Using the ALT attribute is more useful in terms of search engine optimalisation. Using the NAME attribute is mainly useful for internal page anchors.
The ALT attribute is intended to provide an alternate text that describes the image for people who use screen-readers, or search engines, for example.
The name attribute is mainly used for internal anchoring, which allows you to navigate within a page using anchors.
Example usage of the name attribute:
<!-- following ancor can be referenced as http://<your_url>#post-123 -->
<a name="post-123">permanent link to some post</a>
Example usage of alt attribute:
<!-- following image shows "FooBar Company Logo" when images can't be shown -->
<img src="logo.jpg" alt="FooBar Company logo" />
For more information regarding links in general: http://www.w3.org/TR/REC-html40/struct/links.html
For more information about how and when to use the ALT attribute, see:
http://www.w3.org/QA/Tips/altAttribute.
The name attribute exists only to provide a name to refer to in JavaScript.
The alt attribute provides an alternate description for search engines, blind people, when the image could not be loaded, etc.
The title attribute provides a description which will be shown when the user hovers over the image with his mouse - some (but not all) browsers will use the alt attribute for this purpose when there is no title
I'd be a little wary of putting the file name in the ALT tag, since it would be displayed if images are turned off. Typically you set the ALT tag to server as a place holder with something like "Site Logo" or something else to indicate what the image is.
The NAME tag is used for anchoring and the like. If you wanted to create a link that scrolled a long page to your image, you would reference it through this.
Yeah, definitely put a description in the alt tag. It is really important for the visually impaired as this is what the screen readers will read when they come across an image. The only potential catch with this is that the alt tag is treated as tool tip text by some browsers, however, you can override that behavior with setting title="".
The alt attribute is intendet to supply an descriptive alternative in text form for the image. So if you have an image that shows a sunflower, you could use:
<img src="sunflower.jpg" alt="image of a sunflower on a sunny day">
The name attribute in intended to name the image for scripting so you can access it using images["sunflower"]. But nowadays you should use the id attribute instead.
You definitly want to use the ALT tag - for all the reasons mentioned above, and: this tag is mandatory according to W3C so you need it if you want to create "compliant code" (see e.g. w3schools).