Altwise

Accessible location page: Google Maps embeds, directions and hours

How to make the location and contact page on a small-business website work for keyboard, screen-reader and phone users: a titled map embed, the address and directions in text, opening hours, parking and entrance details, and a tap-to-call link.

Almost every local-business website has a "Find us" or contact page with an embedded map. The map looks helpful, but on its own it's one of the hardest parts of the page to use without sight or a mouse: screen readers often announce it as an unnamed frame, keyboard users can get stuck tabbing through dozens of map controls, and on a phone it can swallow the scroll. The fix isn't to remove the map. It's to make sure everything the map tells people is also on the page as plain text.

The 5-minute location-page test

  1. Is the address in text? Try to select the street address with your mouse. It should be real text near the top of the page, not only inside the map or an image, so people can copy it into their own maps app or have it read aloud. (WCAG 1.1.1)
  2. Does the map frame have a name? Embedded maps are iframes. Each one needs a title that says what it is, such as "Map showing Elm Street Dental, 120 Elm St". Without it, screen readers announce just "frame". (WCAG 4.1.2)
  3. Can you Tab past the map? Press Tab from the top of the page. You should be able to move into and back out of the map and keep going to the rest of the page without getting stuck. (WCAG 2.1.2, 2.1.1)
  4. Is there a "Get directions" link with clear text? A text link like "Get directions in Google Maps" (opening the map in a new page or app) is easier for everyone than the controls inside the embed. Avoid links that just say "Click here" or a map-pin icon with no name. (WCAG 2.4.4)
  5. Are hours, phone and email in text? Opening hours as a simple list, the phone number as a tap-to-call link, and an email address. Not only in a photo, a PDF or the Google Business panel inside the map. (WCAG 1.3.1)
  6. Does it work on a phone? At 400% zoom or on a narrow phone, the map shouldn't push the address off screen or make the page scroll sideways, and you should be able to scroll past it with one finger. (WCAG 1.4.10)
  7. Do you tell people how to get in? Parking, the nearest bus stop, the step-free entrance, lifts and the accessible restroom are exactly the details disabled visitors check before they come. A short paragraph saves them a phone call. This isn't a WCAG criterion, just good service.

HTML you can copy

Put the text first and the map second, so the useful information comes before the embed in reading and Tab order (WCAG 2.4.3):

<section aria-labelledby="visit">
  <h2 id="visit">Visit us</h2>
  <address>
    Elm Street Dental<br>
    120 Elm St, Suite 4, Tulsa, OK 74103<br>
    <a href="tel:+19185550100">918-555-0100</a> ·
    <a href="mailto:[email protected]">[email protected]</a>
  </address>
  <p><a href="https://maps.google.com/?q=120+Elm+St+Tulsa+OK">Get directions in Google Maps</a></p>
  <h3>Opening hours</h3>
  <ul>
    <li>Monday to Thursday: 8 am to 5 pm</li>
    <li>Friday: 8 am to 1 pm</li>
    <li>Saturday and Sunday: closed</li>
  </ul>
  <h3>Getting here</h3>
  <p>Free parking behind the building, with two accessible spaces by the
  rear entrance. The rear entrance is step-free and there's a lift to Suite 4.</p>
  <iframe src="https://www.google.com/maps/embed?pb=..."
    title="Map showing Elm Street Dental, 120 Elm St, Tulsa"
    width="600" height="400" style="border:0; max-width:100%"
    loading="lazy"></iframe>
</section>

The address and phone number above are example values; use your own. The style="max-width:100%" keeps the map from overflowing small screens. If you sell to a wider area, list the towns or ZIP codes you serve as text too, since a shaded service-area map tells a screen-reader user nothing.

Common mistakes

On Wix, Squarespace, Shopify or WordPress

Most builders have a map block or let you paste Google's embed code. Builder map blocks don't always let you set a frame title, so check yours with a screen reader or your browser's inspect tool. If you can't set one, using an embed-code block with the HTML above gives you control. Either way, add a text block with the address, hours and directions above the map. Our Wix, Squarespace, Shopify and WordPress guides cover where each builder keeps these settings.

What an automated scan can and can't tell you

An automated scan, including ours, can flag an iframe with no title, links with no text, low-contrast text and pages that block zoom. It can't tell whether your address is only in the map, whether keyboard users get stuck inside the embed, or whether you've told people about parking and entrances. The 5-minute test above covers those. This page is general information, not legal advice.

Related: contractor and home-service sites, restaurant website accessibility, medical clinic sites, keyboard navigation test, mobile and zoom checks, accessibility statement template.

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

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

Run a free homepage snapshot to see your top 3 issues in about a minute, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes for your platform.

Get my free snapshot