Skip to content

danielleford04/screen-reader-image-description-generator

Repository files navigation

Screen Reader Image Description Generator Extension

This extension uses OpenAI to generate image descriptions and insert them in image alt tags so that screen readers be guaranteed to have descriptions to read for each image. Running this extension will overwrite any existing image alt tags. Refreshing the page will restore the original alt tags.

This extension requires a paid OpenAI account to be able to generate AI descriptions. Every account will need an OpenAI API key. The cost is $.0033, or .33 cents, per generated image description, which is 1500 image descriptions per $5.

Create and insert OpenAI API Key:

  1. Go to https://platform.openai.com/docs/overview and, under "Get your API keys", click "Sign up"
  2. Follow the instructions to create an OpenAI account
  3. On the "Make Your First Call" screen, enter a preferred name for your API key, such as "Chrome Image Description Generator Key"
  4. Click "Generate API Key"
  5. Copy the generated key, and paste it on line 1 of src/content.js within single quotes: const openAiSecretKey = 'paste_key_here'
  6. Follow the OpenAI prompts to add credits to your OpenAI account

Install and run the extension:

  1. Run npm install to install dependencies.
  2. Run npm start to start the development server.
  3. In Chrome, go to chrome://extensions, turn on Developer mode, click "Load unpacked", and pick the "dist" directory within this project.
  4. Navigate to any website with images.
  5. Click the Screen Reader Image Description Generator extension icon, and then the "generate alt tags" button to generate new alt tags
  6. To confirm the changes, open Chrome Developer tools (View > Developer > Inspect elements), click an image, and look at the alt tag in the elements panel
  7. The majority of the code for this is in content.js and popup.js.

If you make any changes to the code, click "reload extensions" on the Chrome Extension Manager page, and reload the website.

Image icon created by Freepik - https://www.flaticon.com/free-icons/picture Loading icon created by Freepik - https://www.flaticon.com/free-icons/loading

About

Chrome Extension that Generates Image Descriptions for Screen Readers

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published