Arrow Glyphs, What’s Best for Semantics and Screen Readers? ( « » « » )
It is common these days to you use the » character on web page bread crumb trails and to call attention to certain links on the page. As a designer the » symbol looks much better than the > symbol.
However, if you use these characters in your pages be sure to use the « character for « and the » character for ». Do not use the « for « and » for ». Why? JAWS and other screen readers will read « as “left angle quote” and » as “right angle quote”.
Just to make sure this isn’t confusing, unless you’re specifically wanting to put your content in left and right angle quotes be sure to use these characters:
« for «
» for »
PS. Dreamweaver by default creates the right and left angle quotes when inserting these characters form the INSERT » HTML » SPECIAL CHARACTERS menu.
Updated below with some more. And note, that I can not find the non left/right angle quote version of these characters…
‹ for ‹
› for ›
Hey, do you know of the numeric equivalent of the arrows? You know..
↑
← →
↓
Comment by Josh Stodola — June 1, 2007 @ 9:14 pm
Hi Josh,
Below are the HTML equivalents for the thin HTML arrows and the thicker HTML triangle characters that can be used as arrows in some cases. Sometimes the thick triangle HTML arrows work better to denote drop down fields, etc.. Hope this helps : )
← ←
↑ ↑
→ →
↓ ↓
↔ ↔
↕ ↕
▲ ▲
► ► (will not render correctly in IE6)
▼ ▼
◄ ◄ (will not render correctly in IE6)
Comment by Kevin Goldman — June 2, 2007 @ 7:16 am
Hi Kevin, thanks for the reply. I know the HTML equivalents for the arrows (thats how I got them to show up!!), I was curious as to whether or not these arrows have numerical equivalents for the sake of screen readers.
For example, instead of using ←, use ✏ Do you know if these have numerical equivalents?
As far as the thick arrows - THANKS! I have never seen them before, thats good to know, they could definitely come in handy.
Comment by Josh Stodola — June 4, 2007 @ 11:50 am
Well dammit
For example, instead of using ← use & # 9999 ;
Comment by Josh Stodola — June 4, 2007 @ 11:54 am
Hi Josh,
I’m not aware of numeric equivalents for ←, ↑, etc. I don’t have JAWS or another screen reader installed at the moment, but when I use Mac OSX’s text-to-voice ← is pronounced “andlar” (not ideal!).
My guess is that JAWS would read ← as “left arrow” but I have no way to confirm this at the moment.
Comment by Kevin Goldman — June 4, 2007 @ 12:42 pm
Andlar?! Crazy…
Thanks alot!
Comment by Josh Stodola — June 5, 2007 @ 8:11 am
Hey I happened to be lookign at this on my server machine on IE6, and & #9658; and & #9668; show up as little boxes…
FYI i guess?
Comment by Josh Stodola — June 5, 2007 @ 4:17 pm
Thanks for pointing this out Josh. Sure enough IE6 doesn’t render & #9658; and & #9668; (left and right arrow triangles) but the up down arrows seem to work (luckily I’ve only used the up/down arrows to indicate drop down menus without using graphics). Firefox and IE7 correctly render all 4 triangle arrows. I’ve updated the comment above to show this.
Comment by Kevin Goldman — June 5, 2007 @ 4:46 pm
In order to render correctly the “right triangle” in IE 6 use ▶ instead of ► . Also to render correctly the “left triangle” in IE 6 use &x25C0; instead of ◄ .
Comment by Anna Sokol — July 18, 2007 @ 1:18 pm
Hi Anna,
Thank you for the info.
I can not get the triangles you recommended to render in IE6 (they appear as empty boxes or not at all). The “right triangle” works in IE7 but not IE6. The left triangle does not work in IE6 or IE7.
Below are sample pages that can be viewed in IE6 and IE7 with two different encodings:
Let me know if I’m getting the codes wrong. It’d be great to know if the triangles are somehow feasible in IE6.
- Kevin
Comment by Kevin Goldman — July 18, 2007 @ 1:37 pm