Gibt es ein Standard-, Standard-, empfohlenes oder bekanntes Symbol, das angibt, dass ein Link ein neues Browserfenster öffnet?
Dies ist aus Gründen der Barrierefreiheit im Internet. Oder ist es im Grunde kostenlos für alle?
Mir ist klar, dass diejenigen, die sie am meisten nutzen (mit Bildschirmleseprogrammen), sich nicht einmal darum kümmern, wie das Bild aussieht, und sich mehr für den Alternativtext interessieren.
Beschlossen, für diesen einen zu gehen:
Es sei denn, jemand kann eine weiter verbreitete vorschlagen?
accessibility
Lee Englestone
quelle
quelle
Antworten:
Es gibt kein etabliertes Standardsymbol.
Das von Ihnen ausgewählte Symbol ähnelt beispielsweise dem in Wikipedia verwendeten Symbol zum Markieren von Links, die auf externe Websites verweisen (die nicht zu Wikipedia gehören). Sie können es jedoch auf Ihren Websites verwenden und so eine Konvention auf Ihren eigenen Seiten festlegen. Stellen Sie einfach sicher, dass Sie dies konsequent tun: ALLE mit diesem Symbol gekennzeichneten Links MÜSSEN auf eine neue Seite geöffnet werden, und ALLE nicht mit diesem Symbol gekennzeichneten Links sollten auf derselben Seite geöffnet werden. Sie können die Barrierefreiheit verbessern, vorausgesetzt, Sie verfügen über eine stabile Benutzerbasis, die die Möglichkeit hat, sich an Ihre Konventionen zu gewöhnen. Wenn Ihre Website hauptsächlich von einmaligen Besuchern besucht wird, fügen Sie nur visuelle Unordnung hinzu.
quelle
Ich komme zu spät zu dieser Party, aber schau, was ich bei CodePen gefunden habe !
a[target="_blank"]::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; }
<a class="external" href="https://example.org" target="_blank">external link</a>
quelle
a[target="_blank"]:after
funktioniert der einzelne Doppelpunkt in Safari 11.1 und Firefox 61 in meinen Händen. Welcher Browser benötigt den Doppelpunkt? Bitte zögern Sie nicht, die Antwort zu bearbeiten. Vielen Dankdisplay:inline-block; vertical-align:text-top;
meine Anzeigeprobleme behoben. Vielen Dank.Für viele Unicode-Zeichen müssen Sie die folgende Schriftart verwenden (zumindest für Windows, bitte kommentieren Sie für Linux und Mac, wenn Sie testen können):
Sie können auch CSS-Selektoren anwenden, um das
target
Attribut folgendermaßen zu verwenden :Denken Sie daran, dass Browser über das Verhalten des
a
Selektors lustig sind, unda:link
/ odera:visited
testen Sie dies auf jeden Fall.Unicode -Charakter ' Zwei verbundene Quadrate ':
⧉
http://www.fileformat.info/info/unicode/char/29c9/index.htm
CSS
Unterstützung
Mac OS X, Yosemite: 2 Schriftarten
Apple Symbol
undSTIXGeneral
Unicode-Zeichen ' Weißes Quadrat mit oberem rechten Quadranten ':
◳
http://www.fileformat.info/info/unicode/char/25F3/index.htm
CSS
Unterstützung
Mac OS X, Yosemite: 3 Schriften
Apple Symbol
,STIXGeneral
,Menlo
.Unicode-Zeichen ' Upper Right Drop-Shadowed White Square ':
❐
http://www.fileformat.info/info/unicode/char/2750/index.htm
CSS
Unterstützung
Mac OS X 10.10 Yosemite verfügt über drei Schriftarten:
Arial Unicode MS
,Menlo
undZapf Dingbats
.quelle
Ich würde mit so etwas gehen:
Das von Ihnen ausgewählte Symbol wird, wie bereits erwähnt, von Wikipedia und anderen Websites häufig verwendet, um Links zu externen Websites darzustellen. Dies ist jedoch eher eine persönliche Präferenz und kein Webstandard.
quelle
alt
Attribut sollte verwendet werden, um das Bild zu beschreiben. In Ihrem Beispiel könnte es also so aussehen :alt="New window icon"
. Wenn dies gesagt wird, zeigt eintitle
Attribut beim Schweben einen Tooltip an, der in diesem Fall für die Zugänglichkeit und Benutzerfreundlichkeit hervorragend ist:title="Link opens in a new window"
obwohl ich heutzutage lieber "neue Registerkarte" als "neues Fenster" sage. Überprüfen Sie meine vollständige Antwort hier stackoverflow.com/questions/1899772/…alt
Attribut sollte absolut nicht beschreiben, wie das Bild in diesen Fällen aussieht, und es sollte niemals "Symbol" oder "Bild" erwähnen. Der Alternativtext sollte beschreiben, was das Bild tut, da es ein funktionales Bild ist . Bei der Auswahl von Alternativtext gilt keine einzige Regel wie "Bild beschreiben" - Kontext ist alles . Lesen Sie den gesamten WebAIM Alternative Text-Artikel - es ist sehr gutIch mag dieses Unicode-Symbol für Open-in-New-Window
↗️ oder ↗
North East Arrow Stellen Sie sicher, dass Sie utf-8 html verwenden.
HTML ist
↗
quelle
Es gibt auch
U+1F5D7 OVERLAP
: 🗗, hinzugefügt in Unicode 7.0 (Juni 2014).Sein Kommentar lautet "überlappende versetzte Fenster".
HTML-Entität:
🗗
( fileformat.info )
quelle
Der nächste, den ich finden konnte, war NORTH WEST ARROW TO CORNER ⇱ und SOUTH EAST ARROW TO CORNER ⇲ - aber wer auch immer diese Symbole erstellt hat, hat NORTH EAST ARROW TO CORNER nicht gemacht
http://www.fileformat.info/info/unicode/category/So/list.htm
quelle
Versuchen Sie | ͟↗̱ |:
Und für die Kompatibilität mit Arial
quelle
Die folgende Option wurde nicht gesehen.
Es ist nur CSS und endet so:
Siehe hier: https://codepen.io/Bets/pen/KGBqqb (das folgende Run-Snippet wird nicht richtig angezeigt)
Bearbeiten: Eine weitere Option wurde hinzugefügt, für die nach dem Link kein weiteres Element erforderlich ist.
.newWindow { display:inline-block; margin-left:5px; position: relative; border: 1px solid; width: 8px; height: 8px; } .newWindow:after { position: absolute; top:-8px; right:-2px; font-size:0.8em; content:"\1f855"; } .newWindow:before { position: absolute; top: -3px; right: -3px; content: " "; border: 4px solid white; } a[target="_blank"] { position: relative; } a[target="_blank"]:after { position: absolute; top: 3px; right: -15px; content: "\1f855"; font-size: 13px; color: black; line-height: 3px; height: 5px; width: 5px; border-right: 2px solid white; border-top: 2px solid white; } a[target="_blank"]:before { position: absolute; top: 4px; right: -15px; content: " "; border: 1px solid black; width: 8px; height: 8px; }
<a href="#">Link followed by span</a><span class="newWindow"></span> <br/> <a href="#" target="_blank">Just link</a>
quelle
a[target="_blank"]::after
. Ihre Lösung erfordert, dass das div für jeden Link, den Sie benötigen, in das HTML aufgenommen wird. Andere Lösungen erfordern keine Änderungen am HTML. Das Symbol wird nur Links hinzugefügt, für die das Zielattribut angegeben ist.Vier nützliche Symbole: ⧉ ❐ ⍈ ⎘
quelle
In meinem WordPress-Blog musste ich auf mehrere Websites verlinken, die anscheinend den Zurück-Button deaktivieren (Facebook- und Google Translate-Ergebnisse). Für diese Links habe ich sie so eingestellt, dass sie ein neues Fenster öffnen. Ich habe kleine "neue Fenster" -Symbole gesammelt, aber sie unterbrechen immer den Zeilenabstand (vielleicht ist es eine WordPress-Sache; es gibt keinen zusätzlichen Platz um die Symbole), also habe ich mich für einen Titel = "" entschieden, der besagt, dass "Link neues Fenster öffnet" "und ein Textsymbol [+] innerhalb des Links am Ende des Linktextes, getrennt durch ein Leerzeichen.
quelle
Ich weiß, dass ich zu spät zur Party komme, aber FWIW hier ist meine Lösung ¯ \ _ (ツ) _ / ¯,
HTML:
<a href="#" target="_blank">Your link</a>
jQuery:
Wenn Sie eine Vanilla JS-Version davon kennen, lassen Sie es uns bitte wissen. Ich würde sie gerne hier hinzufügen (ich bin kein JS-Entwickler 😊).
$("a[target='_blank']").attr({title:"Link opens in a new tab"}).addClass("new-tab");
CSS:
Demo:
Hier ist ein Stift: https://codepen.io/anon/pen/MBBXjP (dieser Link sollte beispielsweise in einem neuen Fenster geöffnet werden, lol).
Seit Jahren ist diese Technik für mich sehr nützlich, weil:
title
jedes Mal manuell ein Attribut hinzufügen , wenn ich einen Link erstelle, der in einer neuen Registerkarte geöffnet wird.target="_blank"
und fertig.Ich hätte dieses Symbol gerne verwenden können
🗗
. Das Problem ist, dass es auf iOS-Geräten nicht unterstützt wird und ich denke auch, dass macOS.quelle
Heutzutage können Sie die Symbole von Font Awesome 5 aus dem Cheatsheet verwenden - solide Symbole :
Das kommt dem ausgewählten Symbol nahe.
Beim Betrachten von solid.css habe ich festgestellt, dass der Name der Schriftart "Font Awesome 5 Free" lautet:
Oder falls Sie Font Awesome CSS nicht verwenden und nur auf die Schriftart abzielen möchten:
quelle
Wie wäre es mit so etwas wie dem angehängten Bild (das jeder verwenden oder bearbeiten kann)?
1 :
Ich denke darüber nach, dies rechts von vorhandenen Einzelschaltflächen hinzuzufügen, damit diese zu einer horizontalen Schaltflächengruppe werden, in der Benutzer auf den Link klicken und ihn in einem neuen Fenster öffnen können.
quelle