TLDR;
This video provides a comprehensive guide on adding alternative text (alt text) to images on social media platforms to make them accessible to visually impaired users. It demonstrates how screen readers interact with images with and without alt text, and offers step-by-step instructions for adding alt text on various platforms like Slack, Facebook, Instagram, Mastodon, Discord, and Threads. Additionally, it introduces the "Be My Eyes" app as a tool for generating AI-powered image descriptions and the "Mona for Mastodon" app for automatically using image captions as alt text.
- Importance of alt text for accessibility and broader audience engagement.
- Platform-specific instructions for adding and optimizing alt text.
- Utilizing AI with "Be My Eyes" for generating descriptive alt text.
- "Mona for Mastodon" app for streamlined alt text implementation.
Introduction to Alt Text [1:07]
Allison Sheridan introduces the concept of adding alternative text (alt text) to images on social media to make them accessible to blind users. Alt text describes the interesting or compelling aspects of a photo, enhancing the experience for those using screen readers. The terms "alt tags," "alt text," and "alternative text" are often used interchangeably, with "alt text" being the preferred term.
The Experience Without and With Alt Text [1:46]
The video demonstrates the difference in user experience with and without alt text using VoiceOver on an iPhone within Slack. Without alt text, VoiceOver only reads the image file name, providing no useful information. With alt text, VoiceOver provides a rich description of the image, significantly improving the experience for visually impaired users. The speaker emphasizes that adding alt text makes social media more entertaining and informative for everyone, and encourages content creators to include descriptions to avoid excluding a portion of their audience.
Adding Alt Text in Slack [4:36]
To add alt text to an image in Slack, tap the plus button, select an image, tap on the image, and choose "add description" from the three-dot menu. A small field appears where you can type or dictate the description. After saving, an "alt" button appears on the image, indicating that the alt text has been added. Tapping this button allows you to edit the description.
Adding Alt Text in Facebook [7:29]
To add alt text to an image in Facebook, start a new post, select a photo, and after the image is uploaded, tap the three-dot menu in the top right corner and select "Alt Text". Facebook may provide an autogenerated alt text, but you can override it with a custom description. However, Facebook has a restrictive character limit of 100 characters, which may not be sufficient to fully describe the image.
Adding Alt Text in Instagram [10:44]
In Instagram, the option to add alt text is buried deep within the menus. To add alt text, start a new post, select an image, tap "Next" twice to bypass filters, scroll to the bottom of the screen, tap "Advanced Settings," and then select "Write Alt Text." Despite the difficulty in finding the option, Instagram does not have the character limit found in Facebook, allowing for more detailed descriptions.
Adding Alt Text in Mastodon [12:35]
Mastodon's web interface makes adding alt text straightforward. When creating a new post, attach an image using the paper clip icon. After the image uploads, Mastodon alerts you to add a description. Tapping the alert opens a window where you can enter alt text, with a generous limit of 1,500 characters. Mastodon also offers a feature to detect text within the image.
Why Apple Share Sheet Doesn't Work [15:49]
The video demonstrates that using the Apple share sheet from Apple Photos does not allow you to add alt text when sharing to various applications like Facebook. This is because the Apple share sheet itself does not support adding alt text.
Adding Alt Text in Discord [16:47]
Discord makes adding alt text very simple. Tap the plus button to select an image, then tap on the photo to reveal the "Add an image description" option. This opens a field where you can dictate or type your alt text, with a limit of 1,000 characters. After saving, the image displays an "alt" badge, indicating that alt text has been successfully added.
Adding Alt Text in Threads [17:56]
To add alt text in Threads, start a new thread, select an image, and tap the "alt" button at the bottom of the image. Despite Threads' initial claim of automatically generating alt text, it does not do so effectively. After adding your own alt text, ensure it is properly implemented by testing with a screen reader.
Using Be My Eyes for AI-Generated Alt Text [21:12]
The video introduces the "Be My Eyes" app, which connects visually impaired individuals with volunteers via live video for assistance. It also features an AI-powered image description tool that can generate alt text. After creating an account and navigating to the AI functionality within the app, you can take a photo, and the AI will generate a description. This description can then be copied and used as alt text on social media platforms. The "Describe with Be My Eyes" option can be added to the share sheet for easy access.
Mona for Mastodon: Streamlining Alt Text [27:34]
The app "Mona for Mastodon" automatically uses the image caption as alt text, streamlining the process. By sharing an image to Mona via the share sheet, the caption is automatically converted into alt text, unlike other applications. Mona is designed with accessibility in mind, making it a valuable tool for supporting visually impaired users on Mastodon.
Conclusion [28:49]
The tutorial emphasizes the importance of alt text in enriching the online experience for visually impaired users and increasing the reach of online content. It encourages viewers to explore and utilize the alt text features available on various social media platforms.
