---
title: Social Sharing
date: 2023-12-17T12:38:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/social-sharing"
section: Components
---
# Social Sharing

The Social Sharing component allows users to share page content on specified social media channels. It also allows them to email content and print it out. This component is especially useful on news pages.
Allow users to share page content via social media or email
## Dos
- Create short, descriptive, and SEO-friendly titles and descriptions for content that are ideal for sharing
- If using a printer option, ensure the page is printer friendly
## Variations

[View component playground: Social Sharing](https://playground.designsystem.umd.edu/?path=/story/components-social-sharing--fixed)

## Content

| Recommended icon dimensions | 20px × 20px | 
## Accessibility

### Built in accessibility

**Keyboard Accessible**
Users are able to use the keyboard to navigate through focusable content using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate. WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order

**No Keyboard trap**
Users are able to navigate in and out of the social sharing icons without getting stuck WCAG 2.1.2 No Keyboard Trap

**Hover and Focus State**
Actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

**Non-Text Color Contrast**
A contrast ratio of at least 4:5:1 between icons, borders, and background color is ensured to distinguish components from their background as stipulated in WCAG 1.4.11: Non-Text Contrast

**Responsive**
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

**Consistent**
Icons are consistently styled to ensure all users can immediately recognize and understand them. The same icon is always used to signify the same meaning.. WCAG 1.4.12: Text Spacing

**Link**
SVGs are hidden from assistive technologies and effective alt text is used on the link itself. Effective text is used to describe what the link is and where it is taking the user. This is clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. WCAG 2.4.9: Link Purpose (Link Only)Example of effective text: Visit the Instagram page of the University of Maryland

**Target Size**
Icons are at least 24 x 24 pixels according to WCAG 2.2 guidelines

**Enhanced Tap Targets**
Social sharing has adequate space around the entire social icon structure and in between each icon to ensure clear tap targets and prevent users from missing or accidentally clicking other social targets. WCAG 2.5.5: Tap Targets

**Predictable Behavior**
Activating social sharing icons behave in predictable ways, such as opening a new window. WCAG 3.2.2: On Input

**Consistent Navigation**
Navigation mechanisms are consistent across sites for social sharing tools. WCAG 3.2.3: Consistent Navigation

## Layout

[View Figma design: Social Sharing](https://www.figma.com/file/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?type=design&node-id=4674%3A7720&mode=design&t=GJtPfvg0z88pHVjd-1)