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).
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.
I have read on Mozilla website regarding the title attribute : "contains a text representing advisory information related to the element it belongs to".
But also, in the first paragraph of the page regarding all global attributes (title included): "HTML defines a few attributes that are common to all HTML elements. These attributes can be used on all elements, though the attributes may have no effect on some elements"
Is it anywhere specified (source please) on which element the title attribute has "no effect"?
I curious why this seems so vague, maybe I simply missed something.
I created a jsfiddle where title attribute seems to "have an effect" (on Chrome, FF29, IE11) on tags: <a>, <img>, <p>, <div>
It depends on HTML version where the title attribute is valid. Originally, it was allowed for links (a elements) only and was meant to help the user see, on mouseover, some information about the linked resource, useful for deciding whether to follow the link or not. This might still be regarded as the most useful way of using title.
Later, the attribute was allowed for most elements, and HTML5 proposes to remove all restrictions, mainly just for simplicity. The formulation about the effects is intentionally vague, since the effects are expected to be browser-dependent, and they often are. For example, speech-based browsers may optionally speak the title attribute value when encountering an element that has it; but this can usually be switched off.
For example, in HTML5, the title attribute is also allowed for a head element, but it normally has no effect there, since that has no content to be rendered (as part of the document).
The title attribute is mostly used to show users information (“tooltip”) on mouseover. This is in many ways problematic, due to the primitive and uncontrollable user interface and other problems. Therefore, people often use other techniques, such as “CSS tooltips”, instead. But for compatibility with past specifications and practices, title attributes are kept as part of the language. It is unlikely that its meaning will be specified more exactly.
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.
Is it valid HTML to have an anchor tag without href and without name? In our app we have some delete links which are disabled (hence no href attribute), but still shown to the user.
I am posting this question on behalf of Joshua Muheim which was asked in the comments of a related question. It is very similar to the original question, but different enough that I felt it was worthwhile to open it as a separate question.
Yes it's valid, the HTML spec says:
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.
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