Stop Using the Vertical Line in Your Titles.

I used to like the use of the vertical bar or pipe in <title>s of subpages. Like, “About Us | Your Company or Blog Name”. It just looks cooler, I thought. Until I started learning about accessibility and started using Voiceover to listen to webpages.

What looks cool to us visual users turns out to be something downright annoying to the visually impaired user. Instead of the “About Us, Nike Sports” we’re expecting to hear, one hears “About Us, Vertical Line, Nike Sports”:

(If for some unfathomable reason, your browser refuses to play the audio, you can download it here:

If you think it’s no big deal, try listening to it on every single page of the website. (Or try replaying the sample audio above ten to twenty times.) Not only will you start getting annoyed, but you will be thinking, “What kind of idiot coded this page?”

I know I was an idiot, and I’m glad I’ve turned over a new leaf. If you’re like me before, you should stop using the vertical line now. Instead, you can use “:”, which the screen reader gracefully ignores. So “About Us: Nike Sports“ will be read exactly the way it reads. It annoys no one, and it saves you from being labeled an idiot.