Neues Fenstersymbol (für Webzugriff)

73

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: ! [neues Fenstersymbol] [1].

Es sei denn, jemand kann eine weiter verbreitete vorschlagen?

Lee Englestone
quelle
2
Gibt es ein Unicode-Zeichen für dieses Symbol? Oder soll ich ein Bild verwenden?
Collimarco

Antworten:

12

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.

Palantir
quelle
2
Ja, danke, das bestätigt meine Vermutungen. Ich denke, das einzige, was das Internet nicht ist, ist "konsistent"
Lee Englestone
3
Für alle anderen, die nach einer gemeinfreien Kopie des Wikipedia-Symbols für externe Links suchen, finden Sie diese hier: commons.wikimedia.org/wiki/File:External.svg (Möglicherweise müssen Sie sie selbst rastern - aus irgendeinem Grund ist die vorgerasterte Version GPL-lizenziert)
Tobias Cohen
2
@TobiasCohen Wenn die Vektorgrafiken GPL-fähig sind, wird die Rastergrafiken auch GPL-zertifiziert, da es sich um eine abgeleitete Arbeit handelt. Laut diesem Link ist das Symbol jedoch gemeinfrei, sodass es sowohl in Vektor- als auch in Rasterform frei verwendet werden kann.
Mark E. Haase
Ich habe Bens Ikone mit Johns CSS kombiniert und am Ende eine schöne Lösung gefunden :)
RozzA
2
Tatsächlich hat sich jemand die Mühe gemacht, einen detaillierten Vorschlag für die Aufnahme dieses Symbols in Unicode zu schreiben : europatastatur.de/material/Unicode_Proposal_External_Link.pdf . Es ist 10 Jahre her ... und es ist immer noch nicht da.
Jealie
70

Ich komme zu spät zu dieser Party, aber schau, was ich bei CodePen gefunden habe !

Geben Sie hier die Bildbeschreibung ein

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>

Kehlkopf Decidua
quelle
@wOxxOm: Danke für die Bearbeitung und das Code-Snippet. Interessanterweise a[target="_blank"]:afterfunktioniert 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 Dank
Laryx Decidua
1
Alle Browser unterstützen die "falsche" Einzelpunkt-Syntax AFAIK. Wahrscheinlich, weil zu viele Menschen die Unterscheidung zwischen einem Pseudoelement und einer Pseudoklasse nicht kennen oder sich nicht darum kümmern.
wOxxOm
2
Dies ist definitiv besser als das Einfügen einer ganzen benutzerdefinierten Schriftart, nur um ein Link-Out-Symbol hinzuzufügen = p
IncredibleHat
Diese Lösung funktioniert gut. Obwohl ich aufgrund eines dunklen Hintergrunds das Bild bearbeiten und einen Online- Konverter von meinem PNG-Bild zum Base64-String finden musste . Das Ändern der Bildgröße erfordert eine weitere Runde um die Erstellungs-Konvertierungs-Spur, hat jedoch display:inline-block; vertical-align:text-top;meine Anzeigeprobleme behoben. Vielen Dank.
WEBjuju
1
Ziemlich ordentlich, aber es skaliert nicht mit der Schriftart. :(
Greg Pettit
44

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):

a:link {font-family: 'Segoe UI Symbol' !important;}

Sie können auch CSS-Selektoren anwenden, um das targetAttribut folgendermaßen zu verwenden :

a[target='blank']
a[target]

Denken Sie daran, dass Browser über das Verhalten des aSelektors lustig sind, und a:link/ oder a:visitedtesten Sie dies auf jeden Fall.


Unicode -Charakter ' Zwei verbundene Quadrate ':

http://www.fileformat.info/info/unicode/char/29c9/index.htm

Zwei verbundene Quadrate

CSS

a[target='_blank']::after {content: '\29C9';}

Unterstützung

Mac OS X, Yosemite: 2 Schriftarten Apple SymbolundSTIXGeneral


Unicode-Zeichen ' Weißes Quadrat mit oberem rechten Quadranten ':

http://www.fileformat.info/info/unicode/char/25F3/index.htm

Weißes Quadrat mit oberem rechten Quadranten

CSS

a[target='_blank']::after {content: '\25F3';}

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

Oberes rechtes weißes Quadrat mit Schlagschatten

CSS

a[target='_blank']::after {content: '\2750';}

Unterstützung

Mac OS X 10.10 Yosemite verfügt über drei Schriftarten: Arial Unicode MS, Menlound Zapf Dingbats.

John
quelle
Ich bezweifle, dass eines dieser Symbole von der Mehrheit der Benutzer als Symbol für einen externen Link erkannt wird.
MrUpsidown
Ich bezweifle, dass eine Kritik, ohne etwas objektiv Besseres anzubieten, der Welt etwas Gutes tun wird.
John
25

Ich würde mit so etwas gehen: öffnet sich in einem neuen Fenster

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.

Ben
quelle
@ www-0av-Com Nicht wählerisch zu sein, aber das altAttribut 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 ein titleAttribut 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/…
Ricardo Zea
Sehr spät, aber ich kann diesen Kommentar nicht ohne Gegenargument stehen lassen. Das altAttribut 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 gut
Stephen P
25

Ich 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 &#x2197;

TrophyGeek
quelle
Gibt es eine einfache Möglichkeit, die Farbe zu ändern?
Erdnüsse
21

Es gibt auch U+1F5D7 OVERLAP: 🗗, hinzugefügt in Unicode 7.0 (Juni 2014).

Sein Kommentar lautet "überlappende versetzte Fenster".

HTML-Entität: &#x1F5D7;


( fileformat.info )

Robert K. Bell
quelle
1
Nicht unterstützt in Mac OS, 2017.
Julian
12

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

chovy
quelle
4
Sie könnten es mit CSS drehen, um nach Nordosten zu gelangen
Brian Tingle
Ich denke nicht, dass dies eine Option war, als sie erstellt wurden, aber ja, für CSS funktioniert es.
Chovy
5

Versuchen Sie | ͟↗̱ |:

|&#863;&nearr;&#817;|

Und für die Kompatibilität mit Arial

&#8739;&#863;&nearr;&#817;&#8739;
Peter Rader
quelle
5

Die folgende Option wurde nicht gesehen.
Es ist nur CSS und endet so:In neuem Fenstersymbol öffnen

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>

Wetten
quelle
schön, aber das Ergebnis, das ich bekomme, wenn ich "Code-Snippet ausführen" drücke, sieht nicht wie dieses Bild aus
cz
Sieht in Ordnung aus, aber das CSS ist zu komplex, um es als Stilmodifikator zu einem Linkstil wie hinzuzufügen 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.
Ehrfurcht
@awe Sie haben Recht, also habe ich eine zweite Option hinzugefügt, die funktioniert, ohne das HTML zu ändern.
Wetten
5

Vier nützliche Symbole: ⧉ ❐ ⍈ ⎘

⧉ &#x29C9; &#10697;  U+29C9 TWO JOINED SQUARES
❐ &#x2750; &#10064;  U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ &#x2348; &#9032;  U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ &#x2398; &#9112;  U+2398 NEXT PAGE
iulius
quelle
2

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.

Pete Hummers
quelle
2

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:

.new-tab:after {
    display: inline-block;
    content: "⇱";
    position: relative;
    top: -5px;
    margin-left: 2px;
    transform: rotate(90deg);
}

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:

  • Ich muss nicht titlejedes Mal manuell ein Attribut hinzufügen , wenn ich einen Link erstelle, der in einer neuen Registerkarte geöffnet wird.
  • Ich muss das neue Fenstersymbol nicht hinzufügen.
  • Das JavaScript und das CSS erledigen das schwere Heben. Alles, was ich tun muss, ist hinzuzufügen target="_blank"und fertig.
  • Wenn ich keinen Zugriff auf HTML habe, aber dennoch die Zugänglichkeit einer Website / Webanwendung verbessern muss / möchte, kann ich dies mit dieser Methode tun.
  • Diese Methode eignet sich sowohl für Inline- als auch für Blockelemente.

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.

Ricardo Zea
quelle
2

Heutzutage können Sie die Symbole von Font Awesome 5 aus dem Cheatsheet verwenden - solide Symbole :

Geben Sie hier die Bildbeschreibung ein

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:

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "Font Awesome 5 Free";
    color: blue;
}

Oder falls Sie Font Awesome CSS nicht verwenden und nur auf die Schriftart abzielen möchten:

@font-face {
    font-family: "FontAwesomeSolid";
    font-weight: bold;
    font-style: normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.ttf") format("truetype");
}

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "FontAwesomeSolid";
    color: blue;
}
Ruard van Elburg
quelle
1

Wie wäre es mit so etwas wie dem angehängten Bild (das jeder verwenden oder bearbeiten kann)?Geben Sie hier die Bildbeschreibung ein

1 :Geben Sie hier die Bildbeschreibung ein

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.

Mark Gavagan
quelle
9
Vielleicht möchten Sie dieses Symbol zuschneiden.
Kirk Woll