For accessibility purposes when linking an image associated with a few brief words of text, is it better to put links on them separately or together?
Together:
<img src="">Go to this page
Separately:
<img src="">Go to this page
(Assuming we put other accessibility arguments aside - like alt attributes, etc.)
Combine them into a single link. Whether you put an alt attribute on the image that is non-empty, depends on whether the image is already described by the text or not.
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H2
Related
In a website directory, every business has a slideshow with several images. If I don't know what kind of picture is in each case, what should be the best way to handle the alt attribute for each image/link?
Example (edited)
<ul class="slideshow">
<li>
</li>
<li>
</li>
</ul>
alt="Slideshow image 1 of Business X", etc.
Since you do not know what the images are, this would be a valid option. It tells someone who is using a screen reader, or for whatever reason cannot see the image (it doesn't load), that the image is part of a slideshow. It also tells which image it is and what business it relates to.
For extra credit, you could use an API such as the Cloud Vision API that can analyze the content of an image and return a short phrase that describes it.
The a element can’t have an alt attribute.
Assuming that you use img:
If the images in the slideshow are only decoration, you have to use empty alt values.
If the link goes to a page (instead of the image), the alt value has to describe the purpose of the link, not the image. So for example, if a slide shows a product image and is linked to the product page, the alt value could be the product name.
If the link goes to the image (e.g., in a higher resolution) or if the slide is not linked, the alt value has to describe the image.
Exception: If you automatically generate the markup and have no way of adding a suitable alt value, you can use the attribute generator-unable-to-provide-required-alt (with an empty value) instead of alt. It’s non-conforming, but validators may ignore the error, and it’s in any case better than providing an unsuitable alt value.
I'm trying to make my website fully accessible for devices like screen readers. In one page on my site, I have a screenshot of an application showing a lot of text. For reference, here's my image:
On my page, I'm expecting the user to have read/skimmed the text in this image, so I need screen readers to essentially be able to read all the text in this image. However, there's far too much information to fit in the <img>'s alt attribute -- I wouldn't be able to preserve the structure of the text as it appears in the screenshot.
I'm willing to transcribe the entire image, of course, but I don't know quite how to format the transcription. Is there some way I can use aria-label or one of the other ARIA attributes on the <img> tag, or should I just include the transcription separately in an invisible block? Would it be best to recreate the image in plain text using a <pre> tag, or to create it with semantic HTML? Or is there some other approach entirely that I should be taking?
Be aware that you must provide both a short text alternative and a long text alternative
Your concern is covered within 1.1.1 Non-text Content of the WCAG:
Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):
G95: Providing short text alternatives that provide a brief description of the non-text content using one of the following Short text alternative techniques for Situation B AND one of the following Long text alternative techniques for Situation B :
[...]
Like longdesc, descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML.
After setting the label (=short description) of the image using the alt attribute for instance, you can set its description by using the aria-describedby attribute, using the following technique:
ARIA15: Using aria-describedby to provide descriptions of images
<img src="screenshot.jpg"
alt="Screenshot of my application"
aria-describedby="long-alternative" />
<div id="long-alternative">insert your full text here</div>
Please see the following technique to meet WCAG 2.0 success criteria 1.3.1 (Info and Relationships) and 3.3.2 (Labels and Instructions):
https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html
Basically you set aria-describedby attribute on your image, pointing to an element with the corresponding id and the desired information, as in:
<img src="image.png" aria-describedby="description" />
<div id="description">
My description.
</div>
The div can have visibility hidden or display none to hide it from users not requiring accessibility assistance.
I would think that you would give the image tag's css a mediatype of screen, and then create a div or something with the text inside, that had a media type of speech.
Let's say I have an image like the one below.
According to WCAG, this image is functional because it links the user to another page. It seems like I should put the destination of the link in the alt attribute like alt="comic homepage".
Wouldn't someone with a vision impairment also like to know what the image is showing? Would that user appreciate something like alt="comic that links to the cloudtweaks homepage"? The comic doesn't seem to be purely decorative.
<a href="http:////cloudtweaks.com">
<img src="comic.png" alt=??? />
</a>
This page does something similar (scroll near the bottom of the page).
You have asked this question but not provided enough context. Seeing the surrounding content, the entire page, or the entire site would help.
Is there surrounding text that explains either the image or where the link goes?
Will the image appear on the page after the link, perhaps a more full version of the image (as in, all the panels if this image is one of many)?
Does the site behave similarly to another site or section of this site with which you have confidence users are familiar?
A screen reader is going to announce that it is a link, that it is an image, and then it will announce the image alt text. If you do not feel it necessary to provide some text outside of the image to show users, then you probably do not need to try to force it into the alt text nor into a title attribute (also, do not use a title attribute).
Basically you want to give sighted and non-sighted and low-sighted users the same experience. If you feel it necessary to manage expectations on where the link goes by using the alt then you should just provide it around the link or before the collection of links. Then it helps all users. If you do not think you need to manage the user's expectations, then do not force it on the non-sighted users by jamming extra text down their screen readers.
This situation is documented on the WC3 Website: Image used alone as a linked logo
The WCAG says that you should not describe the image text in this situation but the link function.
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
If you think that the text within the image should be described to screen readers users, you have to change the structure of your HTML, excluding the image from the link, for instance.
Comics
Image of the day:
<img src="..." alt="If the clouds ever did go down would it be called fog?" />
or adding the description after (note that using aria-describedby the description might be hidden)
<img src="..." alt="Comics" />
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div>
But this may be quite perturbing, I would say...
If I have the choice to insert images directly into the html or in the css, say for example a link wrapped in an image I could do either...
<img src="#" alt="" width="" height="" />
Or I could do...
<a id="img" href="#"></a>
#img {background: url('#') no-repeat; height: #; width: #;}
Which is better and why? Both work as wanted but is there any difference to load times etc, or any considered better practice?
Using images in HTML is better when the image has any contextual meaning... if it is a decorative picture without any contextual meaning, then use CSS. CSS is for presentation, HTML is for content.
The best hint for you to determine whether to use HTML or CSS for a picture is:
If I remove the picture, will the web-page content still make sense?
An image in HTML is meant to provide a visual meaning in context, with a meaningful text fall-back. Using an A element without any content should be avoided since its content will have a relationship with the link, for browsers and web-crawlers (such a Google bot).
Use CSS images only for decorative purposes. Otherwise it can damage your search engine rankings. Always provide an alt attribute for images, determine what will it be imagining that an eventual visitor cannot see any images.
If the image has context, such as a logo, or a photo, I would suggest loading it as an <img> Make sure you are providing alt text for accessibility and SEO reasons as well.
If an image has no context in the scope of the page, then I think the correct place for it, is defined the in the CSS which controls the design.
The whole idea is to separate your presentation from your content as much as you can. An Image can be content, and if so, should be in it.
Generally, I try to put as many images in CSS as possible but Doozer and Mario have good points. If the image is important to the context, it can go in the HTML. I will also use <img> tags when text needs to float around and image.
One thing that CSS can do that <img> can't are CSS image sprites. This is the only real performance benefit that you'll get from one or the other. Performance-hungry websites like youtube.com will combine many images into one large composite image in order to cut down on the HTTP traffic (and therefore the page load times). For example, this is a sprite taken from youtube.com.
Follow principles of semantic HTML. If the image is content, ie a thumbnail, photo, or button, use an <img> element. If it is more a part of the page design, a background image may be more appropriate.
A more specific example: If you are using your image as an icon next to a text link, use a background-image:
<span class="printIcon" onclick="window.print()">Print</a>
.printIcon { background: url(...) no-repeat; padding-left: 20px }
If your image is the button itself, with no text aspect, use an <img> element with an appropriate alt attribute that would work to substitue for the image if it is unavailable.
<img src="printButton.png" alt="Print" onclick="window.print()" />
so far i was doing it like this:
<img src="image.png" alt="Keyword" />
Now, i discovered that images can have title attribute too:
<img src="image.png" alt="Keyword" title="Keyword"/>
Is there any other optimization i could pull off to boost image links value?
I think that's the best you can do really, someone told me to try and make image names as descriptive as possible, for instance:
image_001.jpg --> honda_accord_2009.jpg
Granted image.png is just an example, but it might apply.
That's all I could think of.
Think of the alt attribute as an alternative text replacement for the image. Imagine for a moment that you had to describe the image to someone who could not see it. That is the sort of information you should be conveying in the alt attribute.
Similar to the alt attribute, title is used for the same purpose. It helps to convey extra information about an element. You can apply the title attribute to most elements but you must give all your images an alt attribute.
In my opinion, having both an alt and a title on an image is redundant, especially if they are conveying the same information.
I would have to say yes, the title tag would add value to your SEO. Check this link for full details - http://www.seocentral.com/tutorials/alt-title-attributes.html
Don't over-optimize your links and/or images.
As other users pointed out every image should contain an alt-attribute.
On decorative images the alt tag should be places but it should be empty since it doesn't convey any information.
The alt tag should describe the meaning of the image within the current context. Imagine trying to explain the image to a blind person. If you can't come up with a good way to explain why the image is relevant there the alt tag should be empty (if the image should be placed there at all)
Check out this article for more information on that:
http://www.userfocus.co.uk/articles/alt_text.html
The title tag creates this little popup when you hover over the link or image for about a second. This should be used to give the describe the image and might be a better place to put a keyword.
What you also missed in the question is the filename. If the image is relevant to the topic of the page you could use keyword.jpg or something.
This would also help it in image search engines.