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.
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
Component appears vertically and fixed to the left side of the screen as a user scrolls.
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