Home
About Project team
About the Toolkit
Basic concepts
Practical tips
Resources

Enhancing accessibility of social media posts

Table of Contents

Introduction

  • The use of social media becomes more and more common in teaching and learning.
    • Instructors may make use of social media platforms to engage students in different in-class activities for both face-to-face and virtual classes, online or offline group discussions, or community engagement, such as service-learning projects and experiential learning.
    • Instructors may make use of and share materials from social media in teaching and learning, such as videos from YouTube.
    • Instructors and students may maintain interactions and stay in touch through social media platforms, such as WhatsApp and Facebook.
    • Teaching units may create course-specific social media platforms to engage prospective students.
    • Researchers may make use of social media platforms for dissemination of research deliverables and knowledge exchange with the community.
  • In this section, there are some recommended practices of designing accessible social media content, regardless of the platforms or applications. These practices are not exhaustive or definitive. The sets of commands may be different across social media platforms and applications, but the general ideas of the accessibility practices still apply. Note that social media platforms and applications are constantly and rapidly developing along with changing accessibility functions.
  • It is always good to consider the contexts as well as the diverse characteristics and needs of the target audience of the social media content. Modify the choice of social media platforms and content in response to their needs accordingly.
  • Media platforms
    1. Be aware of restricted access to certain platforms.
    2. Refer to platform-specific accessibility support updates.
  • Inclusive content
    1. Use plain language and keep content concise.
    2. Be mindful of inclusive language and disability representation.
    3. Use appropriate font, punctuation, and symbols.
  • Hashtags and emojis
    1. Use camel case hashtags.
    2. Use emojis and emoticons appropriately.
  • Graphics
    1. Provide alternative text (“Alt Text”) for graphics.
    2. Create transcripts for infographics.
  • Audio-visual content
    1. Avoid animation, GIFs, or flashing content.
    2. Provide accessible video and audio.
    3. Avoid default autoplay of media.
  • Hyperlinks
    1. Include any hyperlinks in QR codes in the posts.
    2. Use descriptive link text for hyperlinks.
  • Use of colour
    1. Ensure sufficient colour contrast.
  • Sharing third-party content
    1. Share content from other sources in accessible ways.
  • Support for visitors
    1. Provide information about accessibility support.
    2. Provide contact information for visitors’ enquiry.
    3. Post the same content on multiple platforms.
  • Accessibility check
    1. Conduct accessibility test on the platforms and posts.

Media platforms

  • There might be varying extent of restricted access to some social media platforms and applications at some geographical locations. Be aware that some students may not be able to access the social media content due to such restriction in access.
  • It is always important to communicate with students, understand their learning and access needs, and modify the use of social media in teaching and learning in response to students’ needs accordingly.

Inclusive content

  • Use plain language to promote understanding of the content by audience whose native language is different from the language used in the social media posts.
  • Avoid many jargons, acronyms, or abbreviations.
  • Use more straight-forward language.
  • Avoid capitalizing all text. It is difficult for most people to read. It may also look like “shouting” to audience.
  • Avoid long and complicated sentences. Keep the text concise. Divide long body of text into different sections.
  • Make use numbered or bulleted lists to deliver the text.
    • Listed items could help people to read and understand information more easily. People with dyslexia or cognitive impairments may find it difficult to understand large chunks of text.
  • Consider disability representation and diversity in mind when creating the social media content.
  • Portray disabled people as ordinary people in society as they are. Do not create an impression of separateness, specialness, and dependence. Avoid focusing on their medical conditions.
  • Avoid portraying disabled people as a passive recipient of help from others.
    • For example, a student with visual impairment being helped to cross the road or the wheelchair of a wheelchair-using student being pushed by a fellow classmate.
  • Portray diversity. Show people with disabilities in everyday social situations and campus environment.
    • For example, a picture on the university website showing a group of students walking around the campus may include students with diverse characteristics to represent the inherent diversity, e.g., disability and skin colour.
  • Avoid emphasizing too much on some people with disabilities who have “remarkable achievements” as role models through storytelling or first-person sharing on social media content.
    • Storytelling approach is often used to “inspire” others by conveying the idea of “see how these people with disabilities can overcome barriers with a never-give-up attitude and complete this and that” to motivate people without disabilities to try harder.
    • The hidden agenda is that if people with disabilities can achieve their goals, then surely can people without disabilities. It might also put much pressure on students with disabilities to think that they have to be an “inspiration” to matter. Mind the issues of possibly manifesting “inspiration porn”.
    • Inspiration porn is the stereotypical portrayal of people with disabilities doing something ordinary as “inspirational” solely or in part on the basis of their disabilities (Stella Young, 2014).
    • After all, the accomplishments of people with disabilities are worth celebrating on the basis of their competency (instead of their disability status) just as it is to celebrate the accomplishments of people without disabilities.
  • Avoid using all caps and small caps.
    • Text with all caps or small caps may show no differences in the shapes of texts, and all the texts may visually appear a single “rectangle”. It would particularly create barriers to some people with visual impairment and some people with reading disabilities.
  • Use appropriate punctuation. Be aware of punctuation that visually looks similar but symbolize different meanings. Otherwise, it would make users assistive technologies such as screen readers difficult to understand the content.
    • For example, be aware of the differences between the marks of ” inches, ‘ feet, ’ apostrophe, “ ” quotation marks. Use the marks of “smart quotes” as the quotation marks. Do not use the marks of “straight quotes” as the quotation marks.
  • Different assistive technologies may recognize symbols differently.
    • For example, some screen readers may recognize and/or read out the “ – ” symbol differently. Some screen readers may not understand whether the “ – ” symbol represents the meaning or function of “en dash”, “em dash”, “negative”, “minus”, or “hyphen”.
    • Consider spelling out the intended meaning or function of the symbol in text to avoid confusion. For example, write “25% to 50%” instead of “25% – 50%”; and write “A minus” instead of “A-”. Make a remark within the document to indicate the intended meaning or function of the symbols if needed.

Hashtags and emojis

  • Hashtags can be created for users to follow specific topics on websites and social media platforms such as Twitter and Instagram.
  • Adopt camel case in creating hashtags by capitalizing the first letter of each word and/or adding underscore in the multiple-word hashtags. An example is “#adoptcamelcase” versus “#Adopt_Camel_Case”.
    • It would enhance the readability of the hashtags for everyone. It would provide cue to people with dyslexia or cognitive disability to identify the word pattern and recognize the words in the hashtag.
    • It could give the cue that there are different words in the hashtag. Screen readers might be able to read aloud the hashtag as different words as intended. Without spaces between words in the same hashtag, there would be no cues for the screen readers to distinguish the separate words in the hashtags. The screen readers might turn out to read aloud the whole hashtag as one long word.
  • Do not use hashtags alone to convey important information.
  • Do not overuse hashtags in social media content. Having too many hashtags within the same piece of content would make audience difficult to understand the content.
  • Emojis and emoticons could help convey different emotions and create a more welcoming and friendly tone of the social media content.
  • Use emojis or emoticons to supplement words rather than replace them.
  • Do not use emojis and emoticons to convey important information. Add text description to help everyone understand the social media content if needed.
  • Each emoji has a default alternative text. Screen readers would read aloud the corresponding alternative text of each emoji.
    • Refer to Emojipedia which documents the descriptions and variation of emoji display across online platforms in the Unicode Standard.
  • Different computer operating systems may display the same emojis differently. It may cause differences in interpretation of the same information.
  • Do not overuse emojis or emoticons. Having too many emojis within the social media content would make it difficult to understand the social media content.
    • For example, the default alternative text for the emoji “😆” on Apple iOS system is “Grinning Squinting Face”. If a series of emoji “😆” is used continuously, such as “😆😆😆😆😆”, screen readers might read aloud as “Grinning Squinting Face, Grinning Squinting Face, Grinning Squinting Face, Grinning Squinting Face, Grinning Squinting Face”. It can be annoying and confusing to the users. It may disrupt the flow of reading and understanding.
  • Emoticons are generally created by combination of symbols, alphabets, and characters. Although the use of emoticons becomes more and more common, not everyone understand their meanings. The meanings of each emoticon may not be universal.
  • While sighted users could read and interpret the visual presentation of the emoticons as a whole directly, screen reader users may hear the components of an emoticon separately. It would be confusing to screen reader users and affect their understanding of the content.
    • For example, screen readers might read aloud the emoticon “ 🙂 ” as “semicolon parenthesis”; and “XD” as “X D” instead of the intended meaning of “laughing”.

Graphics

  • Alternative text (“Alt Text”) concisely describes the content and the purposes of the graphical content in brief phrases or 1-2 sentences. Examples of graphical content include shapes, pictures, charts, and graphics.
  • Alt text enables screen reader users to understand graphical content. When screen readers recognize an image with Alt Text, screen readers will read “Image” or “Graphic” followed by reading the associated Alt Text.
  • Sighted users generally do not see the Alt Text. However, when images do not load successfully and/or the browsers block images by default, Alt Text of that image may display to let users know what the image is about. Sighted users would also see the Alt Text under this situation even if they are not using assistive technologies.
  • In general, no need to begin the Alt Text with phrases such as “Picture of…” or “Image of…”
    • When screen readers recognize an image with Alt Text, screen readers will read “Image” or “Graphic” followed by reading the associated Alt Text.
  • Include the informative text embedded within the graphical content in the Alt Text.
  • Be aware that hyperlinks in the Alt Text cannot be activated or presented by link text.
  • Use punctuation such as periods to end the Alt Text. Otherwise, screen readers may mix up the Alt Text and the main body text that follows. It may confuse the users.
  • For any acronym to be read aloud letter-by-letter (such as “I” – “D” – “E” – “A”) instead of as a word (such as “IDEA”), the letters in the acronym may be spaced out (such as “I D E A”) so assistive technologies such as screen readers would read aloud letter-by-letter.
  • The set of commands to insert Alt Text may be different across social media platforms. Refer to the platform’s user guidelines for details.
  • Sometimes, an Alt Text is auto-generated by the system of some social media platforms, but it might not be accurate. Remove this auto-generated descriptive and input your own Alt Text.
  • Graphical content that are purely for visual decorative purposes, for formatting purposes (such as stylistic borders), repetitively used, or do not provide meaningful information generally do not require Alt Text.
    • You may enter “Decorative” in the Alt Text. Users will understand they do not miss important information.
    • Select the “Mark as decorative” option if some social media platforms provide such option. This hides the image from screen readers. Screen readers will not read aloud this image.
  • Do not write detailed and lengthy description of complex graphical content as Alt Text, e.g., charts and graphs. Consider providing the lengthy description within the body text of the social media posts. It can also help every user understand the content, not only screen reader users.
  • Image captions are visible to all users, but Alt Text is generally visible to mainly screen reader users. You may write the image caption at the end of the posts.
    • For example: “Image description: A ramp access to the classroom”
  • Sometimes, the word limit does not allow you to include the image description in the body text of the post. You may first write “Image description in comments” in the body text of the post. Then, write the image description in the first comment under that post.
  • Do not repeat the same information in the Alt Text and the image caption.
    • If you have already provided detailed description in the image caption, you may write “Refer to the image caption” in the Alt Text.
  • The information conveyed by the Alt Text or image caption and the associated graphical content should be equivalent. Audience should be able to receive the same information if they access either the non-visual content or the Alt Text or image caption alone.
  • Further guidelines for writing Alt Text and image descriptions:
  • Provide both the infographics and the associated transcripts within the same social media post.
    • It would enhance the access for assistive technologies users, people with visual impairment, and/or users with limited Internet access which could not support downloading the infographics.
    • Display the full text of the transcript directly above, below, or next to the graphics whenever it is possible.
    • Use toggle to show or hide the transcript.
    • Provide a link to a file or webpage for the transcript.
    • Add a note of “Transcript follows the flyer” or “Refer to the attachment [or other specified location] for the transcript” to notify users if needed.
  • Transcripts are the text version of the content conveyed by the infographics.
  • The information conveyed by the transcripts and the associated infographics should be equivalent. Users should be able to receive the same information if they access either the graphics or transcripts alone.
  • If the infographics include any dialogue, the transcripts should indicate the “speakers” of the dialogue.

Audio-visual content

  • Creative use of animation, GIFs, or flashing content may promote user engagement. Common examples of animations appearing on social media posts are slideshows, motion graphics and animated backgrounds. However, be aware of the use of animations or flashing objects.
  • Content that flashes more than three times per second may trigger unpleasant feelings, dizziness, nausea, or seizures in some people, such as people who are photosensitive.
  • According to the WCAG Success Criterion 2.3.1, websites should not contain “anything that flashes more than three times in any one second period”.
  • Animation, GIFs, or flashing content may distract some users from the main content, especially people who have difficulties in reading or concentrating.
  • Users of assistive technologies such as screen readers and magnifier may not be able to interpret the rapidly changing animated content in time before the content goes away.
  • Provide an option (e.g., “On Click”) to allow users to play, pause, or stop the autoplay of the flashing content, if possible. It allows users to read the content at their own pace or as they want to.
  • Do not convey important information solely by animation, GIFs, or flashing content. Provide Alt Text or caption.
  • Provide subtitles, transcripts, and audio descriptions for video and audio. Audio description provides narration of the key visual elements in the video. It makes the video more accessible to people with visual impairment.
  • Provide transcripts and timestamps for different sub-sections of the video or audio for users’ easy navigation.
  • Some social media platforms provide auto-captioning function. However, be aware of the accuracy of the auto-generated captions.
  • Some social media platforms allow users to input their own captions and timestamps. It is the recommended practice.
  • If you embed the subtitles in the video file directly, make sure the font, font size, and colour contrast of the text and background are accessible and easy to read.
  • If you really cannot provide subtitles and/or transcripts of the video or audio, you may mention this point in the posts to notify the users.
  • Avoid autoplay of media such as video and audio by default.
  • Unexpected content and default autoplay may be inaccessible to some users of assistive technologies such as screen readers.
  • Unexpected sound or flashing content may trigger seizures or discomfort in some people.
  • Unexpected sound may be shocking or distracting to some users.
  • If there will be sudden loud noise or any potentially triggering scenes in the media, mention this information in the posts to alert the users. For example, users may want to turn down the volume of their earphones before playing the media file.
  • Allow users to control playback of the media at the own pace whenever it is possible. Users may want to re-visit certain parts of the media content at their own pace.

Hyperlinks

  • If there are any QR codes in the posts that contains hyperlink, provide the URL full address and/or the link text for that URL in the posts.
  • Do not include the URL only in the Alt Text of the QR codes. Screen reader users may not be able to click and activate the URL in Alt Text.
  • Users of assistive technologies such as screen readers users sometimes scan a list of hyperlinks for effective navigation and understanding.
  • Screen readers would read aloud link text, such as “link, [link text], out of link”, to notify users that this is a hyperlink.
  • Do not simply use non-descriptive link text such as “Read more”, “More information here”, or “Click here” to present the hyperlink. It is important the link text is concise and give relevant information of the action and destination of the hyperlinks.
    • Screen readers would read it as “Read more, link” or “Click here, link”. It is confusing as it does not provide meaningful information of where or what the hyperlinks will take the users to and when used out of context.

Use of colours

  • Make sure to check colour contrast. Content with sufficient colour contrast is easier for everyone to read. Content without sufficient colour contrast would be inaccessible to some users, particularly:
    • People who are colour blind;
    • People with visual impairment;
    • People viewing the posts through monitors in bright sunlight or glare;
    • People viewing the posts through a projector display in a well-lit venue.
  • Make use of software applications to check colour contrast. There is a number of colour contrast checkers that are free-of-charge.
    • Colour contrast is checked against the Web Content Accessibility Guidelines (WCAG) using these checkers. Enter the colours of the background and foreground (e.g., text), respectively. These checkers generally allow multiple methods of entering colours, such as the colour picker tool, RGB colour codes, or hex colour codes. The colour picker is particularly useful to users who are unfamiliar with colour codes. Then, the checkers will tell whether this colour combination would fulfil or fail the colour contrast requirements based on the WCAG Guidelines. If it fails, then it might suggest that we need to consider changing the colour of either the background or the foreground colours, or both. Otherwise, this colour combination might not be visually accessible to some readers. After we change the colours, re-do the check, until you get a combination that fulfils the accessibility requirement.
  • Examples of colour contrast checkers that are free-of-charge:
    • WebAIM Contrast Checker: An online checker.
    • WebAIM Link Contrast Checker: An online checker. It helps check the colour contrast between the link text, the surrounding body text, and the background colour.
    • Colour Contrast Analyser (CCA) from TPGi: It needs to be downloaded onto your computer, available for both Windows and Mac. It also provides a Color Blindness Simulator.
    • Adobe Colour Contrast Analyzer: An online checker. You may input the text colour and background colour values or upload a screenshot of your project to pick the colours you want to check for contrast. It will also recommend colours that would give better contrast. In the Accessibility Tools tab of the Adobe Colour Contrast Analyzer, apart from general colour contrast checker, you can choose the Colour Blind Safe Checker to check whether the colour theme or palette would be accessible for people with colour blindness.
  • Ensure sufficient colour contrast between the link text and its surrounding body text. Ensure the colours of the not-yet-visited hyperlinks and visited hyperlinks show sufficient contrast against the background colours, respectively.
  • Check whether the social media posts are properly displayed in grayscale and other colour filters that simulate colour blindness situations.
    • Examples of colour filters for checking display:
      • Windows Built-in colour filters: Go to Start > Settings > Ease of Access > Colour Filters. Switch on the toggle for colour filters.
      • Mac Built-in colour filter: Go to Apple menu > System Preferences > Accessibility > Display > Colour Filters > Enable Colour Filters > Select Grayscale in the dropdown menu. Then, the grayscale filter will be applied to the entire screen.
    • Try selecting the other colour filters in the dropdown menu to view the posts in simulated colour blindness situations. Fix any parts that do not present the intended meanings under colour filters.
  • Do not use “colour-on-colour” background and text, such as light blue text on dark blue background.
  • Avoid overlay text on a busy background.
    • Images usually consist of a wide range of colours. It could be difficult to ensure sufficient contrast between the colours in the background image and the text. It is difficult to read the overlaid text.
  • Examples of increasing the accessibility of the text overlay:
    • Method 1: Insert the text over the plain section of the photo. Ensure sufficient colour contrast between that section and the text.
    • Method 2: Insert a solid background behind the text. Ensure sufficient colour contrast between the solid background and the text.
    • Method 3: Insert a darker overlay to the image to increase the colour contrast between the background and the text.

Images comparing the not-recommended way of overlaying texts over a busy background, and the three more accessible methods to increase the accessibility of text overlay.

Sharing third-party content

  • It is common to share content from other sources on social media platforms. However, these external contents may or may not be accessible. You may try to enhance the accessibility of these shared content through the posts that are posted by you.
  • For example, an image you are sharing may not contain Alt Text. You would need to add the image description in the posts that are posted by you.
  • When you share a hyperlink, a preview image may display in the post. You may first determine whether this preview image is informative or decorative. If it is informative, then you may provide the image description in your post. If the preview image is mainly decorative, then you may not need to provide image description.
  • Sometimes, the word limit does not allow you to include the image description in the body text of the post. You may first write “Image description in comments” in the body text of the post. Then, write the image description in the first comment under that post.

Support for visitors

  • Try to provide links to the social media platform’s accessibility support page for visitors’ reference.
  • It is recommended that administrators of the social media platforms and applications familiarize themselves with their platform’s accessibility support tips.
  • Provide contact information for visitors’ enquiry about any accessibility issues regarding the social media contents.
  • Consider providing multi-modal of contact methods, such as email and phone call, to cater for diverse needs of users.
    • For example, providing phone hotline as the only contact method might be inaccessible to deaf or hard-of-hearing users.
  • If the contact information is too long to be placed somewhere in the social media account or posts due to word limit or other reasons, consider putting a hyperlink that can direct visitors to another destination with the detailed contact information.
  • If you manage more than one social media platform or application, post the same content across the multiple platforms. It helps ensure visitors of different platforms could access the same content.
  • Sometimes there might be limitations in accessibility support on different platforms. Posting the same content on multiple platforms could help visitors with different access needs to obtain the same information.
  • For example, social media platform A supports the Alt Text function, but social media platform B does not. Images posted on the platform A would be likely inaccessible to screen reader users. Alt Text can be added on the platform B for screen reader users’ access.

Accessibility check

  • Try inviting people with disabilities through university’s student affairs unit, NGOs referral, open recruitment, or personal invitation, to test the social media platform settings and posts; share their user experience and possible alternative solutions to any potential inaccessibility issues.
  • Try navigating the social media platforms and going through the posts using a keyboard (e.g., the TAB key only) instead of a mouse. It helps test the keyboard accessibility for some users.
  • Go through the posts with screen magnifier and screen readers. For example:
  • Test for any problems with the content when it is magnified to around 200%.
  • Test whether the posts are properly displayed across operating systems and devices, such as computers (e.g., Windows and iOS), mobile phones (e.g., Android and iOS), and tablets. Screen size and orientation of the gadgets may also affect the display and readability of the posts. Make sure the content would function properly in both portrait and landscape orientations.
  • Some organizations provide professional testing and consultation of website accessibility. Examples of local community resources:
    • Digital accessibility consultation service by GATE, Hong Kong Blind Union
      The digital accessibility consultation service provides accessibility testing, consultation, training on website and mobile applications construction. The accessibility testing is conducted by experienced testers using automatic testing software and by manual testing using different screen readers and screen magnification software in a systematic way with reference to the Web Content Accessibility Guidelines (WCAG). An assessment report with suggestions for improvement will be provided.
    • Hong Kong Sign Language Association
      Website accessibility testing by deaf or hard-of-hearing individuals.