When working on the butterfly lightbox I needed a way to grab the text with a link including the alt text from any images within.
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.