gbu-accessibility-package 3.1.3 → 3.2.1

package/cli.js

@@ -26,7 +26,13 @@ const options = {
   buttonsOnly: false,
   linksOnly: false,
   landmarksOnly: false,
-  headingsOnly: false
+  headingsOnly: false,
+  brokenLinksOnly: false,
+  // Enhanced alt options
+  enhancedAlt: false,
+  altCreativity: 'balanced', // conservative, balanced, creative
+  includeEmotions: false,
+  strictAltChecking: false
 };
 
 // Parse arguments
@@ -86,6 +92,22 @@ for (let i = 0; i < args.length; i++) {
     case '--headings-only':
       options.headingsOnly = true;
       break;
+    case '--links-check':
+    case '--broken-links':
+      options.brokenLinksOnly = 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;
@@ -116,8 +138,27 @@ Options:
   --links-only             Fix link names + cleanup
   --landmarks-only         Fix landmarks + cleanup
   --headings-only          Analyze heading structure (no auto-fix)
+  --links-check            Check for broken links and 404 resources (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 (no backup by default)
   node cli.js --comprehensive          # Comprehensive fixes (same as default)
@@ -127,10 +168,15 @@ Examples:
   node cli.js --links-only             # Fix link names + cleanup
   node cli.js --landmarks-only         # Fix landmarks + cleanup
   node cli.js --headings-only          # Analyze heading structure only
+  node cli.js --links-check            # Check for broken links and 404s
   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 --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
@@ -171,13 +217,18 @@ 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 {
     // Handle different modes - All modes now include cleanup
     if (options.cleanupOnly || options.altOnly || options.langOnly || options.roleOnly || 
-        options.formsOnly || options.buttonsOnly || options.linksOnly || options.landmarksOnly || options.headingsOnly) {
+        options.formsOnly || options.buttonsOnly || options.linksOnly || options.landmarksOnly || 
+        options.headingsOnly || options.brokenLinksOnly) {
       // Individual modes - handle each separately, then run cleanup
     } else {
       // Default mode: Run comprehensive fix (all fixes including cleanup)
@@ -347,6 +398,18 @@ async function main() {
       
       showCompletionMessage(options, 'Heading analysis');
       return;
+      
+    } else if (options.brokenLinksOnly) {
+      // Check broken links only (no fixes, no cleanup)
+      console.log(chalk.blue('🔗 Running broken links check only...'));
+      const linkResults = await fixer.checkBrokenLinks(options.directory);
+      const totalBrokenLinks = linkResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Checked links in ${linkResults.length} files (${totalBrokenLinks} issues found)`));
+      console.log(chalk.gray('💡 Broken link issues require manual review and cannot be auto-fixed'));
+      
+      showCompletionMessage(options, 'Broken links check');
+      return;
     }
 
   } catch (error) {

package/demo/broken-links-test.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Broken Links Test</title>
+    <!-- Broken CSS -->
+    <link rel="stylesheet" href="missing-style.css">
+    <!-- Working CSS (if exists) -->
+    <link rel="stylesheet" href="../package.json">
+</head>
+<body>
+    <h1>Broken Links Test</h1>
+    
+    <!-- Working local link -->
+    <a href="advanced-test.html">Working local link</a>
+    
+    <!-- Broken local link -->
+    <a href="non-existent-page.html">Broken local link</a>
+    
+    <!-- Working external link -->
+    <a href="https://www.google.com">Working external link</a>
+    
+    <!-- Broken external link -->
+    <a href="https://this-domain-does-not-exist-12345.com">Broken external link</a>
+    
+    <!-- Working image -->
+    <img src="advanced-test.html" alt="Working image reference">
+    
+    <!-- Broken image -->
+    <img src="missing-image.jpg" alt="Broken image">
+    
+    <!-- Broken script -->
+    <script src="missing-script.js"></script>
+    
+    <!-- Skip patterns -->
+    <a href="#anchor">Anchor link (should skip)</a>
+    <a href="mailto:test@example.com">Email link (should skip)</a>
+    <a href="tel:+1234567890">Phone link (should skip)</a>
+    <a href="javascript:void(0)">JavaScript link (should skip)</a>
+</body>
+</html>

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,3 @@
-/**
- * GBU Accessibility Package
- * Main entry point for the package
- */
-
 const AccessibilityFixer = require('./lib/fixer.js');
 
-module.exports = AccessibilityFixer;
+module.exports = { AccessibilityFixer };