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):
- 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).
- 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.
- 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:
|Â»||right double angle bracket|
|â†’||question or silence|
|â˜…||question or silence|
- 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.
- Jacob Nielsen, Microcontent: How to Write Headlines, Page Titles, and Subject Lines
- Adrian Holovaty, Page titles on news article pages
- Roger Johansson, Document titles and title separators
- Jonathan Snook, The Usable Page Title