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?

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.

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>

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

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

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

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.

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.

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 ↗

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 )

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

Versuchen Sie | ͟↗̱ |:

|͟↗̱|

Und für die Kompatibilität mit Arial

∣͟↗̱∣

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>

Vier nützliche Symbole: ⧉ ❐ ⍈ ⎘

⧉ ⧉ ⧉　　U+29C9 TWO JOINED SQUARES
❐ ❐ ❐　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ ⍈ ⍈　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ ⎘ ⎘　　U+2398 NEXT PAGE

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.

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.

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:

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;
}

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.