{"id":1737,"date":"2020-03-23T15:20:11","date_gmt":"2020-03-23T22:20:11","guid":{"rendered":"https:\/\/wou.edu\/marcom\/?p=1737"},"modified":"2020-03-23T15:20:11","modified_gmt":"2020-03-23T22:20:11","slug":"how-to-make-your-social-media-content-more-accessible","status":"publish","type":"post","link":"https:\/\/wou.edu\/marcom\/2020\/03\/23\/how-to-make-your-social-media-content-more-accessible\/","title":{"rendered":"How to make your social media content more accessible"},"content":{"rendered":"

It\u2019s important that we work to make our social media content as accessible to people with disabilities as possible so our content can be consumed equitably. There are a lot of tools available to us as well as tips of ways to alter your posts to make them accessible. <\/span><\/p>\n

People with disabilities may use assistive technologies like screen readers to help them navigate social media platforms and we need to make our posts as friendly to those technologies as we can.<\/span><\/p>\n

 <\/p>\n

Image descriptions <\/span><\/strong><\/p>\n

These are used to convey what\u2019s visible in any visual (e.g., image, graphic, gif, video) to someone who may not be able to see all or any of it. A screen reader will read aloud whatever is written as an image description. A good image description details any action happening, who or what is in the visual, the placement of what\u2019s there, and even mood or emotion. Try to keep an image description to no longer than a tweet (or, 280 characters). <\/span><\/p>\n

 <\/p>\n

Alt text<\/span><\/strong><\/p>\n

This is a much shorter version of an image description and is usually the field or option you\u2019ll see on a social media platform or when uploading an image to WordPress. This is intended to be a brief and direct description of what\u2019s in the image. Not only is it used by screen readers, but if the website doesn\u2019t load your image properly, whatever text is included as the alt tag will appear in the image\u2019s place. Try to limit your alt text to the old school tweet length (i.e. 140 characters).<\/span><\/p>\n

 <\/p>\n

Image description vs alt text<\/span><\/strong><\/p>\n

Here is an example of how one of our Wolfie gifs could be described to highlight the difference between an image description and alt text.<\/span><\/p>\n

Image description: Wolfie is standing in front of a white background and wearing a red T-shirt. He\u2019s giving two thumbs up and shaking his hands enthusiastically.<\/span><\/p>\n

Alt text: Wolfie giving two thumbs up.<\/span><\/p>\n

 <\/p>\n

Closed captioning<\/span><\/strong><\/p>\n

Captioning is the text that appears on videos, usually at the bottom, that transcribes spoken text or ambient noise in a video. This is a great way to make them more accessible to people who are deaf or hard of hearing. Plus, many people watch videos with the sound off so captioning increases the number of people who can enjoy your videos.<\/span><\/p>\n

Some social media platforms, like YouTube, will automatically apply closed captions to a video. Unfortunately, they\u2019re sort of notoriously inaccurate, but they are better than no closed captions on a video. The best practice is to either correct automatically produced closed captions or create your own closed captions through tools like Amara.org (which is free!).<\/span><\/p>\n

 <\/p>\n

Add gif and video descriptions<\/span><\/strong><\/p>\n

Though the platforms make it easy to add descriptions and alt text to images, they fall short on offering the same for gifs and videos. A great way to make these more accessible is to add your own video or gif description to the Instagram caption, Facebook caption\/post or tweet. This is usually done by putting the alt text in brackets and you could indicate whether it\u2019s alt text for a gif or video (e.g., alt gif or alt video). For example:<\/span><\/p>\n

Wolfie wishes everyone good luck on their finals!<\/span><\/p>\n

[alt gif: Wolfie is giving two thumbs up and shaking his hands enthusiastically]<\/span><\/p>\n

 <\/p>\n

Facebook accessibility<\/span><\/strong><\/p>\n

When you upload an image to Facebook, it automatically produces alt text for your images, but it\u2019s usually inaccurate. You can change the alt text for images you\u2019re uploading and ones you\u2019ve previously uploaded. <\/span><\/p>\n

 <\/p>\n

Add alt text to new images via desktop<\/span><\/em><\/p>\n

    \n
  1. Add an image to your post draft<\/span><\/li>\n
  2. Hover your mouse over the image<\/span><\/li>\n
  3. Click on the paintbrush graphic then on \u201calt text\u201d on the left sidebar<\/span><\/li>\n
  4. Click on that and you\u2019ll see the automatically produced alt text<\/span><\/li>\n
  5. Select \u201coverride generated alt text\u201d and type in your description.<\/span><\/li>\n<\/ol>\n

     <\/p>\n

    Edit alt text to previously uploaded images via desktop<\/span><\/em><\/p>\n

      \n
    1. Find that image and click on it to make it large<\/span><\/li>\n
    2. Hover over the image so you see a row of options appear across the bottom then select \u201coptions\u201d <\/span><\/li>\n
    3. Click on \u201cchange alt text\u201d from the menu that appears and type in what you\u2019d like<\/span><\/li>\n<\/ol>\n

       <\/p>\n

      Edit alt text to images on mobile<\/span><\/em><\/p>\n

        \n
      1. Tap on the image to make it large<\/span><\/li>\n
      2. Select the three dots in the upper-right<\/span><\/li>\n
      3. Tap on the \u201cedit alt text\u201d option in the menu that appears<\/span><\/li>\n
      4. Select \u201coverride generated alt text\u201d to apply the text you\u2019d like<\/span><\/li>\n<\/ol>\n

         <\/p>\n

        Instagram accessibility<\/span><\/strong><\/p>\n

        Add your image to Instagram as a new post and pause when you get to the screen that asks for your caption, people to tag, and location. <\/span><\/p>\n

          \n
        1. Swipe to the bottom and look for \u201cadvanced settings\u201d <\/span><\/li>\n
        2. Tap that link and swipe down to find the the \u201cwrite alt text\u201d option under \u201caccessibility\u201d<\/span><\/li>\n
        3. Type your alt text in that field.<\/span><\/li>\n<\/ol>\n

           <\/p>\n

          Twitter accessibility<\/span><\/strong><\/p>\n

          Of these three platforms, Twitter is the only one that requires you to go in and turn on the accessibility feature. <\/span><\/p>\n

           <\/p>\n

          Turn on accessibility via desktop<\/span><\/em><\/p>\n

            \n
          1. Click on the three little dots down the left sidebar<\/span><\/li>\n
          2. Select \u201csettings and privacy\u201d <\/span><\/li>\n
          3. Click \u201caccessibility\u201d <\/span><\/li>\n
          4. Turn on the \u201ccompose image descriptions\u201d checkbox<\/span><\/li>\n<\/ol>\n

             <\/p>\n

            Turn on accessibility via mobile<\/span><\/em><\/p>\n

              \n
            1. Tap on the gear icon in the upper-right<\/span><\/li>\n
            2. You may be taken to an area labeled \u201cnotifications\u201d – if so, tap the left-facing arrow in the upper-left of the screen to take you to \u201csettings and privacy\u201d <\/span><\/li>\n
            3. Tap \u201caccessibility\u201d then make sure \u201ccompose image descriptions\u201d is turned on<\/span><\/li>\n<\/ol>\n

              Once you\u2019ve enabled this feature, you can upload a photo and you should see an option that says \u201cadd description\u201d in either the lower-left part of the image or just below the image. Click\/tap that to add your alt text or image description.<\/span>\u00a0<\/span><\/p>\n

               <\/p>\n

              Write hashtags in camel case<\/span><\/strong><\/p>\n

              To make hashtags more readable, capitalize the first letter of each word (also known as camel case). It can be difficult for many people to parse out the words in a hashtag, especially long ones. Not only does it make it easier for eyeballs to read, it makes it easier for screen readers to read because they can sort out and pronounce the words. <\/span><\/p>\n

              Instead of #howlaboutit, when using our official university hashtag, use #HowlAboutIt. <\/span>\u00a0<\/span><\/p>\n

               <\/p>\n

              Accessibility with graphics and text<\/span><\/strong><\/p>\n

              There are a few simple things you can do to make your graphics and text more accessible. <\/span><\/p>\n

               <\/p>\n

              Be thoughtful of color contrast with text. <\/span><\/em><\/p>\n

              White text over a light grey background will be hard to read, but white text on a red background has lots of contrast. Also be aware of certain color combinations that may make things unreadable or indistinguishable for people with color blindness (e.g., red\/green, green\/brown, blue\/purple, green\/blue, light green\/yellow, blue\/grey, green\/grey, and green\/black).\u00a0<\/span><\/p>\n

               <\/p>\n

              Go with larger text size.<\/span><\/em><\/p>\n

              Since many social media users are using mobile devices instead of laptops, graphics can appear small on smartphone screens. The smaller the text, the harder it is to read and images can become pixelated when zooming in. Start with your text on the larger side for readability.<\/span><\/p>\n

               <\/p>\n

              Add graphic information to alt text and\/or image captions<\/span><\/em><\/p>\n

              Screen readers can\u2019t read text on an image file\/graphic, so any information conveyed in the graphic (e.g., start time for a theatre production on a theater poster) should also be in the image caption and\/or alt text. <\/span><\/p>\n

               <\/p>\n

              Avoid text over busy backgrounds<\/span><\/em><\/p>\n

              Contrast is important for color choices and busy backgrounds. If you\u2019re placing text over a busy background, it can be more readable if you add a solid color block behind the text and in front of the busy background so people can easily see the text. <\/span><\/p>\n

               <\/p>\n

              Add line breaks to blocks of text<\/span><\/em><\/p>\n

              Paragraph breaks aren\u2019t just for essays and emails. Be sure to add line breaks (hit return a couple of times) between paragraphs when posting long messages on Facebook or Instagram captions. When a lot of text is together without a visual break, it can be hard for many people to read. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

              It\u2019s important that we work to make our social media content as accessible to people with disabilities as possible so our content can be consumed equitably. There are a lot of tools available to us as well as tips of ways to alter your posts to make them accessible. People with disabilities may use assistive […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_lmt_disableupdate":"","_lmt_disable":"","_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[],"class_list":["post-1737","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"modified_by":"Lisa Catto","_links":{"self":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/posts\/1737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/comments?post=1737"}],"version-history":[{"count":0,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/posts\/1737\/revisions"}],"wp:attachment":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/media?parent=1737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/categories?post=1737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/tags?post=1737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}