I was doing a Google search on the company that I work for, and for some reason that I can't explain, the alt attribute value is showing on Google as the name of the page, as seen on the following print:
As you can see, "Ícone do Whatsapp" is the alt attribute of a floating Whatsapp icon that we have in the page, as seen here:
<a href="https://wa.me/5519983642028?text=Vi%20o%20site%20da%20Fast%20Tire%20e%20quero%20aproveitar%20as%20ofertas%20de%20pneus%20novos!" target="_blank">
<img src="https://fasttire.com.br/themes/fasttire/assets/less/icon-whats.png" alt="Ícone do Whatsapp" style="margin-bottom:100%; height:80%; width:80%" >
</a>
I have no idea what could be happening here.
Just inspected your html and it looks like Google wants to display some text there, and you don't have any other text. Inside the header tag, you only have an image.
Also your title tag is very non-descriptive home
Possible solutions
Put a decent description of the website in the title tag.
Put a title attribute on the anchor.
Put a title attribute on the image.
Related
The image inside this anchor tag throws a "Linked image missing alternative text" error in the WAVE accessibility checker:
<img src="google.jpg" alt="" />
You can't have a decorative image being the sole element of a link. This image is a link, it's not decorative.
<img src="google.jpg" alt="" />
When an image is the only content inside the link, its alternative should contain the link destination description.
In other cases, adding the role="presentation" would have been sufficient to explicitely state that you willingly wanted a decorative image which is not the case here.
Support for the title attribute in screen readers and other assistive technologies is extremely limited; it is also useless for sighted keyboard users.
See for example,
Don't Rely on the Title Attribute for Accessibility (2016)
Using the HTML title attribute – updated (2013)
If a link contains only an image and no text, the content of the alt attribute constitutes link's "link text", i.e. this is what a screen reader will announce when the link receives focus. For this reason, the alt attribute cannot be empty in this case. You need something like the following:
<img src="google.jpg" alt="Google" />
If you include actual text next to the image, as in the following example, you can leave the alt attribute empty:
<img src="google.jpg" alt="" />Google
In the last example, the image can be treated as a decorative one, due to the presence of proper link text. If the string Google were included in the alt attribute, it would be announced twice by a screen reader.
Adding a title attribute to the link is not a great idea for the following reasons:
It is useless to sighted keyboard users who cannot hover the mouse pointer over the link.
Screen reader support for the title attribute is not entirely consistent, as can be seen from the test results A "click here" link with TITLE attribute: Screen reader compatibility (last updated in April 2019). Adding the attribute title="google link" to the above examples would just lead to needless repetition in those screen reader and browser combinations that actually support that attribute on links.
I would like to remove the automatic text that appears when the cursor hovers over the jumplink. The text is usually the name of the post title that its directing to. However I would like to remove it. I've tried removing certain parts of the following code for the jumplink but to no avail. The coding is as follows:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Any help will be appreciated. The URL to the blog is as follows: http://www.blankesque.com
The browser will show what is inside your title attribute automatically.
There is a good reason for that.
Sometimes you have an image on you web site and for any reason will not display or your site is loading to slowly.
In place of your image you than can see the value of the title attribute (or the alt attribute in very old browsers), so the user will not see a complete empty space
So if you can miss the title attribute just deleted or set his value to ="".
There are also other solutions for this, but seen you don't know much about attributes, seems to me not appropriate.
Remove the expr:title='data:post.title' part from the <a> tag in the code.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
I know you haven't got javascript tagged but I tried css and couldn't get a solution and the only way I found was JS, I'll keep trying though
var links=document.getElementsByTagName('a');
for(i=0;i<links.length;i++){links[i].title="";}
this won't show the title<br><br>
This won't show the title
My website: cultpops.com
I'm trying to get the top left logo on my site to link to the 'about' portion on my page. As per another stackoverflow topic, I placed [a href="#about"][/a] around said logo and [a id="about"][/a] around said portion. What am I missing here?
I see you really put [a id=”about”] in your code. This is not an html tag. html tags always are like this <htmltag> and not with square brackets
If you want to link to an anchor you just need to give an id to the html element you want (doesn't have to be an <a> tag).
The easiest way to do this is for example on the image above your about section.
Set your editor to text instead of visual and add an id to your image or the a tag around it. It will look like this.
<a href="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" id="about">
<img class="alignnone size-full wp-image-97" src="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" alt="logo2" width="97" height="133">
</a>
Place the following around the "img src="example.com/image.png" tag:
<a href="http://example.com/youraboutpage">
<img src="example.com/image.png">
</a>
I can see you are using wordpress -the logo image tag is in your header.php file available in Appearance>Editor
Hope this helps
Admin Alex
Let's say I have a list of images on the page, that are wrapped within links. So when u click an image it gets you to a page that displays the larger image
How should I handle title tags here?
Do I put the image title on both the image and the link, or just the image? Does it matter if the title is the same as the "alt" attribute?
<a title="image description" href="#"><img title="image description" alt="image description" src="image.jpg"></a>
HTML5 defines guidelines for alt usage. See the section "A link or button containing nothing but an image":
When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that together convey the purpose of the link or button.
So your alt attribute content could include something like "Open larger version of …".
(You may also be interested in my answer to the question on UX SE: What should the ALT text be for an image that is also a link?)
You should never have the same content for alt and title. See the general guidelines (from the W3C Candidate Recommendation of HTML5) (Update: In the W3C Recommendation of HTML5, this section got changed, and it no longer contains that quote.):
A corollary to this is that the alt attribute's value should never contain text that could be considered the image's caption, title, or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.
The image title attribute should describe the image.
The link title attribute should describe the target of the link.
<a title="view larger version" href="#">
<img title="image description" alt="image description" src="image.jpg">
</a>
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).