Skip to the content

Error! Your browser is IE 6.0, released in 2001. It is not secure and lacks today's features.
Upgrade to a modern browser. You'll be a happier and safer surfer.

Client login for Goldman Design Close

Previous Post Arrow Glyphs, What’s Best for Semantics and Screen Readers? ( « » « » ) Next Post

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 ›

10 Comments

  1. Josh Stodola says:

    Hey, do you know of the numeric equivalent of the arrows? You know..


    ← →

  2. 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)

  3. Josh Stodola says:

    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.

  4. Josh Stodola says:

    Well dammit

    For example, instead of using ← use & # 9999 ;

  5. 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.

  6. Josh Stodola says:

    Andlar?! Crazy…

    Thanks alot!

  7. Josh Stodola says:

    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?

  8. 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.

  9. Anna Sokol says:

    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 ◄ .

  10. 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

Leave a Comment