Phone Number Formatting Mistakes That Confuse Screen Readers (and How to Fix Them Without Coding)

If you have a phone number anywhere on your website — contact page, footer, header banner, popup, sidebar — there is a good chance it is being read aloud incorrectly to anyone using a screen reader. Not “slightly wrong.” Not “a minor annoyance.” Genuinely wrong, in ways that can leave a blind customer unable to write the number down or use the click-to-call link.

This is one of the most common accessibility failures I see on small business websites in 2026, and it is also one of the easiest to fix. You do not need a developer. You do not need DevTools. You need about 15 minutes and the willingness to test your own site with the screen reader that came free with your phone.

Let me walk you through what goes wrong, why it goes wrong, and the three formatting habits that fix it for almost every business.

What goes wrong when a screen reader reads your phone number

Open your website on your phone. Navigate to your contact page. Now turn on VoiceOver (iPhone: Settings > Accessibility > VoiceOver) or TalkBack (Android: Settings > Accessibility > TalkBack) and tap the screen near your phone number.

Listen carefully to what it says.

If your phone number is written like (555) 123-4567, you might hear it read as:

  • “five five five comma one two three dash four five six seven” — the screen reader is reading the punctuation as words
  • “five hundred fifty-five, one hundred twenty-three, four thousand five hundred sixty-seven” — it has interpreted the segments as separate numbers
  • “five fifty-five, one twenty-three, four five six seven” — a mix of digit-by-digit and number reading

None of those are useful if you are trying to write the number down or memorize it. A sighted person sees (555) 123-4567 and instantly parses it as “five-five-five, one-two-three, four-five-six-seven.” A blind person hearing “five hundred fifty-five, one hundred twenty-three” has no idea those are the same digits.

This isn’t a screen reader bug. It is a content authoring problem. Screen readers do their best to interpret what they see, and what they see is the raw text on your page. If the text is ambiguous, the interpretation will be ambiguous too.

Why this happens (the short version)

Screen readers read text the way they think a human would say it. When they see 123, they have to make a guess: is that “one hundred twenty-three” or “one-two-three”? Most modern screen readers default to “one hundred twenty-three” because most three-digit numbers in regular prose are numeric values, not strings of digits.

For phone numbers, that default is wrong. Phone numbers are sequences of digits, not numbers. The digit 5 in a phone number is not the value five — it is the symbol for the spoken sound “five.” A screen reader has no way to know your (555) 123-4567 is a phone number unless you tell it.

There are two ways to tell it: visually (with formatting that hints at “this is a phone number”) and semantically (with HTML markup that explicitly says “this is a telephone number”). The good news is that both approaches help, and you can do most of the work without touching any code.

Fix one: Use spaces instead of dashes between digits

This is the single highest-leverage change you can make in the next 60 seconds.

Replace:

(555) 123-4567

With:

555 123 4567

Why this works: spaces are a much stronger “read each chunk separately” signal to screen readers than dashes or parentheses. When a screen reader sees 123 4567 with a space, most modern engines read it as “one two three, four five six seven” — digit by digit, with a pause between groups. When they see 123-4567, they often parse it as two numbers connected by a dash and read them in different ways.

This change costs you nothing. The number is just as easy to read visually with spaces as with dashes. Many style guides (including the British convention for phone numbers) already use spaces. Your customers will not be confused. Your screen reader users will hear the number correctly for the first time.

Try it now: change the phone number on your contact page to use spaces instead of dashes, save, and listen to it again with VoiceOver or TalkBack. The difference is immediate.

This one requires either a basic understanding of how your site builder handles links or a 30-second conversation with whoever maintains your site.

Most website builders (Squarespace, Wix, Webflow, Shopify, WordPress with Elementor, you name it) let you insert a link by selecting text and clicking the “link” or “chain” icon. Normally you paste a URL there. For phone numbers, you paste a special URL that starts with tel:.

For example, if your phone number is 555 123 4567, the link target should be:

tel:+15551234567

The tel: prefix tells the browser “this is a telephone number.” The +1 is the US country code. The remaining digits are your number with no spaces, dashes, or punctuation.

Why this matters for accessibility:

  1. Screen readers announce it as a phone link. When a screen reader encounters a properly marked-up tel: link, it says something like “Link, telephone, five five five one two three four five six seven.” That “telephone” announcement is gold — it tells the listener that the number is meant to be a phone number, and many screen readers will then read the digits one at a time instead of grouping them into “one hundred twenty-three” values.

  2. Mobile users can tap to call. On a phone, a tel: link is tappable. The user taps it, their phone offers to call the number. This is the kind of click-to-call experience customers expect, and screen reader users especially benefit because typing a number into the phone app is slow with assistive tech.

  3. It signals intent to assistive tech in general. Voice control software (like Voice Control on iPhone or Voice Access on Android) can read the link and offer to dial it. Switch users can activate it from a Bluetooth switch. The accessibility wins go beyond screen readers.

Every major website builder supports this. In Squarespace, edit the text block, select the phone number, click the link icon, and paste tel:+15551234567 as the URL. In Webflow, select the text, open the link panel, choose “External URL,” and paste the same thing. In Shopify, the rich text editor in your theme settings has a link tool that works the same way. In Wix, select the number, click the link icon, choose “Web Address,” and paste the tel: URL.

If your site builder will not let you paste a non-http URL into the link field, that is a real problem and probably the right moment to either contact their support or consider switching to a builder that supports basic accessibility patterns.

Fix three: Avoid breaking the number across lines

This one is subtle but matters more than people realize.

When a phone number wraps across two lines on mobile — which it often does in a footer or sidebar at narrow screen widths — screen readers sometimes read it as if it were two separate things. The visual break becomes an audible break, and the listener has to mentally reconnect “five five five one two three” with “four five six seven.”

There are two ways to prevent this without writing code.

Option A: Use shorter or simpler formatting. A phone number written as 555 123 4567 (nine characters plus two spaces) is more likely to fit on one line in a small footer than (555) 123-4567 (fourteen characters including punctuation). Removing the parentheses and dashes also removes the visual width that pushes the number to wrap.

Option B: Put the phone number on its own line. If your contact info reads:

Call us at 555 123 4567 for support

…consider rewriting it as:

Call us for support: 555 123 4567

The phone number now has a whole line to itself and is far less likely to wrap mid-number on any reasonable screen size. As a bonus, this is easier to scan visually for sighted users too.

If you want the more technical fix, you can wrap the number in a <span> with style="white-space: nowrap;", but that requires editing HTML directly, which is beyond the scope of a 15-minute non-developer fix.

Other formatting patterns to avoid

A few more patterns that confuse screen readers and have no good reason to exist on modern websites:

International prefix in parentheses. +1 (555) 123-4567 reads especially badly. Many screen readers interpret +1 as “plus one” or “positive one” rather than “country code one.” If you need to display an international format, write it as +1 555 123 4567 with spaces and no parentheses, and pair it with a tel:+15551234567 link.

Dots between digits. Some style guides use 555.123.4567. Screen readers often read the dots as “point” or “dot,” producing “five five five point one two three point four five six seven.” Functional but jarring. Spaces are still better.

Ambiguous extensions. 555 123 4567 ext. 42 is fine. 555 123 4567 x42 confuses screen readers that read x as the letter “ex.” Spell out “extension” if you need to include one.

Letters in vanity numbers. 1-800-FLOWERS is unreadable to screen readers and to most blind callers, because the listener has to map letters to keypad positions manually. If you use a vanity number, always pair it with the numeric version: 1 800 FLOWERS (1 800 356 9377).

How to test your fixes (no developer required)

Once you have made the changes:

  1. Open your contact page on your phone.
  2. Turn on VoiceOver or TalkBack.
  3. Swipe to navigate to the phone number, or tap it directly.
  4. Listen. Does it read the digits one at a time? Does it announce “link, telephone” before reading the number? Can you tap it and dial?

If yes to all three: you have just fixed one of the most common screen reader failures on the public web.

If no: revisit the three fixes above. The most common reason a tel: link is not announced as a phone link is that the tel: URL is malformed (missing the country code, including dashes, or accidentally pointing to http://tel:555... because the site builder auto-prefixed http://).

If you want to test on desktop instead, NVDA (free, Windows) and VoiceOver (free, built into macOS) work the same way. The principles are identical across screen readers.

Why this is worth your time

A phone number on a contact page is one of the highest-intent elements on your entire site. The customer who is dialing your number is ready to buy, ready to book, ready to ask a real question. If you have spent money on SEO, ads, social, and content to get them to your contact page and your phone number is unreadable to assistive tech, you have just lost the customer at the final step. There is no follow-up email opportunity. They will not come back.

Fixing this takes 15 minutes, requires no developer, and has zero downside for sighted users. The case for skipping it has gotten very thin.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.