I'm using prettyphoto for the first time, very nice tool. I would like to know if more people have this problem. Its not crucial but I hate to not do things because I dont understand them. This is the code:
<div class="single_left">
<img src="_img/examples/thumb-1_50.jpg" alt="WHATEVER INFO" />
</div>
It works perfectly. But I have a doubt. If you look all the code you will see that its quite simpel. Its a div in which inside there is a <a> and inside there is a <img> thats acts as a thumbnail. As any for any <img> you need to add an alt="" atribute. The idea of this atribute is that if somebody has slow internet or if the image fails to load, a small description would be displayed in a text format, this will be the content of alt="". In this case "WHATEVER INFO" (Check code above). So if the image is displayed this alternative text shoud NOT be displayed.
ok... clear
The issue is that with prettyphoto if the picture is zoomed from a click you can see the alt="" text on top of the frame of prettyphoto. So in this case WHATEVER INFO would be displayed. This is not its purpose and of course breaks any design plan.
Does anybody know why this happens??
Is there a way of solving this so I can put some alternative text??
According to this link, add this CSS code to css/custom.css to do what you want:
div.ppt, .pp_description {
display: none !important;
}
I can let you know that the answer to my question os exactly like this:
div.ppt {
display: none !important;
}
This will make the alt value not displayed.
What I don;t know is if the picture is not loaded if the alt will work as such... At least you know how to take it out.
Greetings!!
Related
I have a background image in my header area of my site. It's done as a background image for responsive design purposes. I would like however for screen readers to be able to read some information about that area (company info).
I have placed a spacer.gif (ya know...what we used to use in the old days of tabular layouts :) ) in that container and added alt text to it so screen readers will still be able to provide good accessibility.
I haven't found anything that says this is "ok" so I'm wondering about good practice or not. That being said, I also haven't found anything that says it's not good practice "not ok".
Can anyone shed some light here?
TIA
EDIT: I ended up using my own suggestion as I didn't get any feedback to tell me it was a bad idea. I will mark isherwood's answer as the answer because it is certainly a viable alternative.
here's what I did:
<div id="headerImage">
<img src="~/Content/images/spacer.gif" alt="Widgets For Sale Here At This Widget Store" />
</div>
where #headerImage contains the CSS to place my banner image as a background image.
That's probably a valid option, but it adds markup and the need to deal with another image file.
I would use an offscreen text element at the start of the element having the background image:
.offscreen {position: absolute; left: -999em;}
<div class="header-with-css-background">
<span class="offscreen">Information about the image here</span>
Other header content
</div>
You'll probably find that having such a class available proves helpful in a number of situations, such as when a form should have a label but you don't want to show it to sighted users because you have placeholder text on the input.
If you want screen readers to glean info about your company, add that to the alt tag for the background image.
According to the W3.org page, if an image is the only content of a link or form control, " Use the alt attribute communicate the destination of the link or action taken."
Follow this link to more complete discussion of best practices for use of alt tag in web pages, at w3.org
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
I'm sure I'm going to smack myself when someone points out what I'm doing wrong, but I cannot for the life of me figure out why I can't get an alternate text to appear when an image does not load.
I have the following code with obviously the wrong path to an image (to simulate the image not loading for some reason):
<form>
<input type="image" src="image/not.here" alt="Search"/>
</form>
However, I don't get a button with the text "Search" on it which is what I would expect.
Can I accomplish this?
Thanks!
jsfiddle: http://jsfiddle.net/kralco626/hd4Dy/4/
If you're using Google Chrome/Safari, the browser don't display the "Search" if it is longer than the img width.
There's nothing wrong with your code. Try add style="width: 700px; height: 400px" on your second input tag just to see that the text is there.
Further information:
http://blog.paciellogroup.com/2010/01/alt-and-title-content-display-in-popular-browsers/
PS: I.E. is showing the "Search" text.
You're missing a =:
value="Find"
Also, it depends on the browser. Some show the alt text in case the image is not available others don't; so it's not an error per se. Browsers for the visual impaired, for example, always show it.
I know that I can do the following if I want to turn an image into a click-able link:
<img src="icons/twitter.png" />
But I would prefer to use a CSS background image so that I can have a hover state:
<a class="twitter" href="http://twitter.com/username"></a>
# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}
This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same.
I realise I could just put some text inside the link, and hide it with text-indent: -9999px, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?
It's valid, but it's best if you did put something in there and used something like
font-size: 0;
to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.
Here's a great article on the subject
It is not OK at all, since it breaks fundamental accessibility principles. There is no way to specify alternative text for a background image, the same way you can and should specify it using an alt attribute in an img tag for a content image. See WCAG 2.0 Guideline 1.1.
If you wish to change an image on mouseover, there are CSS and JavaScript techniques for that.
It is perfectly valid, but if you want, you can put a blank space inside:
Use as the text, and you are good.
Over at Markup.tips we recently did some accessibility testing in iOS 8 and discovered that VoiceOver will not navigation to empty links. There must at least be a non-breaking space. Whether this should be considered an iOS bug or not we are not sure.
I have a large div with the site header/logo as the background image. Is there anything wrong with putting a h2 tag containing the site title behind this using z-index, so that it would show if the user couldn't/didn't get the image for some reason? I know this is different to a standard [background on the h2 element] image replacement. (EDIT: Sorry maybe i'm not making it clear - i'm using a div background image not an IMG tag)
You should use the alt attribute of the img tag, so if the image isn't loaded for some reason, the text would appear.
This is exactly why the alt attr exists,.
If possible, I would ditch the div and just use an h2 with an id and set a background image to that.
I do that whenever possible to avoid excessive divs when I could use other block-level elements, if it only has a background and text. An h* with a background image is still a heading.
You can simple place img tag with alt attribute. That way if image is not loaded, text will be displayed.
<img src="" alt="This text will be displayed" />
Google doesn't like what you describe:
http://www.google.com/support/webmasters/bin/answer.py?answer=66353
However, from a pure design perspective, there is no real problem, save some bloated code.
You might want to see how often your images fail before you attempt any changes.
That's fine. Note that many feel the site logo isn't really something you'd put into an h* tag other than on the home page, when it makes sense to put it in an h1 tag.