新窗口图标(用于Web辅助功能)

Question

是否有默认,标准,推荐或众所周知的图标表示链接将打开一个新的浏览器窗口？

这是出于Web访问的原因.或者它基本上是免费的吗？

我意识到那些能够最大限度地利用它们的东西(使用屏幕阅读器)甚至不关心图像的样子,并且对alt文本更感兴趣.

决定去这个:

除非一些人可以建议更广泛采用的一个？

Answer 1

对于许多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

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

CSS

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

支持

Mac OS X中,优胜美地:3种字体Apple Symbol,STIXGeneral,Menlo.

Unicode' 右上角阴影白色方块 '字符:

❐

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

CSS

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

支持

Mac OS X的10.10约塞米蒂有三种字体:Arial Unicode MS,Menlo和Zapf Dingbats.

Answer 2

我很晚才参加这个派对,但看看我在CodePen上发现了什么!

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>

Answer 3

我会用这样的东西:

正如其他人所提到的,您选择的图标被维基百科和其他网站广泛用于表示外部网站的链接.但这更多的是个人偏好,而不是网络标准.

Answer 4

还有U+1F5D7 OVERLAP:,在Unicode 7.0(2014年6月)中添加.

它的评论是"重叠偏移窗口".

HTML实体: 🗗

(fileformat.info)

Answer 5

我喜欢Open-in-new-window的这个unicode符号

↗️或↗

North East Arrow请确保您使用的是utf-8 html.

Html是 ↗

Answer 6

没有既定标准图标这样的东西.

例如,您选择的图标类似于维基百科中用于标记指向外部网站(不属于维基百科)的链接的图标.但是,您可以在您的网站上使用它,从而在您自己的页面中建立约定.只需确保一致地执行此操作:标有该图标的所有链接必须打开到新页面,并且未标记该链接的所有链接应在同一页面中打开.只要您拥有稳定的用户群,谁就有机会习惯您的约定,您可以改善可访问性.如果您的网站主要是由一次性访问者访问,那么您只是添加视觉混乱.

Answer 7

我能找到的最近的是西北角到角落⇱和东南角到角落⇲ - 但是谁创造了这些图标并没有做到东向箭头到角落

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

Answer 8

四个有用的符号： ? ? ? ?

? ⧉ ⧉??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

Answer 9

没有看到以下选项。
它只是 css并且最终是这样的：

见这里：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>

Answer 10

I know I\'m late to the party, but FWIW here\'s my solution \xc2\xaf\\(\xe3\x83\x84)/\xc2\xaf,

\n

HTML:

\n

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

\n

JavaScript:

\n

Vanila JS

\n

var tlinks = document.querySelectorAll("a[target=_blank]");\nfor (var x = 0; x < tlinks.length; x++) {\n    tlinks[x].title = "Opens in new tab/window";\n    var currentClass = tlinks[x].getAttribute("class");\n    if (currentClass == null) currentClass = "";\n    tlinks[x].setAttribute("class", currentClass + " new-tab");\n}\n

\n

Or

\n

jQuery

\n

$("a[target=\'_blank\']").attr({title:"Link opens in a new tab"}).addClass("new-tab");\n

\n

CSS:

\n

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

\n

Demo:

\n

这是一支笔：https: //codepen.io/ricardozea/pen/dyVXXVr（例如，此链接应该在新窗口中打开，哈哈）。

\n

这个图标怎么样？

\n

我希望能够使用这个图标，问题是 iOS 设备不支持它，我认为 macOS 也不支持。

\n\n

多年来，这项技术对我来说非常有用，因为：

\n

\n
• 我不必手动添加title每次创建在新选项卡中打开的链接时，
\n
• 我不必添加新的窗口图标。
\n
• JavaScript 和 CSS 完成了繁重的工作，我所需要做的就是添加target="_blank"，仅此而已。
\n
• 如果我无法访问 HTML，但仍然需要/想要增强界面的可访问性，我可以使用此方法来实现。
\n
• 此方法对于内联元素和块级元素都非常有效。
\n

\n

Answer 11

试试 |͟↗̱|：

|͟↗̱|

并与 Arial 兼容

∣͟↗̱∣

Answer 12

好的，我迟到了，但这是我对所有其他人的答案提出的改进意见：

<链接模型>

我在这里找到了超级整洁的图标：https:
//icons8.com/icon/43738/external-link在此处缩小/优化了 SVG：https : //petercollingridge.appspot.com/svg-optimiser
并将生成的 SVG 的 base64 嵌入到指定ems 中所有大小的 CSS 样式规则：

a[target="_blank"]::after {
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.05em 0 0.1em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: text-bottom;
}

An <a href="" target="_blank">external link</a> is super pretty! <br />
<span style="font-size: 2em;">In <a href="" target="_blank">all</a> sizes!</span><br />
<span style="font-size: 3em;">Even <a href="" target="_blank">super large</a> ones!</span><br />
<span style="font-size: 0.5em;">And in <a href="" target="_blank">super tiny ones</a> too!</span><br />

它对我来说绝对是惊人的！
我可能永远不会回到可能存在的任何解决方案。