Social media icons

The “Social Links” component includes social media icons that are Scalable Vector Graphic (SVG) images that meet web accessibility standards. Users can create new icons, customize existing icons, and select for use any or all icons that come by default with the component.

Contents

Customize existing icons, or add additional social media icons

Users with the ‘Configure Social Links data’ permission may customize the existing icons, or add additional social media icons via the administrative UI by going to Structure > Social Links (/admin/structure/social-links). Edit or change the Label and remove and upload a different SVG icon, or click the Add Social Link Icon button at the top of the list to add a new icon.

Social links admin page showing icons

Any new social links that are added here appear as options in the list of available social links.

Icons can be set to display in 1, 2, 3, or 4 items per row. See Control items per row (multi-item block types) for more detail.

Default available Social Links icons

  • Facebook

  • Flickr

  • GooglePlus

  • Instagram

  • LinkedIn

  • Pinterest

  • Reddit

  • Snapchat

  • Tumblr

  • Twitter

  • Vimeo

  • YouTube

Accessibility guidelines

The Drupal Kit uses inline SVG images for the social links icons. There are multiple ways to display SVG images on a web page with HTML inline being the most accessible, where they are put directly into the HTML. New or replacement social link icons uploaded by a user for Social Links are required to be SVG images.

The following steps will make SVG images in social links and elsewhere more accessible:

Note

Everything is done within the <svg> element itself. See the complete example at the end.

Provide a title
The SVG <title> element provides a human readable name for the SVG content, or a component within it. The <title> element must be the first child of its parent element, which may be one of the SVG container elements or graphics elements, or the <svg> element itself. The SVG 1.1 specification specifically mentions the importance of providing a title for the <svg> element.
Provide a description
The SVG <desc> element is similar to the <title> element in many ways. It doesn’t render visually by default, but it is intended for human consumption. Instead of providing a name for its parent element, it provides a description. In accessibility terms, the <desc> element is where you provide more detailed information about the SVG content than the <title> allows.

Tip

According to the W3C specification for accessibility, SVG images should include= a <title> and <desc> HTML tag. See the example below for a model.

ARIA
Accessible Rich Internet Applications (ARIA) is an HTML markup standard for providing meaning to screen reader devices. The social media icons use the aria-labelledby attribute to provide this information, instead of what would normally be found in SVG <title> and <desc> tags. When adding new icons, make sure the aria-labelledby attribute is present and is unique. Use the markup of the default icon below as a model.
Alt Text
Adding alt text as you should for any images improves the accessibility on SVG
Give it a role
The ARIA role attribute can be used to force the correct role to be exposed to screen readers. In the case of the <svg> element, apply the img role.

Accessible SVG example:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-labelledby="flickr-title flickr-desc" alt="See us on flickr">
  <title id="flickr-title">flickr</title>
  <desc id="flickr-desc">See us on flickr</desc>
  <path d="M0 0v32h32V0C32 0 0 0 0 0zM9.1 21.9c-3.3 0-5.9-2.6-5.9-5.9S5.8 10 9.1 10c3.3 0 5.9 2.6 5.9 5.9S12.4 21.9 9.1 21.9zM22.4 21.9c-3.3 0-5.9-2.6-5.9-5.9s2.6-5.9 5.9-5.9 5.9 2.6 5.9 5.9S25.7 21.9 22.4 21.9z"/>
</svg>