Accessible social media icons and Instagram, Facebook and YouTube embeds: a 5-minute test and fixes

Most small-business sites end with a row of little logos (Facebook, Instagram, TikTok, Google) and many embed an Instagram feed or a YouTube video on the homepage. They look tidy, but they often say nothing to a screen reader: six links all announced as "link", a feed of unnamed images, or a frame with no title. Here's a 5-minute test and what to change.

The 5-minute social test

1. Does every icon link have a name? With a screen reader on (see our screen reader test), move through your footer. You should hear "Instagram" or "Elm Street Dental on Instagram", not "link" or a long URL. (WCAG 1.1.1, WCAG 2.4.4)
2. Can you reach each icon with Tab and see where you are? Each one should show a clear focus outline. (WCAG 2.4.7)
3. Are the icons big enough to tap? Each target should be at least 24 by 24 CSS pixels, or have enough space around it. Tiny icons packed together are hard to hit on a phone. (WCAG 2.5.8)
4. Can people see the icons? Pale grey logos on a white or light footer need at least 3:1 contrast against the background. (WCAG 1.4.11)
5. Is each embed frame named? An Instagram, Facebook or YouTube embed is usually an iframe. It needs a title like "Our latest Instagram posts" so it isn't announced as just "frame". (WCAG 4.1.2)
6. Does anything move or play sound on its own? A feed that scrolls or rotates for more than 5 seconds needs a way to pause it, and a video that plays sound for more than 3 seconds needs a way to stop it. The simplest fix is no autoplay. (WCAG 2.2.2, WCAG 1.4.2)
7. Is the important stuff also on your page as text? Hours, offers and announcements posted only as Instagram images may be unreadable inside a feed widget. Put them on the page in text too.

HTML you can copy

Give each icon link a name the screen reader can read, and hide the icon itself so it isn't read twice. The W3C functional images tutorial explains why the name should say where the link goes:

<ul class="social">
  <li><a href="https://www.instagram.com/yourbusiness">
    <svg aria-hidden="true" focusable="false" width="24" height="24">...</svg>
    <span class="visually-hidden">Instagram</span>
  </a></li>
  <li><a href="https://www.facebook.com/yourbusiness">
    <svg aria-hidden="true" focusable="false" width="24" height="24">...</svg>
    <span class="visually-hidden">Facebook</span>
  </a></li>
</ul>

If your icons are images, the alt text is the name: <img src="ig.svg" alt="Instagram">. Give the links room to tap:

.social a { display: inline-flex; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; }
.social a:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }

For a video or feed embed, add a title to the frame and leave autoplay off:

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Video: a tour of our new treatment rooms (2 minutes)"
  width="560" height="315" allowfullscreen></iframe>

The handles, video ID and title above are example values. YouTube videos also need accurate captions; our video captions guide covers that.

Common mistakes

• Icon fonts or SVGs with no text, so each link is read as "link" or a full URL.
• The same name on every icon ("Follow us"), so people can't tell which network each one opens.
• Social icons at 16 pixels with no padding, touching each other.
• Instagram feed widgets that show photos with no alt text, or with the whole caption and hashtags as alt text.
• Muted autoplay videos that loop for ever with no pause button.
• Opening each social link in a new tab with no warning. It isn't a WCAG failure on its own, but adding "(opens in a new tab)" to the name avoids surprises.

On Wix, Squarespace, Shopify or WordPress

Built-in social link blocks and feed apps vary by theme and version, so test yours with the 7 checks above. Many social blocks let you set a label or "accessible name" for each icon, and many video blocks have an autoplay switch you can turn off. If a feed app fails the checks and you can't fix it, link to your profile with a plain text link ("See our latest work on Instagram") and put key updates on the page as text, then ask the app maker for their accessibility documentation.

What an automated scan can and can't tell you

An automated scan, including ours, can flag icon links with no name, images with no alt text, untitled frames and some low-contrast text. It can't tell whether the names make sense, whether a feed's photo descriptions are useful, whether something plays on its own, or whether important posts also appear as text. The 5-minute test above covers those. This page is general technical guidance, not legal advice, and following it doesn't certify compliance with the ADA or any law.

Related: link text and buttons, alt text examples, mobile tap targets and zoom, accessible sliders, video captions, salon and spa sites.

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

• My website passed an accessibility checker. Is it accessible? 7 checks a scan can't do
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

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.