/
Accessibility Support: Generating Alt Text from Images Using boisestate.ai

Accessibility Support: Generating Alt Text from Images Using boisestate.ai

Accessibility Support: Generating Alt Text from Images Using http://boisestate.ai

Alt text (alternative text) is crucial for web accessibility, helping users with visual impairments understand image content through screen readers. The http://boisestate.ai platform, featuring Claude AI's advanced image recognition capabilities, can significantly streamline the process of creating high-quality alt text for both students and faculty.

Why This Matters:

  • Legal requirement: Section 508 of the Rehabilitation Act and the ADA require accessible digital content

  • Boise State commitment: Aligns with institutional accessibility policies

  • Inclusive learning: Benefits students with visual impairments, learning disabilities, and others

  • Better for everyone: Alt text improves SEO, helps with slow internet, and benefits all users in certain contexts

Quick Facts:

  • Without alt text, screen readers may announce "Image" or read cryptic filenames (e.g., "IMG_9823.jpg")

  • According to Boise State's accessibility guidelines, alt text is "the only way for users with visual impairments to understand the content and function of images"

  • Creating alt text manually is time-consuming; Claude AI can generate starting points in seconds

In this guide, you'll learn:

  • Why alt text matters for accessibility

  • How to use http://boisestate.ai to generate alt text

  • Best practices for reviewing and refining AI-generated alt text

  • How to integrate alt text into your existing workflow (Canvas, Word, Google Docs, etc.)

  • Quality assurance tips to ensure accessibility

Why Alt Text Matters at Boise State

According to Boise State's accessibility guidelines, alt text serves as "the only way for users with visual impairments to understand the content and function of images." Without proper alt text, screen readers may simply announce "Image" or read cryptic filenames like "IMG_9823.jpg."

What Makes Good Alt Text?

Before generating alt text, understand the characteristics of effective descriptions:

Characteristics of Strong Alt Text:

Aspect

✅ Good

❌ Avoid

Aspect

✅ Good

❌ Avoid

Length

Concise (usually 125 characters or less)

"Image of a bar chart with many colors showing data from 2020 to 2025 with specific values that..."

Starter

Describe the content directly

Starting with "Image of..." or "Picture of..." or "Photo of..."

Focus

Function and meaning (what it communicates)

Physical appearance (color, style, composition)

Context

Appropriate to where it appears

Generic descriptions that ignore context

Decorative images

Mark as decorative (no alt text needed)

Lengthy descriptions for purely visual elements

Technical accuracy

Correct data/information

Misrepresenting what the image shows

Audience

Language appropriate for readers

Overly technical jargon or overly simplistic

Examples of Good Alt Text:

Example 1: Simple photo

❌ Avoid: "A picture of people in a classroom" ✅ Better: "Students collaborating on a research project at a table"

Example 2: Chart/Graph

❌ Avoid: "Bar chart" ✅ Better: "Bar chart showing enrollment growth from 2019-2024, with peak in 2023 at 8,500 students"

Example 3: Diagram

❌ Avoid: "Scientific diagram" ✅ Better: "Diagram showing the water cycle with arrows indicating evaporation, condensation, and precipitation"

Example 4: Screenshot with text

❌ Avoid: "Screenshot" ✅ Better: "Screenshot of Canvas course page with Grade Center selected, showing grade column headers"

Example 5: Decorative image

✅ Appropriate: No alt text (mark as decorative) or minimal: "Decorative border"

Using Claude AI on http://boisestate.ai for Alt Text Generation

Step-by-Step Process

  1. Access http://boisestate.ai

    • Navigate to boisestate.ai

    • Sign in with your Boise State credentials

    • Select the Claude model for optimal image recognition

  2. Upload Your Image

    • Start a new conversation in Claude

    • Upload your image by clicking the attachment button or dragging and dropping

    • Claude can analyze up to 20 images in a single conversation

  3. Craft Your Alt Text Request
    Use these effective prompts based on your needs. The more specific your prompt, the better Claude's output:

    Basic Alt Text

    Prompt: Please generate concise alt text for this image, following accessibility best practices. Keep it under 125 characters and focus on the essential information.

    Best for: Simple photos, straightforward images, when you're unsure what to emphasize

Context-Specific Alt Text

Prompt: This image will appear in [context - e.g., "a course syllabus about environmental science"]. Please generate appropriate alt text that considers this context and stays under 125 characters. Example context: - "a biology lecture about cell division" - "a history assignment on the Civil War" - "a marketing presentation for social media strategy"

Best for: Images used in specific courses, educational materials, or presentations where context matters

Complex Images (Charts/Graphs/Data Visualizations)

Prompt: This is a complex data visualization. Please provide: 1. Brief alt text (under 125 characters) for the alt attribute 2. A longer description for the page content that explains the key data trends 3. Specific values or percentages that are important Example: "This chart shows quarterly sales data for three product lines over 2024."

Best for: Charts, graphs, infographics, scientific diagrams where data interpretation is important

Images with Text

Prompt: This image contains text. Please: 1. Transcribe any visible text 2. Describe what the text refers to or illustrates 3. Provide context about what the image is showing Keep the alt text under 125 characters, but provide a longer description if the text is important.

Best for: Screenshots, diagrams with labels, posters, signs, documents

Functional Images (Buttons, Icons, Links)

Prompt: This image is functional (it's a button/icon/link). Please generate alt text that describes the action or function, not just the appearance. Examples: - Button alt text: "Search" (not "magnifying glass icon") - Icon alt text: "Download PDF" (not "arrow pointing down") - Link image alt text: "Boise State homepage" (not "blue box with logo")

Best for: Icons, buttons, interactive elements, logos with function

Decorative or Artistic Images

Prompt: This image is decorative/artistic. Should I create alt text or mark it as decorative with no description? If I should describe it, what's the most important aspect to communicate?

Best for: Decorative borders, artistic visuals, images that don't convey essential information

Images for Different Audiences

Prompt: This image will be used for [audience - e.g., "elementary school students", "medical professionals", "general public"]. Generate alt text appropriate for this audience's understanding level.

Best for: Educational materials at different levels, professional vs. casual contexts

Multiple Image Options

Prompt: I'm unsure how to describe this image. Please provide 3 different alt text options and explain when each would be most appropriate.

Best for: When you want to see different approaches and choose the best one

Common Alt Text Mistakes to Avoid

Learning what NOT to do is as important as knowing what to do:

Mistake 1: Starting with "Image of..." or "Picture of..."

❌ Wrong: "Image of a classroom with students working together" ✅ Correct: "Students working together in a classroom science lab"

Why: Screen readers already announce "image," so this is redundant.

Mistake 2: Only Describing Appearance, Not Function

❌ Wrong: "Red button with white text" ✅ Correct: "Submit assignment button"

Why: Users need to know what the image does, not just what it looks like.

Mistake 3: Making Alt Text Too Long

❌ Wrong: "This is a photograph of a classroom at Boise State University showing multiple students sitting at desks with laptops and notebooks, with an instructor standing in the background near a whiteboard that has several equations written on it..." ✅ Correct: "Students in a classroom during a mathematics lecture"

Why: Long alt text becomes tedious for screen reader users. Longer descriptions belong in page content, not alt text.

Mistake 4: Being Too Vague

❌ Wrong: "Chart" or "Graph" or "Data" ✅ Correct: "Line graph showing student enrollment growth from 2019-2024"

Why: Vague descriptions don't help users understand what information the image conveys.

Mistake 5: Creating Alt Text for Purely Decorative Images

❌ Wrong: "Blue decorative line dividing sections" ✅ Correct: No alt text (mark as decorative)

Why: Decorative elements clutter screen reader output. Mark them as decorative instead.

Mistake 6: Including Information That's Also in Surrounding Text

❌ Wrong: In an article about photosynthesis, alt text says: "Diagram showing the photosynthesis process with sunlight, water, and carbon dioxide producing glucose" ✅ Better: "Photosynthesis cycle diagram" (assuming the article text explains the process) OR if the diagram shows unique details: ✅ Better: "Photosynthesis cycle showing light reactions (top) and dark reactions (bottom)"

Why: Redundancy is annoying for screen reader users. Add alt text that complements text content, not duplicates it.

Mistake 7: Using Jargon Without Explanation

❌ Wrong (for general audience): "SCADA system architecture with RTU, HMI, and distributed control nodes" ✅ Better (for general audience): "Diagram of a control system showing how computers monitor and manage a water treatment plant" ✅ Better (for technical audience): "SCADA system architecture diagram with remote terminal units (RTUs), human-machine interface (HMI), and control nodes"

Why: Alt text should match the audience's knowledge level.

Mistake 8: Ignoring Technical Requirements

❌ Wrong: Using special characters, emoji, or formatting: "Image: 🖼️ *Really* important diagram!!!" ✅ Correct: Plain text without special formatting or characters "Important organizational diagram showing department structure"

Why: Some screen readers have trouble with special characters or formatting.

Mistake 9: Not Reviewing or Editing AI-Generated Alt Text

❌ Using Claude's output as-is without verification ✅ Review Claude's suggestion, edit for accuracy, verify it matches your content

Why: AI can make mistakes or misinterpret images. Always review before using.

Best Practices for AI-Generated Alt Text

  1. Always Review and Edit

Claude provides excellent starting points, but never use AI output without review:

Review checklist:

  • Does the alt text accurately describe what's in the image?

  • Is it appropriate for the context where it will appear?

  • Does it follow the 125-character guideline (when appropriate)?

  • Would a screen reader user understand the image's purpose?

  • Is the language clear and appropriate for your audience?

  • Does it avoid redundancy with surrounding text?

When to edit Claude's output:

  • If it's too long, trim to essentials

  • If it includes assumptions not visible in the image, remove them

  • If technical terms are too specialized, simplify

  • If it misses important context, add it

  • If it includes unnecessary details, cut them

  1. Follow Boise State Guidelines

Ensure alignment with institutional standards:

Boise State Accessibility Standards:

  • Keep alt text under 125 characters when possible

  • Avoid starting with "Image of..." or "Photo of..."

  • Focus on function and meaning, not just appearance

  • For decorative images, mark as decorative rather than generating alt text

  • Provide context about where the image will be used

  • Specify if the image is functional (like a button) vs. informational

Additional resources:

  1. Optimize Your Prompts

The better your prompt, the better Claude's output:

Prompt optimization tips:

  • Be specific about context ("for an elementary biology class" vs. just "for a class")

  • Specify the intended audience ("for students with hearing impairments" or "for general public")

  • Mention the image type ("this is a screenshot showing..." vs. just uploading)

  • Note any important details ("include the specific values" for charts)

  • Ask for multiple options if unsure

  • Provide feedback if Claude's first attempt isn't right

Example of optimized prompt:

This image is a screenshot from Canvas showing the Grades page. It will be used in a tutorial video for faculty learning how to access student grades. Generate alt text that describes what faculty would see and the key information visible on the page. Keep it under 125 characters.

Compare to vague prompt:

Generate alt text for this image.

Alt Text for Different Image Types

Different types of images require different alt text strategies:

Photographs and Screenshots

  • What to include: Subject matter, key objects, relevant context

  • What to avoid: Excessive detail about appearance

  • Example: "Screenshot of Canvas assignment submission page with due date and word count requirement"

Charts and Graphs

  • What to include: Chart type, data range, key trends or values

  • What to avoid: Every single data point (unless critical)

  • Example: "Bar chart showing student enrollment by program from 2020-2024, with largest growth in Computer Science"

Diagrams and Infographics

  • What to include: What the diagram illustrates, main components, relationships

  • What to avoid: Every visual element (focus on content)

  • Example: "Diagram showing the scientific method: question, hypothesis, experiment, results, conclusion"

Maps

  • What to include: Geographic area, what the map highlights, relevant features

  • What to avoid: "A map"

  • Example: "Map of Idaho showing Boise State's location and the distribution of Boise State satellite campuses"

Equations and Mathematical Notation

  • What to include: The equation or expression in accessible format

  • What to avoid: Attempting to describe visual appearance

  • Example: "Pythagorean theorem: a squared plus b squared equals c squared" or use MathML if available

Screenshots with UI Elements

  • What to include: What action is being shown, which buttons/menus are involved

  • What to avoid: Pixel-level detail

  • Example: "Screenshot showing how to enable accessibility settings in Canvas by going to Account Settings and selecting Accessibility"

Icons and Buttons

  • What to include: Function and action (not appearance)

  • What to avoid: Color or shape description

  • Example:

    • "Download PDF" (not "down arrow")

    • "Share to social media" (not "three dots icon")

    • "Save" (not "floppy disk")

Logos and Branding

  • What to include: What it identifies

  • What to avoid: Lengthy description of design

  • Example: "Boise State University logo" (unless it appears as a link, then "Boise State homepage")

Use Cases for Students and Faculty

For Students

  • Research Papers

    • Use http://boisestate.ai to generate alt text for charts, graphs, and images in academic work

    • Improve accessibility for classmates who use screen readers

    • Ensure your work meets assignment accessibility requirements

    • Example: "For my environmental science research paper, I used Claude to create alt text for 15 charts showing ecosystem data"

    Presentations

    • Create accessible slide decks with proper image descriptions

    • Generate alt text before uploading to Google Slides or PowerPoint

    • Example: Claude generated alt text for 20 images across my biology presentation in 10 minutes

    Digital Portfolios

    • Ensure all visual content is accessible to diverse audiences

    • Impress employers/grad schools by including accessibility

    • Example: "I made my portfolio fully accessible by adding alt text to all 50 project images"

    Multimedia Projects

    • Generate captions for videos (when available)

    • Create alt text for images embedded in interactive projects

    • Meet accessibility requirements for multimedia assignments

    Group Projects

    • Share alt text descriptions with teammates

    • Ensure all media is accessible before submission

    • Example: "Our team used Claude to generate alt text for our data analysis project"

For Faculty

  • Course Materials

    • Make lecture slides, handouts, and resources accessible

    • Generate alt text in bulk for course materials at semester start

    • Example: "I used http://boisestate.ai to add alt text to 100+ images across my course materials in 2 hours"

    Canvas Content

    • Ensure all uploaded images have appropriate alt text

    • Review existing courses and update missing alt text

    • Create a system for new images going forward

    • Example: "Audited my entire Canvas course and added alt text to 75 images that were missing descriptions"

    Research Publications

    • Create accessible figures and diagrams for academic papers

    • Prepare publication-ready alt text before submission to journals

    • Ensure open-access papers are accessible to all readers

    Assessment Materials

    • Generate descriptions for visual elements in tests and quizzes

    • Ensure students with visual impairments can access all content

    • Example: "Created accessible exam by adding alt text to all 10 diagrams in my chemistry test"

    Textbook and Resource Development

    • If creating or compiling course materials, ensure all images are accessible

    • Build accessibility in from the start rather than retrofitting

    Lecture Videos and Recordings

    • Add alt text to images used in recorded lectures

    • Generate descriptions for on-screen content

    • Example: "Added alt text to slides before recording my online lecture"

Integration with Existing Workflows

Microsoft Office Integration

  1. Generate alt text using Claude on http://boisestate.ai

  2. Copy the generated text

  3. Right-click images in Word/PowerPoint → "View Alt Text" → paste description

Canvas Integration

  1. Use Claude to generate alt text before uploading to Canvas

  2. Add the alt text when inserting images into course content

  3. Review existing course materials and update missing alt text

Google Workspace

  1. Generate descriptions using http://boisestate.ai

  2. Right-click images in Google Docs/Slides → "Alt Text" → add to description field

Troubleshooting Common Issues

Issue: Claude says "I can't analyze this image"

Solutions:

  • Try uploading a different file format (JPG, PNG, GIF work best)

  • Check that image isn't corrupted or overly compressed

  • Try uploading again—temporary server issues sometimes occur

  • If image is extremely small or blurry, try enhancing it first

 

Issue: The generated alt text is way too long

Solutions:

  • Ask Claude: "Please make this shorter, under 125 characters"

  • Claude will prioritize essential information

  • Edit to remove redundant or less important details

 

Issue: Claude misunderstood what's in the image

Solutions:

  • Provide more context in your prompt: "This is a screenshot of..."

  • Ask Claude to focus on specific elements: "Focus on the data shown, not the colors"

  • Try rephrasing your request

  • If it's clearly wrong, describe what you see and ask Claude to correct it

 

Issue: The alt text uses jargon my audience won't understand

Solutions:

  • Ask Claude to simplify: "Please rephrase this for a general audience"

  • Provide context about audience: "This is for 5th graders learning about..."

  • Edit technical terms to more accessible language

 

Issue: I'm getting different results each time I submit the same image

Solutions:

  • This is normal—AI responses vary

  • Ask for a consistent option: "Please generate 3 options and pick the best one"

  • Save good results so you can reference them

  • Edit Claude's suggestions slightly and they'll stay consistent

 

Issue: The image contains text that Claude missed

Solutions:

  • Point it out: "Please include the text that says '[specific text]'"

  • Use the "Images with Text" prompt template from earlier

  • Transcribe any critical text yourself and add it

 

Quality Assurance Tips

  1. Test with Screen Readers

Use built-in accessibility tools to verify alt text effectiveness:

Windows:

  • Narrator: Built-in (press Windows + Ctrl + Enter)

  • NVDA: Free screen reader (https://www.nvaccess.org)

  • JAWS: Professional (paid, common in institutions)

Mac:

  • VoiceOver: Built-in (press Cmd + F5)

Web Tools:

What to listen for:

  • Is alt text clear when read aloud by a screen reader?

  • Does it provide sufficient context?

  • Does it take too long to read (might be too long)?

  • Does it make sense without seeing the image?

 

  1. Peer Review

Have colleagues review alt text for clarity and accuracy:

What to ask reviewers:

  • "Without seeing the image, does this alt text make sense?"

  • "Is the technical level appropriate for the audience?"

  • "Is anything important missing?"