Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Eine Seite soll nicht auf sich selbst verlinken.

Sonntag, 6. Juni 2010

Eine berechtigte Forderung, wenn es um Usability im Allgemeinen, oder um Barrierefreiheit im Besonderen geht:

Eine Seite soll nicht auf sich selbst verweisen.

Es leuchtet ohne nähere Erklärung ein, dass das folgende Beispiel irritieren kann:

Du bist hier: Startseite - zur Startseite wechseln

Screenshot der Startseite mit Link zur StartseiteDieses Beispiel findet sich auf einer ansonsten technisch absolut sauber umgesetzten Seite. Der Seitenbetreiber mag mir nachsehen, dass ich ausgerechnet sein Projekt als negatives Beispiel zitiere. Im günstigsten Fall ist er mir für den Hinweis dankbar. Übrigens: Toscho nannte das Problem beim Namen: Deppenlink



Mehr als irritierend kann so etwas für Menschen sein, die nicht den Überblick über den ganzen Bildschirm haben. Zum Beispiel Benutzer von Screen Readern. Idealerweise sollte man die jeweils aktuelle Seite in einer Navigation nicht nur nicht verlinken, sondern auch mit einem Hinweis ausstatten, z. B.: "Standort:". Wie dies gedacht ist, zeigt folgender Screenshot aus der Navigation auf meiner Startseite, mit abgeschaltetem CSS (wie auch Screen Reader die Seite vorlesen):
Screenshot der Seitennavigation


Aber jetzt mein Rezept gegen den "Deppenlink"

Das Problem: Die Navigation wird per PHP in alle Seiten eingebunden. Immer die gleiche Navigation. Nun muss natürlich PHP entscheiden, welches die jeweils aktuelle Datei ist, und den Link auf sich selbst durch einen unverlinkten Text ersetzen.

Zuerst den Dateinamen der aktuellen Seite in eine Variable:
<?php $a = $_SERVER['PHP_SELF']; ?>

Und dann eine if-else Abfrage, hier am Beispiel eines Links, der zur Seite /index.php führt:

<?php
if ($a!="/index.php") {
echo '<a href="/">MStartseite</a>';
} else {
echo '<span class="cur"><dfn>Standort: </dfn>Startseite</span>';
}
?>

Anmerkung:
In der Praxis schreibe ich diese if-else Abfrage in Kurzform. Hier jedoch zugunsten der einfacheren Lesbarkeit die ausgeschriebene Form.

Wozu nun der span class="cur"? Nun, dieser Span kann jetzt individuell per CSS so gestylt werden, dass er zum Design der Seite passt.

Und was hat es mit /lt;dfn>Standort: </dfn> auf sich?
Der Hinweis "Standort:" soll nur von Screen Readern vorgelesen werden.
Eine einfache CSS-Regel erledigt dies:

dfn {
position:absolute;
left:-9000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}



1 Kommentar

  1. "Aber mit Deppenlink rankt die Seite besser."
    Das hat heute tatsächlich jemand auf Twitter behauptet.
    Und dieser Jemand rankt bei Google saumäßig gut.

    Toschos Kommentar dazu:
    "Eine wissenschaftliche Untersuchung hat mal gemessen: In Gegenden mit vielen Störchen lag die Geburtenrate auffällig hoch. Kausalität tritt nicht dort auf, wo es einem gerade paßt. wp_kses_normalize_entities2("9786")
    Sachlich betrachtet gibt es keinen Grund, warum eine Seite relevanter sein soll, die sich selbst verlinkt. Das halte ich für Unfug."

    Kommentar von Fritz — Montag, 7. Juni 2010 - 14:43 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE