Platform Badge

Platform badges are branded badges for linking to app stores and podcast platforms. Unlike icons, these are full-color, non-square assets rendered as CSS background images.

Badges automatically adapt to the current scheme — dark badges in neutral, light badges in contrast.

Ready to use

Develop Accessibility

Platforms

App Store

<a
  href="#"
  class="tng-platform-badge is-app-store"
  aria-label="Download on the App Store"
></a>

Default
Contrast

Google Play

<a
  href="#"
  class="tng-platform-badge is-google-play"
  aria-label="Get it on Google Play"
></a>

Default
Contrast

Apple Podcasts

<a
  href="#"
  class="tng-platform-badge is-apple-podcasts"
  aria-label="Listen on Apple Podcasts"
></a>

Default
Contrast

Spotify

<a
  href="#"
  class="tng-platform-badge is-spotify"
  aria-label="Listen on Spotify"
></a>

Default
Contrast

Sizes

Three sizes are available: is-sm (32px), default (40px), and is-lg (56px).

<a
  href="#"
  class="tng-platform-badge is-app-store is-sm"
  aria-label="Download on the App Store"
></a>
<a
  href="#"
  class="tng-platform-badge is-app-store"
  aria-label="Download on the App Store"
></a>
<a
  href="#"
  class="tng-platform-badge is-app-store is-lg"
  aria-label="Download on the App Store"
></a>

Default
Contrast

A platform badge is a download link — to an app store (App Store, Google Play) or a podcast platform (Apple Podcasts, Spotify). It has no dedicated WAI-ARIA interaction pattern; it is a native link, and it meets WCAG 2.1 AA on that basis. Because the badge art is a CSS background image that carries only the brand, accessibility hinges on the badge being a real link with a meaningful accessible name — the platform plus the action (“Download on the App Store”, “Listen on Spotify”) — so the destination is clear whether the user sees the artwork, hears the name, or tabs onto the link.

For designers

The badge artwork must stay distinguishable from whatever surface it sits on — keep enough contrast between the graphical badge and its background on every supported surface, including over photography. Source: WCAG 1.4.11 Non-text Contrast.
Don’t rely on colour alone to tell one platform from another — the badge’s wordmark and logo already carry that meaning; keep them, don’t reduce a badge to a colour swatch. Source: WCAG 1.4.1 Use of Color.
The focus indicator on the link must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
Use the official, unmodified badge artwork each platform provides — Apple and Google both require it, and it keeps the download destination recognisable to every user.

For developers

A platform badge must be an <a href> pointing at the store or platform listing — never a bare image or a <button>, both of which lose the “this navigates to the store” meaning a link carries for free. Name the link with aria-label (the platform and the action), because its only visible content is the background-image artwork, which carries no text for an accessible name. The artwork is a CSS background image, so it never enters the accessibility tree and can’t double the link’s name; if you ever render it as an <img> instead, give it alt="" (or aria-hidden="true") so the name isn’t announced twice. The per-element role, name, and state are in the Labelling elements section below.

Labelling elements

Give every element the role, name, and state assistive technology needs.

Store link

The badge itself is an <a href> to the store or platform listing, so it carries native link role and keyboard operation. Its only visible content is the background-image artwork, so it has no text to name it — set the accessible name with aria-label naming the platform and the action: "Download on the App Store", "Get it on Google Play", "Listen on Spotify". Never leave the link unnamed.

Badge artwork

Decorative once the link is named. Shipped as a CSS background image, it is absent from the accessibility tree by construction, so it can’t compete with the link’s aria-label. If a consumer renders the artwork as an inline <img> instead, mark it alt="" (or aria-hidden="true") so the badge name isn’t announced a second time.

Source: WCAG 4.1.2 Name, Role, Value.