Call, email, text and download links accessibility: tap-to-call, icon buttons, PDFs and new tabs

For a local business, the most important links on the site are often the small ones: "Call now", the email address, "Text us", "Get directions", "Download our menu" and links that open another site. When these are built as images, icons with no name, or links that jump somewhere unexpected, some visitors can't contact you at all. This guide covers how to make them work for keyboard, screen reader, voice control and phone users, whichever website builder you use.

1. Phone numbers: real text and a real call link

Put your phone number on the page as text, not inside a logo, banner or photo, so screen readers, zoom and translation tools can read it (WCAG 1.1.1, 1.4.5). Make it a tel: link so phone visitors can tap to call. The visible number is the best link text, because it tells people exactly what will happen.

<a href="tel:+19185550100">Call (918) 555-0100</a>
<a href="sms:+19185550100">Text us at (918) 555-0100</a>
<a href="mailto:[email protected]">Email [email protected]</a>

(The numbers and address above are examples.) Don't make the number the only way to reach you: list your hours and an email or contact form too, for people who can't use the phone. See accessible contact forms.

2. Icon-only call, email, map and social buttons

A floating phone icon, an envelope in the header or a map pin with no text is announced as "link" or a file name. Every icon link needs a name that says what it does, such as "Call (918) 555-0100" or "Get directions to our Main Street shop" (WCAG 2.4.4, 4.1.2). If a button shows words, like "Call now", its hidden name should start with those same words, so voice control users can say "click Call now" (WCAG 2.5.3).

<a href="tel:+19185550100" class="call-btn">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">...</svg>
  <span class="visually-hidden">Call (918) 555-0100</span>
</a>

See also social media icons and link text and buttons.

3. Sticky "Call now" bars and floating buttons

A call bar stuck to the bottom of a phone screen is useful, but it can cover form fields, cookie buttons or the focused link when someone tabs down the page (WCAG 2.4.11). Leave space at the bottom of the page for it, and check at 200% zoom that it doesn't take over the screen (WCAG 1.4.10). Make each button big enough to tap without hitting its neighbour (WCAG 2.5.8).

4. "Get directions" and map links

Write your address as text next to any map, and make "Get directions" a normal link to your map listing, with a name that says where it goes. A map embed should never be the only place your address appears. See Google Maps embeds and locations pages.

5. Download links for menus, forms and price lists

"Click here" and "Download" tell people nothing when read out of context. Say what the file is, its type and roughly its size, for example "Download our dinner menu (PDF, 2 MB)" (WCAG 2.4.4). Better still, put the menu or price list on a normal web page and offer the PDF as an extra, because many PDFs made from design apps can't be read by screen readers or resized on a phone. If you keep the PDF, make it accessible too; see accessible PDFs and menus.

<a href="/files/dinner-menu.pdf">Dinner menu (PDF, 2 MB)</a>

6. Links that open in a new tab

Opening links in a new tab or window can confuse people who use screen readers or magnification, because the Back button stops working and they may not notice the change. WCAG AA doesn't ban new tabs, but the simplest choice is to open most links in the same tab. When a new tab really helps, such as a booking system in the middle of a form, say so in the link, for example "Book online (opens in a new tab)". (Opening new windows only when people ask is a stricter Level AAA goal, WCAG 3.2.5.) Never open a new tab or window just because someone moved focus or changed a field (WCAG 3.2.1, 3.2.2).

<a href="https://booking.example.com" target="_blank" rel="noopener">
  Book online <span class="visually-hidden">(opens in a new tab)</span>
  <svg aria-hidden="true" focusable="false" viewBox="0 0 16 16">...</svg>
</a>

7. Make links look like links

If your links are only a slightly different colour from the text around them, people with low vision or colour blindness may not find them (WCAG 1.4.1). Underline links inside paragraphs, keep link text readable against the background (WCAG 1.4.3), and make sure keyboard focus on each link is visible (WCAG 2.4.7); see focus indicators.

Common mistakes

• The phone number only appears inside a header image or logo.
• A floating phone or chat icon with no name.
• "Call now" buttons whose hidden name is something else, so voice commands don't work.
• A sticky call bar covering form buttons or the focused link.
• "Click here" or "Download" with no file name, type or size.
• The only menu or price list is a scanned PDF.
• Every link opening a new tab, with no warning.
• Links in paragraphs that look exactly like normal text.

A 5-minute check you can do today

1. On your phone, tap your phone number, email address and "Get directions" link. Does each do what it says?
2. Press Tab through your header and footer. Can you see where you are, and is every call, email and social link reachable?
3. Turn on VoiceOver or TalkBack and swipe to your call button and icons. Does each say what it does? See the 10-minute screen reader test.
4. Read your download links out loud without the page around them. Do they still make sense?
5. Zoom to 200% on a phone. Does a sticky call bar hide anything important?

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag links and buttons with no accessible name, some voice-control name mismatches, links that rely on colour alone in some cases, and many contrast problems. It can't tap your phone link, judge whether "Download" is clear enough, see whether a sticky bar covers something, or tell whether your site meets any law. Our Fix-Pack checks up to 10 pages and gives copy-paste fixes for your platform.

Building local business sites for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any website builder, map service or phone carrier.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Website accessibility fix log: keep a dated before-and-after record and re-test
• Multi-step forms accessibility: quote wizards, intake forms and progress steps
• Audio, podcast and sermon accessibility: transcripts and players for small websites
• Charts, graphs and infographics accessibility: impact reports, results and data on small websites

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.