The Sound of the Accessible Title Text Separator

There has been a lot of articles on how a page title should be constructed. Numerous articles have debated the proper separation character and the order of items but so far I have seen none actually listening to what they sound like. Inspired by the article Document titles and title separators by Roger Johansson I decided to listen to some JAWS output of some commonly used separator characters. Clips are provided for your listening pleasure (or displeasure if you like).

Several other articles have proved insight into the proper format of the page title tag. Thus, we won’t go into the details about the format here but accept some “best practices” to take into consideration when constructing the title tag (for references see the end of this article):

  1. The separator character should be distinct so that users understand that it is a separator. (I.e. it should not appear as part of text items in the title).
  2. If the title contains the name of the site, the name of the site should be placed at the end of the title. This makes sure that multiple bookmarks from the same site are easy to browse through in the bookmarks folder and listeners to your page get the most important information first.
  3. Use a favicon to help sighted visitors group multiple bookmarks from the same site in their browser.

To help you select an accessible title tag separator I have created a table of commonly used separator characters below and recorded the ouput from JAWS:

Character JAWS output
| vertical bar
: colon
> greater
< less
- dash
» right double angle bracket
em dash
~ tilde
question or silence
bullet
· dot
question or silence
§ section

Observations

  • As you can hear, the use of the right double angle bracket character (») forces the listener to endure a lot of garbage. Therefore it is best avoided.
  • The sound of “special” unicode characters such as → (→) and ★ (★) depend on the setup of the listener’s computer. If the browser is unable to decode the character it is likely that the output will be a questionmark which in turn will be read as question (notice the intonation). If no preceding space character exists the entire sentence will be pronounced as a question which may alter the meaning of your text. If the characters are decoded correctly they seem to fall outside the scope of readable Jaws characters and end up as a short pause between words.
  • Repeating characters will repeat the sound in JAWS. A worst case scenario would be the use of multiple »’s.
  • Almost all browsers add the browser name (e.g. ” – Microsoft Internet Explorer”) at the end of the title. This text will also be read by JAWS. Most JAWS users know how to skip that part when they hear the “dash Microsoft…”, but this could be an incentive to refrain from using the dash character as a separator in your title tag.

Picking the winner

Prime candidates to use as separators are the vertical bar (|), the dot (·) and the dash (-). My experience is that screen reader users understand that the vertical bar delimits items. The dash is OK even though it may appear as part of your title text. Usually the context of your text provides enough information for a listener whether to treat the dash as a separator or not.

Other characters can also be used, but pick one which sound is unlikely to appear as part of the text in the title. E.g. do not use the bullet character if you write about guns and ammunition. (This would be an argument against the “vertical bar” if you are into designing cool drinking establishments).

Regardless of the character you pick, it is important to surround it with whitespace. This will aid both sighted visitors and listeners as it will distinguish the character from the title text.

I hope this article has provided you with some inspiration to create more accessible document titles for your websites/applications. Obviously, it would be best if screen reader manufacturers could create software that was compliant with the aural features of CSS in which case styling of web content could move to an entirely different level.

If you miss your favorite sepratator character above, create a comment and I will add it.

References

  1. Jacob Nielsen, Microcontent: How to Write Headlines, Page Titles, and Subject Lines
  2. Adrian Holovaty, Page titles on news article pages
  3. Roger Johansson, Document titles and title separators
  4. Jonathan Snook, The Usable Page Title

Comments

  1. Asparagirl says at 2004-11-08 21:11:

    Cool. Thanks!

  2. Dave Marks says at 2004-11-08 23:11:

    Was thinking about this the other day after reading:
    http://www.themaninblue.com/writ...

    Would be interesting to see how § sounds

  3. Dave Child says at 2004-11-09 11:11:

    An excellent list there, thanks. I’m using the right double angle brackets at the moment but it never crossed my mind to check how that would sound. I think I’ll be changing. It’s not clear from the list though what would be the better of the selection.

    I’m inclined to look at changing to more sentence-based titles – proper text, without seperators or breadcrumb style category hierarchy stuff…

  4. Pete says at 2004-11-09 13:11:

    Dave, thank you for your input. I have updated the article with some basic recommendations which I hope will aid you in your selection.

  5. James Edwards says at 2004-11-09 22:11:

    I’ve been thinking along these lines for a while now … I’d come to the conclusion that signs like LT and RAQUO should *never* be used for anything other than what they really mean. But it’s tricky when it comes to things like arrows in dropdown menus – if you use an image then it has to have alt text, and you’re back to the same problem.

    Specifically with regard to dropdown menus, I wrote a short article about it, that further expands on the problems screenreaders have in interpreting designed heirarchies: http://www.udm4.com/manual/depth...

  6. Ethan says at 2004-11-10 02:11:

    Stellar write-up, thanks. I’m curious, though: what’s the section sign (&sect;) sound like?

  7. Pete says at 2004-11-14 21:11:

    Added the section (§) character.

  8. Martin Stehle says at 2004-11-16 12:11:

    Hello Dave, a colon “:” is also a good seperator in page titles. It has the advantage that it requires no white space at the left side, so I can safe characters. It has the disadvantage that it is sometimes used in the title as part of the text.

    There are variants of the dot sign: just the peridod “.”, the middle dot (numbered entity #183 or named entitiy middot), the dot operator (#8901 or sdot) and the bullet (#8226 or bull). Did you test these variants?

  9. Dan says at 2004-11-24 00:11:

    Whenever I follow any links from this website (Using IE6 SP2) the page title “Standards-schmandards” remains, despite a refresh. Links opened in new windows do not do this.

  10. Jina says at 2004-11-24 01:11:

    wow. I never knew that a screen reader read out the &raquo; in that way. I bet it would be annoying, as I use that symbol all over my site!!!

    Time to pick a different symbol…

  11. Pete says at 2004-11-24 08:11:

    Dan, does that happen for all links or just the sound clip links? You may have your browser configured to play sound clips “inline” in which case the page will not refresh. I am running IE 6 SP2 myself without any problems.

  12. Mel Pedley says at 2004-11-24 15:11:

    I’m confused at to why you prefer the vertical bar (|) over the colon (:).

    Not only is the latter shorter when read out using a screen reader, it’s also a standard convention used in any English writing to start a list etc. The guideline for the use of a colon in English grammer is:

    “To introduce a list, or words, phrases, and clauses that explain, enlarge upon, or summarise what has gone before”

    That seems to describe it’s use in the title element pretty accurately when you’re doing something like:

    My Site : Links Page

    In essence, you’re describing a conceptualised list where the page Links is a sub-node of My Site.

    In this particular case, I’d strongly favour using the colon as you’re making use of a pre-existing convention rather than asking your users to learn another, new, convention.

  13. Pete says at 2004-11-24 16:11:

    Mel, good point. The colon is fine for separating items but share the same problem as the dash in that it may be used as part of the text in one of the node descriptions.

    Using the colon as a separator for sighted users is fine because it is possible to see if the colon is immediately following a word (part of the node) or surrounded by whitespace (acting as a separator).

    Ideally the separator should not appear as part of the node description (it does in my own article here). That is why I prefer the vertical bar over the colon. Please note that for a screen reader user “colon” and “:” are indistinguishable.

    If you are confident that your page titles are unlikely to contain a colon I suppose it is fine.

  14. Yvette Hoitink says at 2004-11-24 21:11:

    I use / to indicate the hierarchy in titles because many users are familiar with the use of / in hierarchical file systems. Is that pronounced as “slash” in Jaws?

  15. Serge K. Keller says at 2004-12-01 13:12:

    Yes, I’m curious about the slash (/) too. And what about the interpunct? (·)

  16. Pete says at 2004-12-01 23:12:

    Serge, the slash is pronounced “slash” and the interpunct (available in the table above) is pronounced “dot”. I am thinking the slash may be a decent candidate as well.

  17. Sunny says at 2005-03-30 14:03:

    I’m curious how ‹, the single right-pointing angle quote (&rsaquo;) sounds in jaws.

    Hopefully not “single right-pointing angle quote” !

  18. Sebastian Crump says at 2005-04-20 12:04:

    Do remember that JAWS is not the only screen-reader and others can read differently.

    Sometimes what is spoken will depend on context. For example, 1-10 may read as “1 minus 10″, not “1 dash 10″ or the ideal meaning “1 to 10″

  19. Bryan says at 2005-06-08 04:06:

    If I’m separating a page title from a site title, would it make sense to separate them with the ‘@’ symbol? Not only would it make semantic sense, but I’m guessing the screen reader would pronounce it as “at”?

  20. sandy says at 2005-07-27 08:07:

    I kind of like the look of this vertical swirl ∫ (&int;). But wondering what it is called in a screen reader… Unlike arrows, IE for Macs can actually parse this correctly. Another possibility is this variation on the pipe: ¦ (&brvbar;) and I am also wondering what screen readers call this symbol.

    Although subtle, I do like the interpunct, and I still like the pipe (after reading the various pros and cons). I also like the fact that the screen reader just reads short one syllable words for these entities.

  21. Lymmo says at 2006-03-28 14:03:

    I think it’s ironic that this website uses a dash in its own title…

  22. Emil Virkki says at 2006-03-28 14:03:

    I like to use a double colon ” :: “. It’s easily distinguished from the surrounding text as the colon appears twice, which is unnatural in normal text. The word colon is also short, so reading “colon colon” outloud doesn’t require a lot of waiting.

Trackbacks

Peter Krantz, peter.krantz@giraffe.gmail.com (remove giraffe).