DEV 6.5 – Ensure embedded social media code is accessible
Why is this important?
While embedding social media content can be a great way to enrich your site and provide up-to date and current information to your users, care must be taken to ensure that the content embedded is accessible.
Social media posts are often made by people without accessibility training. Therefore, it is likely that the embedded content will be missing accurate Alt text, or may violate other WCAG guidelines. It is also important to ensure that third-party embeds themselves are accessible.
Ensure third-party embed code is accessible
- Look for specific assurances that they have been designed accessibly;
- Try navigating through the content with a screen reader and keyboard.
Provide an accessible name for iframes
- Ensure a meaningful and descriptive name is used to help screen reader users understand what content they will be navigating through;
- This can be achieved with the title or aria-label attributes.
Ensure the embed code does not act as a keyboard trap
If the embedded area is scrollable or has a large amount of content, it may be difficult for users to navigate. Consider adding a skip-link next to the heading to allow users to skip past the embed content.
Where possible, ensure embedded content is accessible
Content should still follow relevant WCAG guidelines where possible, including:
- Alt text for images;
- Subtitles for video;
- Legible text and plain language that is announced by a screen reader.
General accessibility considerations for social media posts
- Create a tone that is appropriate for your organisation;
- Provide contact information on the organisation’s account page/’profile’;
- Capitalise the first letters of compound words for hashtags;
- Place any hashtags or @mentions at the beginning of posts;
- Spell out any acronyms;
- Put prefixes before images, videos and audio;
- Provide closed captioning (subtitles) for all videos. Closed captioning means that the captions are not visible until activated by the viewer. YouTube has a feature that automatically captions videos in less than 10 minutes. Though YouTube has the ability to create captions based on an audio file, a written transcript should be used for better accuracy;
- Provide access to the full caption or transcript for an image ,video or audio;
- Insert prefixes before images, video and audio. Put prefixes before images, video and audio in posts. This informs members of the public using screen readers what to expect before it is read aloud. For example, Images: [IMG]; Videos: [VIDEO]; Audio: [AUDIO];
- Provide Alt text for an image if the image conveys information that is useful or relevant to the content, as well as for video and audio. To do this you can provide a link back to the organisation’s webpage that hosts a copy of the image/video/audio with a full caption or transcript.
- Avoid overuse of emoji symbols which can be repetitive and tedious for screen reader users.
How to Add Alt text in Facebook
- Click Photo/Video at the bottom of the Create Post screen;
- Select the photo you want to add;
- Click Edit Photo (paintbrush icon), then click Alt text;
- The automatically generated text will be shown on the left side of your photo;
- Write your Alt text in the box.
How to add Alt text in Twitter
- You can add Alt text using the Twitter mobile app by tapping the ‘+ALT’ button in the corner of the image before posting the tweet;
- In a web browser, you can add Alt text to an image by clicking the ‘Description’ button under the image before tweeting.
Tip: Screen readers have difficulty reading hashtags when they are all in lowercase because they cannot distinguish between component words - use camel case when referencing hashtags (for example - use #AccessibleContent over #accessiblecontent)
Examples of good practice
EN 301 549 v 2.1.2
- 18.104.22.168 Keyboard
- 22.214.171.124 No Keyboard Trap
- 126.96.36.199 Bypass Blocks
- 188.8.131.52 Name, Role, Value