/social-visual-alt-text

Browser extension to visually show image alt text on social

Primary LanguageJavaScriptMIT LicenseMIT

Browser extension to visually show alt text of social images

This extension is designed for individuals who are interested in viewing the alt text applied to images without the need to inspect each image or use a screen reader.

Download

Example usage

Example of scrolling through Twitter timeline with some images showing alt text and others with a red line

This is helpful to see what alt text is applied (if any) to an image which may provide additional context to the contence of the image, what a screen reader user would hear and if additional context should be added if you are planning to retweet a post.

The visual text added to the page is hiddent from screen readers to ensure the text is not read to the user twice.

Options

View the extension options to turn the different platforms and media types on and off.

Options modal showing Twitter image and GIF settings

Current sites

  • Twitter images
  • Twitter GIFs
  • Facebook (experimental, single image posts working)
  • Instagram (experimental, single image posts working)
  • Tweetdeck (experimental, single image posts working)
  • LinkedIn (experimental)

Twitter examples

Photo with alt Photo without alt
Photo with alt text visible under image Photo without alt text showing a read line under the image
Multiple photos with alt GIF with alt
Multiple photos with each alt text displayed underneith GIF with alt text visible below

Instagram examples

Human alt text AI alt text
Single photo image post with alt text underneith Single photo image post with different background of AI generated alt text underneith

Facebook examples

Human alt text AI alt text
Single image post with alt text underneith Single image post with alt text underneith, older interface

Tweetdeck examples

Photo with alt Photo without alt
Three columns of images, the first with alt text, second without and third GIF without Tweetdeck modal with a single image showing alt text below

To package

  1. Chrome: zip -r -FS ../social-visual-alt-text-chrome.zip * --exclude .git*
  2. Firefox: sed -i '' 's/: 3,/: 2,/g' manifest.json && zip -r -FS ../social-visual-alt-text-ff.zip * --exclude .git* && git checkout manifest.json

To test

  1. Download the zip of the main branch
  2. Open Chrome "Manage Extensions" and enable "Developer mode"
  3. Unzip and select "Load unpacked"
  4. Find the unzipped directory and choose "Open"

Contributing

  1. Please open an issue before submitting a pull request
  2. Fork the nickdenardis/social-visual-alt-text repository
  3. Make your changes on the fork
  4. Submit a PR to the nickdenardis/social-visual-alt-text main branch

Development

  • Create common settings file
  • Run each script only per host
  • Add the not CSS selector for the displayedalt=true
  • Change to run after load and then on scroll or DOM change only

Licensing

Social visual alt is open-sourced software licensed under the MIT license.