Javascript Datepicker

Im barrierefreien Kontext sind die meisten der angebotenen Skripte nur eingeschränkt zu gebrauchen, da sie in der Regel lediglich auf mouseEvents reagieren und sowohl Tastaturnutzer als auch blinden Menschen unzugänglich sind. Der Unobtrusive Date-Picker Widget Update von frequency-decoder.com bietet jedoch eine Grundlage für eigene Anpassung. Man kann unterschiedliche Darstellungsweisen wählen.
Die für mich attraktivste Variante, ein sich auf click öffnender Kalender wies sich jedoch als semantisch nicht so korrekt aus, wie ich es mir gewünscht hätte. Der Code für den Kalender wird ans Ende des Dom-Baums anfügt und beliebt damit Screenreadernutzern verschlossen. Modifikationen des Scripts ließen jedoch eine Positionierung an der richtigen Stelle zu.

if(!o.staticPos) {
// changed RD
// i need the button and the div around to insert the table
o.createButton();
//document.getElementsByTagName('body')[0].appendChild(o.div);
document.getElementById('fd-but-'+o.id).parentNode.
insertBefore
(o.div,document.getElementById('fd-but-'+o.id).nextSibling)
//document.getElementById(o.id).
parentNode.insertBefore
(o.div,document.getElementById(o.id).nextSibling)
}

Desweiteren war der Link zum Öffnen des Kalendern lediglich mit einem Title aber ohne einen sinnvollen Linktext selbst ausgestattet. Das Kalender-Image war als Hintergrundbild mittles CSS eingefügt. Screenreadernutzer , die Ihre titles ausgeschaltet haben, war deshalb nicht klar, wohin der Link tatsächlich führt. Auch hier konnte das Script entsprechend angepasst werden.

o.createButton = function() {
if(o.staticPos) { return; };
var but;
if(!document.getElementById("fd-but-" + o.id)) {
var inp = o.getElem();
// RD Add a div-element around the a
block = document.createElement('div');
// block.className = "date-picker-control";
block.id = "date-picker-control-" + o.id;
but = document.createElement('a');
but.href="#";
var span = document.createElement('span');
span.className = (typeof(fdLocale) ==
"object" && options.locale && fdLocale.classes.length > 0) ? fdLocale.classes[0] : "";
span.className = "unsichtbar";
.......

Die meiste Zeit nahm jedoch wie immer der IE 6 in Anspruch. Das Script fügt dort einen IFrame diekt hinter dem Body ein. Um das herauszufinden musste wir erst einmal das hilfreiche Tool DHTML-Spy installieren, das uns auch zur Laufzeit generierten Code im Internet Explorer 6 anzeigt.

Auch hier musste die Positionierung verändert werden, indem wir den entsprechenden Code einfach einige Zeilen weiter unten positionierten.


/*@cc_on
@if(@_jscript_version <= 5.6)
if(!document.getElementById("iePopUpHack")) {
o.iePopUp = document.createElement('iframe');
o.iePopUp.src = "javascript:'‘;”;
o.iePopUp.setAttribute(’className’,'iehack’);
o.iePopUp.scrolling=”no”;
o.iePopUp.frameBorder=”0?;
o.iePopUp.name = o.iePopUp.id = “iePopUpHack”;
document.getElementById(’fd-’+o.id).appendChild(o.iePopUp);
} else {
o.iePopUp = document.getElementById(”iePopUpHack”);
};
@end
@*/
// aus cc_on document.body.appendChild(o.iePopUp);