Spamschutz leichtgemacht

Kaum hatte ich einen wüsten Wutanfall zum Thema Captcha gelesen, da machte Gaim pling und Frank, mein alter Schulkamerad und persönlicher Lieblingsprovider von Messetechnik (nicht dass ich jetzt so übermäßig viele kennen würde) erzählte mir von seinem aktuellen Spamproblem

Nachdem ein Bot ein Kontaktformular auf einer seiner zahlreichen Websites genutzt hatte, um ihm (ungelogen) stündlich 300 patente Diättipps zukommen zu lassen, war jetzt das Gästebuch seiner wichtigsten Seite dran. Alle 60 Minuten kamen sechs Einträge, die die Vorzüge eines bestimmten potenzfördernden Generikas priesen. Angesichts des Alters derer, die normalerweise Franks Events besuchen, würde ich fast vermuten, dass man dort eher mit zu viel als mit zu wenig Potenz zu kämpfen hat... aber Marketingstrategie ist eben nichts für Spambots.

Es kann so einfach sein

Das Idioten-Captcha
Meine Sicherheitsabfrage. Funktioniert wirklich prima.

Diese sind nämlich strunzdumme Maschinen. Man soll seinen Gegner nie unterschätzen, sicherlich, aber wenn man ihn überschätzt, tut man sich selbst auch nichts gutes. Und das tun viele, so zum Beispiel auch ich... bis ich den eingangs genannten Artikel las. Weil ich keine Lust hatte, für Frank irgendein abgefahrenes Hightech-Captcha zu installieren, habe ich einfach als Experiment das dümmstmögliche gebaut.

Damit nicht der Eindruck entsteht, dies sei eine komplizierte Angelgenheit... es handelt sich um nichts weiter als das Bild eines Elefanten. Das Script prüft einfach, ob die Frage mit Elefant beantwortet wurde (Rechtschreibfehler und originelle Groß- und Kleinschreibung werden akzeptiert) und speichert dann den Kommentar.

Das Bild ändert sich nie. Die Antwort ist immer Elefant. Das ist die dümmste Sicherheitsabfrage der Welt. Und sie funktioniert.

Mit Kanonen auf Spatzen

Nutzlos und lästig.
Spät am Abend ist sowas zu hoch für mich. Wenn es ein Spambot drauf anlegen würde, würde er dieses Ding überwinden. Nur passiert das eben nicht.

Es ist technisch durchaus möglich, Captchas durch Maschinen knacken zu lassen. Nur passiert das praktisch kaum, höchstens wenn ein Spambot gezielt auf eine bestimmte Captcha-Software angesetzt wird. Warum sollte man sich dann die Mühe machen? Normale Captchas sind ab einem gewissen Müdigkeitsgrad auch für optisch optimal ausgerüstete Menschen nicht mehr zu knacken und unter der Bilderzeugung schwitzt unnötig der Server.

Wenn man's barrierefrei halten möchte, sollte statt eines Bildes vielleicht eine einfache (nicht-mathematische) Frage gestellt werden, zum Beispiel Wie lautet der Vorname von Franz Beckenbauer?.

Rastergrafik als Positionierungshilfe

Am Bildschirm sind 2cm eine sehr sehr relative Längenangabe. Dank zahlreicher Browserbugs gilt das gleiche leider oft auch für eigentlich so eindeutige Anweisungen wie 20 Pixel. Über Perus Weblog fand ich nun kürzlich etwas, das bei derartigen Fragen Abhilfe verspricht: Ein großes Raster mit Pixelangaben als Hintergrundbild zum präzisen Abmessen von Positionen und Längen. Eine schöne Idee, allein, die Grafiken, die's dort zu laden gab erschienen mir aus zweierlei Gründen nicht besonders brauchbar.

Warum ein neues Raster?

Erstens scheine ich der einzige zu sein, der bei der Gestaltung seiner Websites das Layout nicht in 10er-Schritten, sondern in Zweierpotenzen anlegt - bei mir ist nie etwas 250 Pixel breit, sondern bestenfalls 256 Pixel. Erscheint mir bei Computergrafiken sinnvoll, der Bildschrim ist ja in der Regel auch 1024 Pixel und nicht 1000 Pixel breit.

Zweitens ist diesere Raster-als-Hintergrundbild-Konstruktion ebenfalls nicht sinnvoll, sobald auf der Seite andere Elemente ebenfalls Hintergründe sporten und damit das Raster überdecken. Also heißt es mal wieder selbst ist der Mann.

Download und How-To

In mühevoller Kleinarbeit habe ich also ein mir zusagendes Raster in verschiedenen Farben gebaut. Als transparentes PNG lässt sich jede Version als absolut positioniertes img sehr schön über allen bestehenden Inhalt legen - an den Linien kann man dann seine Elemente präzise ausrichten.

Die Anwendung ist ebenfalls denkbar einfach, muss man doch lediglich die Grafik als absolut positioniertes Element auf seiner Seite einfügen.

<img src="grid-blue.png"
    style="position:absolute; top:0; left:0;" />

Und schon hat man ein schönes Raster über seiner Seite liegen und kann in Bequemlichkeit Pixel schubsen.

Raster bei Kram-hochladen.de im Einsatz
Wenn mal ein Element nicht genau sitzt, lässt es sich mit Hilfe eines Rasters genauestens nachvollziehen.

Einen (geringfügigen) Nachteil hat diese Technik allerdings. Das Raster ist ein absolut positionirtes Element über überdeckt als solches alle anderen Elemente - oder zumindest die meisten. Das heißt, dass Links u.Ä. die unter dem Raster liegen aufgrund der Transparenz der PNGs zwar sichtbar, aber nicht mehr anklickbar sind. Nicht weiter schlimm, weil außer dem Entwickler eh niemand das Raster zu sehen bekommen sollte. Und schließlich hat man ja seine statischen URLs sowieso im Kopf. Alles kein Problem.

Die praktische Ein-Bild-Navigation

Manchmal möchte man aus rein optischen Erwägungen auf seiner Seite eine aus Grafiken bestende Navigation haben. Das bedeutet im Normalfall viel Arbeit. Man muss die ganzen Einzelgrafiken zurechtscheiden (und jeweils Mouseover-Versionen), sich dann den Kopf darüber zerbrechen wie man den Mouseover-Effekt realisiert (Javascript? Kann man abschalten. CSS-Pseudoklasse :hover? Geht beim IE auf img-Elementen nicht...) und am Ende muss man sich dann auch noch darum bemühen, dass der Mouseovereffekt ohne Verzögerung beim Nachladen der entsprechenden Grafik kommt.

Weniger ist mehr

Die Lösung all dieser Probleme besteht darin, die entsprechenden Schritte beim Bau einer Bildernavigation einfach nicht auszuführen. Nehmen wir erst einmal eine ganz einfache HTML-Navigation her:

<ul id="navi">
    <li><a href="/">Startseite</a></li>
    <li><a href="projekte.html">Projekte</a></li>
    <li><a href="referenzen.html">Referenzen</a></li>
    <li><a href="impressum.html">Impressum</a></li>
</ul>
Das Navibild
Dies Bildnis ist bezaubernd schön... bzw. hässlich. Macht aber nichts, es ist ja nur ein Beispiel.

Passend dazu basteln wir uns dann die grafischen Repräsentationen der Navigationspunkte (inkl. Varianten für den Mouseover-Effekt), lassen sie aber, statt sie wie gewohnt in Einzelbilder zu zerlegen, in einem Stück.

Dieses Bild wird in Folge nicht mehr angerührt - ab jetzt brauchen wir nur noch css und ein paar kleinere Änderungen an der HTML-Datei. Der Plan sieht wie folgt aus:

  1. Die Navigationspunkte (Der Text zwischen den a-Tags) werden mit einem Image-Replace-Trick durch das große Navigationsbild ersetzt.
  2. Durch individuelles CSS-Styling wird das Navigationsbild für jeden Punkt so positioniert, dass es aussieht als wäre dort jeweils ein Einzelbild am Werke.
  3. Weil das ganze in a-Tags stattfindet, ist es kein Problem mit der :hover-Pseudoklasse den Mouseovereffekt zu erstellen. Es wird einfach das Navigationsbild für a:hover so verschoben, dass statt der normalen Grafik die Mouseover-Version zu sehen ist.

Schritt 1

Image-Replace-Trick bedeutet in diesem Fall, dass die a-Tags zu Block-Elementen werden, ein Hintergrundbild bekommen - und dass der Text zwischen den a-Tags verschwindet. Wir setzen ihn einfach in einen Span und stylen diesen unsichtbar. CSS-Fähige Browser werden ihn nicht anzeigen, aber für Suchmaschinen, Screenreader und Textbrowser ist der Text immer noch da. Der Code für diesen Schritt:

<ul id="navi">
    <li><a href="/"><span>Startseite</span></a></li>
    <li><a href="projekte.html"><span>Projekte</span></a></li>
    <li><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

CSS macht aus den Links Block-Elemente und verpasst ihnen unser Navibild als Hintergrund.

#navi {
  list-style-type:none;
  margin:0;
  padding:0;
}

#navi li a {
  display:block;
  width:160px;
  height:32px;
  background:white url(navi.jpg) no-repeat top left;
}

#navi li a span {
  display:none;
}

Jetzt sieht die Navigation schon richtig nach etwas aus, allein die richtige Positionierung des Hintergrundbildes für die einzelnen Punkte fehlt noch.

Schritt 2 und 3

Mit CSS und background-position kein ist die Positionierung des Hintergrunds kein Problem; und um Zeit zu sparen, legen wir das ganze gleich so an, dass die Position beim Mouseover eine andere ist. Weil das ganze ja nur Hintergrundbilder eines a-Tags sind, brauchen wir dafür nicht mehr als die :hover-Pseudoklasse. Um die einzelnen Links in den Navigationspunkte zu identifizieren, verpassen wir den Listenpunkten noch IDs. Jetzt schaut das ganze so aus:

<ul id="navi">
    <li id="navi-start" ><a href="/"><span>Startseite</span></a></li>
    <li id="navi-projekte"><a href="projekte.html"><span>Projekte</span></a></li>
    <li id="navi-referenzen"><a href="referenzen.html"><span>Referenzen</span></a></li>
    <li id="navi-impressum"><a href="impressum.html"><span>Impressum</span></a></li>
</ul>

Das CSS mit all den Zahlen ist dann doch etwas mühsam (Beziehungsweise es wird schnell mühsam wenn die Navigationsliste lang wird), aber schneller als sich im Grafikprogramm einen Wolf zu schnibbeln ist's allemal. Letztendlich ist es ja nur einfachstes Rechnen.

#navi-start a:link, #navi-start a:visited, #navi-start a:active {
    background-position:0px 0px;
}
#navi-start a:hover {
    background-position:0px -128px;
}

#navi-projekte a:link, #navi-projekte a:visited, #navi-projekte a:active {
    background-position:0px -32px;
}
#navi-projekte a:hover {
    background-position:0px -160px;
}

#navi-referenzen a:link, #navi-referenzen a:visited, #navi-referenzen a:active {
    background-position:0px -64px;
}
#navi-referenzen a:hover {
    background-position:0px -192px;
}

#navi-impressum a:link, #navi-impressum a:visited, #navi-impressum a:active {
    background-position:0px -96px;
}
#navi-impressum a:hover {
    background-position:0px -224px;
}

Uns schon ist unsere Navigation fertig. Kein Javascript, keine großen IE-Probleme, keine Nachladezeit-Probleme. Die optimale Lösung wenn's denn mal Bilder sein müssen.

Nachtrag vom 26. August 2007

Die Methode, die hier zum Verstecken des Textes der Navigationspunkte verwendet wird, hat den Nachteil, dass die versteckten Elemente von Screenreadern nicht erfasst werden. Wie man es besser besser macht ist im Artikel über Image Replacement beschrieben.

Klicken-Sie-Hier-Links taugen nichts.

Wenn es an das Erstellen von Inhalt geht und Links gesetzt werden, ist der häufigst gemachte Fehler das Produzieren von Klicken-Sie-hier-Links. Diese sehen in der Regel so aus: Klicken Sie hier um unser Angebot einzusehen! Was soll daran schlecht sein? Wie sonst soll der arme Surfer denn wissen, dass er hier etwas anklicken kann!

Dies ist das mehr oder minder einzige Argument, das für Klicken-Sie-hier-Links spricht. Und dieses Argument ist durchaus nicht immer abwegig. Wenn der Webdesigner Mist im großen Stile gebaut hat, trifft es zu, anderenfalls nicht.

Einen Link erkennt jeder

Ein Link in einem Text ist in der Regel als solcher zu erkennen, durch Farbe und durch Unterstreichung - Entweder durch den Designer so festgelegt oder durch den Browser mangels Angaben in Eigenregie so dargestellt. Um einen Link in Text zu verstecken, müsste man sich als Gestalter einer Seite regelrecht anstrengen. Jeder, der schon mal mehr als 20 Minuten im Internet unterwegs war, weiß: Bunt + unterstrichen = Anklicken!. Niemandem muss man erklären was mit einem Link zu tun ist, solange die Zielgruppe einer Seite nicht aus jenen besteht, die in ihrem Leben wirklich noch nie eine Maus in der Hand hatten. Somit ist der einzige Grund für Klicken-Sie-hier-Links dahin und wir wenden uns der langen Liste der Gegenargumente zu. Um diese zu illustrieren, habe ich mir erlaubt, zwei Beispieltexte zu improvisieren:

Linktexte im Beispiel

Beispiel A:

Die Include Design GbR ist ein junges Unternehmen, dass für Sie Websites nach Maß erstellt. Klicken Sie hier um unseren Onlineauftritt zu besuchen. Klicken Sie hier um unsere Referenzen anzuzeigen und sich von unserer Arbeit zu überzeugen. Um unser Kontaktformular aufzurufen, klicken Sie hier und lassen Sie uns wissen was Sie brauchen.

Beispiel B:

Die Include Design GbR ist ein junges Unternehmen, dass für Sie Websites nach Maß erstellt. Überzeugen Sie sich in unserem Referenzen-Bereich von unserer Arbeit und lassen Sie uns über unser Kontaktformular wissen was Sie brauchen.

Schon beim lesen der Texte wird ein erster Nachteil der Klicken-Sie-hier-Methode offenbar. Sie zwingt zu umständlichen Formulierungen und bei vielen Links in wenig Text würde jeder Deutschlehrer angesichts der zahllosen Wortwiederholungen durchdrehen. Einen normalen Text schreiben und einfach die Schlüsselwörter zu Links machen ist einfacher und liest sich besser.

Stichwort lesen. Die wenigsten Texte im Internet werden wirklich gelesen. Meist werden sie von Usern mit Eile überflogen , auf der Suche nach einer bestimmten Information (der Text wird gescannt). Da ist es nicht gerade dienlich, wenn statt der für solche Überflug-Suchen wichtigen Schlüsselwörter immer nur hier als Link vervorgehoben wird.

Die Beispielboxen machen offenbar, in welchem Text man z.B. die Referenzen schneller finden würde. Auch gibt es Fälle und Surfer, die einfach innerhalb einer Seite mit der Tab-Taste von Link zu Link springen. Diese stehen dann vor dem gleichen Problem wie Benutzer eines Screenreaders: Ein Haufen Hier-Links, bei dem man nur raten kann, was im einzelnen dahiner steckt. Oder man stelle sich vor, man würde einen Online-Text ausdrücken. Wie bizarr würde doch die Phrase Klicken Sie hier um... auf einem Blatt Papier anmuten.

Der Faktor Suchmaschine

Schließlich gibt es noch Google und Konsorten. Diese achten bei ihrer Seitenindizierung auch und besonders auf Links und verbinden den Link-Text mit der dahinter stehden Seite. Konsequenz bei Klicken-Sie-hier-Links: Die Angebots-Seite wird beim Googlen nach dem Begriff Klicken Sie hier gefunden, statt bei der Suche nach etwas Sinnvollen wie z.B. Angebot Tontechnik.

Diese zahlreichen Argumente erlaube ich mir abschließend noch mit dem Hinweis zu garnieren, dass das W3C die Klicken-Sie-hier-Problematik ähnlich sieht: Siehe Accessibility Guidelines und den entsprechenden Eintrag in den QA-Tips.

Und dann gibt es auch noch jene, die der Ansicht sind, die Benutzung von Klicken-Sie-hier-Links erfülle den Tatbestand der Benutzerbeleidigung - Weil eben die mitgelieferte Bedienungsanleitung für Links in etwa so wäre, als würde man Ronaldo die Abseitsregel nochmal erklären. Man kann es auch übertreiben.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon