W3A11Y AltText Documentation

AI-powered image accessibility solution that generates WCAG 2.1 AA compliant alt text for your website images.

🤖

AI-Powered

Advanced Google Gemini Vision AI analyzes images and generates contextually appropriate alt text.

♿

WCAG 2.1 AA Compliant

Ensures your website meets accessibility standards and improves user experience for all users.

⚡

Easy Integration

Simple JavaScript snippet integration or browser extension for seamless implementation.

💳

Flexible Pricing

Credit-based system with subscription plans and one-time credit packs to suit your needs.

1-2
Credits per image
120+
Credits per month (Starter)
10+
Supported image formats
99.9%
Uptime guarantee

Quick Start Guide

Get started with W3A11Y AltText in just a few simple steps.

1

Create Account

Sign up for a free account to get started. You'll receive initial credits to test the service.

Sign Up Now
2

Choose Your Plan

Select a subscription plan that fits your needs or purchase credit packs for occasional use.

View Pricing
3

Integrate

Add our JavaScript snippet to your website or use our browser extension for immediate results.

<script src="https://alttext.w3a11y.com/js/w3a11y-alttext.js" data-site-key="your-site-key"></script>
4

Start Processing

Upload images or let our script automatically detect and process images on your website.

Dashboard Navigation

Learn how to navigate and use the W3A11Y AltText dashboard effectively.

🏠 SwiftAlt Home

Your main dashboard showing site statistics, recent activity, and credit balance overview.

🖼️ Images

Upload and process individual images. View processed images, edit alt text, and download results.

🌐 Site Management

Manage your websites, configure integration settings, and monitor automated processing.

👤 Profile

Manage your account settings, view subscription details, and track credit usage.

Image Processing

Understand how W3A11Y AltText processes images and generates alt text.

Supported Image Formats

Standard Formats (1 Credit)

  • JPEG/JPG - Most common web format
  • PNG - Supports transparency
  • GIF - Animated and static images
  • WebP - Modern efficient format

Enhanced Formats (2 Credits)

  • SVG/SVG+XML - SVG with XML declaration
  • AVIF - Next-gen image format
  • BMP - Bitmap images
  • DNG - Digital Negative format
  • TIFF/TIF - Tagged image file format
  • HEIC/HEIF - High efficiency image format
  • ICO - Icon files

Image Type Classification

📖 Informative Images

Images that convey important information or content. Require detailed, descriptive alt text.

Example: "A bar chart showing sales increased 25% from Q1 to Q2"

🎨 Decorative Images

Images used for visual appeal that don't convey essential information. May use empty alt text.

Example: "" (empty alt text for decorative border)

🔧 Functional Images

Images that serve as buttons or links. Alt text describes the function, not appearance.

Example: "Search" (for a magnifying glass icon)

Processing Workflow

🔍

Image Analysis

AI analyzes image content, context, and surrounding text

→
🧠

AI Processing

Gemini Vision generates contextually appropriate description

→
✅

Quality Check

WCAG 2.1 AA compliance validation and optimization

→
📝

Alt Text Output

Final alt text applied to image or returned via API

Site Management

Learn how to integrate W3A11Y AltText with your websites for automated image processing.

JavaScript Integration

Add our JavaScript snippet to automatically process images on your website.

Basic Integration

<!-- Add before closing </body> tag -->
<script src="https://alttext.w3a11y.com/js/w3a11y-alttext.js" 
        data-site-key="your-site-key" >
</script>

Site Status

Active

Site is configured and processing images automatically

Pending

Site setup is incomplete or awaiting verification

Inactive

Site processing is disabled or suspended

Credit Management

Understanding how credits work and managing your credit balance effectively.

How Credits Work

Credit Costs

  • Standard formats: 1 credit per image
  • Enhanced formats: 2 credits per image
  • Failed processing: No credit deduction

Credit Tracking

  • Real-time balance updates
  • Detailed usage history
  • Monthly usage reports
  • Low balance notifications

Credit Sources

💳 Subscription Plans

Monthly or yearly plans that automatically add credits to your account each billing period.

  • Starter: 120 credits/month - 1,440 credits/year
  • Pro: 600 credits/month - 7,200 credits/year
  • Business: 2,400 credits/month - 28,800 credits/year
  • Enterprise: 6,000 credits/month - 72,000 credits/year
  • Ultimate: 12,000 credits/month - 1,44,000 credits/year

🛒 Credit Packs

One-time purchases for additional credits when you need them.

  • 60 credits for $2
  • Credits never expire
  • Perfect for occasional use

Managing Your Credits

💡 Optimization Tips

  • Use exclude selectors for decorative images
  • Process images in batches when possible
  • Review and adjust auto-processing settings
  • Monitor usage through the dashboard

Subscription Plans

Choose the plan that best fits your image processing needs.

Starter

$4 /month
$40/year (17% savings)

Credits

  • 120 credits per month
  • 1,440 credits per year
Ideal for: Small websites, personal blogs, portfolios

Pro

$18 /month
$180/year (17% savings)

Credits

  • 600 credits per month
  • 7,200 credits per year
Ideal for: Medium websites, e-commerce stores, agencies

Business

$58 /month
$480/year (31% savings)

Credits

  • 2,400 credits per month
  • 28,800 credits per year
Ideal for: Large Businesses, high-volume processing

Enterprise

$118 /month
$1170/year (17% savings)

Credits

  • 6,000 credits per month
  • 72,000 credits per year
Ideal for: Large enterprises, multi-site organizations, high-volume content management

Ultimate

$228 /month
$2180/year (17% savings)

Credits

  • 12,000 credits per month
  • 1,44,000 credits per year
Ideal for: Large corporations, high-volume publishers, enterprise-scale applications

JavaScript Integration

Detailed guide for integrating W3A11Y AltText with your website using JavaScript.

Installation Methods

📝 Script Tag (Recommended)

The easiest way to get started. Add our script tag to your HTML.

<script src="https://alttext.w3a11y.com/js/w3a11y-alttext.js" 
        data-site-key="your-site-key">
</script>

WCAG 2.1 AA Compliance

Understanding how W3A11Y AltText helps you meet Web Content Accessibility Guidelines.

WCAG 2.1 Guidelines

1️⃣ Perceivable

1.1.1 Non-text Content (Level A)

All non-text content must have text alternatives that serve the equivalent purpose.

✅ W3A11Y generates appropriate alt text for all image types

2️⃣ Operable

2.4.4 Link Purpose (Level AA)

The purpose of each link can be determined from the link text alone.

✅ Functional images receive action-oriented alt text

3️⃣ Understandable

3.1.1 Language of Page (Level A)

The default human language of each page can be programmatically determined.

✅ Alt text is generated in the page's primary language

4️⃣ Robust

4.1.2 Name, Role, Value (Level A)

Name and role can be programmatically determined for all UI components.

✅ Alt text is properly applied to HTML alt attributes

Alt Text Best Practices

📝 Descriptive Content

  • Describe the essential information conveyed by the image
  • Keep descriptions concise but comprehensive
  • Include relevant context from surrounding content
  • Avoid redundant phrases like "image of" or "picture showing"
Good: "Bar chart showing 25% increase in sales from Q1 to Q2"
Poor: "Image of a chart"

🎨 Decorative Images

  • Use empty alt text (alt="") for purely decorative images
  • Images that don't add informational value
  • Border graphics, spacers, or aesthetic elements
Good: alt=""
Poor: "Decorative border image"

🔗 Functional Images

  • Describe the function, not the image appearance
  • Focus on what happens when clicked/activated
  • Be concise and action-oriented
Good: "Search"
Poor: "Magnifying glass icon"

📊 Complex Images

  • Provide brief alt text and detailed description
  • Use longdesc attribute or adjacent text for details
  • Include data tables for chart information
Alt text: "Sales performance chart, detailed data follows"
Long description: Separate table with chart data

Testing Your Accessibility

🧪 Automated Testing Tools

  • axe-core: Browser extension for accessibility testing
  • WAVE: Web accessibility evaluation tool
  • Lighthouse: Built into Chrome DevTools
  • Pa11y: Command-line accessibility testing

👥 Manual Testing

  • Screen readers: NVDA, JAWS, VoiceOver
  • Keyboard navigation: Tab through all interactive elements
  • High contrast mode: Test visibility in high contrast
  • Zoom testing: Test at 200% zoom level

Troubleshooting

Common issues and their solutions to help you get the most out of W3A11Y AltText.

🚫 Images Not Processing

Symptoms:

  • Alt text not appearing on images
  • Console shows no processing activity
  • Credit balance not decreasing

Solutions:

  1. Check site key: Verify your site key is correct in the script tag
  2. Verify selectors: Ensure images match your include/exclude selectors
  3. Check console: Look for JavaScript errors in browser console
  4. Network issues: Check if requests are reaching our servers
  5. Credit balance: Ensure you have sufficient credits

Debug Code:

// Enable debug mode
W3A11Y.init({
    siteKey: 'your-site-key',
    debug: true
});

// Check processing status
console.log('Queue status:', W3A11Y.getQueueStatus());

💳 Credit Deduction Issues

Symptoms:

  • Credits deducted but no alt text generated
  • Unexpected credit usage
  • Processing appears to succeed but credits not deducted

Solutions:

  1. Check image formats: Enhanced formats use 2 credits
  2. Review processing logs: Check dashboard for detailed usage
  3. Failed processing: No credits deducted for failed attempts
  4. Contact support: For billing discrepancies

🔗 Integration Problems

Symptoms:

  • Script not loading properly
  • CORS errors in console
  • Content Security Policy violations

Solutions:

  1. Update CSP: Add our domains to Content Security Policy
  2. Check HTTPS: Ensure your site uses HTTPS
  3. Script placement: Place script before closing </body> tag
  4. Ad blockers: Some ad blockers may interfere

CSP Configuration:

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://w3a11y.com; 
               connect-src 'self' https://api.w3a11y.com;">

⚡ Performance Issues

Symptoms:

  • Slow page loading
  • Images processing too slowly
  • Browser becomes unresponsive

Solutions:

  1. Adjust batch size: Reduce images processed simultaneously
  2. Increase delay: Add delay between processing batches
  3. Use exclusions: Skip decorative images
  4. Lazy loading: Process images as they come into view

Performance Optimization:

W3A11Y.init({
    siteKey: 'your-site-key',
    batchSize: 5,        // Process 5 images at a time
    processDelay: 2000,  // Wait 2 seconds between batches
    excludeSelectors: '.decorative, .bg-image'
});

Getting Help

📧 Email Support

Send detailed issue descriptions to: [email protected]

Include: error messages, browser/device info, steps to reproduce

💬 Live Chat

Available Mon-Fri 9AM-5PM EST in your dashboard

Best for: Quick questions and real-time troubleshooting

📚 Knowledge Base

Search our comprehensive help articles

Available 24/7 with step-by-step guides and solutions

Frequently Asked Questions

Answers to common questions about W3A11Y AltText.

General Questions

What is W3A11Y AltText?

W3A11Y AltText is an AI-powered service that automatically generates WCAG 2.1 AA compliant alt text for images on your website, making your content accessible to users with visual impairments.

How accurate is the AI-generated alt text?

Our AI achieves over 95% accuracy by using Google's advanced Gemini Vision model, which analyzes image content, context, and surrounding text to generate appropriate descriptions.

Can I edit the generated alt text?

Yes! You can edit any generated alt text through your dashboard or by updating the alt attribute directly in your HTML.

Credits & Billing

How do credits work?

Credits are consumed when processing images: 1 credit for standard formats (JPEG, PNG, GIF, WebP) and 2 credits for enhanced formats (SVG, AVIF, BMP, DNG, TIF/TIFF, HEIF/HEIC, ICO). Failed processing doesn't consume credits.

Do credits expire?

Subscription credits reset each billing cycle. Credit pack purchases never expire and can be used anytime.

What happens if I run out of credits?

Processing will pause until you purchase more credits or your subscription renews. You'll receive notifications when your balance is low.

Can I change my subscription plan?

Yes, you can upgrade or downgrade your plan anytime through your dashboard. Changes take effect at your next billing cycle.

Technical Integration

Do I need technical knowledge to use W3A11Y AltText?

Basic integration requires copying a simple script tag to your website. Advanced features may require some HTML/JavaScript knowledge.

Is it compatible with my CMS?

Yes! Our JavaScript integration works with WordPress, Shopify, Wix, Squarespace, and any website that allows custom JavaScript.

Does it work with single-page applications (SPAs)?

Yes, our script detects dynamically added images and can process them automatically or on-demand.

What about GDPR compliance?

We process images temporarily for analysis and don't store personal data. Image URLs and generated text are processed according to our privacy policy.

Accessibility & Standards

How does this help with WCAG compliance?

We specifically target WCAG 2.1 Level AA Success Criterion 1.1.1 (Non-text Content) by ensuring all images have appropriate alternative text.

What about decorative images?

Our AI can identify decorative images and apply empty alt text (alt="") when appropriate, or you can use exclude selectors to skip them entirely.

Does it work with screen readers?

Yes! Generated alt text is applied to standard HTML alt attributes, making it fully compatible with all screen readers and assistive technologies.

Still have questions?

Can't find what you're looking for? Our support team is here to help!

Contact Support Email Us