Me and other developers at our company are struggling with "title" and "alt" attributes.
In the past, we added "title"-Tags to all links for SEO purposes (although some of them were annoing talking about usability) and "alt"-Tags on every image on the site, because HTML4 spec said so.
Are "title" and "alt"-Tags still required?
If they're not required, do they still have effects on SEO?
Check the HTML specification to see what is/isn’t required:
a element: The (global) title attribute is not required.
img element: The alt attribute is required in most cases (exceptions).
(Questions about the SEO effect are off-topic on Stack Overflow. They can be asked on Webmasters SE.)
alt attribute on img is always required except when it can't be provided (e.g. when users are allowed to upload images and you can't ask them to upload an alt text...)'; why alt is required, why is good to be provided and when you can leave empty string as value examples here
title attribute on link element is not required; check out link attributes
Yes In this version it is necessary too because of HTML5 Validation and Search Engine Optimization.
Related
Considering accessibility, is it good to use:
without any content, instead of:
About
Update: Here's a live demo, supposing that an appropriate font is available. I actually use RichStyle font.
a[href="about.html"]:before {
/* 1F6C8 🛈 CIRCLED INFORMATION SOURCE = information */
content: "\1F6C8";
}
Here is some good information regarding use of the title attribute with the anchor tag.
w3.org - supplementing link text with the title attribute
The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.
Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements.
"Good" is a not very well defined term.
Is it accessible to screen readers - yes. According to the WAI-ARIA name calculation algorithm, title will be used to calculate the name. It is step H and is referred to as the tooltip.
http://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te
However, that is not the whole picture, because there also needs to be a visible name for the link that is accessible by sighted keyboard-only users. Title attributes are only displayed in HTML when you mouse over an item.
Therefore, this technique will only be accessible if there is some other visible indication of what the link is and this visible indicator adheres to all the other accessibility requirements.
The WCAG says in his normative section (2.4.4) : "The purpose of each link can be determined from the link text alone" (http://www.w3.org/TR/WCAG20/#navigation-mechanisms).
WCAG also says that you can "supplement" the link text with the title attribute, so it excludes the title attribute from the definition of "link text".
Conclusion: you must provide a link text like in your second example:
About
Although this is not explicitly defined in this normative section of the WCAG, the "link text" is defined in the techniques as being the content of the inner text of a link including images alternative.
See the two following and complementary techniques for more informations:
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H30.html
http://www.w3.org/TR/WCAG20-TECHS/H33.html
EDIT: one comment illustrated that my answer lacked of some examples
Please note that WCAG2.0 and WAI-ARIA are two complementary and distinct guidelines and that you can provide additional informations which can be exposed to accessibility API if it's necessary. But in no case, you should consider that exposing an information to the accessibility API is sufficient enough for those not using Assistive technologies.
So the following example is wrong as aria-label can't be accessed within an user agent without the use of assistive technologies
The following is also wrong:
<a href="about.html" title="About">
<img width="100" height="100" src="about.png" alt="" /></a>
Although your link exposes an "accessible name" to the Accessibility API (WAI-ARIA), it does not provide a "link text" as specified by the WCAG normative guideline (and apparently means that a significant image is used as decorative).
So if your link only contains an image, this image should be present in the HTML code, and be correctly entitled with the alt attribute
EDIT 2: You can read the following blog post to illustrate the problem with the sole use of the title attribute https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/
Its not bad or good. Because if you want to do button with image and no text with the a tag you will do something like.
Just make sure you put a style for your a so users will be able to click on it.
For SEO purposes it is good. You can aim at keywords with title attribute. so, It is good to use. it gives user an idea about what he is going to do by clicking after it. I use it often.
Reading google prompt for using alt in internal links (https://support.google.com/webmasters/answer/47334) I looked for answers. I found a bit old thread (Is it correct to use alt tag for an anchor link?) in stackoverflow with reasonable answers that using alt for an anchor link is incorrect.
Can someone help me understand better?
The answer provided by Google is a little confusing. The alt attribute (according to the specification anyway) is not a valid attribute of an a tag. The only valid attributes for a elements are as follows:
charset
type
name
href
hreflang
rel
rev
accesskey
shape
coords
tabindex
onfocus
onblur
What the answer really means is as follows:
For example, for your site's internal links, make sure you use anchor
text and alt text for images that's informative, compact, and
avoids repetition.
You should use the title attribute for anchor tags if you wish to apply descriptive information similarly as you would for an alt attribute. The title attribute is valid on anchor tags and is serves no other purpose than providing information about the linked page.
W3C recommends that the value of the title attribute should match the value of the title of the linked document but it's not mandatory.
http://www.w3.org/MarkUp/1995-archive/Elements/A.html
Alternatively, and likely to be more beneficial, you can use the ARIA accessibility attribute aria-label (not to be confused with aria-labeledby). aria-label serves the same function as the alt attribute does for images but for non-image elements and includes some measure of optimization since your optimizing for screen readers.
http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects
If you want to describe an anchor tag though, it's usually appropriate to use the rel or rev tag but your limited to specific values, they should not be used for human readable descriptions.
Rel serves to describe the relationship of the linked page to the current page. (e.g. if the linked page is next in a logical series it would be rel=next)
The rev attribute is essentially the reverse relationship of the rel attribute. Rev describes the relationship of the current page to the linked page.
You can find a list of valid values here: http://microformats.org/wiki/existing-rel-values
As I explained in the linked question, the a element can’t have an alt attribute.
Google’s documentation is not really formulated with sufficient precision:
For example, for your site's internal links, make sure you use anchor text and alt text that's informative, compact, and avoids repetition.
While it might be the case that they think of images being part of the anchor text (they should say so!), it could also be the case that they confused alt with title (which is an error you’ll often find, for example in this question).
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
When it comes to linked images and SEO, should the title attribute be used on the <img> tag, the parent <a> tag or both?
Common practice seems to be to add the title attribute to the <a> tag. But is this best for SEO? Would there be any harm in adding it to both tags? If not, is there harm in the title text being identical on both?
P.S. I am aware that you should almost always use the alt attribute on <img> tags regardless of the title attribute.
w3schools defines the title attribute as follows:
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
As for semantic markup it's enough to add the title attribute to the a tag. Adding it to the image within isn't necessary, except you want to have different content for the title attribute to describe directly the image.
As far as SEO is concerned: if the img tag already has the alt attribute, you don't need the title attribute.
A Usefull blogentry about that:
http://www.wpromote.com/blog/seo/image-alt-vs-title-using-alt-title-attributes-in-image-tags/
Excerpt:
While the ALT attribute provides alternative text when images cannot
be displayed, the TITLE text offers supplementary information about
the element in which it is contained. According to this post on the
Google Webmaster Blog, Google tends to focus on the information in the ALT text. So there you have it! If you’re only going to use one attribute… ALT it is!
That's a good question.
The title attribute isn't used by Google and Bing (in search engine ranking algorithm). Titles attributes are useful for accessibility (blind people and vocal navigation for example).
Nevertheless, the useful (very useful in SEO strategy) is the "alt" attribute. This one is used by Google and other search engines. "alt" has to be used on img balise.
In the <alt> attribute you describe, what you can see on the image.
In the <title> attribute of the image, you describe the general topic, the image is about.
In the <title> attribute of the <a>, you describe the general topic, the <a> is about.
If there is nothing else in your <a> than the image, there is no need to add a <title> attribute to the image (talking about the Google Robot), else it is.
Conclusion: Do never use identical titles, that is absolutely useless for Search Engines, and will
brings your Code Quality in there ranking down
not generate new keywords
EDIT1: I am not agreeing that much, with the other answers, since the title attributeis at least used in the Google Image Crawling and for checking the Code Quality, which can both decrease your CPC (=Cost per Clicks) when using adwords
When defining a title or alt to an anchor tag, which is valid HTML5?
Is it best to define both, or only one?
Does it affect SEO at all?
in HTML, even from version 4, the title attribute is valid for almost all elements. alt is different in that it's only valid for images, the idea being to provide a text only alternative version of the image, which would be useful to people with visual impairment (as they'd be able to hear their browser read the text)
It's good practice to provide an alt attribute for images, even if you're going to leave an empty string ( "" ). The alt attribute helps improve accessibility for screen readers since the user most likely can't see the image with which it's associated. The title is less useful for accessibility purposes but is still a good practice to get into.
In the Web Content Accessibility Guidelines is states that you should supply a "skip" link that jumps you (for example) over a navigation block and straight into the content. This is particularly useful for impaired users who use a screen-reader to describe a page audibly.
6.2 Grouping and bypassing links WCAG Guidelines
However, this technique relies on using the name attribute on an anchor tag:
<h2><a name="content">Content</a></h2>
Along with the skip-to link:
Skip to content
The problem is, the "name" attribute of the anchor tag is obsolete in HTML5. HTML Obsolete Features
Is there any other way to achieve this "skip to" functionality without using the name attribute?
Footnote: The status of the HTML5 specification in still in draft and it is possible that the name attribute will actually continue to be allowed in this scenario - although it will probably still generate a "warning". It has currently been marked as "obsolete but conforming", which means you COULD still use it - however, I would like to know of other ways to perform the "skip to" to see if there is a way to do it that doesn't rely on an obsolete attribute.
Instead of using <a> tags, you can use any element with the id attribute:
<h2 id="content">Content</h2>
Skip to content
EDIT, found you a source (albeit it's Wikipedia ;-)):
Alternatively (and sometimes concurrently), with the name or id attributes set, the element becomes a target. A Uniform Resource Locator can link to this target via a fragment identifier. Any element can now be made into an anchor by using the id attribute,[2] so using <a name="foo"> is not necessary.
http://en.wikipedia.org/wiki/HTML_element#Anchor