I recently did an audit for a company which has offices all over the globe. While I was taking a pass through their locations page with a screen reader, I noticed an issue I haven’t heard discussed before – phone number format. More specifically, how the various formats people typically use are announced by screen readers.
Common Phone Number Formats
On that particular site, the phone numbers for their various locations are listed like so:
+12065551212
There’s two issues with this from an accessibility standpoint:
From a sighted reader’s perspective, it’s difficult to parse the number out because the numerals are all bunched together with no break. If you’ve ever tried to enter a long gift card number and had to go back and look at it several times to figure out which number you missed, you know what I’m talking about. And the issue is compounded for people with memory loss or cognitive issues. That’s why the numbers on the back of credit cards are split into groups of four – it’s easier to read and remember. And from a screen reader user’s perspective, the experience is far worse; here’s how that number is read by a screen reader:
“plus twelve billion, sixty-five million, five-hundred and fifty-one thousand, two-thousand twelve”
Ouch. Obviously, that doesn’t work well for anyone, disabled or not. Another format we often see is this one:
206.555.1212
That’s better for a sighted user because there is separation between the area code, prefix, and suffix so it’s easier to read. It’s also better for the screen reader user, because it’s announced like this:
“two-hundred six point five-hundred fifty-five point one-thousand two-hundred twelve”
Next up we have similar format, but with dashes instead of periods:
206-555-1212
That’s much better, because the dashes are not announced by the screen reader, they simply create a short pause between the sets of numbers:
“two zero six, five five five, one two one two”
And finally we have the old-school method of placing the area code between brackets, and putting a dash between the prefix and suffix:
(206) 555-1212
That is announced the same as the previous one with all dashes.
So between those last two, it really comes down to personal preference. Just avoid using periods a separators, and definitely don’t list your numbers without any at all.
As a side note, all of the number formats above were automatically turned into links when viewed on my iPhone. To create links which also work for Skype calling on desktop browsers, you can manually code the link in. The format for that looks like this:
<a href="tel:12065551212">(206) 555-1212</a>