rechts klick - link in neuem Tab öffenen - geht nicht

Hallo,

mir ist nicht wirklich klar, wieso da aus deiner Sicht die Möglichkeit bestehen sollte, irgendeine Seite in einem neuen Tab zu öffnen, denn dort gibt es doch überhaupt keinen Link. Das ist eine gewöhnliche Slideshow, einfach nur Bilder, welche nicht verlinkt sind. Ja, bei Klick auf ein Bild öffnet sich das nächste Bild, aber mehr als das passiert nicht, es findet keine Navigation statt.

Nein, das Prinzip ist überhaupt nicht das Gleiche, es ist ein vollkommen anderes Prinzip. Darum ist dein zweites Beispiel auch ein viel besseres Beispiel.

Wie gesagt, in deinem ersten Beispiel erfolgt überhaupt keine Navigation, du bleibst die ganze Zeit auf derselben Seite, es ändert sich nur das Bild. Die Bilder sind aber alle auf der gleichen Seite, da würde eine Option zum Öffnen in einem neuen Tab gar keinen Sinn ergeben. Wann die Bilder geladen werden, ist vollkommen unerheblich. Das ist ein Implementierungs-Detail, ob ein Lazy Loading angewendet wird oder nicht. Das ändert ja nichts daran, ob es eine Seiten-Navigation gibt oder nicht.

In deinem zweiten Beispiel erfolgt tatsächlich eine Navigation. Dort landest du auf einer anderen Seite und da würde man tatsächlich erwarten, dass es die Option gibt, den Link in einem neuen Tab zu öffnen. Das Problem ist nur, dass es technisch kein Link ist, sondern ein Button. Das ist semantisch vollkommener Blödsinn, weil das kein Formular ist. Aber so ist diese Webseite eben umgesetzt und darum fehlt die Option. Da kannst du als Nutzer nichts tun. Zumindest wirst du keine Pauschallösung bekommen können, welche für jeden dieser Fälle greift. Du könntest höchstens eine Erweiterung schreiben, welche speziell für diese Seite ist und das HTML der Seite verändert.

Der Maus-Cursor ist übrigens unerheblich. Den kannst du für jedes beliebige Element setzen, wie du willst. Und gibst du dem Cursor eine Bedeutung, dann heißt dieser Cursor nur, dass das Element klickbar ist, nicht dass es ein Link ist, der eine Seiten-Navigation zur Folge hat. Das ist ein wichtiger Unterschied. Siehe Erklärung oben. Ein Bild weiter gehen ist auch eine "klickbare Aktion", aber _keine_ "Seiten-Navigation".

Sören hat recht, die Schaltfläche ist mit dem HTML-Tag <button> gemacht. Dieses HTML-Tag ist von alleine nicht linkfähig. Um es linkfähig zu machen, muss der entsprechende Quelltext in ein <a>-Tag gepackt werden, so in etwa:

<a href="https://store.myposter.de/medialib/motivwelt/stockimage/wasserfall-motiv-
kontrast/frontal-view/wasserfall-motiv-kontrast-l.jpg">


<button class="product-information__cta button-cta " data-target="/konfigurator" 
data-context="{&quot;stockImageVariantId&quot;:2627,&quot;materialType&quot;:&quot;
poster&quot;}">


		Jetzt gestalten!


</button>
</a>

Das <a>-Tag fehlt aber, also ist die Schaltfläche kein echter Link.

Das ist auch nicht allgemein lösbar, weil es eben von der Programmierung der jeweiligen Webseite abhängt. Man kann nicht davon ausgehen, dass jeder Button in Wahrheit ein Link sein sollte, und man kann nicht wissen, wie das passende Script dazu aussieht, welches für die Navigation sorgt. Das ist nur durch das menschliche Auge erkennbar. Es ist daher nur eine genau auf die Webseite individuell zugeschneiterte Lösung möglich, wenn man darauf Einfluss nehmen will.

Zitat von hermann-san

für den Benutzer stellt es sich aber als echter Link dar und er funktioniert auch so wenn man drauf klickt.
Ich hab einige FF Erweiterungen wie Linky , Link Ninja, oder Mulit Links Plus angeschaut, aber die scheinen das Problem auch nicht zu lösen.

Es ist nun mal fakt, dass <button> allein nicht als Link funktioniert. Das ist in HTML so festgelegt. Die Aufgabe dieses Tags ist eigentlich nur, eine Schaltfläche zu erzeugen, ohne eine Grafik verwenden zu müssen. Als echter Link muss es in einen <a>-Tag eingebettet werden. Dafür ist überhaupt keine Erweiterung nötig. Entweder wusste das der Ersteller der Website nicht, oder er hat es, aus welchem Grund auch immer, nicht gewollt. Tatsache ist, dass hier kein Browser verwantwortlich zu machen ist.

Ich kann ja mal eine meiner Seiten als Beispiel angeben. Nicht wundern, die Seite ist in Sorbisch, sie listet Erweiterungen auf, die ins (Ober-) Sorbische übersetzt sind. Da gibt es zwei Schaltflächen: Dalše informacije (= Weitere Informationen) und Sćahnyć (= Herunterladen). Der Code dazu - am Beispiel des Eintrags für die Erweiterung Bookmarks Organizer - sieht so aus:

<a href="https://addons.mozilla.org/hsb/firefox/addon/bookmarks-organizer/">
<button type="button" value="Dalše informacije">Dalše informacije</button>
</a> /


<a href="https://addons.mozilla.org/hsb/firefox/addon/bookmarks-organizer/">
<button type="button" value="Sćahnyć">Sćahnyć</button>
</a>

Hier ist der Link zu meiner Seite:

http://www.sorbzilla.de/pridatki/pridatkiff.htm

Wie man sieht kann man solche Schaltflächen mit CSS auch nach Herzenslust gestalten, die Anweisungen dazu stehen in einer CSS-Datei.

Zitat von milupo

Es ist nun mal fakt, dass <button> allein nicht als Link funktioniert. Das ist in HTML so festgelegt. Die Aufgabe dieses Tags ist eigentlich nur, eine Schaltfläche zu erzeugen, ohne eine Grafik verwenden zu müssen. Als echter Link muss es in einen <a>-Tag eingebettet werden. Dafür ist überhaupt keine Erweiterung nötig. Entweder wusste das der Ersteller der Website nicht, oder er hat es, aus welchem Grund auch immer, nicht gewollt. Tatsache ist, dass hier kein Browser verwantwortlich zu machen ist.

Der Themen-Eröffner macht ja auch nicht den Browser verantwortlich. Er möchte das Verhalten auf den betroffenen Webseiten gerne ändern. Und das funktioniert ohne Erweiterung nicht. Aber eine allgemeine Erweiterung, die für jeden denkbaren Fall greift, gibt es nicht, muss also selbst für die jeweilige Seite geschrieben werden.

Zitat von milupo

Code

<a href="https://addons.mozilla.org/hsb/firefox/addon/bookmarks-organizer/">
<button type="button" value="Dalše informacije">Dalše informacije</button>
</a> /


<a href="https://addons.mozilla.org/hsb/firefox/addon/bookmarks-organizer/">
<button type="button" value="Sćahnyć">Sćahnyć</button>
</a>

Wieso machst du denn sowas? Eine solche Verschachtelung ist in HTML definitiv nicht erlaubt. Das ergibt auch semantisch keinen Sinn. Ein Element kann entweder ein Link oder ein Button sein, nicht beides gleichzeitig.

Was heißt nicht erlaubt? Es funktioniert und erfüllt seinen Zweck. Ich habe gleichzeitig die Funktion eines Links und die Eigenschaften eines Buttons. Semantisch hin oder her, es soll ein bestimmter Zweck erreicht werden. Es mag vielleicht ein Hack sein, aber es gibt unzählige Hacks, da ist das Argument, dass etwas semantisch keinen Sinn hat, recht schwach.

Laut W3C darf das Button-Element in Elementen stehen, die phrasing content erlauben. Zu diesen Elementen gehört auch das A-Element, siehe hier

https://www.w3.org/TR/html5/forms.html#the-button-element

und hier

https://www.w3.org/TR/html5/dom.html#phrasing-content-1

Führ mal einen Validator aus.
https://validator.w3.org/nu/

"The element button must not appear as a descendant of the a element"

Der Validator ist ebenfalls vom W3C, also hast du wohl eine entscheidende Stelle im Standard übersehen.

Und das ist ja auch logisch, dass das nicht erlaubt ist. Wie ich schon sagte, Link und Button kann ein Element nicht gleichzeitig sein, das schließt sich gegenseitig aus. Und bei HTML dreht sich ALLES um die Semantik.

Ein Hack sehe ich darin nicht. Das würde ja bedeuten, dass du damit irgendein Problem lösen möchtest, was anders nicht lösbar wäre. Aber das kann ich mir bei einer so einfach gehaltenen Webseite nicht vorstellen, dass da irgendein Hack notwendig sein sollte. Aber ich bin neugierig: Wozu brauchst du denn ein Button-Element in einem Link? Welchen Vorteil bringt das für dich? Dann können wir dieses Problem ja vielleicht beheben.

Dass HTML korrekt sein sollte, ist jedenfalls auf gar keinen Fall ein schwaches Argument, immerhin erzeugt falsches HTML Barrieren für Nutzer von Screenreadern oder von anderen Werkzeugen für Menschen mit Einschränkungen.

Warum soll man einen Button nicht als Link benutzen?

<form action="https://www.camp-firefox.de/" method="post">
<button type="submit" style="cursor: pointer; cursor: hand;">Klick hier</button>
</form>

Funktioniert gut, man hat gleich einen optisch ansprechenden 'Anklick-Punkt', der hover Effekt ist eingebaut und der Handcursor ist schnell hinzugefügt.

Ok, Rechtsklick/Neuer Tab funktioniert nicht. Aber muss das ein Nachteil sein?
Wenn der Webmaster will, dass ich an dieser Stelle seine Seite verlasse, dann kann er ja hier ein target="_blank" einbauen.

Mir als Fronend-Entwickler tut das echt weh…

Dein Beispiel ist wieder was anderes. Also nicht das Gleiche wie im Beispiel von milupo und auch nicht das Gleiche wie im Beispiel des Themenerstellers. Du sendest mit diesem Beispiel ein Formular ab. Und ein POST-Request ist definitiv nicht das Gleiche wie ein GET-Request.

Ein Formular absenden, wenn man einfach nur auf eine andere Seite möchte, ist dazu vollkommen sinnlos. Ich habe es schonmal geschrieben: bei HTML dreht sich alles um die Semantik. Und deine Formulierung "gleich einen optisch ansprechenden 'Anklick-Punkt', der hover Effekt ist eingebaut" lässt erahnen, dass du nicht weißt, was Sinn und Zweck von HTML ist. Die optische Gestaltung wird via CSS erreicht. Die Standard-Gestaltung der HTML-Elemente dafür zu missbrauchen, welche eh in jedem Browser unterschiedlich ist, verfehlt den Zweck von HTML.

Ja, es ist ein Nachteil, HTML falsch zu verwenden. Ich habe es in meinem letzten Beitrag bereits erwähnt: alleine schon wegen der Barrierefreiheit. Aber selbst für Nutzer ohne Einschränkungen: wieso sollte man vollkommen ohne Grund den Nutzern die Freiheit nehmen, zu bestimmen, wie Links geöffnet werden? Ich für meinen Teil öffne sehr häufig Links bewusst in neuen Tabs.

Das ist die für mich entscheidende Frage, die man sich immer stellen sollte, wenn man etwas falsch machen will: warum? Gibt es einen guten Grund dafür? Die Frage umgekehrt zu stellen, was dagegen spricht, das ist häufig schon der Anfang allen Übels.

Die Anmerkung zum target="_blank" ist insofern hier nicht von Bedeutung als dass man dieses Attribut sowohl in Links als auch in Formularen setzen kann, das geht also so oder so.

Sören Hentzschel
Danke für deine Erläuterungen du hast meine Frage

Zitat

Warum soll man einen Button nicht als Link benutzen?

sehr befriedigend beantwortet.
Allerdings verstehe ich die Bemerkung zu 'Barrierefreiheit' nicht so wirklich - heißt das, dass Formulare generell nicht barrierefrei sind?

Nein, das heißt nicht, dass Formulare nicht grundsätzlich barrierefrei sind. Geht es wirklich um ein Formular, ist natürlich ein Button das Element der Wahl, um das Formular abzusenden.

Aber versetze dich mal in die Lage einer blinden Person, welche auf einen Screenreader angewiesen ist. Die blinde Person sieht ja nicht, was wir sehen. Stattdessen ist diese Person auf die Informationen angewiesen, die sie von ihrem Screenreader erhält. Und da sind wir wieder an dem Punkt, wieso Semantik wichtig ist. Der Zweck eines Links ist die Navigation. Ein Button hat eine ganz andere Bedeutung. Ein Button dient nicht der Navigation, ein Button sendet ein Formular ab.

Und das ist nur eine sehr vereinfachte Darstellung von mir, ich bin selbst kein Experte im Bereich a11y und kann dir nicht sagen, wie Screenreader ganz genau arbeiten. Zumindest eine grobe Idee habe ich davon. Ich weiß, dass es wirklich sehr wichtig ist, dass man sich an die Bedeutung der Elemente hält und möglichst valides HTML schreibt. Denn Webseiten werden nicht nur von Menschen genutzt. Maschinen müssen den Code interpretieren können, damit Menschen, welche auf technische Hilfe angewiesen sind, die Webseite ebenfalls nutzen können und nicht ausgeschlossen werden. Das betrifft gar nicht so sehr wenige Menschen. Und wenn man Elemente falsch nutzt, wird die Nutzung für diese Menschen sehr erschwert. Auch wenn wir selbst überhaupt keinen Unterschied sehen und meinen, das sei ja nur unter der Haube und egal, wie es funktioniert, hauptsache es funktioniert. Es wird immer Menschen geben, für die das einen erheblichen Unterschied macht.

Das ist verstanden. Man muss nur mal lange genug darüber nachdenken und vielleicht mal ein paar Studien anstellen, welche technischen Möglichkeiten es gibt und wie das Webdesign diese Möglichkeiten unterstützen kann.
Ich habe da selbst einige Erfahrungen gesammelt bei der Programmierung von Webshops. da geht vieles nur mittels Formularen. Fängt schon mit dem 'Jetzt kostenpflichtig bestellen' Button an. Und geht dann mit der Auswahl der Versandart und der Zahlungsmethode weiter. Wie wird das einem Menschen, der auf technische Hilfsmittel angewiesen ist mitgeteilt, Erkennt der Screenreader oder was auch immer die Bedeutung dieser funktional wichtigen Elemente?

Zitat von Sören Hentzschel

Aber ich bin neugierig: Wozu brauchst du denn ein Button-Element in einem Link? Welchen Vorteil bringt das für dich? Dann können wir dieses Problem ja vielleicht beheben.

Wie gesagt, ich wollte die Eigenschaften beider Elemente gleichzeitig haben und sie kombinieren. Es war übrigens nicht meine Idee, aber frage mich nicht, woher ich sie habe. Irgendwann gelesen, es ist schon ziemlich lange her.