# Phone number is displayed and is clickable (tel: link)

- **Pattern:** `ab-001771` (`marketing-local-seo.nap-business-info.phone-clickable`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001771
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001771)

## Why it matters

A plain-text phone number forces mobile visitors to memorize digits, switch apps, and type manually — most abandon before dialing. Wrapping the number in `tel:` turns every render into a one-tap call on iOS and Android, directly converting local-search intent into booked calls. Non-E.164 hrefs (missing `+` or country code) fail on international roamers and some carrier dialers, silently dropping leads from the exact high-intent mobile traffic local SEO is meant to capture.

## Severity rationale

High because phone calls are the primary conversion event for most local businesses and a plain-text number blocks tap-to-call on mobile.

## Remediation

Wrap every rendered phone number in an `<a href="tel:...">` tag using strict E.164 format in the href (display text can stay formatted). Update `src/components/footer.tsx`, the contact page, and any header CTA component so every instance is tappable.

```tsx
<a href="tel:+15555555555">(555) 555-5555</a>
```

The href must contain only `+`, country code, and digits — no spaces, dashes, or parentheses.

## Detection

- **ID:** `phone-clickable`
- **Severity:** `high`
- **What to look for:** Find where the phone number is rendered in the UI. Check that phone number text is wrapped in an `<a href="tel:...">` tag. Also verify the `tel:` href uses E.164 format (e.g., `tel:+15555555555`) even if the display text uses a different format. Check footer, contact page, and any header/CTA components.
- **Pass criteria:** Count all phone number instances rendered in the UI. 100% of instances must be wrapped in a `tel:` link with a properly formatted E.164 number in the href. At least 1 phone number must be visible on the primary landing page or its layout.
- **Fail criteria:** Phone number is displayed as plain text without a `tel:` link, or the `tel:` href is malformed (missing country code, contains spaces or formatting characters).
- **Skip (N/A) when:** No phone number is displayed anywhere in the UI, or whole-audit N/A rule applies.
- **Detail on fail:** Describe what was found. Example: `"Phone number in footer.tsx is plain text — not wrapped in a tel: link"` or `"tel: href in contact/page.tsx is 'tel:555-555-5555' — missing country code, should be 'tel:+15555555555'"`
- **Remediation:** Wrap phone numbers in a `tel:` link in your `src/components/footer.tsx`:

  ```html
  <a href="tel:+15555555555">(555) 555-5555</a>
  ```

  The href must use E.164 format -- `+` followed by country code followed by the number with no spaces, dashes, or parentheses.

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001771