New Window Icon (for web accessibility)

问题:

Is there a default, standard, recommended or well known icon to denote that a link will open a new browser window?

This is for web accessibility reasons. Or is it basically a free for all?

I realize that those that will get the most use out of them (using screen readers) will not even care what the image looks like, and be more interested in the alt text.

Decided to go for this one :

Unless someone can suggest a more widely adopted one?

回答1:

There's no such a thing as an established standard icon.

For example, the icon you chose is similar to the one used in wikipedia to mark links pointing to external websites (not belonging to wikipedia). You may however use it across your websites, and thus establish a convention within your own pages. Just make sure you do so consistently: ALL links marked with that icon MUST open to a new page, and ALL links not marked with it should open in the same page. You may improve accessibility, provided that you have a stable user base, who will have the chance to get used to your conventions. If your site is visited mostly by one-time visitors, then you'd be just adding visual clutter.

回答2:

For many Unicode characters you'll need to use the following font (at least for Windows, please comment for Linux and Mac if you're able to test):

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

Also you can apply CSS selectors to use the target attribute as so:

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

Keep in mind that browsers are funny about the behavior of the a selector and a:link / a:visited so definitely test with that in mind.

---

Unicode 'Two Joined Squares' character:

⧉

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

CSS

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

Support

Mac OS X, Yosemite: 2 fonts, Apple Symbol and STIXGeneral

---

Unicode 'White Square with Upper Right Quadrant' character:

◳

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

CSS

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

Support

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

---

Unicode 'Upper Right Drop-Shadowed White Square' character:

❐

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

CSS

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

Support

Mac OS X 10.10 Yosemite has three fonts: Arial Unicode MS, Menlo and Zapf Dingbats.

回答3:

I am coming late to this party, but look what I have found at 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>

回答4:

I'd go with something like this:

The icon you have chosen, as others have mentioned, is widely used by wikipedia and other sites to represent links to external sites. But this is more of a personal preference and not a web standard.

回答5:

There's also U+1F5D7 OVERLAP: