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

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

这是出于Web可访问性的原因。 还是基本上所有人都免费?

我意识到,那些能够充分利用它们的用户(使用屏幕阅读器)甚至不会在乎图像的外观,而对替代文本更感兴趣。

决定去这个:![new window icon][1].

除非有人可以提出更广泛采用的建议?

Lee Englestone asked 2019-12-25T13:53:30Z
13个解决方案
39 votes

对于许多Unicode字符,您将需要使用以下字体(至少对于Windows而言,如果可以测试,请对Linux和Mac进行注释):

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

同样,您可以应用CSS选择器来使用Arial Unicode MS属性,如下所示:

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

请记住,浏览器对Arial Unicode MS选择器和Menlo/Zapf Dingbats的行为很有趣,因此请务必在此基础上进行测试。


Unicode“两个连接的正方形”字符:

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

Two Joined Squares

的CSS

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

支持

Mac OS X,优胜美地:2种字体,Arial Unicode MSMenlo


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种字体,Arial Unicode MSMenloZapf Dingbats


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具有三种字体:Arial Unicode MSMenloZapf Dingbats

John answered 2019-12-25T13:55:33Z
34 votes

我参加这个聚会很晚,但是看看我在CodePen中发现了什么!

enter image description here

<a class="external" href="https://example.org" target="_blank">external link</a>
<a class="external" href="https://example.org" target="_blank">external link</a>

Laryx Decidua answered 2019-12-25T13:56:58Z
25 votes

我会选择这样的东西:opens in a new window

正如其他人提到的那样,您选择的图标已被维基百科和其他网站广泛使用,以表示指向外部网站的链接。 但这更多是个人喜好,而不是网络标准。

Ben answered 2019-12-25T13:57:23Z
16 votes

Unicode 7.0(2014年6月)中还添加了U+1F5D7 OVERLAP:🗗。

它的注释是“重叠偏移窗口”。

HTML实体:&#x1F5D7;


(fileformat.info)

Robert K. Bell answered 2019-12-25T13:57:56Z
15 votes

我喜欢这种在新窗口中打开的unicode符号

↗️要么↗

东北箭头确保您使用的是utf-8 html。

HTML是&#x2197;

TrophyGeek answered 2019-12-25T13:58:29Z
11 votes

没有已经建立的标准图标。

例如,您选择的图标类似于Wikipedia中用于标记指向外部网站(不属于Wikipedia)的链接的图标。 但是,您可以在整个网站上使用它,从而在自己的页面内建立约定。 只要确保您始终如一:标记有该图标的所有链接都必须打开到新页面,而未标记该图标的所有链接都应该在同一页面中打开。 如果您拥有稳定的用户基础,并且他们有机会习惯您的约定,则可以改善可访问性。 如果您的网站主要是由一次性访问者访问的,那么您只会增加视觉混乱。

Palantir answered 2019-12-25T13:53:45Z
11 votes

我能找到的最接近的是NORTH ARROW TO CORNER⇱和SOUTH EAST ARROW到CORNER⇲-但是创建这些图标的人都没有做NORTH EAST ARROW TO CORNER

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

chovy answered 2019-12-25T13:58:54Z
4 votes

尝试| ͟↗̱ |:

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

并与Arial兼容

&#8739;&#863;&nearr;&#817;&#8739;
Peter Rader answered 2019-12-25T13:59:19Z
4 votes

三个有用的符号:❐⍈⎘

❐ &#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
Julio C. P. answered 2019-12-25T13:59:39Z
3 votes

尚未看到以下选项。
只是css,最终像这样:open in new window icon

参见此处:[https://codepen.io/Bets/pen/KGBqqb](以下运行片段未正确显示)

编辑:添加了另一个选项,链接后不需要其他元素。

<a href="#">Link followed by span</a><span class="newWindow"></span>
<br/>
<a href="#" target="_blank">Just link</a>
<a href="#">Link followed by span</a><span class="newWindow"></span>
<br/>
<a href="#" target="_blank">Just link</a>

bets answered 2019-12-25T14:01:17Z
2 votes

在我的WordPress博客上,我不得不链接到多个站点,这些站点显然禁用了后退按钮(Facebook和Google Translate结果)。 对于这些链接,我将它们设置为打开新窗口。 我收集了一些“新窗口”图标,但是它们总是打断行距(也许是WordPress的事情;图标周围没有多余的空间),所以我决定使用title =“”表示“链接打开新窗口” ”和链接内的文本图标[+],在链接文本的末尾,以空格分隔。

Pete Hummers answered 2019-12-25T14:01:38Z
2 votes

我知道我参加晚会很晚,但是FWIW这是我的解决方法\ _(ツ)_ /¯,

HTML:

🗗

jQuery的:

如果您知道该版本的原始JS版本,请告诉我们,我很乐意在此处添加它(我不是JS开发人员😊)

🗗

CSS:

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

演示:

这是一支笔:[https://codepen.io/anon/pen/MBBXjP](例如,此链接应在新窗口中打开,大声笑)。


多年来,这种技术对我非常有用,因为:

  • 每次创建在新标签中打开的链接时,我不必手动添加🗗属性。
  • 我不必添加新的窗口图标。
  • JavaScript和CSS可以完成繁重的工作,我要做的就是添加🗗,仅此而已。
  • 如果我没有访问HTML的权限,但仍然需要/想要增强网站/ webapp的可访问性,则可以使用此方法。
  • 此方法对内联和块级元素都适用。

我希望能够使用此图标🗗,但问题是iOS设备不支持该图标,我认为macOS也是如此。

Ricardo Zea answered 2019-12-25T14:03:06Z
0 votes

附加的图片(任何人都可以免费使用或编辑)怎么样?enter image description here

1:enter image description here

我正在考虑将其添加到现有单个按钮的右侧,以便它们成为水平按钮组,使用户可以选择单击链接并在新窗口中打开它。

Mark Gavagan answered 2019-12-25T14:03:35Z
translate from https://stackoverflow.com:/questions/1899772/new-window-icon-for-web-accessibility