it-swarm.com.de

Neues Fenstersymbol (für Webzugänglichkeit)

Gibt es ein Standard-, Standard-, empfohlenes oder allgemein bekanntes Symbol, das darauf hinweist, dass ein Link ein neues Browserfenster öffnet?

Dies ist aus Gründen des Webzugriffs. Oder ist es grundsätzlich kostenlos für alle? 

Ich stelle fest, dass diejenigen, die am meisten davon Gebrauch machen (mithilfe von Bildschirmlesegeräten), sich nicht einmal darum kümmern werden, wie das Bild aussieht, und sich mehr für den Alt-Text interessieren.

Entschied sich für diese zu gehen: ![new window icon][1].

Es sei denn, jemand kann einen weiter verbreiteten Vorschlag vorschlagen.

45
Lee Englestone

Es gibt kein etabliertes Standard-Symbol.

Das von Ihnen gewählte Symbol ähnelt beispielsweise dem Symbol, das in Wikipedia verwendet wird, um Links zu externen Websites zu markieren (die nicht zu Wikipedia gehören). Sie können es jedoch auf Ihren Websites verwenden und somit eine Konvention auf Ihren eigenen Seiten einrichten. Stellen Sie einfach sicher, dass Sie dies konsequent tun: ALLE Links, die mit diesem Symbol gekennzeichnet sind, MÜSSEN auf einer neuen Seite geöffnet werden, und ALLE Links, die nicht mit diesem Symbol gekennzeichnet sind, sollten auf derselben Seite geöffnet werden. Sie können die Zugänglichkeit verbessern, vorausgesetzt, Sie verfügen über eine stabile Benutzerbasis, die sich an Ihre Konventionen gewöhnen kann. Wenn Ihre Website hauptsächlich von einmaligen Besuchern besucht wird, fügen Sie einfach visuelle Störungen hinzu.

10
Palantir

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 Attribut target so zu verwenden:

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

Denken Sie daran, dass Browser über das Verhalten des a-Selektors und a:linka:visited lustig sind. Testen Sie dies daher unbedingt.


Unicode-Zeichen "_/Zwei verbundene Quadrate":

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

 Two Joined Squares

CSS

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

Unterstützung

Mac OS X, Yosemite: 2 Schriftarten, Apple Symbol und STIXGeneral


Unicode-Zeichen "weißes Quadrat mit rechtem oberen Quadranten":

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

 White Square with Upper Right Quadrant

CSS

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

Unterstützung

Mac OS X, Yosemite: 3 Schriftarten, Apple Symbol, STIXGeneral, Menlo.


Unicode-Zeichen "Upper Right Drop-Shadowed White Square":

http://www.fileformat.info/info/unicode/char/2750/index.htm

 Upper Right Drop-Shadowed White Square

CSS

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

Unterstützung

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

32
John

Ich würde mit so etwas gehen: opens in a new window

Das von Ihnen gewählte Symbol wird 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.

25
Ben

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

Sein Kommentar ist "überlappende Offsetfenster".

HTML-Entität: 🗗


( fileformat.info )

14
Robert K. Bell

Am nächsten konnte ich NORTH WEST ARROW TO CORNER ⇱ und SOUTHAST ARROW TO CORNER ⇲ finden - aber wer diese Icons erstellt hat, hat NORTH EAST ARROW TO CORNER nicht getan

http://www.fileformat.info/info/unicode/category/So/list.htm

11
chovy

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 ↗

11
TrophyGeek

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

 enter image description here

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>

11
Laryx Decidua

Versuchen Sie | ͟↗̱ |:

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

Und für die Kompatibilität mit Arial

&#8739;&#863;&nearr;&#817;&#8739;
4
Peter Rader

In meinem WordPress-Blog musste ich auf mehrere Websites verweisen, bei denen die Schaltfläche "Zurück" deaktiviert ist (Ergebnisse von Facebook und Google Translate). Für diese Links habe ich ein neues Fenster geöffnet. Ich habe ein paar "neue Fenster" -Symbole gesammelt, aber sie unterbrechen immer den Zeilenabstand (vielleicht handelt es sich um eine WordPress-Sache; es gibt keinen zusätzlichen Platz um die Symbole). Ich entschied mich also für einen title = "", der besagt, "Link öffnet neues Fenster "und ein Textsymbol [+] innerhalb des Links am Ende des Linktextes, getrennt durch ein Leerzeichen.

2
Pete Hummers

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 mich freuen, sie hier hinzuzufü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 zum Beispiel in einem neuen Fenster geöffnet werden, lol).


Seit Jahren ist diese Technik für mich sehr nützlich, weil:

  • Ich muss ein title -Attribut nicht jedes Mal manuell hinzufügen, wenn ich einen Link erstelle, der in einem neuen Tab 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 das Hinzufügen von target="_blank" Und das wars.
  • Wenn ich keinen Zugriff auf HTML habe, aber dennoch die Barrierefreiheit einer Website/Webapp verbessern 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 verwendet ????, Das Problem ist, dass es auf iOS-Geräten nicht unterstützt wird und ich denke, auch macOS.

2
Ricardo Zea

Drei nützliche Symbole: ❐⍈⎘

❐ &#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
2
Julio C. P.

Habe die folgende Option nicht gesehen.
Es ist nur css und endet wie folgt:  open in new window icon

Siehe hier: https://codepen.io/Bets/pen/KGBqqb (das unten abgebildete Run-Snippet wird nicht richtig angezeigt)

.newWindow {
  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;
}
<div class="newWindow"></div>

1
bets

Wie wäre es mit so etwas wie dem angehängten Bild (das jedermann frei benutzen oder bearbeiten kann)?enter image description here

1enter image description here

Ich denke darüber nach, diese Option rechts neben den vorhandenen einzelnen Schaltflächen hinzuzufügen, sodass sie zu einer horizontalen Schaltflächengruppe werden, die Benutzern die Möglichkeit gibt, auf den Link zu klicken und ihn in einem neuen Fenster zu öffnen.

0
Mark Gavagan