Accessibility

A social-media button is an icon-only control that takes the user to an official brand profile or app-store listing — so its accessibility rests almost entirely on the accessible name. The brand glyph carries no text, which means assistive technology has nothing to announce unless the control is named for both the platform and its purpose (“Follow us on YouTube”, “Toyota on Instagram” — never a bare “Instagram”), and the icon itself is hidden from the accessibility tree. Get the name and the element right and the component meets WCAG 2.1 AA: it works the same whether the user sees the icon, hears the name, or reaches it from the keyboard.

For designers

• The icon and its square container must maintain accessible contrast against every footer and surface it sits on, at rest and in hover, focus, active, and disabled states. Source: WCAG 1.4.3 Contrast (Minimum).
• The disabled state must never be signalled by colour or reduced opacity alone — pair it with the native disabled semantics so it is perceivable without seeing the fade. Source: WCAG 1.4.1 Use of Color.
• The focus ring must stay visible on every supported surface and be clearly distinguishable from hover — at rest the button is borderless, so keyboard users depend on it entirely. Source: WCAG 2.4.7 Focus Visible.
• Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the button adapts correctly across brands, themes, and surfaces.
• Keep the interactive target comfortable to hit: the 1 px border and the small 32 × 32 size must not shrink the actual tap area — the minimum target is covered under For developers.

For developers

The styleguide ships the control as a native <button class="tng-social-media-button"> with the brand glyph nested inside. Match the element to the action: keep the <button> when it triggers an in-page share, but use an <a> (same class) when it navigates to an external profile or store listing, so assistive technology announces the correct link-vs-button role. Because the control is icon-only, its accessible name comes entirely from an aria-label and the glyph is hidden — the exact wiring is in the Labelling elements section below. When the destination opens in a new tab, say so in the accessible name and pair target="_blank" with rel="noopener noreferrer". Interactive targets must be at least 44 px for comfortable touch use — prefer the large 40 × 40 size on touch surfaces and keep generous spacing so an adjacent icon isn’t tapped by mistake. Source: WCAG 2.5.8 Target Size (Minimum).

Labelling elements

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

Link / Button

Use <a> for navigation to a profile or store, <button> for a share action — the element sets the role. Name it with aria-label that identifies both the platform and the purpose (e.g. "Follow us on YouTube", "Toyota on Instagram"), never the platform alone and never left to the icon. If it opens a new tab, include that in the name (e.g. "Follow us on YouTube (opens in a new tab)").

Icon

The brand glyph is decorative once the control is named — mark it aria-hidden="true" so it stays out of the accessibility tree and isn’t announced as a separate, unnamed node.

Source: WCAG 4.1.2 Name, Role, Value.