As mentioned beforehand on A Listing Aside,
Fahrner Picture Alternative (FIR), a way developed to permit designers to make use of image-based typesetting whereas assembly accessibility necessities, solely serves its supposed function when display screen readers misbehave.
Article Continues Under
The premise of FIR is straightforward: set the text-containing picture because the background of an XHTML aspect and conceal the corresponding plain textual content by nesting it in a span and setting the span’s visibility to hidden, or show to none.
Most display screen readers, nevertheless, are intelligent sufficient to comprehend that textual content set to visibility: hidden or show:none shouldn’t be learn.
That’s why Peter-Paul Koch got here up with the thought to make use of JavaScript to switch plain textual content with image-based textual content (on the css-discuss mailing record), and that’s the place the approach defined right here is available in.
There are already many options to the issue, every of them utilizing CSS to
conceal, transfer, or stack the pictures and the textual content. The discussion board entries
associated to Joe Clark’s FIR article suggest a number of.
By utilizing JavaScript, we’ve a possibility none of those options give us:
the markup could be plain vanilla XHTML, without having for any particular IDs or
CSS methods in it.
Non-JavaScript customers will merely see the headlines as they’re, and designers nonetheless have the possibility to type the plain-text variations with CSS.
The one customers whose expertise is negatively affected are these
with JavaScript turned on and pictures turned off. These customers will see the
textual content alternative for the picture. An exception are Mozilla customers — however extra on that later.
Sufficient speak, present us the products#section3
Check out the demo web page and also you’ll see the approach in motion. That is achieved through the use of one script along with an array of picture names.
replaceImages = new Array(
’About us|about.gif’,
’Historical past|historical past.gif’,
’Contact Us|contact.gif’
);operate firdom(){
if(doc.getElementsByTagName && doc.createElement){
for (l=1;l<=6;l++){
h1s=doc.getElementsByTagName(’h’+l);
scanandreplace(h1s,’h’+l);
}
}
}
operate scanandreplace(h1s,tag){
for(i=0;i<h1s.size;i++){
for(f=0;f<replaceImages.size;f++){
chunks=replaceImages[f].cut up(’|’);
thish1=doc.getElementsByTagName(tag);
if(thish1.firstchild.nodevalue==chunks[0]){
newimg=doc.createElement(’img’);
newimg.setattribute(’alt’,chunks[0])
newimg.setattribute(’src’,chunks[1])
// or newimg.src=chunks[1];
}
}
}
}
window.onload=firdom;
The array replaceImages must be outlined both as soon as in an
exterior JavaScript or for every web page individually. It tells the script
which headline to switch with which picture.
The textual content that can be changed and the URL of the alternative picture
are separated with a “|”.
Within the under instance, any headline with the content material “About Us” can be changed with the
picture “about.gif”, any headline with the content material “Historical past” with
”historical past.gif” and so forth.
replaceImages = new Array( ’About us|about.gif’, ’Historical past|historical past.gif’, ’Contact Us|contact.gif’ );
All it’s essential know to make use of the approach is methods to assemble this array. Then you may add the array to your web page, embrace the script by way of its personal script tag, and benefit from the graphical headlines.
If you’re not acquainted with the DOM and also you don’t need to learn about it, skip the following bit and proceed to “The place it fails.”
Underneath the hood — the way it works#section4
So that you need it extra technical, then? Okay, firdom() does the next:
First we test if our browser can ship what we’d like by testing for DOM
capabilities. This prevents outdated browsers from attempting to do what they will’t.
if(doc.getElementsByTagName && doc.createElement){
Then we loop via all potential headline ranges (<H1> to <H6>) and name one other operate, asking that one to seek out and substitute all headlines with the present degree.
for (l=1;l<=6;l++){
h1s=doc.getElementsByTagName(’h’+l);
scanandreplace(h1s,’h’+l);
}
This operate, scanandreplace(), takes every one among these headlines and compares its content material (the nodeValue of its first little one) with the textual content previous the “|” in every aspect of the array replaceImages.
operate scanandreplace(h1s,tag){
for(i=0;i<h1s.size;i++){
for(f=0;f<replaceImages.size;f++)’);
thish1=doc.getElementsByTagName(tag);
if(thish1.firstChild.nodeValue==chunks[0])” within the present aspect of replaceImages.
To take a further accessibility precaution, we set the alt attribute of the brand new picture to the textual content of the headline.
newImg=doc.createElement(’img’);
newImg.setAttribute(’alt’,chunks[0])
newImg.setAttribute(’src’,chunks[1])
All that continues to be to be performed is to switch the unique textual content content material of the
headline (its first little one), with the newly created picture — and voila, we've
graphical headlines.
thish1.replaceChild(newImg,thish1.firstChild)
}
}
The place it fails: Mozilla’s technique of imageless browsing#section5
This system works in each DOM-compliant browser. With out JavaScript, you
will see plain-text headlines (search engines like google and yahoo will even see and index the plain-text variations). With pictures turned off, you will note the alt textual content inside headline components.
That's, except you utilize Mozilla. In the event you go to Mozilla’s internet options, you see an choice that permits you to cease “loading pictures.” In the event you uncheck that checkbox, Mozilla stops loading pictures. Oddly sufficient, it doesn't
present the alt textual content both. This occurs to each picture, and likewise to
our little routine right here. On the time of publication, we don’t know of any workaround.
You possibly can obtain the script right here. Watch its homepage for fixes and modifications. Take pleasure in.