gbu-accessibility-package 3.1.0 → 3.2.0

package/cli.js

@@ -14,7 +14,7 @@ const args = process.argv.slice(2);
 const options = {
   directory: '.',
   language: 'ja',
-  backupFiles: true, // Default to true for safety
+  backupFiles: false, // Default to false for faster processing
   dryRun: false,
   help: false,
   cleanupOnly: false,
@@ -26,7 +26,12 @@ const options = {
   buttonsOnly: false,
   linksOnly: false,
   landmarksOnly: false,
-  headingsOnly: false
+  headingsOnly: false,
+  // Enhanced alt options
+  enhancedAlt: false,
+  altCreativity: 'balanced', // conservative, balanced, creative
+  includeEmotions: false,
+  strictAltChecking: false
 };
 
 // Parse arguments
@@ -86,6 +91,18 @@ for (let i = 0; i < args.length; i++) {
     case '--headings-only':
       options.headingsOnly = true;
       break;
+    case '--enhanced-alt':
+      options.enhancedAlt = true;
+      break;
+    case '--alt-creativity':
+      options.altCreativity = args[++i];
+      break;
+    case '--include-emotions':
+      options.includeEmotions = true;
+      break;
+    case '--strict-alt':
+      options.strictAltChecking = true;
+      break;
     default:
       if (!arg.startsWith('-')) {
         options.directory = arg;
@@ -103,8 +120,8 @@ Usage: node cli.js [options] [directory]
 Options:
   -d, --directory <path>    Target directory (default: current directory)
   -l, --language <lang>     Language for lang attribute (default: ja)
-  --backup                 Create backup files (default: enabled)
-  --no-backup              Don't create backup files
+  --backup                 Create backup files
+  --no-backup              Don't create backup files (default)
   --dry-run                Preview changes without applying
   --comprehensive, --all   Run comprehensive fixes (same as default)
   --cleanup-only           Only cleanup duplicate role attributes
@@ -116,10 +133,28 @@ Options:
   --links-only             Fix link names + cleanup
   --landmarks-only         Fix landmarks + cleanup
   --headings-only          Analyze heading structure (no auto-fix)
+  --enhanced-alt           Use enhanced alt attribute analysis and generation
+  --alt-creativity <mode>  Alt text creativity: conservative, balanced, creative (default: balanced)
+  --include-emotions       Include emotional descriptors in alt text
+  --strict-alt             Enable strict alt attribute quality checking
   -h, --help               Show this help message
 
+Enhanced Alt Features:
+  --enhanced-alt           Comprehensive alt attribute analysis with:
+                          • Image type classification (decorative, functional, complex, etc.)
+                          • Content quality checking (length, redundancy, generic text)
+                          • Context-aware alt text generation
+                          • Multi-language vocabulary support
+                          • Brand and emotional context integration
+                          • Technical image description (charts, graphs)
+
+Alt Creativity Modes:
+  conservative            Simple, factual descriptions
+  balanced               Context-aware with moderate creativity (default)
+  creative               Rich descriptions with emotions and brand context
+
 Examples:
-  node cli.js                          # Comprehensive fixes (default mode)
+  node cli.js                          # Comprehensive fixes (no backup by default)
   node cli.js --comprehensive          # Comprehensive fixes (same as default)
   node cli.js --alt-only               # Fix alt attributes + cleanup
   node cli.js --forms-only             # Fix form labels + cleanup
@@ -130,7 +165,11 @@ Examples:
   node cli.js --cleanup-only           # Only cleanup duplicate roles
   node cli.js ./src                    # Fix src directory (comprehensive)
   node cli.js -l en --dry-run ./dist   # Preview comprehensive fixes in English
-  node cli.js --no-backup ./public    # Comprehensive fixes without backups
+  node cli.js --backup ./public       # Comprehensive fixes with backups
+  node cli.js --enhanced-alt           # Use enhanced alt attribute analysis
+  node cli.js --enhanced-alt --alt-creativity creative  # Creative alt text generation
+  node cli.js --enhanced-alt --include-emotions         # Include emotional context
+  node cli.js --strict-alt --enhanced-alt              # Strict quality checking
 
 Features:
   ✅ Alt attributes for images
@@ -153,7 +192,7 @@ function showCompletionMessage(options, mode = 'fixes') {
       console.log(chalk.gray('   📁 Backup files created with .backup extension'));
       console.log(chalk.gray('   💡 Use --no-backup to disable backups in future runs'));
     } else {
-      console.log(chalk.yellow('   ⚠️  No backup files created (--no-backup was used)'));
+      console.log(chalk.blue('   ⚡ No backup files created (default behavior for faster processing)'));
       console.log(chalk.gray('   💡 Use --backup to enable backups for safety'));
     }
   }
@@ -171,7 +210,11 @@ async function main() {
   const fixer = new AccessibilityFixer({
     language: options.language,
     backupFiles: options.backupFiles,
-    dryRun: options.dryRun
+    dryRun: options.dryRun,
+    enhancedAltMode: options.enhancedAlt,
+    altCreativity: options.altCreativity,
+    includeEmotions: options.includeEmotions,
+    strictAltChecking: options.strictAltChecking
   });
 
   try {

package/demo/enhanced-alt-test.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enhanced Alt Attribute Test Cases</title>
+</head>
+<body>
+    <header>
+        <h1>Enhanced Alt Attribute Testing</h1>
+        <p>Test cases for diverse alt attribute checking and generation</p>
+    </header>
+
+    <main>
+        <!-- Test Case 1: Missing alt attribute -->
+        <section>
+            <h2>Company Logo</h2>
+            <p>Welcome to our innovative technology company</p>
+            <img src="company-logo.png" width="200" height="100">
+        </section>
+
+        <!-- Test Case 2: Empty alt attribute for content image -->
+        <section>
+            <h2>Product Showcase</h2>
+            <p>Our latest smartphone with advanced features</p>
+            <img src="smartphone-product.jpg" alt="" width="300" height="200">
+        </section>
+
+        <!-- Test Case 3: Alt text too long -->
+        <section>
+            <h2>Team Photo</h2>
+            <img src="team-photo.jpg" alt="This is a very long description of our amazing team photo showing all the wonderful people who work at our company including engineers, designers, managers, and other staff members working together in our beautiful modern office space" width="400" height="300">
+        </section>
+
+        <!-- Test Case 4: Alt text with redundant words -->
+        <section>
+            <h2>Office Environment</h2>
+            <img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250">
+        </section>
+
+        <!-- Test Case 5: Generic alt text -->
+        <section>
+            <h2>Learn More</h2>
+            <p>Discover our services</p>
+            <a href="/services">
+                <img src="arrow-right.png" alt="Click here" width="24" height="24">
+            </a>
+        </section>
+
+        <!-- Test Case 6: Data visualization without proper description -->
+        <section>
+            <h2>Sales Performance</h2>
+            <p>Our sales increased by 25% this quarter</p>
+            <img src="sales-chart.png" alt="Chart" width="500" height="300">
+        </section>
+
+        <!-- Test Case 7: Decorative image with content alt -->
+        <section>
+            <h2>Welcome Section</h2>
+            <img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20">
+            <p>Welcome to our website</p>
+        </section>
+
+        <!-- Test Case 8: Functional icon without proper description -->
+        <section>
+            <h2>Contact Us</h2>
+            <button onclick="openChat()">
+                <img src="chat-icon.svg" alt="Icon" width="20" height="20">
+            </button>
+        </section>
+
+        <!-- Test Case 9: Complex image needing detailed description -->
+        <section>
+            <h2>System Architecture</h2>
+            <p>Our microservices architecture overview</p>
+            <img src="architecture-diagram.png" alt="Diagram" width="600" height="400">
+        </section>
+
+        <!-- Test Case 10: Image with filename in alt text -->
+        <section>
+            <h2>Product Features</h2>
+            <img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200">
+        </section>
+
+        <!-- Test Case 11: Logo without "logo" in alt text -->
+        <section>
+            <h2>Partners</h2>
+            <img src="partner-logo.png" alt="Microsoft" width="150" height="75">
+        </section>
+
+        <!-- Test Case 12: Chart with some data context -->
+        <section>
+            <h2>Growth Metrics</h2>
+            <p>User growth from 1000 to 5000 users, showing 400% increase</p>
+            <img src="growth-chart.png" alt="User growth statistics" width="400" height="250">
+        </section>
+
+        <!-- Test Case 13: Image in figure with figcaption -->
+        <figure>
+            <img src="research-data.jpg" alt="" width="350" height="200">
+            <figcaption>Research findings from our latest study on user behavior patterns</figcaption>
+        </figure>
+
+        <!-- Test Case 14: Multiple images with similar generic alt text -->
+        <section>
+            <h2>Gallery</h2>
+            <img src="photo1.jpg" alt="Photo" width="200" height="150">
+            <img src="photo2.jpg" alt="Photo" width="200" height="150">
+            <img src="photo3.jpg" alt="Photo" width="200" height="150">
+        </section>
+
+        <!-- Test Case 15: Image with inconsistent alt and aria-label -->
+        <section>
+            <h2>Navigation</h2>
+            <img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32">
+        </section>
+
+        <!-- Test Case 16: Food image in restaurant context -->
+        <section>
+            <h2>Today's Special</h2>
+            <p>Delicious authentic Japanese cuisine</p>
+            <img src="sushi-plate.jpg" alt="" width="300" height="200">
+        </section>
+
+        <!-- Test Case 17: Technology device in business context -->
+        <section>
+            <h2>Enterprise Solutions</h2>
+            <p>Professional laptop for business productivity</p>
+            <img src="business-laptop.jpg" width="250" height="180">
+        </section>
+
+        <!-- Test Case 18: Nature image in lifestyle context -->
+        <section>
+            <h2>Wellness Program</h2>
+            <p>Find peace and tranquility in nature</p>
+            <img src="peaceful-forest.jpg" alt="" width="400" height="250">
+        </section>
+    </main>
+
+    <footer>
+        <p>Enhanced Alt Attribute Test Cases - GBU Accessibility Tool</p>
+    </footer>
+
+    <script>
+        function openChat() {
+            alert('Chat opened!');
+        }
+    </script>
+</body>
+</html>

package/index.js

@@ -1,8 +1,4 @@
-/**
- * GBU Accessibility Package
- * Main entry point for the package
- */
-
 const AccessibilityFixer = require('./lib/fixer.js');
+const EnhancedAltChecker = require('./lib/enhanced-alt-checker.js');
 
-module.exports = AccessibilityFixer;
+module.exports = { AccessibilityFixer, EnhancedAltChecker };