I have a site with a number of written documents that are rendered as images. If I wanted to make them accessible to visually impaired people, it would seem that I would need to add the text somewhere.
Each document is rendered as a series of images, one for each page (see this, for example). Would I want to each page's text into its corresponding image's alt attribute, or is there a better way to do it? And, if the alt attribute is the way to go, can I put the entire document in the image for the first page, or is it best to have the text in each attribute correspond exactly to the image it's in?
I would not use the alt attribute as it is used for short descriptions only.
Making all this text accessible would mean rendering it in HTML. In your document, there are lists, there are tables, there are definition lists ; all this needs to be semantically described via HTML so that it is accessible. You would not be able to do this via the alt attribute.
I think of multiple ways you could make this accessible:
have empty alt on all img and render all the text in HTML below the last image. The text can be visible to all, or only to those with screen readers as you wish (via the use of specific CSS, see the "sr-only" class of Bootstrap for example). If you want the text to be visible to all without taking too much visual space, you could hide it behind a toggle button (with the aria-controls and aria-expanded attributes).
on each img, have a short alt attribute and a longdesc attribute. The alt is the title of current page, like "Table of Contents". The longdesc is a link to an HTML page having all the text on the image.
after each img, have some HTML with the text of the image. This description can be visible to screen readers users only. Link each description via the aria-describedby attribute on the image.
I'd go with the first solution, because it's generally the simplest to deal with, and it benefits all users.
Most screenreader software won’t announce an entire page’s worth of content from an alt attribute, let alone a whole document. They have different cutoff points, but alts are intended to give short (a sentence or two) descriptions of pictures rather than large quantities of paragraphs, headings, tables, etc. You can test with a free screenreader (VoiceOver for Apple devices, or NVDA for Windows) to confirm this for yourself.
A better option would be to extract the text using OCR and put it into HTML or a Word doc that uses templated styles. That way people who can’t see the text can still have it read out plus they’ll be able to use all the usual navigation shortcuts like tables of contents and headings. You can still put any charts or graphs in as images with alts, and the amount of text you’d need to describe those would be much shorter and easier to write.
Related
I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html.
Is their any rule of thumb for this ?
As one of the answers pointed out, you need to make the difference between content and actual page style.
Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.
It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.
So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.
The question is it Content or Styling is a good place to draw the line on images.
Will this image be reused? etc.
Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.
If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.
Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").
I am creating a page in asp.net. I am trying to show some information in tabular format when user hovers on a inout button. To do this, I am setting alt attribute to input type button because it should be javascript independent. I tried creating a table and assigning it to the alt attribute as a text.
<input type="button" value="save" alt="<table><tr><td>some info </td></tr>
<tr><td>some other info </td></tr></table>"/>
But it is not displayed as a table with two ros. Instead it is displayed as a single line.
Is there any way to show it in tabular format?
This is not possible just like this. Alt can be just plain text.
You'll have to use JavaScript. Try to google for it :)
You'll have to:
Create table.
Using CSS, set it's position to absolute, near your control and display: none
On item hover, you have to set display: block.
Best for this kind of behavior is to use some Javascript framework, IE jquery
jquery.com
specially read these:
http://api.jquery.com/hover/
http://api.jquery.com/hide/
http://api.jquery.com/show/
Agreed with Ales, Javascript would make this a breeze. YUI's Tooltip allows you to instantiate a Tooltip associated with an element, or set of elements (changing the Tooltip's context, so in case you have many similar behaviours spread across a screen).
http://developer.yahoo.com/yui/examples/container/index.html
Once you have instantiated the Tooltip, its something like Tooltip.setBody("your HTML code");, though by default Tooltip sucks in title text of an <a> tag as its content, or possibly even alt text of an element - not 100% on the alt text default part though - good chance that if it doesn't do it by default, if you grab the alt attribute contents it will display it correctly inside the Tooltip.
Others have already told you that what you've asked for isn't possible, as HTML attributes must be plain text, not more HTML.
They've also told you that there are Javascript and JQuery libraries which will help you do what you're wanting to do. There are loads of scripts you could use, here's a link to one that you might want to try: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I feel I should add one further point which others have missed, and which is actually quite important:
You're using the wrong attribute.
The alt attribute is not the correct attribute to use for a hover tooltip effect. You should be using the title attribute for this.
Using alt works this way for historic reasons in some browsers (I believe it works in IE, but not much else), but it is not intended as a tooltip. The correct use of alt is for a small bit of descriptive text that will appear if the image is not loaded. This could be because the file failed to load, or the user has images turned off, or the user has a text-to-speech browser, etc, but if the image is displayed, then this text should never be displayed.
The title attribute on the other hand is intended to be displayed, and all browsers implement it as a tooltip (in fact, it's not just on <img> tags; you can use title for any element).
Hope that helps.
What is the benefit to add null alt=""? is it only to pass validation or it has more reason
and how it should be write?
like this, no space
alt=""
or this with one blank space
alt=" "
To get your XHTML validated. The alt is a required attribute on images.
Adding it empty is however a sign of laziness from programmers (although I admit I also do it for images that are not key to site navigation like little decorative elements and so on).
P.S. If you have decorative elements like shadow components, certain ornaments you can add them not with images but as a CSS background, thus avoiding the need to write an alternative text and keeping your markup clean of non-content stuff.
Other answers have pointed out the requirements in the standard. Here is a practical example:
Given blank alt text, lynx will render:
Given a missing alt attribute, lynx will render:
filename.jpg
You don't want your content to have irrelevant filenames scattered throughout.
For images that have no suitable alternate text (i. e. pictures that don't carry any semantics, such as decorative elements), the alt attribute should be empty. Empty meaning empty, not a single space (which is a convention and recommendation but a good one).
The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:
Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
Implementors should consult the section on accessibility for information about how to handle cases of omitted alternate text.
—HTML 4 specification. Section 13.8 How to specify alternate text
I'll add this as an answer as well (originally a comment on another answer), since it kind of makes sense to do so.
Images used for styling the page (and therefore has no real "alt" usage) should be inserted through CSS and background-image and its relatives, not through markup. That way you do two good things at once. You keep your design in your stylesheets, and you keep unsemantic code out of your page.
Although I do think the "semantics is god"-movement has failed to see the fail that is div and span, and the inherent ambiguity they produce, I still think a div with background-image is better than an img tag for styling.
<img src="young-girl-in-red-gown.jpg"
alt="young girl in red gown"
title="Young girl in red gown"/>
Is my above example a good example? Should it be always like this?
In above example I used a file name, alt text and title text that are almost the same.
Is it ok to use same text for alt and title even if it's not a link, or can this repetition can create problems for screen reader? (I'm repeating the text because FireFox doesn't show alt as a tooltip, and the client wants a tooltip.)
Should we use title with image if the image is not in a link?
Should alt and title be different always?
Do screen readers speak all these attributes for images?
Image file name
alt text
title text
Should I always use a descriptive image file name?
I use the Jaws screen reader and having both alt and title set isn't an issue. Jaws reads the alt tag by default if present and ignores the title unless specifically told to read it. I can't say what other screen readers do though.
No idea about screen reader users, but it bugs the heck out of me.
I doubt search engines care.
See:
The Importance of Images On Your Site
ALT vs. TITLE
The alt and title attribute are there for different things, they are not the same, they won't irritate anything, they are made to make things much more clear to both humans as well as search engines.
Using alt tag is good for standard-compliant, validated html and it is also equally respected by search engines.
I dont think that this should cause a problem unless you are stuffing keywords into that to increase keyword density on the pages. otherwise it is alright to have it the way your client wants.
It used to be that alt was how you created mouseover tooltips over images. Luckily, with the advent of title, this is not really needed.
If you wish to provide such a tooltip today, over either a text link or an image, title is the thing to use.
alt is what you use to make your images "visible" as text to browser technology that doesn't actually support images (such as screen readers, or text-based browsers). Thus, it doesn't have any meaning in the context of text links - since text in those is already, well, text.
Search engines' algorithms are a bit of mystery. If I had to guess, I would say that for web searches, there is so much signals available through text links, that there is no need to rely on titles and alts. Image search may be a different story. It's much harder to get information about what's contained in a picture and correlate it to textual keywords. Therefore, these attributes may be given more weight in that context.
For example:
<img alt="Facebook logo" src="http://facebook.com/images/facebook-logo.gif" title="Link to home page"/>
Which has more importance for Search engine, Alt text or image file name or title or all?
In general, the three most important things for image SEO are:
Image filename. Make it descriptive, i.e. "TabbyCat.jpg" or "tabby-cat.jpg" rather than "DSC0001.jpg".
Alt text. This should generally describe the image in a short phrase or sentence, e.g. "a picture of my cat, Tabby." Think of it like you were telling someone who can't see the image.
Text surrounding the image. This seems to be pretty important. The text that's close to the image would generally reference it in some way (e.g. in the same paragraph, or a caption under the image).
The title text is generally only important for links - it shows a tooltip to users when they hover the mouse over it. For images, you would rarely need that since it's either obvious what the image is or the text around it describes it fine. However sometimes you may want a little more info for users that attempt to look for it (various web comics put a little joke or addendum in the title text).
Finally, remember this: do what's best for users, not search engines.
Might be of interests: http://www.seroundtable.com/archives/007366.html.
Also there are tons of google results relevant.
In my experience, I would say both are important, and I tend to use CamelCase to name images.