What's In Your Blog's Title Bar?

Go to your blog's home page and look at the top of your browser. Look up, up, up. That blue bar at the top? OK, maybe it's not blue, but it's up there. It shows what's called the page title. Different blogs are set up to show one or more pieces of information there: the blog's name, the blog's tagline, the post title, the archives title, whatever.

If you include more than one item and you separate them with a colon, a dash, a pipe (|), or something else, do you know what it sounds like?

Yep, there are some people who listen to your blog instead of reading it with their eyes. Visitors to your blog who rely on special software to do this, called screen reader software, hear the page title first. It helps them figure out where they are and what to expect from the page content.

In his post Document titles and title separators, Roger Johansson had this to say:

As for title separators, whatever you choose to use, read it out loud to get some feel for what screen reader users will hear. I know I wouldn’t want to listen to "page title minus colon colon minus section title minus colon colon minus site name" or the result of some similar fancy separators made up of several characters.

The folks at the blog Standards-Schmandards did him one better and actually tested out how one popular screen reader "pronounced" many of the popular separators. I hate to rely on it as gospel, since it's four years old, but here were the basic conclusions:

• The right double angle bracket character (») was the worst.
• Pick a separator which is pronounced as a word that's unlikely to appear as part of the text in the title. Do not use the bullet character if you write about guns and ammunition or a pipe (a.k.a. "vertical bar") if you often write about bars.
• Regardless of the character you pick, surround it with whitespace so it doesn't get lumped in with your text.

There's a table in their blog post showing what the screen reader says out loud when it encounters each symbol.

I know we use separator characters to make things look pretty, but now I'm wondering if the best option isn't to just use words. "Name of post" at "name of blog" seems pretty self-explanatory to me.