da eine Box zum Aufklappen – dort auch eine – JS benutzerfreundlich für Mensch und Maschine

da eine Box zum Aufklappen – dort auch eine – JS benutzerfreundlich für Mensch und Maschine – nützliche Ressourcen

JS hat den Ruf benutzerunfreundlich und nicht barrierefrei zu sein. Das kann sein, aber muss nicht sein. JS Java Scripts und die usability, accessibility.

Viele Internetuser kennen den Unterschied zwischen Java und JavaScripts nicht. Man merkt sich den ersten Begriff “Java” und erinnert sich, dass da mal gesagt wurde das sei gefährlich und deshalb sucht so mancher die Möglichkeit JS bei seinem Browser auszuschalten. Einige – aber eine nicht minder große Zahl – können die Maus nicht benutzen und verzweifeln an so mancher Website, die wichtige Navigationsteile mit JS steuert, aber an die Tastaturnutzer nicht dachte. Oder so manches Menü, der Zugang zu den Kommentaren etc. nur mit JS möglich ist.

Hier einige Artikel, Scriptressourcen, sowohl für JavaScript Ersteller, wie für den JS Laien nutzbar, wenn man sich einfach traut.

In Erinnerung rufen mag ich einen hervorragenden Artikel aus dem Jahre 2006 auf Sitepoint.com. Hier wird anhand eines einfachen Beispieles – einfach für diejenigen, die JS schreiben aufgezeigt wie man auch den Tastaturnutzern JavaScripts gesteuerte Navigationen zugänglich machen kann.

The JavaScript Anthology: James Edwards
& Cameron Adams
ISBN:0-9752402-6-9

Ebenfalls erinnern mag ich an eine hervorragende Seite, die dies in Deutsch erklärt: Barrierefreies JavaScripts von ichwill.net.

Die Zugänglichkeit =Accessibility…

.. bedauerlicherweise bei uns verkürzt “Barrierefreiheit” genannt. Dies verhindert oft das Denken an viele einfache, aber sehr benutzefreundliche Möglichkeiten von JS im Speziellen und Programmierung von Features im Besonderen.

Nimmt man auf Menschen Rücksicht, wenn man JavaScripts nutzt nimmt man ganz automatisch auch auf die Bots der Suchmaschinen Rücksicht, die sich mit JS immer noch schwer tun.

Hier auf WebDesign-in.de wurden die Kommentare “versteckt”. Derzeit sieht man das Script bei versicherung-in.de und rolfkaul.de.

Erst wenn ein Kommentar vorhanden ist erscheint der Link zum “Kommentar lesen”. So sehen dies alle, die JavaScript aktiviert haben. Hat jemand JavaScripts deaktiviert, dann sieht er alle Kommentare gleich. Also auch die Suchmaschine.

Kannst Du Dom

JS wird nicht am Server ausgeführt, sondern im Browser. So frage ich den Browser einfach: “Kannst Du DOM”. Kann er das, dann soll er verstecken und erst beim Klick auf den Link aufmachen. Kann er das nicht, dann soll er gleich alles anzeigen.

Dieses Script sieht so aus und ich habe es als collapse.js abgespeichert und dann im HTML Header verlinkt.

 
if (document.getElementById && document.createTextNode){canDOM=true}
function collapse(id){
	if (canDOM && document.getElementById(id)){
		elm=document.getElementById(id);
		elm.style.display=elm.style.display=='none'||elm.style.display==''?'block':'none';
	}
}
if (canDOM){
	document.write('<style type="text/css">.commentlist{display:none;}.write{display:none;}</style>')
}

Da ich hier WordPress nutze das Beispiel in der comments.php:

<?php if ($comments) : ?><!--damit frage ich, ob es ueberhaupt Kommentare gibt-->
<p class="navigate01">
<a title="anklicken zum Lesen, oder anklicken zum Zumachen der Kommentare" href="#commentlist" 
onclick="collapse('commentlist');return false">
Kommentare lesen &#187;</a>.
</p>

Weiter unten nutze ich die angesprochene CSS class und gebe dem Link einen Anker:

 
<ol  id="commentlist" class="commentlist"><li class="ohne"><a name="commentlist"></a></li>
<?php foreach ($comments as $comment) : ?>
<?php if (get_comment_type() == "comment"){ ?>
usw....

Ein JavaScripts Script für ein Menü ist bei Evolt.org zu finden. Dieses Beispiel ist ebenfalls sehr ausführlich erklärt und selbst, wenn man nicht Englisch kann, aber JS kann man ja alles einfach nachmachen und nachsehen was dann passiert.;)

Brothercake bietet ebenfalls hervorragende Erklärungen und jede Menge an Beispielen an. Stöbern lohnt auf alle Fälle. Sogar der JS Laie kann dies nutzen, da bin ich mir sehr sicher!

Diverse Developer Toolbars für Browser bieten fast alle die Möglichkeit per Klick JS zu aktivieren oder deaktivieren.

Einfach anders denken und vielleicht wird dann auch irgendwann sogar Ajax für Screenreader nutzbar, wenn dies auch derzeit wirklich nur Zukunftsmusik ist.

mts

Basis Know-how CSS
Internetmarketing

Top

2 zu : da eine Box zum Aufklappen – dort auch eine – JS benutzerfreundlich für Mensch und Maschine – nützliche Ressourcen

2 Kommentare

anonym

1
Dat geht aber auch mit css: (:hover). Is auch barrierefrei.
Ganz ohne JS.

22.12.07 um 10:26
arnold paulus

2
ok herr anonym dann bitte ein beispiel? Opera sieht das nämlich nicht so wie IE und FF

19.03.08 um 06:56