web-dev-qa-db-ja.com

新しいウィンドウアイコン（Webアクセシビリティ用）

リンクが新しいブラウザウィンドウを開くことを示すデフォルト、標準、推奨、または既知のアイコンはありますか？

これはWebアクセシビリティの理由によるものです。それとも基本的にすべての人にとって無料ですか？

（スクリーンリーダーを使用して）それらを最大限に活用する人は、画像がどのように見えるかさえ気にせず、代替テキストにもっと興味を持ちます。

これに行くことにしました： ![new window icon][1].

誰かがより広く採用されているものを提案できない限り、

accessibility
53
Lee Englestone

確立された標準アイコンのようなものはありません。

たとえば、選択したアイコンは、外部のWebサイト（ウィキペディアに属さない）を指すリンクをマークするためにウィキペディアで使用されるアイコンに似ています。ただし、Webサイト全体で使用して、独自のページ内で規則を確立できます。そのアイコンでマークされたすべてのリンクは新しいページに開かなければならず、マークされていないすべてのリンクは同じページで開く必要があります。安定したユーザーベースがあれば、アクセシビリティを改善できます。ユーザーベースは慣習に慣れる機会があります。サイトの訪問者が1回限りの訪問者である場合、視覚的な混乱を追加するだけです。

10
Palantir

多くのUnicode文字については、次のフォントを使用する必要があります（少なくともWindowsの場合、テストできる場合はLinuxとMacについてコメントしてください）：

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

また、CSSセレクターを適用して、target属性を次のように使用できます。

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

ブラウザはaセレクターとa:link/a:visitedだから、それを念頭に置いて間違いなくテストしてください。

Unicode 'Two Joined Squares'文字：

⧉

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

Two Joined Squares

[〜＃〜] css [〜＃〜]

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

サポート

Mac OS X、Yosemite：2フォント、Apple SymbolおよびSTIXGeneral

Unicode '右上の四分円の白い四角'文字：

◳

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

White Square with Upper Right Quadrant

[〜＃〜] css [〜＃〜]

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

サポート

Mac OS X、Yosemite：3フォント、Apple Symbol、STIXGeneral、Menlo。

Unicode '右上のドロップシャドウ付きの白い四角'文字：

❐

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

Upper Right Drop-Shadowed White Square

[〜＃〜] css [〜＃〜]

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

サポート

Mac OS X 10.10 Yosemiteには3つのフォントがあります：Arial Unicode MS、MenloおよびZapf Dingbats。

37
John

私はこのパーティーに遅れていますが、 CodePenで見つけたものを見てください ！

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>
29
Laryx Decidua

私はこのようなものに行きます： opens in a new window

他の人が言及したように、選択したアイコンは、外部サイトへのリンクを表すためにウィキペディアや他のサイトで広く使用されています。しかし、これは個人的な好みであり、ウェブの標準ではありません。

25
Ben

Unicode 7.0（2014年6月）に追加されたU+1F5D7 OVERLAP：????もあります。

コメントは「オーバーラップオフセットウィンドウ」です。

HTMLエンティティ：&#x1F5D7;

（ fileformat.info ）

16
Robert K. Bell

Open-in-new-windowのこのUnicodeシンボルが好きです

↗️または↗

北東矢印 utf-8 htmlを使用していることを確認してください。

Htmlは&#x2197;

15
TrophyGeek

私が見つけることができた最も近いものは、角から北への矢印⇱と角から南への矢印wasでしたが、これらのアイコンを作成した人は、角から北への矢印をしませんでした

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

11
chovy

試す| ͟↗̱ |：

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

そして、Arialとの互換性のために

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

3つの便利な記号：❐⍈⎘

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

次のオプションは見ていません。
それはちょうどcssで、このようになります： open in new window icon

こちらをご覧ください： https://codepen.io/Bets/pen/KGBqqb （以下の実行スニペットは正しく表示されません）

編集：リンク後に別の要素を必要としない別のオプションを追加しました。

   

 .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>
3
bets

私のWordPressブログでは、明らかに戻るボタンを無効にする複数のサイト（FacebookおよびGoogle翻訳の結果）にリンクする必要がありました。これらのリンクについては、新しいウィンドウを開くように設定しました。 「新しいウィンドウ」アイコンを少し集めましたが、それらは常に行間を中断します（たぶんWordPress事;アイコンの周りに余分なスペースはありません）。したがって、私はtitle = " 「リンクは新しいウィンドウを開きます」とリンク内のテキストアイコン[+]をリンクテキストの最後にスペースで区切って表示します。

2
Pete Hummers

私はパーティーに遅れていることは知っていますが、FWIWは私の解決策です¯\ _（ツ）_ /¯、

HTML：

_<a href="#" target="_blank">Your link</a>_

jQuery：

このバニラJSバージョンを知っている場合は、お知らせください、ここに追加できてうれしいです（私はJS開発者ではありませんか????）

$("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);
}
_

デモ：

ここにペンがあります： https://codepen.io/anon/pen/MBBXjP （このリンク、たとえば、新しいウィンドウで開く必要があります、笑）。

長年、この手法は私にとって非常に有用でした。

  • 新しいタブで開くリンクを作成するたびにtitle属性を手動で追加する必要はありません。
  • 新しいウィンドウアイコンを追加する必要はありません。
  • JavaScriptとCSSが面倒な作業を行います。必要なのは_target="_blank"_を追加するだけです。
  • HTMLにアクセスできなくても、Webサイト/ Webアプリのアクセシビリティを強化する必要がある場合は、この方法を使用できます。
  • この方法は、インラインレベル要素とブロックレベル要素の両方に適しています。

このアイコン_????_を使用できるようになりたいと思っていましたが、問題はiOSデバイスではサポートされていないことであり、macOSでも同様です。

2
Ricardo Zea

添付画像（誰でも自由に使用または編集できます）のようなものはどうですか？enter image description here

1 ： enter image description here

これを既存の単一ボタンの右側に追加して、ユーザーがリンクをクリックして新しいウィンドウで開くオプションを提供する水平ボタングループになるように考えています。

0
Mark Gavagan