Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update social-media.md #772

Merged
merged 5 commits into from
Aug 22, 2024
Merged

Update social-media.md #772

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
002d904
Update social-media.md
thejordanwood Aug 21, 2024
c3d5ae4
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 21, 2024
20f927a
Update social-media.md
thejordanwood Aug 21, 2024
a44e1b0
Update social-media.md
thejordanwood Aug 22, 2024
749e0ce
Merge branch 'main' into thejordanwood-content-update-2
dmundra Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 32 additions & 67 deletions _guide/social-media.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,47 @@
---
layout: guide
title: Social media
description: Basic information on social media and accessibility.
excerpt: Basic information on social media and accessibility.
title: Social Media
description: How to make your social media content accessible.
excerpt:
sidenav: docs
categories:
- Accessibility
roles:
- Content designer
---

Basic information on social media and accessibility.

## Tips

### Text

* Use [plain language](https://accessibility.civicactions.com/guide/plain-language)
* Don't use all-caps
* Include descriptive text before links (example: "Read the help page for more info: [LINK]"


### Hashtags

* Use camel case for hashtags (example: #WebAccessibility)


### Images

* Avoid images of text
* Add alt text to all images
* Use static images instead of animated GIFs
* Make sure images have strong color contrast


### Video

* Add captions and transcripts
* Review any auto-generated text


### Emojis

* Use words instead of emojis to describe things
* Do not overuse emojis
* Add emojis at the end of messages


## Hashtags

Remember that it is easier to read and for assistive technolgy to pronounce if hashtags are written in #CamelCaseLetters. Each unique word in a hashtag should start with a capital letter.

Common accessibility-related hashtags:

* #accessibility
* #a11y
* #axschat
* #GAAD (during [Global Accessibility Awareness Day](https://globalaccessibilityawarenessday.org/))

Social media is used to create and share ideas, information, and interests. Accessible social media content allows people with disabilities to engage with these virtual communities instead of being shut out of the conversation. Taking steps to make your social media content accessible means that more people will be able to engage with it!

Check warning on line 13 in _guide/social-media.md

View workflow job for this annotation

GitHub Actions / remark-lint

[remark-lint] _guide/social-media.md#L13 

Hard to read sentence (confidence: 5/7)                                                                               readability  retext-readability
Raw output 
   13:77-13:228  warning  Hard to read sentence (confidence: 5/7)                                                                               readability  retext-readability

## Basic guidelines for social media

1. Keep text as clear and simple as possible by using [plain language](https://accessibility.civicactions.com/guide/plain-language).

Check warning on line 17 in _guide/social-media.md

View workflow job for this annotation

GitHub Actions / remark-lint

[remark-lint] _guide/social-media.md#L17 

`simple` may be insensitive, try not to use it                                                                        simple       retext-equality
Raw output 
    17:27-17:33  warning  `simple` may be insensitive, try not to use it                                                                        simple       retext-equality
* Use short sentences and choose words your audience uses.
* Don't use all-caps.
* Spell out abbreviations or acronyms.
* Include descriptive text before links. For example, "Read the help page for more info: (LINK)"
2. Add alternative text to all contextual images.
* Avoid images with text on them.
* Use static images instead of animated GIFs
* Make sure images have strong color contrast.
3. All videos should have captions and transcripts.
* Don't forget to review any auto-generated text.
4. Be thoughtful about the use of hashtags.
* If using hashtags, write them in camel case. This means that each unique word in a hashtag should start with a capital letter. This makes it easier for assistive technology to pronounce hashtags. For example, #WebAccessibility
5. Limit the use of emoji and special characters.

Check warning on line 30 in _guide/social-media.md

View workflow job for this annotation

GitHub Actions / remark-lint

[remark-lint] _guide/social-media.md#L30 

`special` may be insensitive, use `has a disability`, `person with a disability`, `people with disabilities` instead  special      retext-equality
Raw output 
    30:31-30:38  warning  `special` may be insensitive, use `has a disability`, `person with a disability`, `people with disabilities` instead  special      retext-equality
* Use words instead of emojis to describe things.
* Add emojis at the end of messages.
* Be aware of how screen readers voice emoji and special characters—it can change the meaning of your posts. Special characters can have long spoken names when voiced by a screen reader, burdening some of your users more than others.

Check warning on line 33 in _guide/social-media.md

View workflow job for this annotation

GitHub Actions / remark-lint

[remark-lint] _guide/social-media.md#L33 

`special` may be insensitive, use `has a disability`, `person with a disability`, `people with disabilities` instead  special      retext-equality
Raw output 
    33:55-33:62  warning  `special` may be insensitive, use `has a disability`, `person with a disability`, `people with disabilities` instead  special      retext-equality

Check warning on line 33 in _guide/social-media.md

View workflow job for this annotation

GitHub Actions / remark-lint

[remark-lint] _guide/social-media.md#L33 

`Special` may be insensitive, use `Has a disability`, `Person with a disability`, `People with disabilities` instead  special      retext-equality
Raw output 
  33:115-33:122  warning  `Special` may be insensitive, use `Has a disability`, `Person with a disability`, `People with disabilities` instead  special      retext-equality

## Resources

* [Accessible Social's free resource and education hub for social media](https://www.accessible-social.com/)
* [Digital.gov's toolkit for improving the accessibility of social media in government](https://digital.gov/resources/improving-the-accessibility-of-social-media-in-government/)
* [Planning, creating and publishing accessible social media campaigns](https://gcs.civilservice.gov.uk/guidance/digital-communication/planning-creating-and-publishing-accessible-social-media-campaigns/)
* [How to make images accessible for people on X (formerly Twitter)](https://help.x.com/en/using-x/picture-descriptions)

### General

* [Improving the Accessibility of Social Media in Government](https://digital.gov/resources/improving-the-accessibility-of-social-media-in-government/?dg) (Digital.gov)
* [Planning, creating and publishing accessible social media campaigns](https://gcs.civilservice.gov.uk/guidance/digital-communication/planning-creating-and-publishing-accessible-social-media-campaigns/)
* [Accessible Social](https://www.accessible-social.com)


### Twitter

* [How to make images accessible for people](https://help.twitter.com/en/using-twitter/picture-descriptions) (Twitter)
* [Learning to make Twitter content more accessible](https://digital.canada.ca/2021/03/12/learning-to-make-twitter-content-more-accessible/) (Canadian Digital Service)
* [Twitter Accessibility on Twitter](https://twitter.com/TwitterA11y)

## Next steps

### Facebook
When you are ready to learn more, here are some further guides and resources that may help your social media:

* [Facebook Accessibility on Facebook](https://www.facebook.com/accessibility)
* [Facebook Accessibility on Twitter](https://twitter.com/fbaccess)
* [Plain language guidelines](https://accessibility.civicactions.com/guide/plain-language)
* [Additional tools](https://accessibility.civicactions.com/guide/tools)