alt-text-slack-bot

alt-text-slack-bot aims to encourage accessible image sharing in a Slack workspace. When configured and added to a workspace, this Slack bot will detect when an image file has been shared in a channel without alternative text. It will send a friendly reminder that can only be seen by the user who posted the image along with instructions on how to add the alternative text. Optionally, the bot can also generate AI-powered alt text suggestions to make it even easier for users to add accessible descriptions.

This repo contains the code for the bot setup and should be customized to fit your workspace needs. For a comprehensive guide on the process of setting up a Slack app and installing it in a workspace, check out a fantastic tutorial by @lukeocodes at DEV: Guy's Bot - Inclusive Language in Slack.

Motivation

The alt text feature in Slack is relatively new and hidden so a lot of people don't know about it or forget to use it. This bot was created to ensure that images are accessible to everyone, including channel members who are blind or have low-vision. This bot eliminates the potential burden of individual members having to remind people to add alt text.

Deployment to Netlify

This bot is configured to deploy as a serverless function on Netlify. Follow these steps to set up and deploy:

Prerequisites

• A Netlify account
• A Slack workspace where you have permission to install apps
• Node.js and npm installed locally (for testing)

Step 1: Create a Slack App

1. Go to api.slack.com/apps and click Create New App
2. Choose From scratch
3. Give your app a name (e.g., "Alt Text Reminder Bot") and select your workspace
4. Click Create App

Step 2: Configure Slack App Permissions

1. In the left sidebar, go to OAuth & Permissions
2. Scroll down to Scopes → Bot Token Scopes
3. Add the following scopes:
   • channels:history - Allows the bot to read public channel history
   • chat:write - Allows the bot to send messages
   • groups:history - Allows the bot to read private channels where it has been invited
   • files:read - Allows the bot to read and download files
4. Scroll up and click Install to Workspace
5. Authorize the app in your workspace
6. Copy the Bot User OAuth Token (starts with xoxb-) - you'll need this for Netlify

Step 3: Enable Events API

1. In the left sidebar, go to Event Subscriptions
2. Toggle Enable Events to On
3. You'll need to set the Request URL later (after deploying to Netlify)
4. Under Subscribe to bot events, click Add Bot User Event
5. Add the following events:
   • message.channels - This allows the bot to receive messages posted to public channels
   • message.groups - This allows the bot to receive messages posted to private channels (required for private channels to work)
6. Click Save Changes

Step 4: Get Your Signing Secret

1. In the left sidebar, go to Basic Information
2. Under App Credentials, find Signing Secret
3. Click Show and copy the value - you'll need this for Netlify

Step 5: Deploy to Netlify

Option A: Deploy via Netlify Dashboard (Recommended)

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
2. Go to app.netlify.com and sign in
3. Click Add new site → Import an existing project
4. Connect your Git provider and select this repository
5. Configure build settings:
   • Build command: npm run dist
   • Publish directory: (leave empty - not needed for functions)
6. Click Show advanced and add environment variables:
   • SLACK_TOKEN - Your Bot User OAuth Token (from Step 2)
   • SLACK_SIGNING_SECRET - Your Signing Secret (from Step 4)
   • SLACK_WORKSPACE - Workspace type: useit (default) or t12t (see Environment variables for details)
   • ALT_TEXT_GENERATION_API_KEY - API key for the alt text generation service (optional, but required for suggestions)
   • EXCLUDED_USER_IDS - Comma-separated list of Slack user IDs to exclude from reminders (optional)
7. Click Deploy site

Option B: Deploy via Netlify CLI

1. Install Netlify CLI: npm install -g netlify-cli
2. Login: netlify login
3. Initialize: netlify init
4. Set environment variables:

   netlify env:set SLACK_TOKEN "xoxb-your-token-here"
   netlify env:set SLACK_SIGNING_SECRET "your-signing-secret-here"
   netlify env:set SLACK_WORKSPACE "useit"  # or "t12t" for t12t workspace
   netlify env:set ALT_TEXT_GENERATION_API_KEY "your-api-key-here"
   netlify env:set EXCLUDED_USER_IDS "U12345678,U87654321"  # Optional: comma-separated user IDs

5. Deploy: netlify deploy --prod

Step 6: Configure Slack Events URL

1. After deployment, go to your Netlify site dashboard
2. Navigate to Functions in the left sidebar
3. Find slack-events and copy its URL (it will look like: https://your-site.netlify.app/.netlify/functions/slack-events)
4. Go back to your Slack app settings → Event Subscriptions
5. Paste the URL into Request URL
6. Slack will verify the URL (you should see a checkmark)
7. If verification fails, ensure:
   • The function deployed successfully
   • Environment variables are set correctly
   • The URL is accessible (not behind authentication)

Step 7: Invite Bot to Channels

The bot needs to be invited to channels where you want it to monitor images:

1. In Slack, go to any channel where you want the bot active
2. Type /invite @YourBotName or use the channel settings to add the bot
3. The bot will now monitor that channel for images without alt text