Accessible social media fundamentals

Posted:
Tagged with:

Social media is a now growing aspect of communicating with audiences. By designing accessible communications into your campaigns, you can embed good practices and engage more people across all platforms.

Creating accessible social media content shares a lot of good practice with creating accessible content in other forms, but there are some additional things to think about when publishing content to social media platforms.

This fundamentals guide is a quick reference tool to share six core considerations when creating accessible social media content. You may wish to keep these on hand when writing your own content, share these with colleagues, or even embed them into social media policies at your organisation.

We also have other useful resources including:

Social media fundamentals

Download these fundamentals as a Word template.

1. Write in plain English

It is not always possible to keep your language simple but do consider your writing style and how it might be experienced by those with dyslexia or other learning difficulties. The aim of writing in plain English is to make your content clear and concise. The Make Things Accessible: Plain English tip sheet is a useful resource for guidance on how to make your writing more accessible.

2. Choose a clear font and size

Sans serif fonts (Arial, Calibri, Verdana) are easier to read than serif fonts, and the font size should be clear and big enough for the format you are using.

If you want to emphasize text use bold rather than underlining or italics. This is because underlining is often used for hyperlinks and italics are more difficult to read.

3. Tell your audience where links are taking them

Links are great for navigation, but you need to contextualise your links to help those using screen readers where possible. Avoid using the URL itself, however, if you can’t avoid using a URL tell your audience where the link is going, for example: BBC News homepage www.bbc.co.uk/news.

4. Check the colour contrast between the text and background

Use a colour contrast checker to make sure it the contrast is high enough at 4.5:1 for normal text and 3:1 for large text:

Some colour combinations are problematic for people with colour vision deficiencies – so avoid green/red, blue/purple and light green/yellow. Do not use colour alone to convey meaning, always include a secondary characteristic as an indicator that is not colour.

5. Write clear and meaningful alternative text for images

If your content includes images, you need to include some text explaining what they are showing, this is called ‘alt text’ (or alternative text). The important thing to remember is to provide the context that you want the image to convey. The Make Things Accessible guides on creating meaningful alt text, alt text for complex images, and race, gender and physical descriptions in alt text are all useful.

6. Include captions and transcripts when sharing videos

Including video and other media in your content can make it much more accessible, but it can present challenges for some users. You can improve video and audio accessibility by providing captions and transcripts, audio descriptions, and descriptions of video images.

Share on:

TwitterLinkedIn

Site preferences

Please feel free to display our site, your way by finding the preferences that work best for you. We do not track any data or preferences at all, should you select any options in the groups below, we store a small non-identifiable token to your browser's Local Storage, this is required for your preferencesto persist across pages accordion be present on repeat visits. You can remove those tokens if you wish, by simply selecting Unset, from each preference group.

Theming

Theme
Code block theme

Code theme help

Code block themes can be changed independent of the site theme.

  • Default: (Unset) Code blocks will have the same theme as the site theme.
  • Light 1: will be default for users viewing the light theme, this maintains the minimum 7:1 (WCAG Level AAA) contrast ratio we have used throughout the site, it can be quite difficult to identify the differences in colour between various syntax types, due to the similarities in colour at that contrast ratio
  • Light 2: drops the contrast for syntax highlighting down to WCAG Level AA standards (greater than 4.5:1)
  • Dark: Syntax highlighting has a minimum contrast of 7:1 and due to the dark background differences in colour may appear much more perceivable

Motion

Motion & animation

Motion & animation help

  • Default (Unset): Obeys device settings, if present. If no preference is set, there are subtle animations on this site which will be shown. If you have opted for reduce motion, smooth scrolling as well as expanding and collapsing animations will no longer be present, fading transtitions and micro animations will still be still present.
  • None: All animations and transitions are completely removed, including fade transitions.

Links

Underline all links

Underline all links help

  • Default (Unset): Most links are underlined, with a few exceptions such as: the top level links in the main navigation (on large screens), cards, tags and icon links.
  • Yes: Will add underlines to the exceptions outlined above, resulting in every link being underlined

Text and paragraphs

Font size (main content)

Font size help

This setting does not apply to the site's header or footer regions

  • Default (Unset): Font sizes are set to site defaults
  • Selecting Large or Largest will increase the font size of the main content, the size of the increase depends on various factors such as your display size and/or zoom level. The easiest way to determine which option suits you best would be to view this text after clicking either size's button
Letter spacing

Letter spacing help

  • Default (Unset): Default letter spacing applies
  • Increased: Multiplies the font size by 0.12 and adds the sum as spacing between each character
Line height

Line height help

  • Default (Unset): all text has a minimum line height of 1.5 times the size of the text
  • Increased: all text has a line height of twice the size of the text
Paragraph spacing

Paragraph spacing help

  • Default (Unset): The space between paragraphs is equivalent to 1.5 times the height of the paragraph's text
  • Increased: The space between paragraphs is equivalent to 2.25 times the height of the paragraph's text
Word spacing preference

Word spacing help

  • Default (Unset): No modifications to word spacing are present
  • Increased: Spaces between words are equivalent to 0.16 times the font size