-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
- Loading branch information
There are no files selected for viewing
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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L18
Raw output
|
||
- Don't use all-caps. | ||
Check warning on line 19 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L19
Raw output
|
||
- Spell out abbreviations or acronyms. | ||
Check warning on line 20 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L20
Raw output
|
||
- 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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L21
Raw output
Check warning on line 21 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L21
Raw output
|
||
2. Add alternative text to all contextual images. | ||
- Avoid images with text on them. | ||
Check warning on line 23 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L23
Raw output
|
||
- Use static images instead of animated GIFs | ||
Check warning on line 24 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L24
Raw output
|
||
- Make sure images have strong color contrast. | ||
Check warning on line 25 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L25
Raw output
|
||
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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L27
Raw output
Check warning on line 27 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L27
Raw output
|
||
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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L29
Raw output
|
||
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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L31
Raw output
|
||
- Add emojis at the end of messages. | ||
Check warning on line 32 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L32
Raw output
|
||
- 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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L33
Raw output
|
||
|
||
## 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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L37
Raw output
Check warning on line 37 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L37
Raw output
|
||
- [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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L38
Raw output
Check warning on line 38 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L38
Raw output
|
||
- [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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L39
Raw output
|
||
- [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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L40
Raw output
|
||
|
||
### 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) | ||
|
||
|
||
|
||
* [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 | ||
|
||
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 GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L46
Raw output
|
||
- [Additional tools](https://accessibility.civicactions.com/guide/tools) | ||
Check warning on line 47 in _guide/social-media.md GitHub Actions / remark-lint[remark-lint] _guide/social-media.md#L47
Raw output
|