gbu-accessibility-package 3.5.0 → 3.8.0

package/CHANGELOG.md

@@ -5,6 +5,56 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.8.0] - 2025-10-03
+
+### Added
+- **Separated Link and Resource Checking**: Split link validation into individual specialized functions
+  - `--broken-links`: Check only external HTTP/HTTPS links for 404, 500, timeout errors
+  - `--404-resources`: Check only local resources (images, CSS, JS, etc.) for missing files
+  - `--links-check`: Comprehensive mode checking both external links and local resources
+- **Enhanced Link Validation**: Improved external link checking with better error handling
+- **Resource Path Validation**: Better detection of missing local files with relative/absolute path support
+- **Individual Command Scripts**: Added npm scripts for `broken-links` and `404-resources`
+
+### Enhanced  
+- **CLI Options**: Added new command-line options for granular link/resource checking
+- **Mode-Based Analysis**: Intelligent filtering based on external vs local resource types
+- **Error Messages**: More specific error messages for different types of link/resource issues
+- **Documentation**: Updated README.md and README-vi.md with new separated features
+
+### Fixed
+- **Duplicate Method Issues**: Resolved conflicts from duplicate `checkBrokenLinks` methods
+- **CLI Parsing Logic**: Fixed individual mode detection for new options
+- **Mode Parameter Passing**: Proper mode parameter handling in analysis methods
+
+### Improved
+- **Performance**: Faster processing by checking only relevant resource types per mode
+- **User Experience**: Clearer separation of concerns for different validation needs
+- **Backward Compatibility**: Maintained `--links-check` for comprehensive checking
+
+## [3.6.0] - 2025-01-08
+
+### Added
+- **Advanced Heading Structure Rules**: Enhanced heading structure validation with strict rules
+  - Only one `<h1>` element per page (converts extra h1 to h2)
+  - Proper heading hierarchy without level skipping (h2 → h3 → h4...)
+  - No duplicate headings in the same section/block
+  - Automatic empty heading text generation based on context
+- **Section-Aware Duplicate Detection**: Detects duplicate headings within the same section context
+- **Context-Based Text Generation**: Generates meaningful text for empty headings using surrounding content
+- **Comprehensive Heading Analysis**: Detailed analysis of heading structure issues with specific suggestions
+
+### Enhanced
+- **Heading Auto-Fix Logic**: More intelligent heading level corrections
+- **Section Context Detection**: Better detection of section boundaries for duplicate checking
+- **Error Reporting**: More detailed heading issue descriptions and suggestions
+
+### Fixed
+- **Heading Level Skipping**: Automatic correction of improper heading hierarchies
+- **Multiple H1 Elements**: Converts extra h1 elements to appropriate levels
+- **Empty Headings**: Fills empty headings with contextually relevant text
+- **Duplicate Headings**: Makes duplicate headings unique within sections
+
 ## [3.5.0] - 2025-01-08
 
 ### Added

package/README-vi.md

@@ -20,7 +20,11 @@
 - 🏛️ **Landmarks** - Thêm main và navigation landmarks thiếu
 - 📑 **Phân tích và Sửa Heading** - Phân tích cấu trúc heading với tùy chọn tự động sửa `--auto-fix-headings`
 - 🎯 **Nested Controls Detection** - Phát hiện và sửa các control tương tác lồng nhau
-- 🔍 **Broken Links Detection** - Phát hiện liên kết bị hỏng và tài nguyên 404
+- 🔍 **Broken Links Detection** - Phát hiện liên kết external bị hỏng
+- 📁 **404 Resources Detection** - Phát hiện tài nguyên local bị thiếu (hình ảnh, CSS, JS, v.v.)
+- 🗂️ **Unused Files Detection** - Tìm file không được tham chiếu ở đâu trong dự án
+- ☠️ **Dead Code Analysis** - Phát hiện CSS rules và JavaScript functions không sử dụng
+- 📏 **File Size Analysis** - Kiểm tra dung lượng file và đề xuất tối ưu hóa
 - 🧹 **Dọn dẹp Duplicate** - Loại bỏ role attributes trùng lặp
 
 ### 🚀 **Tính năng Enhanced Alt Attribute (Đã tích hợp!)**
@@ -151,7 +155,12 @@ Chế độ sửa lỗi:
   --landmarks-only         Sửa landmarks + dọn dẹp
   --headings-only          Phân tích cấu trúc heading với tùy chọn tự động sửa
   --auto-fix-headings      Bật tự động sửa lỗi heading structure
-  --links-check            Kiểm tra liên kết bị hỏng và tài nguyên 404
+  --links-check            Kiểm tra liên kết bị hỏng và tài nguyên 404 (toàn diện, không tự động sửa)
+  --broken-links           Chỉ kiểm tra liên kết external bị hỏng (không tự động sửa)
+  --404-resources          Chỉ kiểm tra tài nguyên local bị thiếu (không tự động sửa)
+  --unused-files           Kiểm tra file không sử dụng trong dự án
+  --dead-code              Kiểm tra dead code trong CSS và JavaScript
+  --file-size, --size-check Kiểm tra dung lượng file và đề xuất tối ưu hóa
   --cleanup-only           Chỉ dọn dẹp role attributes trùng lặp
 
 Tùy chọn Enhanced Alt:
@@ -182,7 +191,12 @@ gbu-a11y --forms-only        # Sửa form labels + dọn dẹp
 gbu-a11y --buttons-only      # Sửa button names + dọn dẹp
 gbu-a11y --headings-only     # Phân tích heading structure
 gbu-a11y --headings-only --auto-fix-headings  # Tự động sửa heading structure
-gbu-a11y --links-check       # Kiểm tra liên kết bị hỏng + dọn dẹp
+gbu-a11y --links-check       # Kiểm tra liên kết bị hỏng và tài nguyên thiếu + dọn dẹp
+gbu-a11y --broken-links      # Chỉ kiểm tra liên kết external bị hỏng + dọn dẹp
+gbu-a11y --404-resources     # Chỉ kiểm tra tài nguyên local bị thiếu + dọn dẹp
+gbu-a11y --unused-files      # Kiểm tra file không sử dụng trong dự án
+gbu-a11y --dead-code         # Kiểm tra dead CSS và JavaScript code
+gbu-a11y --file-size         # Kiểm tra dung lượng file và đề xuất tối ưu hóa
 
 # Tính năng enhanced alt attribute
 gbu-a11y --enhanced-alt                                    # Chế độ enhanced cơ bản
@@ -283,6 +297,15 @@ await fixer.fixEmptyAltAttributes("./src");
 // Không cần import thêm class riêng biệt
 const results = await fixer.fixAllAccessibilityIssues("./src");
 console.log("Hoàn thành sửa lỗi với enhanced features:", results);
+
+// Mới: Kiểm tra file không sử dụng
+await fixer.checkUnusedFiles('./src');
+
+// Mới: Kiểm tra dead code
+await fixer.checkDeadCode('./src');
+
+// Mới: Kiểm tra dung lượng file
+await fixer.checkFileSizes('./src');
 ```
 
 ## 🎯 Những gì được sửa
@@ -322,10 +345,31 @@ console.log("Hoàn thành sửa lỗi với enhanced features:", results);
 
 ### Kiểm tra liên kết
 
-- **Liên kết bị hỏng** → Phát hiện HTTP 404, 500, timeout
-- **Tài nguyên không tồn tại** → Kiểm tra file local thiếu
-- **URL không hợp lệ** → Phát hiện định dạng URL sai
-- **Liên kết chậm** → Cảnh báo timeout và phản hồi chậm
+- **Liên kết External bị hỏng** → Phát hiện HTTP 404, 500, timeout trên URL external
+  - URL không hợp lệ → Phát hiện định dạng URL sai
+  - Liên kết chậm → Cảnh báo timeout và phản hồi chậm
+  - Lỗi mạng → Kết nối thất bại và host không thể tiếp cận
+- **Tài nguyên 404 bị thiếu** → Kiểm tra file local bị thiếu
+  - Hình ảnh (img src), file CSS (link href), file JavaScript (script src)
+  - Video/audio sources, tài nguyên local khác
+  - Kiểm tra đường dẫn relative và absolute
+
+### Tối ưu hóa dự án
+
+- **File không sử dụng** → Phát hiện file không được tham chiếu ở đâu trong dự án
+  - Hình ảnh, CSS, JavaScript, HTML files
+  - Phân tích tham chiếu file local
+  - Phát hiện heuristic với khuyến nghị xem xét thủ công
+- **Phân tích Dead Code** → Tìm CSS rules và JavaScript functions không sử dụng
+  - CSS selectors không được sử dụng trong HTML
+  - JavaScript functions không bao giờ được gọi
+  - Variables được khai báo nhưng không sử dụng
+  - Smart skipping các patterns động
+- **Phân tích dung lượng file** → Kiểm tra kích thước file và đề xuất tối ưu hóa
+  - Phát hiện file lớn vượt ngưỡng khuyến nghị
+  - Đề xuất tối ưu hóa theo từng loại file (hình ảnh, CSS, JS, v.v.)
+  - Thống kê dung lượng theo loại file
+  - Top 10 file có dung lượng lớn nhất
 
 ## 🔧 Quản lý Package
 

package/README.md

@@ -19,7 +19,11 @@
 - 🏛️ **Landmarks** - Add missing main and navigation landmarks
 - 📑 **Heading Analysis & Auto-Fix** - Analyze heading structure with optional auto-fix using `--auto-fix-headings`
 - 🎯 **Nested Controls Detection** - Detect and fix nested interactive controls
-- 🔍 **Broken Links Detection** - Detect broken links and 404 resources
+- 🔍 **Broken Links Detection** - Detect broken external links
+- 📁 **404 Resources Detection** - Detect missing local resources (images, CSS, JS, etc.)
+- 🗂️ **Unused Files Detection** - Find files not referenced anywhere in the project
+- ☠️ **Dead Code Analysis** - Detect unused CSS rules and JavaScript functions
+- 📏 **File Size Analysis** - Check file sizes and suggest optimizations
 - 🧹 **Duplicate Cleanup** - Remove duplicate role attributes
 
 ### 🚀 **Enhanced Alt Attribute Features (Integrated!)**
@@ -148,7 +152,12 @@ Fix Modes:
   --landmarks-only         Fix landmarks + cleanup
   --headings-only          Analyze heading structure with optional auto-fix
   --auto-fix-headings      Enable automatic heading structure fixes
-  --links-check            Check for broken links and 404 resources
+    --links-check            Check for broken links and 404 resources (comprehensive, no auto-fix)
+  --broken-links           Check for broken external links only (no auto-fix)
+  --404-resources          Check for missing local resources only (no auto-fix)
+  --unused-files           Check for unused files in project
+  --dead-code              Check for dead code in CSS and JavaScript
+  --file-size, --size-check Check file sizes and suggest optimizations
   --cleanup-only           Only cleanup duplicate role attributes
 
 Enhanced Alt Options:
@@ -179,7 +188,12 @@ gbu-a11y --forms-only        # Fix form labels + cleanup
 gbu-a11y --buttons-only      # Fix button names + cleanup
 gbu-a11y --headings-only     # Analyze heading structure
 gbu-a11y --headings-only --auto-fix-headings  # Auto-fix heading structure
-gbu-a11y --links-check       # Check broken links + cleanup
+gbu-a11y --links-check       # Check broken links and missing resources + cleanup
+gbu-a11y --broken-links      # Check broken external links only + cleanup
+gbu-a11y --404-resources     # Check missing local resources only + cleanup
+gbu-a11y --unused-files      # Check for unused files in project
+gbu-a11y --dead-code         # Check for dead CSS and JavaScript code
+gbu-a11y --file-size         # Check file sizes and suggest optimizations
 
 # Enhanced alt attribute features
 gbu-a11y --enhanced-alt                                    # Basic enhanced mode
@@ -277,6 +291,15 @@ await fixer.fixEmptyAltAttributes('./src');
 // No need to import separate classes
 const results = await fixer.fixAllAccessibilityIssues('./src');
 console.log('Accessibility fixes completed with enhanced features:', results);
+
+// New: Check for unused files
+await fixer.checkUnusedFiles('./src');
+
+// New: Check for dead code
+await fixer.checkDeadCode('./src');
+
+// New: Check file sizes
+await fixer.checkFileSizes('./src');
 ```
 
 ## 🎯 What Gets Fixed
@@ -311,10 +334,30 @@ console.log('Accessibility fixes completed with enhanced features:', results);
 - **Role attributes** → WCAG-compliant role assignments
 
 ### Link Validation
-- **Broken links** → Detect HTTP 404, 500, timeout errors
-- **Missing resources** → Check for missing local files
-- **Invalid URLs** → Detect malformed URL formats
-- **Slow links** → Warn about timeouts and slow responses
+- **Broken External Links** → Detect HTTP 404, 500, timeout errors on external URLs
+  - Invalid URLs → Detect malformed URL formats
+  - Slow links → Warn about timeouts and slow responses
+  - Network errors → Connection failures and unreachable hosts
+- **404 Missing Resources** → Check for missing local files
+  - Images (img src), CSS files (link href), JavaScript files (script src)
+  - Video/audio sources, other local assets
+  - Relative and absolute path checking
+
+### Project Optimization
+- **Unused Files** → Detect files not referenced anywhere in the project
+  - Images, CSS, JavaScript, HTML files
+  - Local file references analysis
+  - Heuristic detection with manual review recommendations
+- **Dead Code Analysis** → Find unused CSS rules and JavaScript functions
+  - CSS selectors not used in HTML
+  - JavaScript functions never called
+  - Variables declared but never used
+  - Smart skipping of dynamic patterns
+- **File Size Analysis** → Check file sizes and suggest optimizations
+  - Detect large files exceeding recommended thresholds
+  - Type-specific optimization suggestions (images, CSS, JS, etc.)
+  - File size breakdown by type
+  - Top 10 largest files reporting
 
 ## 🔧 Package Management
 

package/cli.js

@@ -30,6 +30,9 @@ const options = {
   headingsOnly: false,
   dlOnly: false,
   brokenLinksOnly: false,
+  unusedFilesOnly: false,
+  deadCodeOnly: false,
+  fileSizeOnly: false,
   // Enhanced alt options
   enhancedAlt: false,
   altCreativity: 'balanced', // conservative, balanced, creative
@@ -104,9 +107,25 @@ for (let i = 0; i < args.length; i++) {
       options.dlOnly = true;
       break;
     case '--links-check':
+      options.linksCheckOnly = true;
+      break;
     case '--broken-links':
       options.brokenLinksOnly = true;
       break;
+    case '--404-resources':
+    case '--missing-resources':
+      options.missingResourcesOnly = true;
+      break;
+    case '--unused-files':
+      options.unusedFilesOnly = true;
+      break;
+    case '--dead-code':
+      options.deadCodeOnly = true;
+      break;
+    case '--file-size':
+    case '--size-check':
+      options.fileSizeOnly = true;
+      break;
     case '--auto-fix-headings':
       options.autoFixHeadings = true;
       break;
@@ -156,6 +175,11 @@ Options:
   --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)
+  --broken-links           Check for broken external links only (no auto-fix)
+  --404-resources          Check for missing local resources only (no auto-fix)
+  --unused-files           Check for unused files in project (no auto-fix)
+  --dead-code              Check for dead code in CSS and JavaScript (no auto-fix)
+  --file-size, --size-check Check file sizes and suggest optimizations (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
@@ -186,6 +210,11 @@ Examples:
   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 --broken-links           # Check for broken external links only
+  node cli.js --404-resources          # Check for missing local resources only
+  node cli.js --unused-files           # Check for unused files in project
+  node cli.js --dead-code              # Check for dead CSS and JavaScript code
+  node cli.js --file-size              # Check file sizes and suggest optimizations
   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
@@ -247,7 +276,7 @@ async function main() {
     // Handle different modes - All modes now include cleanup
     if (options.cleanupOnly || options.altOnly || options.langOnly || options.roleOnly || 
         options.formsOnly || options.nestedOnly || options.buttonsOnly || options.linksOnly || options.landmarksOnly || 
-        options.headingsOnly || options.dlOnly || options.brokenLinksOnly) {
+        options.headingsOnly || options.dlOnly || options.linksCheckOnly || options.brokenLinksOnly || options.missingResourcesOnly || options.unusedFilesOnly || options.deadCodeOnly || options.fileSizeOnly) {
       // Individual modes - handle each separately, then run cleanup
     } else {
       // Default mode: Run comprehensive fix (all fixes including cleanup)
@@ -466,16 +495,79 @@ async function main() {
       showCompletionMessage(options, 'Description list fixes + cleanup');
       return;
       
+    } else if (options.linksCheckOnly) {
+      // Check broken links and 404 resources (backward compatibility)
+      console.log(chalk.blue('🔗 Running comprehensive links and resources check...'));
+      const linkResults = await fixer.checkBrokenLinks(options.directory);
+      const resourceResults = await fixer.check404Resources(options.directory);
+      const totalLinkIssues = linkResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      const totalResourceIssues = resourceResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Checked links in ${linkResults.length} files (${totalLinkIssues} link issues found)`));
+      console.log(chalk.green(`✅ Checked resources in ${resourceResults.length} files (${totalResourceIssues} resource issues found)`));
+      console.log(chalk.gray('💡 Link and resource issues require manual review and cannot be auto-fixed'));
+      
+      showCompletionMessage(options, 'Links and resources check');
+      return;
+      
     } else if (options.brokenLinksOnly) {
-      // Check broken links only (no fixes, no cleanup)
-      console.log(chalk.blue('🔗 Running broken links check only...'));
+      // Check broken external links only 
+      console.log(chalk.blue('🔗 Running broken external 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.green(`\n✅ Checked external 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');
+      showCompletionMessage(options, 'Broken external links check');
+      return;
+      
+    } else if (options.missingResourcesOnly) {
+      // Check 404 resources only (missing local files)
+      console.log(chalk.blue('📁 Running missing resources check only...'));
+      const resourceResults = await fixer.check404Resources(options.directory);
+      const totalMissingResources = resourceResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Checked local resources in ${resourceResults.length} files (${totalMissingResources} issues found)`));
+      console.log(chalk.gray('💡 Missing resource issues require manual review and cannot be auto-fixed'));
+      
+      showCompletionMessage(options, 'Missing resources check');
+      return;
+      
+    } else if (options.unusedFilesOnly) {
+      // Check unused files only (no fixes, no cleanup)
+      console.log(chalk.blue('🗂️ Running unused files check only...'));
+      const unusedResults = await fixer.checkUnusedFiles(options.directory);
+      const totalUnusedFiles = unusedResults.length;
+      
+      console.log(chalk.green(`\n✅ Checked project files (${totalUnusedFiles} unused files found)`));
+      console.log(chalk.gray('💡 Unused file detection is heuristic - manual review recommended'));
+      
+      showCompletionMessage(options, 'Unused files check');
+      return;
+      
+    } else if (options.deadCodeOnly) {
+      // Check dead code only (no fixes, no cleanup)
+      console.log(chalk.blue('☠️ Running dead code check only...'));
+      const deadCodeResults = await fixer.checkDeadCode(options.directory);
+      const totalDeadCode = deadCodeResults.length;
+      
+      console.log(chalk.green(`\n✅ Checked for dead code (${totalDeadCode} potential issues found)`));
+      console.log(chalk.gray('💡 Dead code analysis is heuristic - manual review recommended'));
+      
+      showCompletionMessage(options, 'Dead code check');
+      return;
+      
+    } else if (options.fileSizeOnly) {
+      // Check file sizes only (no fixes, no cleanup)
+      console.log(chalk.blue('📏 Running file size analysis only...'));
+      const sizeResults = await fixer.checkFileSizes(options.directory);
+      const totalLargeFiles = sizeResults.largeFiles.length;
+      
+      console.log(chalk.green(`\n✅ Analyzed ${sizeResults.totalFiles} files (${totalLargeFiles} large files found)`));
+      console.log(chalk.gray('💡 File size analysis is based on common best practices'));
+      
+      showCompletionMessage(options, 'File size analysis');
       return;
     }
 

package/demo/advanced-test.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <meta charset="UTF-8">
     <title>Advanced Accessibility Test</title>
@@ -9,22 +9,22 @@
     
     <!-- Form issues -->
     <form>
-        <input type="text" placeholder="Name">
-        <input type="email" id="email">
-        <input type="password">
+        <input type="text" placeholder="Name" aria-label="Name" title="Name" id="text_019747">
+        <input type="email" id="email" aria-label="メールアドレス" title="メールアドレス">
+        <input type="password" aria-label="パスワード" title="パスワード" id="password_019747">
         <input type="submit">
     </form>
     
     <!-- Button issues -->
-    <button></button>
-    <button onclick="alert('test')"></button>
+    <button aria-label="ボタン" title="ボタン"></button>
+    <button onclick="alert('test')" role="button" aria-label="ボタン" title="ボタン"></button>
     <input type="button">
     
     <!-- Link issues -->
-    <a href="/home"></a>
-    <a href="/more">Click here</a>
-    <a href="/read">Read more</a>
-    <a href="/image"><img src="icon.png"></a>
+    <a href="/home" role="link" aria-label="リンク" title="リンク"></a>
+    <a href="/more" role="link">Click here</a>
+    <a href="/read" role="link">Read more</a>
+    <a href="/image" role="link" aria-label="リンク" title="リンク"><img src="icon.png" alt="Skipped h2" role="img" aria-label="Skipped h2"></a>
     
     <!-- Heading issues -->
     <h3>Skipped h2</h3>
@@ -36,9 +36,9 @@
         <p>Main content without landmark</p>
     </div>
     
-    <ul class="navigation">
-        <li><a href="/home">Home</a></li>
-        <li><a href="/about">About</a></li>
+    <ul class="navigation" role="menubar">
+        <li><a href="/home" role="link">Home</a></li>
+        <li><a href="/about" role="link">About</a></li>
     </ul>
 </body>
 </html>

package/demo/aria-label-test.html

@@ -15,10 +15,10 @@
     <img src="test2.jpg" alt="Test image 2" aria-label="Custom label" role="img">
     
     <!-- Test case 3: Image with empty alt (should not add aria-label) -->
-    <img src="test3.jpg" alt="" role="img">
+    <img src="test3.jpg" alt="Aria Label Test Cases" role="img" aria-label="Aria Label Test Cases">
     
     <!-- Test case 4: Image without alt (should generate alt and aria-label) -->
-    <img src="logo.png" role="img">
+    <img src="logo.png" role="img" alt="ロゴ" aria-label="ロゴ">
     
     <!-- Test case 5: Picture with role and img with alt -->
     <picture>

package/demo/broken-links-test.html

@@ -12,30 +12,30 @@
     <h1>Broken Links Test</h1>
     
     <!-- Working local link -->
-    <a href="advanced-test.html">Working local link</a>
+    <a href="advanced-test.html" role="link">Working local link</a>
     
     <!-- Broken local link -->
-    <a href="non-existent-page.html">Broken local link</a>
+    <a href="non-existent-page.html" role="link">Broken local link</a>
     
     <!-- Working external link -->
-    <a href="https://www.google.com">Working external link</a>
+    <a href="https://www.google.com" role="link">Working external link</a>
     
     <!-- Broken external link -->
-    <a href="https://this-domain-does-not-exist-12345.com">Broken external link</a>
+    <a href="https://this-domain-does-not-exist-12345.com" role="link">Broken external link</a>
     
     <!-- Working image -->
-    <img src="advanced-test.html" alt="Working image reference">
+    <img src="advanced-test.html" alt="Working image reference" role="img" aria-label="Working image reference">
     
     <!-- Broken image -->
-    <img src="missing-image.jpg" alt="Broken image">
+    <img src="missing-image.jpg" alt="Broken image" role="img" aria-label="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>
+    <a href="#anchor" role="link">Anchor link (should skip)</a>
+    <a href="mailto:test@example.com" role="link">Email link (should skip)</a>
+    <a href="tel:+1234567890" role="link">Phone link (should skip)</a>
+    <a href="javascript:void(0)" role="link">JavaScript link (should skip)</a>
 </body>
 </html>

package/demo/comprehensive-test.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <meta charset="UTF-8">
     <title>Comprehensive Test</title>
@@ -8,13 +8,13 @@
     <h1>Comprehensive Test File</h1>
     
     <!-- Missing alt -->
-    <img src="test.jpg">
+    <img src="test.jpg" alt="Comprehensive Test File" role="img" aria-label="Comprehensive Test File">
     
     <!-- Missing role -->
-    <a href="/home">Home</a>
+    <a href="/home" role="link">Home</a>
     
     <!-- Duplicate roles -->
-    <img src="dup.jpg" alt="Duplicate" role="img" role="img">
+    <img src="dup.jpg" alt="Duplicate" role="img" aria-label="Duplicate">
     
     <p>This tests comprehensive mode as default.</p>
 </body>

package/demo/dead-code-test.css

@@ -0,0 +1,68 @@
+/* CSS file with mixed used and unused rules */
+
+/* Used classes - these appear in HTML */
+.header {
+    background-color: #333;
+    color: white;
+}
+
+.content {
+    padding: 20px;
+    margin: 0 auto;
+}
+
+/* Unused classes - these don't appear in any HTML */
+.sidebar {
+    width: 300px;
+    background: #f0f0f0;
+}
+
+.popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.modal-overlay {
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* Used tag selectors */
+h1 {
+    font-size: 2em;
+    margin-bottom: 1em;
+}
+
+p {
+    line-height: 1.6;
+}
+
+/* Unused tag selectors */
+article {
+    margin: 20px 0;
+}
+
+aside {
+    float: right;
+    width: 250px;
+}
+
+/* Dynamic classes that should be skipped */
+.active {
+    color: red;
+}
+
+.hidden {
+    display: none;
+}
+
+/* Pseudo-classes that should be skipped */
+.button:hover {
+    background-color: #007bff;
+}

package/demo/dead-code-test.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Dead Code Test</title>
+    <link rel="stylesheet" href="dead-code-test.css">
+    <script src="dead-code-test.js"></script>
+</head>
+<body>
+    <!-- Uses .header and .content classes from CSS -->
+    <div class="header">
+        <h1>Dead Code Analysis Test</h1>
+    </div>
+    
+    <div class="content">
+        <p>This page uses some CSS classes and JavaScript functions, but not all of them.</p>
+        
+        <!-- Button that calls showAlert() function -->
+        <button onclick="showAlert()" role="button">Click me (uses showAlert function)</button>
+        
+        <!-- Button with event handler -->
+        <button onclick="handleClick(event)" role="button">Handle Click</button>
+        
+        <p>Run <code>gbu-a11y --dead-code</code> to analyze which CSS rules and JavaScript functions are unused.</p>
+        
+        <!-- Note: The following are used:
+             CSS: .header, .content, h1, p (tag selectors)
+             JS: showAlert(), handleClick(), and their dependencies
+             
+             The following should be detected as unused:
+             CSS: .sidebar, .popup, .modal-overlay, article, aside
+             JS: unusedFunction(), complexUnusedFunction(), unusedVariable, etc.
+        -->
+    </div>
+</body>
+</html>