Hej Tabellenkalk,

Einfach mal von einer anderen Seite draufschauen.

Da sehe ich bloß das Acer-Logo...

hahaha - hat eine Weile gedauert, aber wie ich schon sagte: hahaha!

;-)

Übrigens habe ich den Artikel eben aktualisiert. Es gab noch Input von anderer Seite und eine Facebook-Diskussion dazu. Interessant auch hier für das Forum.

Neben @mermshaus hat auch Kerstin Probiesch (ist eine der hier registrierten Kerstins Kerstin Probiesch?) darauf hingewiesen, dass der "Deppenlink" durchaus nützlich sein kann und in der Mehrzahl der Seiten eben nicht entfernt wird. Konventionen sind ein Freund der Zugänglichkeit und ihren Vorschlag habe ich nun als Empfehlung ins Fazit übernommen:

Auf die Aktuelle Seite verlinken, wie auf jede andere. Diese aber optisch für sehende und mit einem Text für Blinde markieren. Das ist verständlich und robust.

Für das Entfernen des Links sehe ich nur einen Grund: unerfahrene Nutzer können verwirrt werden, wenn sie einen Link anklicken, der auf die aktuelle Seite führt - vor allem wenn sich augenscheinlich nichts tut. Für Blinde kann es dann lästig sein, dass sie wieder am Beginn der Seite sind.

Das durch das Missachten einer Konvention zu vermeiden, scheint mir aber nicht sinnvoll. Der Nutzen (Robustheit, Bekanntheit bei erfahrenen Nutzern, die den Hauptanteil ausmachen) überwiegt hier die Vorteile für die Neuländer meiner Meinung nach - habe mich überzeugen lassen.

Ich weiß, dass das hier im Forum anders gesehen wird ( @gunnar bittersmann empfiehlt beispielsweise das a-Element beizubehalten aber das href-Attribut zu entfernen) . Gerade darum hier dieser Beitrag. Denkt mal drüber nach - auch wenn ihr nicht meine Meinung übernehmen könnt/wollt/sollt: diese Lösung ist robust, verständlich und am weitesten verbreitet, was dafür spricht, dass es der Nutzererwartung am nächsten kommt...

Marc PS: wer die aktuelle Version lesen möchte: http://haunschild.de/2016/inclusives-design-current-page/

Hej mermshaus,

Vielen Dank, ist abgearbeitet! - Kannst du wieder löschen (wobei es sinnvoller wäre mir eine PN zu schicken, wenn Du Infos nur mir für eine Zeit bereit stellen würdest)... ;-)

Der Vorteil, es öffentlich zu haben, liegt darin, dass andere Leser, die auf die gleiche Idee wie ich kommen könnten, sich dadurch potenziell doppelte Arbeit sparen,

Stimmt! - Hatte ich nicht bedacht...

Marc

@@marctrix

Warum sollte der Menüpunkt der aktuellen Seite auf der semantischen Ebene hervorgehoben werden? Er ist doch im Menü nicht bedeutsamer als die anderen. Im Gegenteil.

Sehe ich anders. Wieso sollte die aktuelle Seite denn nicht etwas besonderes unter allen ansonsten gleichrangigen Seiten sein?

Etwas besonderes, ja. Aber um besonders zu sein, muss der Menüpunkt nicht hervorgehoben werden. Die Besonderheit ergibt sich bereits daraus, dass der Menüpunkt nicht verlinkt ist, d.h. dass das Element (welchen Typs auch immer) kein href-Attribut hat.

Man muss hier zwei Ebenen unterscheiden: die technische (HTML) und die Nutzersicht.

Aus Markup-Sicht besteht ein Menü aus gleichrangigen Menüpunkten. Die Nichtverlinkung der aktuellen Seite ändert nichts an der Gleichrangigkeit.

(Es könnten auch einzelne Menüpunkte wichtiger sein als andere und deshalb hervorgehoben – dann aber auf allen Seiten.)

Aus Nutzersicht sollte die aktuelle Seite im Menü anders erscheinen.

Der Menüpunkt der aktuellen Seite wird in der Betonung zurückgenommen. Nur weil es der einzige derart zurückgenommene ist, erscheint er hervorgehoben.

Eben, jedem erscheint er hervorgehoben - und trotzdem soll ich ihn semantisch zurücknehmen?

Alle Menüpunkte buhlen um die Beachtung durch den Nutzer: „Ruf. Mich. Auf!“ ;-) Außer dem einen Mauerblümchen, das sich still verhält, sich also zurücknimmt.

Dass dieser eine vom Nutzer hervorgehoben erscheint, liegt an der Figur-Grund-Wahrnehmung: Das, wovon mehr da ist, wird als Grund wahrgenommen; das, wovon weniger da ist, hebt sich als Figur vom Grund ab.

Nur wenn beides gleich stark ist, kann man wahlweise das eine oder das andere als Figur wahrnehmen:

(Quelle: Wikimedia Commons; Autoren: Guam, Bryan Derksen, Fibonacci; CC BY-SA 3.0)

Eben, jedem erscheint er hervorgehoben - und trotzdem soll ich ihn semantisch zurücknehmen?

Vor mir aus soll dem Nutzer die aktuelle Seite im Menü auch hervorgehoben erscheinen. Das Menü erfüllt ja zwei Funktionen: (1) Sammlung von Wegweisen zu anderen Seiten und (2) Orientierungshinweis: Du bist hier.

Das heißt aber nicht, dass sich die wahrgenommene Hervorhebung auf der technischen Ebene, d.h. im Markup widerspiegeln müsste.

Für mich ist sie das eindeutig! Und damit ein Paradebeispiel für den sinnvollen Einsatz von strong. Mir ist natürlich klar, dass ich dich nicht werde überzeugen können ;-)

Vielleicht kann ich dich aber davon überzeugen, dass der Einsatz von strong auf der technischen Ebene alles andere als sinnvoll ist. Er verkompliziert den Code unnötig.

Für ein a ohne href brauchst du nur eine einfache If-Anweisung:^[1]

  <a 
<?php if ($Menüpunkt != $aktuelleSeite): ?>
    href="http://example.net/stairway/to/heaven"
<?php endif; ?>
  >
    Stairway to heaven
  </a>

Um das a gegen einen anderen Elementtypen auszutauschen, brauchst du zwei If-Anweisungen, jede davon mit Then- und Else-Zweig:

<?php if ($Menüpunkt != $aktuelleSeite): ?>
  <a href="http://example.net/road/to/hell">
<?php else: ?>
  <strong>
<?php endif; ?>
    Road to hell
<?php if ($Menüpunkt != $aktuelleSeite): ?>
  </a>
<?php else: ?>
  </strong>
<?php endif; ?>

Mir fällt jetzt wirklich kein Grund ein, der gegen a und für strong spräche.

Vom Markup ganz abgesehen ist es sicherlich nicht sinnvoll, im Menü die aktuelle Seite durch Fettschrift zu kennzeichnen. Durch die veränderte Laufweite würde die Schrift womöglich nicht mehr in den für den Menüpunkt vorgesehenen Platz passen; oder wenn sich der Platz vergrößert, würde das Menü rumzappeln, womöglich sogar eine Zeile mehr beanspruchen und das Layout zerschießen.

Andere Vordergrund-/Hintergrundfarbe, ja. Andere Schriftstärke – nein, besser nicht.

Für strong müsstest man die Schriftstärke explizit mit CSS auf inherit setzen; das entfällt bei a.

LLAP 🖖

PS: Nun gibt’s bei der einfachen If-Anweisung doch einen Else-Zweig:

  <a 
<?php if ($Menüpunkt != $aktuelleSeite): ?>
    href="http://example.net/stairway/to/heaven"
<?php else: ?>
    tabindex="0"
<?php endif; ?>
  >
    Stairway to heaven
  </a>

Man könnte zwar tabindex="0" für jeden Link im Menü angeben, aber man muss das Markup ja nicht vollmüllen.

Der Else-Zweig wäre auch der Platz fürs aria-describedby-Attribut, das dem Screenreader-Nutzer mitteilt, das dies die aktuelle Seite ist (als Hinweis, warum der Menüpunkt nicht verlinkt ist).

Oh!
Ich las heraus als sollte der Link der aktuellen Seite plötzlich zur STARTseite (Hauptseite) führen, also wo ganz anders hin als sonst, nur weil ein Link auf die bereits angezeigte Seite nicht hilfreich ist. Diese Vorstellung war so absurd dass mein Satz mit "gute Idee usw." reinste Ironie war. Ich dachte mir ach du liebe Güte, auf was die Leute alles kommen nur um was anders zu machen als bisher.

Wie ist das denn sonst gemeint? Mir scheint da hab ich zu wenig Zeit zum überlegen investiert. Was ist der Hauptinhalt einer Seite?
Richtig verstanden hab ich das immer noch nicht. Aber ich weiß jetzt wenigstens dass ich es falsch verstanden habe :-)

Ich kann das Argument zum Beispiel gut nachvollziehen, dass eine Seite, auf der man bereits ist, im Menü nicht unbedingt noch einmal auftauchen muss.

Ich nicht. Es verwirrt wenn ein Eintrag plötzlich fehlt,

Wie merkst du das denn? Das ist ja gerade einer der Schwierigkeiten bei Aufklappmenüs.

Auch in einem Aufklappmenü kann der Link ja drinstehen, dann seh ich ah da bin ich grad, die nächste Seite wäre also eins weiter unten.

@pl @marctrix @encoder

Ich habe den „Deppenlink“ nie als großes Problem begriffen, weil er für mich neutral die Funktionalität „Seite abrufen“ anbietet (GET-Request). Da sich Seiteninhalte auch schon mal aktualisieren, kann es Sinn ergeben, auch die aktuelle Seite erneut abzurufen. Ich nutze das jetzt nicht unbedingt häufig, aber ich denke, dass mir das Fehlen dieses Features öfter mal negativ auffallen würde (zum Beispiel in Foren, siehe unten). Konkret verändert man mit einem Entfernen des Selbstlinks die Funktionalität der entsprechenden Schaltfläche. Sie tut dann nicht mehr das, was sie auf anderen Seiten des Angebots tut und was erwartbar ist.^[1]

Wenn ich bei HOME | BLOG | CONTACT (nur Wörter in Großbuchstaben sollen Links sein) auf BLOG klicke und dann HOME | Blog | CONTACT im Menü habe und die Blog-Seite aktualisieren möchte, würde ich – nach dem vergeblichen Versuch, auf Blog zu klicken – auf HOME oder CONTACT klicken, um dann dort direkt wieder auf BLOG klicken zu können.

Alternativ müsste ich zur Tastatur greifen und F5 drücken (umständlich und nicht funktional identisch (!)^[2]) oder den Refresh-Button in der Toolbar des Browsers betätigen (wie eben, dazu clientspezifisch und bei mir nach Möglichkeit ausgeblendet) oder die entsprechende Funktion anders mit der Maus auslösen (im Firefox etwa über das Kontextmenü, was natürlich auch umständlich und clientspezifisch und auch nicht funktional identisch ist).

Ein Beispiel aus einem Forum, in dem normalerweise der Threadtitel mit dem Thread verlinkt ist – nur nicht in der Detailansicht des Threads:

Das will ich ständig anklicken, um einen sauberen Link zum Thread zu bekommen (für Verlinkung), weil ich über Suchfunktionen und dergleichen eben oft über einen URL in den Thread komme, der direkt zu einem Post linkt oder dergleichen.

Ich habe zum Glück irgendwann gemerkt, dass das Icon daneben diesen Anwendungsfall abdeckt, weil es selbst verlinkt ist, aber dennoch ist das im Grunde meines Erachtens ein UI-Fehler. Die Alternative wäre es wieder, aus dem Thread zu klicken, um auf eine Übersichtsseite zu gelangen, auf der der Thread sauber verlinkt ist. Wie oben mit der Blog-Seite.

Was speziell Screenreader oder andere Assistenztechnologien angeht: Wenn es keine Semantik dafür gibt (kein aria-current wie im verlinkten Artikel erwähnt), dann sollte man meines Erachtens nicht einfach irgendwas machen, sondern abwarten. Es ist ja auch nicht so, dass die Nutzer nicht wüssten, wie man sonst Seiten bedient.

Die Idee, ein #-Sprungziel statt eines reinen Selbstlinks zu setzen, halte ich auch nicht für gut, weil es unerwartet ist und weil es mir die URLs versaut, falls ich die Seite verlinken möchte.

Hej Matthias,

Hallo marctrix,

Warum sollte man ein Element in die Tabulatorreihenfolge aufnehmen, wenn man mit ihm nicht interagieren kann?

Weil es sonst für Blinde aus der Navigation verschwindet - das sehe ich inzwischen als problematischer an, als ein anderes Problem: dass man den Menü-Eintrag zwar antaten kann, dass ein "abschicken" mittels Return aber nichts bewirkt.

Ok. Was hältst du dann von einem a-Element ohne href aber mit tabindex=0?

Das hier und das hier ;-)

Zusammengefasst: tabindex=0 ist wohl nötig, die Entscheidung für span, strong oder a spielt für die Zugänglichkeit nur noch eine geringe Rolle. Es hängt davon ab, was man als Benutzererwartung annimmt - es sei denn, man kann belegen, dass Nutzer eines dieser Elemente bevorzugen.

Zu guter letzt bleibt noch zu überlegen, ob die Konvention, Links auf die aktuelle Seite zu entfernen, weit verbreitet genug ist, um davon ausgehen zu können, dass dadurch jedem klar ist, warum der Link entfernt wurde.

Wenn man diese Frage mit "nein" beantwortet, müsste man noch mit aria-describedby eine Beschriftung für Screenreader-Nutzer oder mittels für alle zugänglicher Beschriftung dieses Verhalten erklären.

Ich habe das bisher nicht für nötig gehalten, allerdings hat mietshaus darauf hingewiesen, dass Seiten mit durchaus sehr viel Traffic sich an solche Praktiken nicht halten, was natürlich dazu führen kann, dass diese Konvention nicht so intuitiv erfassbar ist oder sein wird, wie ich das annehme.

In der Webentwicklung läuft ja leider sehr viel schief (siehe Blue Beine-Day-Post von Gunnar). Es gibt viel zu viele Entwickler, die von Konzepten, best practices, WCAG-Prinzipien nicht die geringste Ahnung haben und sogar noch stolz drauf sind, dass ihr Kram irgendwie mehr recht als schlecht läuft, aber töfte aussieht und für billig Geld zusammengekloppt wurde aus Komponenten, die man passend gemacht hat, damit das Ergebnis schick aussieht und man dem Kunden einen irrsinnigen Betrag in Rechnung stellen kann.

Auch in Bezug auf Barrierefreiheit sehe ich ein abnehmendes Interesse. Insofern sehe ich auch schwarz für Konventionen aller Art. Hoffentlich bringt die EU-Initiative zur Förderung der Barrierefreiheit hier wieder etwas Schwung in das Thema...

Leider finde ich die Dokumente nicht mehr - die Webseite der EU ist im Rahmen eines Relaunches extrem auf das eingedampft worden, was "die Leute" wollen - so gewinnt man natürlich keine Interessenten für Themen, die noch nicht im Fokus der Öffentlichkeit stehen. :-(

Marc