Accessible social media training and guidance


Why accessible social media is important to NIHR

As communicators, we all have a part to play in championing accessibility and driving best practice across the NIHR. By ensuring our content is fully accessible, we allow the widest possible audience to be able to interact with and benefit from it. This includes those people who have a visual, hearing, speech, motor, cognitive or other combination of impairments, but also those who are using a mobile with a reduced screen size, or those who are unable to turn on sound at the time they are looking at the content.

These guidelines offer a starting point for social media accessibility; however, as new guidance emerges, and social media platforms change, this page and the way the NIHR tackles accessibility may need to adapt.

Watch the NIHR Social Media Accessibility Training session video


Essential Guidelines

As a minimum, NIHR social media content must satisfy all of the following conditions in order to be approved by the social media editors. If your content does not adhere to these points, it will be rejected.

Content:

  • Keep the copy simple, clear and readable.
  • Avoid use of symbols or emojis to replace words, for example, do not use “=” instead of the word “equals”.
  • Capitalise the start of every word in a hashtag for example, #BePartOfResearch.
  • Avoid the use of bold or italicised fonts
  • Use full links and avoid bitly or other shortened links.

Graphics:

  • Keep graphics simple and include alt text on all graphics that contain functional text.
  • All videos must include closed captions or a voiceover, however Twitter platform content appears in a muted state, therefore blind users may not be aware that a voiceover is present.
  • Therefore we suggest including a text transcript as well.
  • Ensure images do not flicker at a rate that may trigger seizures in susceptible individuals (Gifs are particularly problematic when they flicker three times in any one second).
  • Movement in content should be limited to 5 seconds or the user has the ability to pause it.
  • Do not use colour in isolation to convey messages or distinguish between information in graphs. Please see example 1.


The rest of the guidance further down this page is desirable and it is recommended that you familiarise yourself with it and aim to adhere to as much as possible.

If you have any questions or queries, please contact the NIHR Social Media Team.

On this page:

This page is for accessibility for social media. Please try our other articles if you are looking for guidance on correcting accessibility issues in Sitekit, or a general overview on accessible content.

Social media post content

Wording:

  • Aim for short sentences of around 25 words or less. Gov.uk explains why they aim for sentences of no more than 25 words.
  • You may want to use free online tools like the Hemingway app to check readability. In this app, aim for readability of grade 10 or below. This will ensure that a 15-16 yr old will be able to understand the content, so aim for below that if possible.
  • Use line breaks to spread out copy and make copy easier to read.
  • Avoid use of symbols to replace words, for example, do not use “=” instead of the word “equals”.
  • Try to explain or spell out acronyms where possible. Avoid lesser known acronyms like “ICYMI”, however, “ASAP” and the more common NIHR acronyms may be acceptable in some circumstances (depending on audience).

Emojis:

  • Use only 1 or 2 emojis per post.
  • Do not repeat the same emoji more than once.
  • Avoid use of emojis to replace words.
  • It is not advised to create emoticons with text and are suggested to be avoided. In this example, this visual experience of “shruggie” ¯\_(ツ)_/¯ will be read aloud by a screen reader as: “Macron, backslash, underline, katakana, underline, slash, macron.”

Hashtags and mentions:

  • Use no more than 2 hashtags per post.
  • Use no more than 3 mentions per post.
  • Use hashtags and mentions after the main body of text so as not to disrupt the flow of a screen reader.
  • Capitalise the start of every word in a hashtag for example, #BePartOfResearch.

Links:

  • Use full links and avoid bit.ly or other shortened links as this instils trust for many users including screen reader users, knowing they are going to a trusted source. This Government Communications Service blog explains why link shorteners should be avoided.
  • Ensure call to action text is clear and makes sense out of context, “Read the guidance on applying for funding here:” rather than “Read more” or “Click here:". It should be clear where the link is taking them to.
  • If you have a hyperlink in your tweet, indicate what type of resource it leads to by adding [PIC], [VIDEO] or [AUDIO], as the resource it leads to may autoplay content and warning blind users of this is best practice.
  • Limit to one link per post, unless a secondary link is to a text transcript.

Social media post graphics

Fonts and wording:

  • Use your judgement to choose a font in a suitable size that will be clear and readable on all devices, including mobile.
  • Aim for a maximum word count of around 25-35 words. A visual that uses fewer words with larger fonts can be more punchy in a social feed and therefore have greater impact.
  • Avoid the use of bold or italicised fonts. Use Lato or Arial fonts which are sans serif.
  • Use left alignment for all text, do not centre or justify as this may cause reading difficulties for Dyslexic users.
  • Some screenreader software will cut off after 125 characters, so don’t have very long Alt Text on images.

Please see examples 2 and 3.

Colour and contrast:

  • Where possible, make use of templates that you know have been designed to meet these guidelines. Try to use only official NIHR Canva templates.
  • Where you are modifying or creating new templates, ensure high contrast between background and font colours.
  • Do not use colour in isolation to convey messages or distinguish between information in graphs. Please see example 1.
  • Avoid using gradients where possible and use block colours instead.
  • Ensure that colour contrast of text against background meets 4.5:1 contrast ratio. You may use the ‘Colour contrast analyser’ to check for this.

Imagery:

  • Include alt text for any words used in a graphic/gif.
  • Where an image element in a graphic is non-decorative, the alt text should include a description of the information being conveyed.
  • ContentCal has an alt text limit of about 415 characters which translates to roughly 70 words. Please bear this in mind when creating a graphic that will need a lot of description.
  • If the text presented in a graphic is more than 70 words then this should be provided as text within the post instead.

Please see example 4.

How to add alt text to graphics in ContentCal.   

Videos, animations and gifs:

Ensuring good accessibility for videos, animations and gifs requires holistic thinking and needs to be planned from the beginning of the project.

Videos must include closed captions or a voice over, but ideally both. Just as closed captions cannot be read by someone is visually impaired, so text on screen as part of any video/animation either needs to be included as part of the audio or covered by the transcript. However in the Twitter platform, content appears in a muted state, and blind users may not be aware that a voice over is present. Therefore we suggest including a text transcript as well.

  • If you are unfamiliar with the difference between subtitles, open and closed captions, this article may help. Closed captions can be turned on and off by the user and can be read by a screen reader. Captions that are embedded into the video are not always accessible so should be avoided unless the platform is known not to support closed captions.
  • Captions assume the viewer can’t hear and should include non-speech elements like noises where relevant.
    It may be appropriate for any voiceover to include audio descriptions of visual information in video for those who are visually impaired.
  • Alternatively, if closed captions are not an option, you can publish a threaded post underneath the video with a description of the content (whether a transcript of the audio or a text version of the copy embedded in the video) in lieu of alt text.
  • For videos, the gold standard would be to provide a transcript, otherwise closed captions are mandatory for all videos with audio, and an audio description where any important visual information such as text on screen wasn't covered within the existing audio of the video
  •  Read the NIHR comms site guidance on accessible videos.
  • Avoid moving images behind text which can be challenging for some users.
  • Avoid flashing images as that can cause seizures. Nothing should flash more than 3 times a second. The Trace Centre’s Photosensitive Epilepsy Analysis Tool (PEAT) can be used to measure this.
  • Background music/soundsshouldnotoverpowervoiceovers on video content.
    • When working with designers, please request a minimum of 20db difference between background music and voiceovers.
  • Check transition times on gifs, videos and animations to ensure the audience can follow the content. Be mindful of your audience and be aware that some cognitive impairments allow for a lower comprehension rate. If in doubt, please slow the transitions down.
  • YouTube allows you to add subtitles and captions easily, but should always be manually checked for errors. This should always be done prior to posting your video via ContentCal, as subtitles cannot currently be added directly via ContentCal.

Please see example 5.

How to add closed captions to videos when posting on Twitter, LinkedIn and Facebook.

How to add a voiceover to your Spark Video.

Information for editors

All NIHR channel editors should familiarise themselves with the guidance on this page. Use the ContentCal commenting functionality to inform content contributors when changes have been, or need to be made. As editors, we wouldn’t allow a post to be approved if it had a typo or was incorrectly branded - similarly, we should not allow non-accessible posts to be approved. Editors will be responsible for ensuring the “essential” guidance is adhered to for all approved posts.

Please note, a quick check to see whether a graphic has alt text included in ContentCal is to open the post and look for the “T” symbol as shown in this image.

 

 
Where there are uncertainties or issues, editors should consult the “Social Media - all editors” group chat in the first instance, or escalate to Social Media Group Chair or CPB lead for further advice. However, editors should feel empowered to make decisions for their channels based on this guidance.

Please see the examples section for some examples of non-accessible posts that should be picked up and fixed by editors.

Retweeting

As editors, it is sometimes necessary to retweet existing content posted by other accounts. It is acceptable to retweet something that does not meet all of the accessibility guidelines if it is posted by a non-NIHR account. However, if you can add clarification or make something more accessible via a quote retweet, please aim to do so.

NIHR retweeting guidance can also be found on the comms site.

Example posts with feedback

 

Example 1

Demonstrating non-accessible graphics; The following is an example of a non-accessible graph. The graph uses only colour to differentiate between the 4 types of attendee. These colours are a similar shade and users may struggle to easily differentiate between them.

 

 

In this second version, texture has been added to the graph to help easily understand the graph, you might even want to add labels to clearly and easily show the numbers for each column. Alt text for the following would be: “UK MSK TRC Springboard, 24 February, London. A graph showing the number of attendees. 8 attendees from academia, 14 from pharmaceutical, 11 from NIHR and 4 from MedTech.”

 

Unfortunately this example is over the max 125 characters for alt text and some screen reader software will cut this off. This visual/graph would either need to be covered in accompanying text or a link to a page or post that describes the content in more detail.

 

Example 2

Demonstrating correct font size and word count; The example below is a standard Twitter card and uses a Lato font that is left aligned with no bold or italics. 25 words have been used and the body and heading font size can be easily viewed on different devices.

 

 

Example 3

Demonstrating font size and word count in 2 quote graphics; In this first example, the font used is too small and there is too much text.

 

 

This second example, however, shows a quote card with a total of 30 words. The NIHR motifs have been removed, leaving more space for the text which results in an acceptable font size. This example is an acceptable graphic for an accessible post.

 

 

Example 4

Demonstrating correct alt text; In the example below, the alt text would be “35,488 participants took part in commercial contract research”. However, this example does not use a sufficient contrast of text against background. This should be 4.5:1 for standard text or 3:1 for large text.

 

 

In the example below, as well as the main text, the logos need to be captured in the alt text as they are not purely decorative. Therefore, the alt text would read: “Heart failure and atrial fibrillation increase Covid-19 risk. National Institute for Health Research logo and British Heart Foundation Logo”.

 

 

Example 5

Demonstrating incorrect video captions and text placement; In the example below, the text cannot be read due to the timer and view count showing across the text. This animation needs closed captions or a voiceover for users with visual impairments. Because the closed captions would also sit along the bottom of the graphic, having text added there does not work and will be blocked. As an editor, you would probably want to ask the contributor to move the text elsewhere on the graphic and add a voiceover or closed captions.

 

 

Example 6

Demonstrating incorrect use of emojis, hashtags; In the following example of twitter copy, there are a few errors to notice: The key emoji is used instead of the word “key” and the book emoji is repeated. There are probably too many hashtags and they should ideally be used after the main text rather than within it.

 

 

 

Technical information

 

How to add Alt Tags in ContentCal

Once in ContentCal, create your post as usual. Add your media and wait for it to upload. Click on the three dots on your newly uploaded graphics and select “Add Alt Text”.

 

Add your alt text to the box and save.

 

Continue to finish your post.

 

How to add closed captions to videos on Twitter, LinkedIn and Facebook

Captions can only be added to videos natively in Twitter, LinkedIn and Facebook. ContentCal doesn’t have this functionality yet, however it has been requested and added to their development log. Please get in touch with the relevant editorial team if you need to post a film and add closed captions - and follow the following process:

  • Content creators should create and provide the channel editor with an .SRT file for upload, in addition the film file for upload natively.
  • Content creators should create a placeholder post in ContentCal, at the requested day/time - clearly labelled 'Placeholder - for native publication' - to ensure visibility for other editors and content creators.
  • Channel editors should refer to the ContentCal schedule to ensure there are no clashes with posts already scheduled in ContentCal.
  • The channel editor will then either publish, or schedule the content for publication natively - at the agreed time.

Editorial team emails:

Twitter

Click the ellipses on the main menu to get more options and select “Media Studio”
Once in the media studio, click upload media from the top right hand side and upload your video.
When the video has finished uploading and processing, click on it to open editing mode where you will see a subtitles tab. Here you can upload your srt. File which contains your closed captions. You can find out more about adding closed captions on google support. Once you have added the subtitles, you can compose a tweet within media studio and schedule it to post at a specific time.  However, please discuss with your channel editors before scheduling to check it doesn’t clash with any ContentCal scheduled posts.

Editors should ensure that any content being posted/scheduled directly in Twitter Studio has a corresponding placeholder entry in ContentCal, marked in the top line: 'Placeholder - scheduled in Twitter Studio'.

LinkedIn

How to add Closed Captions to videos on LinkedIn

Facebook

How to add captions to videos on Facebook

Further reading

For an even more comprehensive guide to accessible social media, read this guidance from Government Communications service.

National Cyber Security recommendations on URLs.

Government Digital Service guidance on URLs.

How to add a voiceover to your Spark Video.

How to do accessible social media webinar, 20 October 2020

Additional Resources

Watch the voice-activated software demo. Accessible Social Media training (DAC) (Digital Accessibility Centre) video

 

Further support

If you have further questions, once you have read this guidance and watched the supporting videos, please submit your questions to the social media team.

Related pages