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).
Related
Is the following HTML accessible?
<a id="myClickbaitArticlePreview" href="someUrl">
<h3>Amazing lifehack! Doctors hate him!</h3>
<img alt="doctor is staring down a patient" src="procativeThumbnail">
<p>Compelling copy</p>
</a>
I know it's valid based on this answer. But is it accessible? Cause I am auditing a website with a similar article structure using a screen reader (JAWS). The reader reads everything in a single breath which is confusing (but I am not blind so I don't know if you get used to it). It also reads the alt right after the title, which in many cases may repeat the content.
Short Answer
It is both valid and "accessible" in the loosest sense of the term, a good experience for screen reader users - probably not.
It would pass all WCAG guidance, let's put it that way.
Longer Answer
Without seeing it in the context of the page though it is hard to tell you whether this is the best practice. A few things to consider:-
Is there sufficient white space around these large "link cards" for people with mobility / accuracy / dexterity issues to safely place their finger to scroll the page on a mobile device.
If the link card is focused is the focus indicator easy to see and sufficient contrast etc. (standard thing to check for but often forgotten on card type links)
If a screen reader user cycles the page via headings is it logical to have a <h3> in the card, both in terms of heading hierarchy and in terms of page hierarchy.
Are the alt descriptions correct in their context, if the image is not directly related they may be better being hidden from screen reader users with aria-hidden or an empty (not null) alt attribute (alt="" NOT alt). I would almost certainly say this will be the case but yet again that is your judgement.
alt being the same as the <h3> title - this is almost certainly a big no no. alt attributes should describe the image in context. If the alt text is the same as the title then make the image presentational / hidden from screen readers as discussed in the previous point.
Should these be <article> elements to be semantically correct?
Are they contained in an <ul> so that a screen reader user knows how many items there are?
would an aria-label on the hyperlink with a condensed version of the text be appropriate (to override the text inside the hyperlink)? It depends on the content so use best judgement.
Would a hyperlink styled to look like a button at the end of each article be better? If so make sure it doesn't just say "read more" (although at a push you could have "read more" as the button text and have some visually hidden text that says "Amazing lifehack! Doctors hate him!" before it).
As you can tell, without seeing them in context there is lot's of things we cannot tell you but hopefully the above should give you a few things to think about.
As for the screen reader reading everything in a single breath, that is expected behaviour, you just need to get used to it! You could always slow the speech rate in the settings or increase the announcer verbosity (so it has more detail about what element you are in relative to other elements) while you get used to it.
According to HTML standards, the a element has a transparent content model with the sole exception that it can't contain interactive elements.
An heading is not an interactive element. So that's good according to the standards.
Regarding accessibility the text link is not optimized.
WCAG in 2.4.4: Link Purpose (In Context) expect a "meaningful link". Having too much information is not a good practice. A better alternative would be to provide a javascript click handler on a <div> while only having the HTML link element on the h3 here.
In your example "doctor is staring down a patient" does not describe the link destination and should not be part of the link text alternative.
I'm implementing Jssor's Bootstrap Carousel Slider on a web page. Using W3C's validation tool I'm getting an error for the lack of alt text for this particular image:
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="/svg/loading/static-svg/spin.svg" />
</div>
The image is just a spinning disk used to represent the Jssor slider loading. I'm curious as to whether I should be using alt text on this image or not. So far my research points to just including a blank alt="" attribute; is there an authoritative reference for whether this should be included and left blank, or if it should be avoided if I don't have any alt text?
Based on the W3C's Web Accessibility Initiative (WAI) recommendations, an empty alt="" attribute should be used so it can be ignored by the screen readers.
Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.
Source: https://www.w3.org/WAI/tutorials/images/decorative/
I generally don't like the idea of an empty alt attribute when I could put something meaningful. In particular when a form that might take a while is submitted, I show the spinner to indicate that the user has pressed the right button and something is going to happen - but for now they should wait while it is processing.
So my plan is to make alt="Processing..." and making that a translatable string in my application.
Any comments would be welcome.
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).
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