- Alt Text Basics<\/a><\/li>
- Alt Text on Facebook<\/a><\/li>
- Alt Text on Instagram<\/a><\/li><\/ul>\n<\/div>\n\n\n\n
\n- Alt Text on Twitter<\/a><\/li>
- Glossary<\/a><\/li>
- References<\/a><\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\nAlternative Text Basics<\/h2>\n\n\n\n
What is Alternative Text?<\/strong><\/h3>\n\n\n\n
Alternative text<\/em><\/strong> is a text description for non-text content on the web, like images. It is also known as alt text<\/em>, image descriptions<\/em>, alt attributes<\/em>, alt descriptions<\/em>, and (incorrectly) alt tags<\/em>.<\/p>\n\n\n\n
The use of alternative text has been a best practice in web design for more than twenty years, but it wasn\u2019t until fairly recently that users have been able to add it to images on social media platforms like Facebook, Instagram, Twitter, and LinkedIn.<\/p>\n\n\n\n
Who Benefits from Alternative Text?<\/strong><\/h3>\n\n\n\n
Alternative text is helpful to a variety of people for multiple reasons, including:<\/p>\n\n\n\n
- People with visual impairments (e.g., blindness, low vision) who use assistive technology to browse the web.<\/li>
- People with poor internet connections that can\u2019t load images.<\/li>
- People who want their images to be found in Google Image searches.<\/li><\/ul>\n\n\n\n
Best Practices for Writing Alternative Text<\/strong><\/h3>\n\n\n\n
Successful alternative text should be short, descriptive, and easy to understand. Consider how you would describe the image to someone who couldn\u2019t see it, and how you could do so quickly.<\/p>\n\n\n\n
Great alternative text is:<\/strong><\/p>\n\n\n\n
- Concise:<\/strong> Be as specific as you can in as few words as possible. Some screen readers will only read the first ~125 characters of the alternative text before cutting off.<\/li>
- Accurate:<\/strong> Make sure your spelling and grammar are correct. Serious errors can be difficult or even impossible for some assistive technology to interpret.<\/li>
- Relevant:<\/strong> Use keywords in your alternative text to improve its search result ranking, but don\u2019t use it as a space to cram in keywords.<\/li><\/ul>\n\n\n\n
\n\n\n\nAlternative Text on Facebook<\/h2>\n\n\n\n
On April 4, 2016, Facebook rolled out an accessibility feature called automatic alternative text<\/strong>, which uses text, face, and object recognition technology to generate a description when an image is uploaded to Facebook.<\/p>\n\n\n\n
For several years, these image descriptions were often vague and unhelpful, like, \u201cImage may contain: indoors,\u201d or, \u201cImage may contain: text.\u201d But, as of 2020, the technology has drastically improved and is capable of identifying objects in photos and transcribing full paragraphs of text.<\/p>\n\n\n\n
For the following example, I uploaded an image to Facebook containing text that says, \u201cThis is an example of an image of text. The quick brown fox jumps over the lazy dog.\u201d<\/p>\n\n\n\n
![\"Screenshot](\"https:\/\/i0.wp.com\/wowfall2020.londietmartin.com\/wp-content\/uploads\/2020\/11\/2020-11-18_example-fb-auto-alt-text-labelled.png?resize=774%2C491&ssl=1\")
<\/figure>\n\n\n\nBy entering the Photo Detail<\/em> options for the post, the following automatic alternative text is revealed:<\/p>\n\n\n\n
Image may contain: text that says ‘This is an example of an image of text. The quick brown fox jumps over the lazy dog.’<\/em><\/p><\/blockquote>\n\n\n\n
Notice that Facebook\u2019s text recognition technology was able to transcribe the words in the image perfectly, but it added unnecessary text to the beginning of the description: Image may contain: text that says \u2018<\/em>. This additional text takes up the first 35 characters of the alternative text, yet it adds nothing of value to the description.<\/p>\n\n\n\n
Moreover, this feature does not work retroactively. Photos posted to Facebook prior to the spring of 2016 do not have automatic alternative text, and photos posted from 2016 to 2019 may have alternative text that is vague or inaccurate.<\/p>\n\n\n\n
Facebook\u2019s automatic alternative text isn\u2019t perfect and it can\u2019t describe an image as well as a human can. To ensure that your image descriptions are accurate on Facebook, always replace the automatic alternative text with your own text. This can be done when you post an image or later on.<\/p>\n\n\n\n
Adding Alternative Text with the Facebook App<\/strong><\/h3>\n\n\n\n
For New Images:<\/strong><\/p>\n\n\n\n
- Begin by uploading the image(s) as you normally would.<\/li>
- Next, click the icon with three horizontal dots on the top right corner of the image. If you are uploading multiple images, you must click one of the image thumbnails first.<\/li>
- Click the Edit Alt Text<\/em> option in the menu that appears at the bottom of the screen.<\/li>
- Type your alternative text in the text field then click the Done<\/em> button. Repeat this process for each image in the post if there are multiple.<\/li><\/ol>\n\n\n\n
For Existing Images:<\/strong><\/p>\n\n\n\n
- Begin by clicking any image of yours to expand it.<\/li>
- Next, click the icon with three horizontal dots on the top right corner of the image.<\/li>
- Click the Edit Alt Text<\/em> option in the menu that appears.<\/li>
- Click the Override generated alt text<\/em> button.<\/li>
- Type your alternative text in the text field then click the Done<\/em> button.<\/li><\/ol>\n\n\n\n
Adding Alternative Text with the Facebook Website for Desktop<\/strong><\/h3>\n\n\n\n
For New Images:<\/strong><\/p>\n\n\n\n
- Begin by uploading the image(s) as you normally would.<\/li>
- Next, click the Edit<\/em> button on the top left corner of the image. If you are uploading multiple images, you must click the Edit All<\/em> button first. It is located in the top left corner of the first image in the post. (Note:<\/strong> the Edit<\/em> and Edit All<\/em> buttons only appear when you hover over the image with your cursor.)<\/li>
- Click the Alternative text<\/em> option on the left side of the Photo Detail<\/em> window.<\/li>
- Type your alternative text in the Custom alt text<\/em> field then click the Save<\/em> button.<\/li>
- Click the Back<\/em> arrow icon on the top left corner of the Photo Detail<\/em> window to return.<\/li><\/ol>\n\n\n\n
For Existing Images:<\/strong><\/p>\n\n\n\n
- Begin by clicking any image of yours to expand it.<\/li>
- Next, click the icon with three horizontal dots on the top right corner of the post details.<\/li>
- Click the Change Alt Text<\/em> option in the menu.<\/li>
- Type your alternative text in the Type Alternative text\u2026<\/em> field then click the Save<\/em> button.<\/li><\/ol>\n\n\n\n
\n\n\n\nAlternative Text on Instagram<\/h2>\n\n\n\n
Instagram announced on November 28, 2018, that it would introduce both automatic alternative text and custom alternative text to its platform, following Facebook\u2019s lead. While the benefits and drawbacks of these features are almost identical to Facebook, Instagram has one additional limitation: alternative text can only be added and edited on the Instagram app. This did not come as a surprise since Instagram does not officially support posting from a desktop, but it does make adding\/editing alternative text a bit more tedious. Still, it\u2019s a definite win for both accessibility advocates and SEO-conscious Instagrammers.<\/p>\n\n\n\n
Adding Alternative Text with the Instagram App<\/strong><\/h3>\n\n\n\n
For New Images:<\/strong><\/p>\n\n\n\n
- Create a post 1-10 images as you normally would.<\/li>
- On the New Post<\/em> options screen, scroll to the bottom and click the Advanced Settings ><\/em> button.<\/li>
- Under Accessibility<\/em>, click the Write Alt Text<\/em> button.<\/li>
- Type your alternative text for each image then click the Done<\/em> button on the top right corner of the screen.<\/li><\/ol>\n\n\n\n
For Existing Images:<\/strong><\/p>\n\n\n\n
- Open an existing Instagram post and click the Image Options<\/em> button on the top right corner of the post. It is an icon with a row of three dots.<\/li>
- Click Edit<\/em> in the menu options that appear.<\/li>
- Click the Edit Alt Text button on the bottom right corner of the thumbnail image.<\/li>
- Type your alternative text for each image then click the Done<\/em> button on the top right corner of the screen. Note:<\/strong> the thumbnail images will not appear here.<\/li><\/ol>\n\n\n\n
\n\n\n\nAlternative Text on Twitter<\/h2>\n\n\n\n
On March 29, 2016, Twitter introduced the option to add alternative text for images. This option was only available to iOS users at first, but it has expanded to other operating systems over the years. By January 31, 2020, even animated GIFs on the platform included the option to add alternative text.<\/p>\n\n\n\n
But, unlike Facebook, Instagram, and LinkedIn, Twitter has one major limitation: alternative text can only be added to an image when composing a tweet<\/strong>. This means that users can\u2019t add or edit alternative text for images that have already been posted. While some accessibility advocates have requested this capability, Twitter has not announced any plans to make such a change.<\/p>\n\n\n\n
While this limitation makes it inconvenient for users to add alternative text on Twitter, it\u2019s still both possible and worth doing.<\/p>\n\n\n\n
Adding Alternative Text with the Twitter App<\/strong><\/h3>\n\n\n\n
For Standard Images:<\/strong><\/p>\n\n\n\n
- Begin by composing a tweet as you normally would, and attach 1-4 images.<\/li>
- Tap the +ALT<\/em> button on the bottom right corner of each image.<\/li>
- Type your alternative text in the Describe this photo\u2026<\/em> field. Remember: this cannot be edited after the tweet has been posted.<\/strong><\/li>
- Click the Done<\/em> button on the top right corner of the screen to save the alternative text.<\/li><\/ol>\n\n\n\n
For Animated GIFs:<\/strong><\/p>\n\n\n\n
- Begin by composing a tweet as you normally would, and click the GIF<\/em> button to attach an animated GIF from Giphy<\/a>.<\/li>
- Tap the +ALT<\/em> button on the bottom right corner of the GIF.<\/li>
- Type your alternative text in the Describe this photo\u2026<\/em> field.<\/li>
- Click the Done<\/em> button on the top right corner of the screen to save the alternative text.<\/li><\/ol>\n\n\n\n
Adding Alternative Text with the Twitter Desktop Website<\/strong><\/h3>\n\n\n\n
For Standard Images:<\/strong><\/p>\n\n\n\n
- Begin by composing a tweet as you normally would, and attach 1-4 images.<\/li>
- Click the Add descriptions<\/em> link below the image(s).<\/li>
- Type your alternative text in the Description<\/em> field. If there are more than one image in the tweet, use the arrow buttons next to the Save<\/em> button to move on the next image\u2019s description.<\/li>
- Click the Save<\/em> button on the top right corner to save the alternative text.<\/li><\/ol>\n\n\n\n
For Animated GIFs:<\/strong><\/p>\n\n\n\n
- Begin by composing a tweet as you normally would, and click the GIF button to attach an animated GIF from Giphy<\/a>.<\/li>
- Click the Add descriptions<\/em> link below the GIF.<\/li>
- Type your alternative text in the Description<\/em> field.<\/li>
- Click the Save<\/em> button on the top right corner to save the alternative text.<\/li><\/ol>\n\n\n\n
\n\n\n\nGlossary<\/h2>\n\n\n\n
- \n
- alternative text<\/dt>\n
- A text description for non-text content on the web, like images. Alternative text is also called alt text, image descriptions, alt attributes, alt descriptions, and (incorrectly) alt tags.<\/dd>\n
- assistive technology (AT)<\/dt>\n
- In this context, hardware and\/or software that provides additional or improved functionality to a webpage so that it\u2019s accessible to people with disabilities. Some examples of assistive technologies are screen magnifiers, screen readers, and text-to-speech software.<\/dd>\n
- automatic alternative text<\/dt>\n
- Alternative text that is automatically generated for an image using text, face, and object recognition technology. This is a relatively new feature on Facebook and is not a perfect alternative to human-generated alternative text.<\/dd>\n
- blindness<\/dt>\n
- A lack of vision, which can range from partial blindness (very limited vision) to complete blindness (no vision whatsoever and inability to see light). People with blindness often use assistive technology like screen readers to interpret web content.<\/dd>\n
- braille<\/dt>\n
- A system of touch reading and writing for blind persons in which raised dots represent the letters of the alphabet and numbers. Some screen reading devices can convert web content into braille.<\/dd>\n
- impairment<\/dt>\n
- An absence of or significant difference in a person\u2019s body structure, body function, or mental functioning (e.g., loss of a limb, loss of vision, or memory loss). While impairment is a dimension of disability, not all people with impairments are disabled.<\/dd>\n
- limitation \/ activity limitation<\/dt>\n
- Difficulty to do certain activities because of an impairment (e.g., difficulty seeing, hearing, walking, or problem solving).<\/dd>\n
- low vision<\/dt>\n
- Vision loss that can’t be corrected with glasses, contacts, or surgery. This is different from blindness because some sight remains. People with low vision often use assistive technology like screen magnifiers to interpret web content.<\/dd>\n
- screen magnifier<\/dt>\n
- Visual reading assistant used to change the font, size, spacing, color, and\/or synchronization with speech of text on a webpage.<\/dd>\n
- screen reader<\/dt>\n
- Hardware or software used by people who are blind to read text through synthesized speech or braille.<\/dd>\n
- search engine optimization (SEO)<\/dt>\n
- The process of improving the quality and quantity of website traffic to a website or a web page from search engines.<\/dd>\n
- text-to-speech software<\/dt>\n
- Software that converts text on a webpage into synthetic speech.<\/dd>\n
- web content<\/dt>\n
- Any textual, visual, or audible content on a website. This can include text, images, videos, sound files, etc. This is also simply called content.<\/dd>\n<\/dl>\n\n\n\n
\n\n\n\nReferences<\/h2>\n\n\n\n
- Accessible images for everyone<\/a> \u2014 Twitter Blog<\/li>
- Alternative Text<\/a> \u2014 WebAIM<\/li>
- Alt Text<\/a> \u2014 Moz SEO Learning Center<\/li>
- Automatic Alternative Text Announcement<\/a> \u2014 Facebook Accessibility<\/li>
- Blindness and vision loss<\/a> \u2014MedlinePlus<\/li>
- How does automatic alt text work on Facebook?<\/a> \u2014 Facebook Help Center<\/li>
- How do I edit the alternative text for a photo on Facebook?<\/a> \u2014 Facebook Help Center<\/li>
- How to make images accessible for people<\/a> \u2014 Twitter Help Center<\/li>
- Impairments, Activity Limitations, and Participation Restrictions<\/a> \u2014 Centers for Disease Control and Prevention (CDC)<\/li>
- Improved Accessibility Through Alternative Text Support<\/a> \u2014 Instagram Blog<\/li>
- Low Vision<\/a> \u2014 Cleveland Clinic<\/li>
- Screen Magnification<\/a> \u2014 Laura Jones, Perkins School for the Blind eLearning<\/li>
- Web Content Accessibility Guidelines (WCAG) 2.1<\/a> \u2014 World Wide Web Consortium (W3C)<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"
Social media has made it easier than ever to share images online, but this can quickly create problems for people with disabilities and poor internet…<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-891","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=891"}],"version-history":[{"count":6,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/891\/revisions"}],"predecessor-version":[{"id":1134,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=\/wp\/v2\/posts\/891\/revisions\/1134"}],"wp:attachment":[{"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wowfall2020.londietmartin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Alternative Text<\/a> \u2014 WebAIM<\/li>
- Accessible images for everyone<\/a> \u2014 Twitter Blog<\/li>
- Click the Add descriptions<\/em> link below the GIF.<\/li>
- Type your alternative text in the Description<\/em> field. If there are more than one image in the tweet, use the arrow buttons next to the Save<\/em> button to move on the next image\u2019s description.<\/li>
- Tap the +ALT<\/em> button on the bottom right corner of the GIF.<\/li>
- Type your alternative text in the Describe this photo\u2026<\/em> field. Remember: this cannot be edited after the tweet has been posted.<\/strong><\/li>
- Click Edit<\/em> in the menu options that appear.<\/li>
- Under Accessibility<\/em>, click the Write Alt Text<\/em> button.<\/li>
- Type your alternative text in the Type Alternative text\u2026<\/em> field then click the Save<\/em> button.<\/li><\/ol>\n\n\n\n
- Click the Alternative text<\/em> option on the left side of the Photo Detail<\/em> window.<\/li>
- Click the Override generated alt text<\/em> button.<\/li>
- Type your alternative text in the text field then click the Done<\/em> button. Repeat this process for each image in the post if there are multiple.<\/li><\/ol>\n\n\n\n
- Accurate:<\/strong> Make sure your spelling and grammar are correct. Serious errors can be difficult or even impossible for some assistive technology to interpret.<\/li>
- Concise:<\/strong> Be as specific as you can in as few words as possible. Some screen readers will only read the first ~125 characters of the alternative text before cutting off.<\/li>
- Glossary<\/a><\/li>
- Alt Text on Facebook<\/a><\/li>