I understand that for a website to be "accessible", images should in general have the alt tag. The alt tag should provide alternate text for the image, in particular when the image contains content that is relevant for the user.
When one uses the alt tag like :<img alt= "alttext" ...> the alttext does not display when the mouse hovers over the image. If one adds the title tag, then one can have the alttext displayed.
My question is: Is the use of the title tag appropriate for this?
I have found a bit of conflicting information on this:
This site seems to discourage the use.
This site seems to say that the use is fine.
alt attribute is displayed when the image cannot be loaded, and used for accesibility when that feature is set in the browser. It also helps for Search Engine Positioning (SEO) (thanks #Chris for noting this)
alt HTML reference
title is just Advisory information and it's disadvantaged for accesibility purposes. Source: W3.org
title HTML reference
For example, this is an extension for chrome (offered by google) that show alt text, not title..
If your aim is to have some text appear when you hover over an image, then yes, the title attribute is appropriate. Ensure that any key information in the title text is duplicated elsewhere on the page.
If your aim is to provide additional information about the image to all your readers, then you will need to consider an alternative way for keyboard and touch based users to read that content. It may be simpler just to display the content next to the image for all users.
Unless your image is focusable, relying on a tooltip is not a solution.
Having to use the mouse to discover the subject of an image is not accessible to keyboard only users.
What you need to do is :
providing an alt text for screenreader users (people who can't see it)
provide contextual description next to the image if you need to give all of your visitors more elements (like copyright owner, artwork title, ...).
Note that you have to set an alt text, it still can be empty if the alternative is not relevant (decorative images, or redundant information).
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.
If I have a link (anchor) in the header that just contains an image, like this:
<a href="index.html" title="Home">
<img src="http://placehold.it/200x50" alt="Site Name">
</a>
Is this accessible? The alt attribute appears to be overridden by the title attribute. I know that title is not usually necessary, but because nothing is describing the link except the alt text (which only has the Site Name because the image is a site logo in this case), the title is supposed to say that the link goes back home. I can't add any text because I don't want to hide it with CSS; that would not fit with progressive enhancement.
Where should the link description go in this case? Alt or title? What's the best practice?
Titles of surrounding links don't override alts on images. Both will be announced by screenreader software unless the user has chosen to suppress titles in the settings (if you've ever listened to a Wordpress site you'll understand how too many can be annoying).
Best practice is to leave out the title and rely on the alt as the link content for cases where the image is not seen or not loaded. You can see an example here: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140408/H30 in the techniques for 2.4.4 Link purpose (in context).
Visually-hidden text can work well with progressive enhancement. It shouldn't be used as a catch-all for poorly designed widgets, but it can help provide context for non-sighted users. I use it more for indicating the current page in a menu when there are no graphics but just colours, that sort of thing.
There is nothing unaccessible about the way you have it. You provided both a description of the link and the image. As for what goes where, the link description should go in the title while the image description should go in the alt. titles aren't as common or necessary, but alts are important for both SEO and accessibility (screen readers and in case the image doesn't load).
It has been my understanding up to this point that the alt attribute is required, and should not be left blank. This seems to be confirmed in existing questions, such as this one.
However, in reading the HTML spec today, I noticed the following:
A single image can have different appropriate alternative text
depending on the context.
In each of the following cases, the same image is used, yet the alt
text is different each time. The image is the coat of arms of the
Carouge municipality in the canton Geneva in Switzerland.
Here it is used as a supplementary icon:
<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
It goes on to show other examples with various alt text, but this in this (and a couple other examples) the alt text is missing.
The spec later says (emphasis mine):
Except where otherwise specified, the alt attribute must be specified
and its value must not be empty; the value must be an appropriate
replacement for the image.
Is it ok to use alt=""? If so, when is this an acceptable use? If the image does not need alt text, should it be a CSS background image?
Note: This is based on the WHATWG HTML Living Standard, not the W3C HTML5 specification.
When to leave the alt attribute empty
Typically, the alt attribute is required; however, there are several cases in which the HTML spec says it is OK to leave the alt attribute's contents empty. The alt attribute is the text equivalent of the image, which means that it should only be empty if the meaning of the image is already encapsulated by the surrounding text.
Graphical representation of surrounding text (link)
It is important to think about the alt text as what content the image should be conveying in the case that it is unavailable. If the image can be summarized by text surrounding it, then it should have an empty alt attribute, because the redundancy would not be beneficial.
Examples include flowcharts or graphs that repeat the surrounding text.
If a caption is to be used, that caption should be included as a title element or using <figcaption>. The alt should be used if the graph can be described by information not available elsewhere on the page. The spec says the following on why this repetition should be avoided:
Including the caption in the alternative text like this isn't useful because it effectively duplicates the caption for users who don't have images, taunting them twice yet not helping them any more than if they had only read or heard the caption once.
Decorative images (link)
Generally, the spec recommends that the CSS background-image be used for this, but clarifies that in certain cases this may be done through the markup, such as a painting next to a poem, or a photo of the landscape at an event. In these cases, the images are content, but that content is only relevant if the user is able to see the images.
Groups of images that form a larger picture (link)
With no links
Only one image should have alt text to avoid repetitive text to users who can't see the images.
With links
The spec recommends that an image map be used for this instead, but if the image is sliced, there must be one image with alt text per link.
When to omit the alt attribute entirely
In some cases, the alternate text cannot be known or is unnecessary, and in these cases, alt="" is inaccurate, because it implies that the image does not add anything. The HTML spec warns:
If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.
However, it acknowledges a couple of cases in which the alt may be omitted.
Unknown alt (link)
In certain cases, such as a blind user's blog or a photo sharing website where the metadata does not contain helpful information, the alt may be unknown.
In these cases, using the title attribute or a <figcaption> is required. Though it may be unknown the exact details of the image, some explanatory text should still be included. In this case, <figcaption> is preferred because
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification.
Known recipient(s) who can view images (link)
If you are writing a document that will only be viewed by a few known recipients, all of whom are known to be able to see images, the alt attribute may be omitted. It is recommended that the alt be included anyway, in case the email or document is forwarded.
Appendix: What about CSS background images?
If the image is not content, it should probably be a background image. For a breakdown of the rationale behind <img> vs. background-image, check out When to use IMG vs. CSS background-image?
For a WCAG 2.0 compliant website need to have alt tags for the images.
When it comes to something like a company logo. Should the alt tag just be the name of the company, or the name of the company followed by "Logo" I think the former makes more sense but if there is a definitive best practice I would like to know!
Exciting question eh?
The best guideline is, if the image wasn't available - what would you want to see instead?
The alt text shouldn't be a description of the image, it's a textual alternative to the image.
Is the logo of value to users of screen-readers? If not--then consider displaying the image via CSS rather than an <img> tag--CSS (presentational) images do not need to have alt tags (they actually can't have them), they are understood to be a visual-portion of the page rather than the actual content of the page.
implies that the image is valuable content related to the page--so if the logo is essentially eye-candy, of presentational value only, then it may not belong in HTML at all.
Just remember: screen-readers allow users to access the content. HTML is for content, CSS for presentation--if your HTML is muddied with non-content then providing a good, accessible, experience becomes much more difficult.
I think it's up to your personal preference. You want to convey the meaning of the image, not exactly what it is. for example, i would use alt text like 'next page' instead of 'right arrow'. So I would go with the company title, as that's the point of the logo.
I would go for "Logo of (Companyname)" because the ALT text serves as a description of the image that gets served if the user can't see it (e.g. for screen readers).
I think the WCAG 2.0 guidelines are supporting this:
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
Well, whatever makes the flow of the text of the page most understandably. IF the logo is right next to the company name as text, then neither "Big Company Big Company" nor "Big Company Logo Big Company" is really best when spoken by a screen reader.
The requirement for alt tags is mostly for images as buttons:
<img src="next.png" alt="next page" />
or other places where the image conveys real information, like graphs and charts.
Places where the image is merely decorative, a blank alt tag might be best.
Imaging an "About the company" web page, with all images with alt tags, being read aloud by a screen read. (Actaul text from exxonmobil.com: "About us- two workers on the Kizomba platform in Angola - We are the world's largest publicly traded international oil and gas company") Dragging the irrelevant detail from the image here lowers readability instead of raising it.
I wish I could point to an authoritative source, but having dealt with accessibility in a former life, I believe "logo" is preferred as it more accurately denotes the entity. For example alt="Photograph of Mount Hood" is quite different than alt="Mount Hood" and the former is much preferred.
While I do very much like #Gareth's answer, there is another thing to consider:
What is the parent element of the logo? If it is marked up like so: <img src="/company-logo.png" alt="" />, then the best alt would actually be along the lines of "[Company] Home Page" or "Go to [Company] home page". A disabled user with a screenreader would then hear "[Company] Home Page, link", or possibly, "[Company] Home Page, visited link".
Any time you are using an image as the link content, then the alt should tell the user where they go when that link is clicked. Same with buttons. If you use an image as button content, then the alt should tell the user what happens when the button is clicked.
Just as an aside: if clicking takes the user to another page or another part of the page, but requires no further interaction, the clicked element is almost always semantically a link. If clicking performs an action apart from navigation, shows additional options or content, or requires further interaction from the user after clicking (opens a dialog that must then be closed), then the clicked element is almost always semantically a button. Whenever possible, use the proper semantic element and style it with CSS. This will make your content accessible to the broadest range of assistive technologies.
How to write good alt text for images to help screen reader and blind user to understand what is picture about ? and if we are using Alt text then what should be in a Title="text" if we are using both in special cases like menu images etc
I'm a screen reader user and will use Stack Overflow as an example of both the good and bad.
Alt tags should be brief and descriptive. For example, Stack Overflow's alt tags for the vote up and vote down options are nice since they don't take long to read and get to the point quickly. Examples of bad alt tags are the make this question a favorite and accept this answer. Neither of the tags are descriptive, the favorite tag is just "*" and the accept the answer tag is "check" The only way for me to tell what they are is to read the source or have someone sighted let me know what they are for.
As far as title attributes go I don't really have much advice. My screen reader doesn't read them by default so I don't normally use them. An example of something that could be useful is additional information. For example the reason my accepted answer rate is so low is because I have no way of telling whether I have accepted an answer on a question. It would be nice if the title attribute on the accept this answer graphic would say something like "click to accept this answer" if the answer wasn't accepted and "Click to remove this answer as the accepted answer" if it is the accepted answer.
You should not make the visually impaired user understand what the image is all about. For the blind, the image effectively doesn't exist, all that there is is the text.
The alt text should work as a single sentence/paragraph that can be replaced for the image, convey the same content and still make sense in the context of the adjacent content.
If the image is something that is part of the GUI, then the alt text should convey an action (a verb), line upvote, answer this or log out.
You should visit your site with links and try to understand your site. If there is for example a pie chart, its alt text should be a small summary of the percentages. If you just have a pretty flower next to a blog post, don't give it an innane alt text like flower image companion of blogpost #324 or even worse flower.jpg.
If the image is important to the navigation or to get information, try to give it an alt text that makes the site work without the image. If the image is only presentational, give it an empty alt text.
title, as far as I know, should only displayed when hovered, so they should give extra information to the image, so useless duplication of information should be avoided. For screen readers, this is a bit trickier, as support and configuration can be very different between users.
Some empirical data shows title as useless:
Most users of screen reading software do not change their default settings to access the TITLE attribute information on links.
Most screen reading software can access TITLE attribute content on form controls by default.
Some screen reading software cannot access TITLE attribute information.
Users of screen magnifiers can read TITLE attribute text at lower magnification levels.
Users of screen magnifiers cannot read TITLE attribute text, that contains more than 1 or 2 words, at higher magnification levels.
Here's good piece of advice, better put than I could
Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.
One good use of the title attribute is to add descriptive text to links, especially if the link text itself doesn’t clearly describe the link’s destination. This way you can help visitors know where the link will take them, possible saving them from loading a page only to find out it wasn’t anything they’re interested in. Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.
Remember that the longdesc attribute is supposed to be a link to further information, not text as some people missuse it.
I think the best practise is to put same content in alt and title attributes.
Regarding 'what to write' - just simple, in few words what is on the picture.
Check this article where alt attributes are described pretty well: http://www.cs.tut.fi/~jkorpela/html/alt.html