I couldn’t find any existing approaches, so I put together this small plugin to do the job. I thought I should post it here before I forget, or in case anyone else might find it useful too.

Example

If you had the following html:

<a id="smiley" href="">The symbol for happiness is <img src="smiley.png" alt="a smiley face" /></a>

You could grab the accessible text using the jQuery plugin like this:

$('#smiley').accessibleText();

Which would return the text ‘The symbol for happiness is a smiley face‘.

Plugin code

/**
 * jQuery plugin that returns the text nodes within the target element, combined/concatenated
 * with any alt text or input values.
 */
$.fn.accessibleText = function() {
	if (this.is('img')) {
		return this.attr( 'alt' );
	} else if (this.is('input')) {
		return this.attr( 'value' );
	} else {
		return $.map( this.contents(), function( domElement ) {
			if ( domElement.nodeType === 3 ) {
				return domElement.data;
			} else if ( domElement.nodeType === 1 ) {
				var $element = $( domElement );
				if ( $element.is( 'img, imput' ) || $element.find( 'img[alt], input[value]' ).length > 0 ) {
					return $element.accessibleText();
				} else {
					return $element.text();
				}
			}
		}).join( '' );
	}
};

Let me know if you found this useful, or if you know of a better solution!

Edit: Much improved version above, thanks to Ben!
Edit again: I have updated it again to support input elements, and support using the plugin on inputs and imgs directly (this should really go on github).
Final edit: Here it is, accessibleText on github.

The biggest new feature is the addition of support for galleries. Specify a gallery using either a container element to wrap the related links, or by using the same rel attribute on related links allows a series of lightbox links to work together, with ‘next’ and ‘previous’ controls presented beside the lightbox content to allow navigation between each gallery item.

Try it out here:

See full examples, downloads and changelog for more detail.

I created an SO account with the explicit purpose of voting this comment upwards, but unfortunately, I have no reputation on SO, and am not able to do this (yet).

For lack of a better way to credit JKS for his insightful solution I thought I’d recognise it here.

Problem

In webkit browsers (e.g: Chrome or Safari) the onload event fires for both cached and non-cached images, but images loading from cache seem to return dimensions of 0—for both width and height.

Solution

JKS proposes a simple solution, a seemingly redundant setTimeout before taking your measurements seems to magically restore cached image dimensions. In jQuery, that would look like this:

$('img').load(function(){
    setTimeout(function(){
        // do something based on $('img').width and/or $('img').height
    }, 0);
});

Thanks

Thanks again to JKS for the tip!

uncaught exception: Syntax error, unrecognized expression: #

I’m sure this has caught me out a number of times. Each time is far enough apart that I have forgotten how I debugged the issue previously. And each time I search the interwebs in vain. No one seems to have clearly explained what causes this exception!

Next time I encounter this problem, hopefully I remember—or find—this post, solution follows…

Solution

This exception is thrown by jQuery when you ask it to resolve the selector '#' without an id following. In my case it is often caused by my plugin code assuming an element has an id. If the element doesn’t have an id, the exception is thrown, for example:

...
var storedID = $(this).attr('id');
...
$('#'+storedID).doSomething();
...

When this doesn’t have an id, I’ve essentially asked jQuery to resolve the following:

...
$('#').doSomething();
...

Which jQuery doesn’t like to do, hence the exception.

HTH

BTW the compact content plugins have been updated with a bunch of small fixes (IE6 benefits the most from this release). See new examples, downloads and changelog for version 3.5.