1 of 77

Accessibility for Social Media

Let’s Go!

2 of 77

Agenda

Alt text - What you need to know.
Video - Audio and Captions
Hootsuite
Instagram
Facebook
Twitter
LinkedIn
Captions Via Premiere Pro
Instagram CC
Facebook CC

For more information on ASU Social Media Accessibility, click here!

{

3 of 77

ASU Charter

ASU is a comprehensive public research university, measured not by whom it �excludes, but by whom it includes and how they succeed; advancing research and discovery of public value; and assuming fundamental responsibility for the �economic, social, cultural and overall �health of the communities it serves.

4 of 77

Introducing Alt Text

5 of 77

Alt Text

Alt text is critical for those who use screen readers, particularly those who are visually impaired or blind, to process images on a page. It provides semantic meaning to, and a description of, and image. It is also used by search engines to return search results.

Reference material

6 of 77

Here are some tips for alt text…

Identify the purpose.

Does the image create a mood or portray something specific?
If an image is decorative, meaning it doesn’t provide any additional value, you can write the alt text as null.

Tip - One way of finding the purpose is to disregard the image and only read the content and then re-look at the document along with the image. What additional information or mood does the image convey?

7 of 77

Be concise and accurate

A good alternative text provides a precise description of the image and conveys what is most important. If it requires for you to “set the mood” then do so.

Ex: Student jumps for joy during a graduation ceremony.
A family sits together, holding hands, devastated by the loss of their furry friend.

Be accurate and ensure that all of the information that you are adding to the alt text is correct.

Tip - Close your eyes for a few seconds. What are the highlights of the image that you are remember?

8 of 77

Be equivalent.

The purpose of writing alternative text is to provide a textual description of the image without losing or adding information so that it is equivalent to what a sighted user would normally gauge from viewing the image.
Omit extra information. Ex. If the student is not identified in the copy, there is no need to be that specific in the alt text.
If the person is known and you acknowledge them in the copy of the post, feel free to use their names in the alt text. (ex. You have a picture of Dr. Crow with Sparky for Mascot day. Your alt text should read. “President Michael M. Crow smiles with Sparky”...)

9 of 77

Use language appropriate for the audience and matching the post.

For example, if you have to provide alternative text for the image of a human body in a health insurance form. First, you would see whether the image is used for marking out diseased areas on the body or it is used to explain a certain disease explained in the surrounding content. Secondly, since the targeted audience is a customer (general public), even if a detailed description is required, you would need to keep the medical terminologies to a minimum and use them only if required.

10 of 77

Use proper punctuation and sentence structure.

Even though the alternative text is going to be read out by the screen reader, proper punctuation does matter. Whenever the screen reader comes across a comma or a period, it takes a pause (a small one for a comma and a long one for a period). This gives the user a more pleasant and natural experience when listening to the alternative text.
If there is text on the image, make sure that you include that as well, since screen readers can not pick up text that is embedded into an image.

11 of 77

Video - Why captions and audio are important

12 of 77

For the next 10 seconds, close your eyes. ��1. What was the video about?

2. What important information did you get/miss?

Start at 15 seconds.

13 of 77

Audio is important for those who are visually impaired or also have a learning disability such as dyslexia. In the same way alt text provides information about a photo, audio helps provide the user with the context.

14 of 77

For the next 10 seconds, watch the video. Make sure the cc (closed captioning) is off.

What were these two talking about?
What if every video you saw online, you couldn’t get context for?

Start at 51 Seconds

15 of 77

Captioning allows those who are hearing impaired to still engage with the content. Using clear and precise language is important and should be reviewed before publishing. The easiest way to utilize captions for social is to use open captions, or burn the captions in. This insures that nothing is being covered, like the lower thirds.

16 of 77

Adding Alt Text using Hootsuite

Items to note…

Hootsuite will allow you to add alt text for Twitter, Facebook and LinkedIn. Because of Instagram’s API, you will need to use one of the Meta platforms to add photo descriptions. Currently, there are no third party scheduling tools that allow alt text to Instagram. You will need to use a Meta product to add as of right now.

Please note the number of characters available. In most cases the amount provided should be more than enough but be advised, if you have a text heavy image, you may need more characters.�— Updated June 16, 2022

17 of 77

Best tips for captions.

Be accurate. Check the spelling, grammar and punctuation.
Make sure that your captions are consistent. Don’t jump them around the screen for your animations, but keep a consistent spot and move other elements out of that space.

Note _ This is only if you are not making the captions a part of the video. If you are going to animate them and include them as part of the overall visual, you won’t need the captioning as well.

Synchronize with the audio and make sure the captions are not obscured.
Notate when speakers change. Use the full name the first time and then you can just rely on first or last names (depending on the tone of the video).

18 of 77

Adding Alt text with Hootsuite

19 of 77

Step 1

Step 2

Create a post

Select the image(s) you want to post.

20 of 77

Step 3

Step 4

Click “Create alt text” to add description.

Be sure to click apply when finished.

21 of 77

Adding alt text for Instagram

22 of 77

Adding Alt Text in Instagram

You’ll find all the different places that you can add alt text to your photos on the Instagram, but reminder, there is currently no third party (meaning not owned by Meta) that you can add alt text to Instagram.

Instagram App
Using the desktop app. - You can alt text video using this platform (great for gifs or short videos with no audio component (typically 15 seconds or less)
Meta Creator Studio - (Only way to schedule and add alt text)

23 of 77

Adding alt text IG App

24 of 77

Step 1

Step 2

Step 3

Open the new post section of the app.

Select the image(s) you’d like to share.

Go through the prompts until you get the caption.

25 of 77

Step 1

Step 2

Step 3

Go to the section labeled “Advanced Settings.”

Under “Accessibility” Click the “Write alt text”

Type your alt text & click the check when done.

26 of 77

Adding alt text IG Desktop

27 of 77

Step 1

Step 2

Instagram.com - Find the plus button to add a post.

Select the image(s) you want to post.

28 of 77

Step 3

Step 4

Click through the prompts. (two clicks)

Once you get the caption, Click on “Accessibility”

Once you click on accessibility a drop down will show up providing you with the space to write your alt text.

29 of 77

Adding alt text Creator Studio

30 of 77

Step 1

Step 2

Navigate to Creator Studio and click the Instagram Logo

You can do a Google search or find from your profile.

Click create a post on the left hand side, then feed.

31 of 77

Step 3

Step 4

Select your account

Add your content.

32 of 77

Step 5

Step 6

Click on “Advanced Settings

Add alt text to your image(s)

33 of 77

Adding alt text for Facebook

34 of 77

Adding Alt Text to Facebook

You’ll find all the different places that you can add alt text to your photos for Facebook.

Facebook App
Using the desktop app.
Meta Creator Studio

35 of 77

Adding alt text FB Desktop

36 of 77

Step 1

Step 2

Find your create post and add your media

Select the image(s) you want to post.

37 of 77

Step 3

Step 4

Click “Edit”

Select “Alternative text” on the right hand side.

Once you click on accessibility a drop down will show up providing you with the space to write your alt text.

38 of 77

Step 5

Pick Custom Alt text and type your description and remember to save when finished.

39 of 77

Adding alt text Creator Studio

40 of 77

Step 1

Step 2

Navigate to Creator Studio and click the Facebook Logo

You can do a Google search or find from your profile.

Create a new post

41 of 77

Step 3

Step 4

Select your account

Add your content.

42 of 77

Step 5

Step 6

Hover over the photo and click the pencil to edit

Select the Alt Text section on the right side

43 of 77

Step 7

Be sure to click save after you’ve completed the text

44 of 77

Adding alt text for Twitter

45 of 77

Adding Alt Text to Twitter

Twitter has a few places for you to add alt text too! Remember, when you use Twitter, you can also alt text gifs!

App
Desktop
Tweetdeck

46 of 77

Adding alt text TW Desktop

47 of 77

Step 1

Step 2

Start a new tweet and add your media.

Once the photo is loaded, click “Add description”

48 of 77

Step 3

Step 4

Ensure you are on the “ALT” tab and add your description.

Be sure to save when you’ve completed your text.

49 of 77

Adding alt text Tweetdeck

50 of 77

Step 1

Step 2

Start a new tweet and add your media.

Add your photo

51 of 77

Step 3

Step 4

Click on “Add Description”

Type the alt text in the box provided and click apply

52 of 77

Adding alt text TW App

53 of 77

Step 1

Step 2

Start a new tweet and add your photo.

Once the photo is loaded, click “+ALT”

54 of 77

Step 3

Add your alt text and be sure to click done when you’ve completed it.

55 of 77

Adding alt text for LinkedIn

56 of 77

Adding Alt Text to Facebook

You’ll find all the different places that you can add alt text to your photos for Facebook.

LinkedIn Desktop
LinkedIn Mobile

57 of 77

Adding alt text LI Desktop

58 of 77

Step 1

Step 2

Start a new post and add your photo.

Once the photo is loaded, click “Alt. text”

59 of 77

Step 3

Type your alt text and save.

60 of 77

Adding alt text LI App

61 of 77

Step 1

Step 2

Start a new post

Add your photo.

62 of 77

Step 3

Step 4

Click on the “Add alt text” at the bottom of the screen.

Add your photo description and be sure to click Next at the very top.

63 of 77

Adding Captions on Premiere Pro Watch HERE

64 of 77

Adding Captions on Instagram

65 of 77

Step 1

Add your video and find the section for stickers.

Note: Manual captions can only be added via the mobile app right now. The best thing to do is to embed or burn them in using your editing tools.

66 of 77

Step 2

Click the Captions sticker. If you don’t see it right away, you can use the search feature.

67 of 77

Step 3

You can change the type of captions at the bottom of the screen along with the color and motion at the top of the screen.

68 of 77

Step 4

Click on the words to edit them for clarity, grammar and punctuation.

69 of 77

Adding Captions on Facebook

70 of 77

Step 1

Step 2

Head to Meta Creator Studio and upload a video

Navigate to the optimize tab on the left side.

71 of 77

Step 3

Ensure that captions is checked and then click on settings.

72 of 77

Step 4

If you have an .srt file, you can upload it here or allow for the auto captions.

73 of 77

Step 5

Once the auto captions have been created, you can go in an edit them for clarity, grammar and punctuation.

74 of 77

Step 5

Once the auto captions have been created, you can go in an edit them for clarity, grammar and punctuation.

75 of 77

Adding Captions on Twitter

76 of 77

Step 1

Step 2

Head to the media studio

Add your video.

There is no automatic option for Twitter. You will need an .srt file or to embed or burn the captions into the video.

77 of 77

Step 5

Step 6

Once the video has completed uploading, click on the video to add the captions.

Click on the Subtitles section and add your .srt file