Skip to content

Commit

Permalink
Update social-media.md
Browse files Browse the repository at this point in the history
  • Loading branch information
thejordanwood authored Aug 21, 2024
1 parent 9c92362 commit 002d904
Showing 1 changed file with 32 additions and 67 deletions.
99 changes: 32 additions & 67 deletions _guide/social-media.md
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!

## 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).
- Use short sentences and choose words your audience uses.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    18:6-18:65  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- Don't use all-caps.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    19:6-19:28  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- Spell out abbreviations or acronyms.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    20:6-20:45  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- Include descriptive text before links. For example, "Read the help page for more info: [LINK]"

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   21:6-21:102  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Found reference to undefined definition no-undefined-references remark-lint
Raw output
  21:95-21:101  warning  Found reference to undefined definition       no-undefined-references      remark-lint
2. Add alternative text to all contextual images.
- Avoid images with text on them.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    23:6-23:39  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- Use static images instead of animated GIFs

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    24:6-24:50  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- Make sure images have strong color contrast.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    25:6-25:52  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
3. All videos should have captions and transcripts.
- Don’t forget to review any auto-generated text.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    27:6-27:55  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Expected a straight apostrophe: `'`, not `’` apostrophe retext-quotes
Raw output
   27:11-27:12  warning  Expected a straight apostrophe: `'`, not `’`  apostrophe                   retext-quotes
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

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   29:6-29:234  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
5. Limit the use of emoji and special characters.
- Use words instead of emojis to describe things.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    31:6-31:55  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- Add emojis at the end of messages.

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    32:6-32:42  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- 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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   33:6-33:239  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

## Resources

- [Accessible Social’s free resource and education hub for social media](https://www.accessible-social.com/)

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   37:1-37:109  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Expected a straight apostrophe: `'`, not `’` apostrophe retext-quotes
Raw output
   37:21-37:22  warning  Expected a straight apostrophe: `'`, not `’`  apostrophe                   retext-quotes
- [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/)

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   38:1-38:178  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Expected a straight apostrophe: `'`, not `’` apostrophe retext-quotes
Raw output
   38:15-38:16  warning  Expected a straight apostrophe: `'`, not `’`  apostrophe                   retext-quotes
- [Planning, creating and publishing accessible social media campaigns](https://gcs.civilservice.gov.uk/guidance/digital-communication/planning-creating-and-publishing-accessible-social-media-campaigns/)

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   39:1-39:204  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- [How to make images accessible for people on X (formerly Twitter)](https://help.x.com/en/using-x/picture-descriptions)

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
   40:1-40:121  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

### 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)

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    46:1-46:91  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint
- [Additional tools](https://accessibility.civicactions.com/guide/tools)

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

View workflow job for this annotation

GitHub Actions / remark-lint

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

Marker style should be `*` unordered-list-marker-style remark-lint
Raw output
    47:1-47:73  warning  Marker style should be `*`                    unordered-list-marker-style  remark-lint

0 comments on commit 002d904

Please sign in to comment.