gbu-accessibility-package 1.1.0 → 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 GBU Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/QUICK_START.md

@@ -1,19 +1,18 @@
 # 🚀 Quick Start Guide
 
-Hướng dẫn nhanh để sử dụng Accessibility Fixer trong 5 phút.
+Hướng dẫn nhanh để sử dụng GBU Accessibility Package trong 5 phút.
 
 ## ⚡ Cài đặt nhanh
 
 ```bash
-# 1. Copy package vào dự án
-cp -r accessibility-package /path/to/your/project/
+# 1. Cài đặt global (khuyến nghị)
+npm install -g gbu-accessibility-package
 
-# 2. Cài đặt dependencies
-cd your-project/accessibility-package
-npm install
+# 2. Hoặc cài đặt local
+npm install gbu-accessibility-package
 
 # 3. Chạy ngay!
-node cli.js
+gbu-a11y
 ```
 
 ## 🎯 Sử dụng cơ bản
@@ -22,16 +21,19 @@ node cli.js
 
 ```bash
 # Fix toàn bộ dự án (current directory)
-node accessibility-package/cli.js
+gbu-a11y
 
 # Fix thư mục cụ thể
-node accessibility-package/cli.js ./src
+gbu-a11y ./src
 
 # Preview trước khi fix
-node accessibility-package/cli.js --dry-run
+gbu-a11y --dry-run
 
 # Fix với ngôn ngữ khác
-node accessibility-package/cli.js -l en ./dist
+gbu-a11y -l en ./dist
+
+# Fix comprehensive (khuyến nghị)
+gbu-a11y --comprehensive
 ```
 
 ### Cách 2: Node.js Script
@@ -39,7 +41,7 @@ node accessibility-package/cli.js -l en ./dist
 Tạo file `fix.js`:
 
 ```javascript
-const AccessibilityFixer = require('./accessibility-package/lib/fixer.js');
+const AccessibilityFixer = require('gbu-accessibility-package');
 
 const fixer = new AccessibilityFixer({
   language: 'ja',     // Thay đổi theo dự án
@@ -48,9 +50,8 @@ const fixer = new AccessibilityFixer({
 });
 
 async function fix() {
-  await fixer.fixHtmlLang('.');
-  await fixer.fixEmptyAltAttributes('.');
-  await fixer.fixRoleAttributes('.');
+  // Fix tất cả issues
+  await fixer.fixAllAccessibilityIssues('.');
   console.log('✅ Done!');
 }
 
@@ -61,11 +62,10 @@ Chạy: `node fix.js`
 
 ## 📋 Checklist nhanh
 
-- [ ] Copy package vào dự án
-- [ ] `npm install` trong thư mục package
+- [ ] `npm install -g gbu-accessibility-package`
 - [ ] Backup code (git commit)
-- [ ] Chạy `--dry-run` để preview
-- [ ] Chạy tool để fix
+- [ ] Chạy `gbu-a11y --dry-run` để preview
+- [ ] Chạy `gbu-a11y --comprehensive` để fix
 - [ ] Kiểm tra kết quả
 - [ ] Commit changes
 
@@ -103,19 +103,19 @@ language: 'en'  // 'ja', 'vi', 'zh', etc.
 
 ### Không tạo backup
 ```bash
-node cli.js --no-backup
+gbu-a11y --no-backup
 ```
 
 ### Chỉ preview
 ```bash
-node cli.js --dry-run
+gbu-a11y --dry-run
 ```
 
 ## ❓ Troubleshooting
 
 **Lỗi "Cannot find module"**
 ```bash
-cd accessibility-package && npm install
+npm install -g gbu-accessibility-package
 ```
 
 **Duplicate attributes**
@@ -130,7 +130,7 @@ cd accessibility-package && npm install
 
 1. Đọc [README.md](./README.md) đầy đủ
 2. Xem [example.js](./example.js) 
-3. Chạy `node cli.js --help`
+3. Chạy `gbu-a11y --help`
 
 ---
 

package/README.md

@@ -1,335 +1,336 @@
 # GBU Accessibility Package
 
-[![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://badge.fury.io/js/gbu-accessibility-package)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+🚀 **Automated accessibility fixes for HTML files** - Smart, context-aware accessibility improvements with zero configuration.
 
-Một công cụ tự động sửa các vấn đề accessibility phổ biến trong HTML, bao gồm alt attributes, lang attributes, và role attributes với khả năng phân tích context thông minh.
+[![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://www.npmjs.com/package/gbu-accessibility-package)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D12.0.0-brightgreen)](https://nodejs.org/)
 
-## 🚀 Tính năng
+## ✨ Features
 
-- ✅ **Alt Attributes**: Tự động thêm alt text thông minh cho images
-- ✅ **Lang Attributes**: Thêm lang attribute cho thẻ `<html>`
-- ✅ **Role Attributes**: Thêm role attributes cho các elements
-  - `role="img"` cho tất cả thẻ `<img>`
-  - `role="link"` cho thẻ `<a>`
-  - `role="button"` cho elements có onclick
-  - `role="menubar"` và `role="menuitem"` cho navigation lists
-- ✅ **Duplicate Cleanup**: Tự động xóa duplicate role attributes
-- ✅ **Context-aware**: Phân tích nội dung xung quanh để tạo alt text phù hợp
-- ✅ **Backup tự động**: Tạo backup files trước khi sửa
-- ✅ **Dry run mode**: Xem preview trước khi apply changes
-- ✅ **Comprehensive mode**: Chạy tất cả fixes trong một lần
+- 🖼️ **Smart Alt Text Generation** - Context-aware alt attributes for images
+- 🌐 **HTML Lang Attributes** - Automatic language attribute fixes
+- 🎭 **Role Attributes** - WCAG-compliant role attribute management
+- 🧹 **Duplicate Cleanup** - Remove duplicate role attributes
+- 📁 **Batch Processing** - Process entire directories recursively
+- 💾 **Automatic Backups** - Safe modifications with backup files
+- 🔍 **Dry Run Mode** - Preview changes before applying
+- 📊 **Detailed Reports** - Comprehensive fix summaries
 
-## 📦 Cài đặt
+## 🚀 Quick Start
 
-### NPM Install (Khuyến nghị)
+### Installation
 
 ```bash
-# Cài đặt global
+# Global installation (recommended)
 npm install -g gbu-accessibility-package
 
-# Hoặc cài đặt local cho dự án
-npm install gbu-accessibility-package --save-dev
+# Local installation
+npm install gbu-accessibility-package
 ```
 
-### Yarn Install
+### Basic Usage
 
 ```bash
-# Global
-yarn global add gbu-accessibility-package
+# Fix current directory
+gbu-a11y
+
+# Preview changes (dry run)
+gbu-a11y --dry-run
+
+# Fix specific directory
+gbu-a11y ./src
+
+# Comprehensive fixes (recommended)
+gbu-a11y --comprehensive
 
-# Local
-yarn add gbu-accessibility-package --dev
+# Fix specific file
+gbu-a11y index.html
 ```
 
-## 🛠️ Sử dụng
+## 📖 Detailed Usage
 
-### Cách 1: Sử dụng CLI (Global Install)
+### Command Line Options
 
 ```bash
-# Sau khi cài đặt global
-gbu-a11y [options] [directory]
-
-# Hoặc
-accessibility-fixer [options] [directory]
+gbu-a11y [options] [directory/file]
+
+Options:
+  -d, --directory <path>    Target directory (default: current directory)
+  -l, --language <lang>     Language for lang attribute (default: ja)
+  --no-backup              Don't create backup files
+  --dry-run                Preview changes without applying
+  --comprehensive, --all   Run all fixes including cleanup (recommended)
+  --cleanup-only           Only cleanup duplicate role attributes
+  --alt-only               Only fix alt attributes for images
+  --lang-only              Only fix HTML lang attributes
+  --role-only              Only fix role attributes
+  -h, --help               Show help message
 ```
 
-### Cách 1b: CLI (Local Install)
+### Examples
 
 ```bash
-# Chạy từ node_modules
-npx gbu-a11y [options] [directory]
+# Basic fixes for current directory (all standard fixes)
+gbu-a11y
 
-# Hoặc thêm vào package.json scripts
-{
-  "scripts": {
-    "fix-a11y": "gbu-a11y --comprehensive",
-    "preview-a11y": "gbu-a11y --comprehensive --dry-run",
-    "cleanup-roles": "gbu-a11y --cleanup-only"
-  }
-}
-```
+# Preview all changes
+gbu-a11y --dry-run --comprehensive
 
-### Cách 2: Sử dụng trong Node.js
+# Fix with English language
+gbu-a11y -l en ./public
 
-```javascript
-const AccessibilityFixer = require('gbu-accessibility-package');
+# Individual fix types
+gbu-a11y --alt-only          # Only fix alt attributes
+gbu-a11y --lang-only         # Only fix lang attributes  
+gbu-a11y --role-only         # Only fix role attributes
+gbu-a11y --cleanup-only      # Only cleanup duplicates
 
-// Tạo instance với config
-const fixer = new AccessibilityFixer({
-  language: 'ja',        // Ngôn ngữ cho lang attribute
-  backupFiles: true,     // Tạo backup files
-  dryRun: false         // false = apply changes, true = preview only
-});
+# Combine with other options
+gbu-a11y --alt-only --dry-run ./src    # Preview alt fixes only
+gbu-a11y --role-only -l en ./public    # Fix roles with English lang
 
-// Sử dụng các methods
-async function fixAccessibility() {
-  // Fix lang attributes
-  const langResults = await fixer.fixHtmlLang('.');
-  
-  // Fix alt attributes
-  const altResults = await fixer.fixEmptyAltAttributes('.');
-  
-  // Fix role attributes
-  const roleResults = await fixer.fixRoleAttributes('.');
-  
-  console.log('Hoàn thành!');
-}
-
-fixAccessibility();
+# Fix without creating backups
+gbu-a11y --no-backup ./dist
 ```
 
-### Cách 3: Script nhanh
-
-Tạo file `fix-accessibility.js` trong dự án:
+## 🔧 Programmatic Usage
 
 ```javascript
 const AccessibilityFixer = require('gbu-accessibility-package');
 
 const fixer = new AccessibilityFixer({
-  language: 'ja',        // Thay đổi theo ngôn ngữ dự án
+  language: 'en',
   backupFiles: true,
   dryRun: false
 });
 
-async function fixAll() {
-  console.log('🚀 Bắt đầu fix accessibility...');
-  
-  // Fix tất cả issues
-  await fixer.fixHtmlLang('.');
-  await fixer.fixEmptyAltAttributes('.');
-  await fixer.fixRoleAttributes('.');
-  
-  console.log('✅ Hoàn thành!');
+// Fix all accessibility issues
+async function fixAccessibility() {
+  try {
+    const results = await fixer.fixAllAccessibilityIssues('./src');
+    console.log('Fixed files:', results);
+  } catch (error) {
+    console.error('Error:', error);
+  }
 }
 
-fixAll();
+fixAccessibility();
 ```
 
-Chạy script:
-```bash
-node fix-accessibility.js
-```
+## 🎯 Fix Modes
 
-## ⚙️ Configuration Options
+### Individual Fix Options
+You can now fix specific accessibility issues individually:
 
-```javascript
-const config = {
-  language: 'ja',           // Lang attribute value ('ja', 'en', 'vi', etc.)
-  backupFiles: true,        // Tạo .backup files
-  dryRun: false            // true = chỉ preview, false = apply changes
-};
+- `--alt-only` - Only fix alt attributes for images
+- `--lang-only` - Only fix HTML lang attributes  
+- `--role-only` - Only fix role attributes
+- `--cleanup-only` - Only cleanup duplicate role attributes
 
-const fixer = new AccessibilityFixer(config);
-```
+### Combined Modes
+- **Standard mode** (default) - Fixes alt, lang, and role attributes
+- `--comprehensive` - All fixes including duplicate cleanup
 
-## 📋 Các Methods có sẵn
+```bash
+# Fix only missing alt attributes
+gbu-a11y --alt-only
 
-### 1. fixHtmlLang(directory)
-Thêm lang attribute cho thẻ `<html>`
+# Fix only HTML lang attributes
+gbu-a11y --lang-only
 
-```javascript
-const results = await fixer.fixHtmlLang('./src');
-```
+# Fix only role attributes
+gbu-a11y --role-only
 
-### 2. fixEmptyAltAttributes(directory)
-Sửa missing/empty alt attributes cho images
+# Clean up duplicate roles only
+gbu-a11y --cleanup-only
 
-```javascript
-const results = await fixer.fixEmptyAltAttributes('./src');
+# All fixes (recommended)
+gbu-a11y --comprehensive
 ```
 
-### 3. fixRoleAttributes(directory)
-Thêm role attributes cho các elements
+## 🔧 What Gets Fixed
 
-```javascript
-const results = await fixer.fixRoleAttributes('./src');
-```
+### 1. Alt Attributes
+- **Missing alt attributes** → Adds contextual alt text
+- **Empty alt attributes** → Generates meaningful descriptions
+- **Context-aware generation** → Uses surrounding text, headings, captions
 
-### 4. cleanupDuplicateRoles(directory)
-Xóa duplicate role attributes
+```html
+<!-- Before -->
+<img src="logo.png">
+<img src="chart.jpg" alt="">
 
-```javascript
-const results = await fixer.cleanupDuplicateRoles('./src');
+<!-- After -->
+<img src="logo.png" alt="ロゴ">
+<img src="chart.jpg" alt="グラフ">
 ```
 
-### 5. fixAllAccessibilityIssues(directory)
-Chạy tất cả fixes bao gồm cleanup (khuyến nghị)
+### 2. HTML Lang Attributes
+- **Missing lang attributes** → Adds specified language
+- **Empty lang attributes** → Sets proper language code
 
-```javascript
-const results = await fixer.fixAllAccessibilityIssues('./src');
-```
-
-### 6. addMainLandmarks(directory)
-Phát hiện và suggest main landmarks
+```html
+<!-- Before -->
+<html>
+<html lang="">
 
-```javascript
-const suggestions = await fixer.addMainLandmarks('./src');
+<!-- After -->
+<html lang="ja">
+<html lang="ja">
 ```
 
-## 🎯 Ví dụ kết quả
+### 3. Role Attributes
+- **Images** → `role="img"`
+- **Links** → `role="link"`
+- **Clickable elements** → `role="button"`
+- **Navigation lists** → `role="menubar"`
+- **Menu items** → `role="menuitem"`
 
-### Alt Attributes
 ```html
-<!-- Trước -->
-<img src="logo.png">
-<img src="icon.png" alt="">
+<!-- Before -->
+<img src="icon.png" alt="Icon">
+<a href="/home">Home</a>
+<div class="btn-click">Click me</div>
 
-<!-- Sau -->
-<img src="logo.png" alt="ロゴ">
-<img src="icon.png" alt="アイコン">
+<!-- After -->
+<img src="icon.png" alt="Icon" role="img">
+<a href="/home" role="link">Home</a>
+<div class="btn-click" role="button">Click me</div>
 ```
 
-### Role Attributes
-```html
-<!-- Trước -->
-<img src="photo.jpg" alt="Beautiful sunset">
-<a href="/about">About Us</a>
-<button onclick="submit()">Submit</button>
-
-<!-- Sau -->
-<img src="photo.jpg" alt="Beautiful sunset" role="img">
-<a href="/about" role="link">About Us</a>
-<button onclick="submit()" role="button">Submit</button>
-```
+### 4. Duplicate Cleanup
+- **Removes duplicate role attributes**
+- **Preserves first occurrence**
+- **Handles mixed quote styles**
 
-### Duplicate Cleanup
 ```html
-<!-- Trước -->
-<img src="logo.png" alt="Logo" role="img" role="img" role="img">
-<a href="/home" role="link" role="link">Home</a>
-<button onclick="click()" role="button" role="button">Click</button>
+<!-- Before -->
+<img src="test.jpg" role="img" role="img" alt="Test">
 
-<!-- Sau -->
-<img src="logo.png" alt="Logo" role="img">
-<a href="/home" role="link">Home</a>
-<button onclick="click()" role="button">Click</button>
+<!-- After -->
+<img src="test.jpg" role="img" alt="Test">
 ```
 
-### Lang Attributes
-```html
-<!-- Trước -->
-<html>
+## 🌟 Smart Alt Text Generation
 
-<!-- Sau -->
-<html lang="ja">
-```
+The package uses intelligent context analysis to generate meaningful alt text:
 
-## 🔧 Customization
+### Context Sources
+1. **Title attributes**
+2. **Aria-label attributes**  
+3. **Definition terms (dt elements)**
+4. **Parent link text**
+5. **Nearby headings**
+6. **Figure captions**
+7. **Surrounding text content**
 
-### Thay đổi ngôn ngữ cho alt text
+### Fallback Patterns
+- `logo.png` → "ロゴ" (Logo)
+- `icon.svg` → "アイコン" (Icon)
+- `banner.jpg` → "バナー" (Banner)
+- `chart.png` → "グラフ" (Chart)
+- Generic images → "画像" (Image)
 
-Sửa method `generateAltText` trong `lib/fixer.js`:
+## 📊 Output Examples
 
-```javascript
-generateAltText(imgTag, htmlContent = '', imgIndex = 0) {
-  // Thay đổi các text này theo ngôn ngữ dự án
-  if (srcValue.includes('logo')) {
-    return 'Logo';           // Thay vì 'ロゴ'
-  } else if (srcValue.includes('icon')) {
-    return 'Icon';           // Thay vì 'アイコン'
-  }
-  // ... thêm các cases khác
-}
+### Standard Mode
 ```
+🚀 Starting Accessibility Fixer...
+📝 Step 1: Fixing HTML lang attributes...
+✅ Fixed lang attributes in 5 files
 
-### Thêm role rules mới
+🖼️ Step 2: Fixing alt attributes...
+✅ Fixed alt attributes in 12 files (34 issues)
 
-Sửa method `fixRoleAttributesInContent` để thêm rules:
+🎭 Step 3: Fixing role attributes...  
+✅ Fixed role attributes in 8 files (67 issues)
 
-```javascript
-// Ví dụ: thêm role cho form elements
-fixed = fixed.replace(
-  /<form([^>]*)(?!.*role\s*=)([^>]*>)/gi,
-  '<form$1 role="form"$2'
-);
+📊 Summary:
+   Total files scanned: 25
+   Files fixed: 15
+   Total issues resolved: 106
+
+🎉 All accessibility fixes completed successfully!
 ```
 
-## 🚨 Lưu ý quan trọng
+### Comprehensive Mode
+```
+🎯 Running comprehensive accessibility fixes...
+📝 Step 1: HTML lang attributes...
+🖼️ Step 2: Alt attributes...
+🎭 Step 3: Role attributes...
+🧹 Step 4: Cleanup duplicate roles...
+
+🎉 All accessibility fixes completed!
+📊 Final Summary:
+   Total files scanned: 25
+   Files fixed: 15  
+   Total issues resolved: 106
+```
 
-1. **Backup**: Luôn tạo backup trước khi chạy tool
-2. **Test**: Chạy với `dryRun: true` trước để xem preview
-3. **Review**: Kiểm tra kết quả sau khi chạy
-4. **Git**: Commit code trước khi chạy tool
+## 🔒 Safety Features
 
-## 📊 Monitoring Results
+- **Automatic backups** with `.backup` extension
+- **Dry run mode** for safe previewing
+- **Non-destructive** - only adds missing attributes
+- **Duplicate prevention** - won't add existing attributes
+- **Error handling** - continues processing on individual file errors
 
-Tool sẽ hiển thị:
-- Số files được xử lý
-- Số issues được tìm thấy và sửa
-- Chi tiết từng file
-- Thống kê tổng quan
+## 🛠️ Configuration
 
-```
-📁 index.html:
-  🖼️ Missing role: Image 1 should have role="img"
-  🔗 Missing role: Anchor 1 should have role="link"
-  🖼️ Added role="img" to image element
-  🔗 Added role="link" to anchor element
-✅ Fixed role attributes in: index.html
-
-📊 Summary: Found 245 role attribute issues across 50 files
+### Package.json Scripts
+```json
+{
+  "scripts": {
+    "a11y:fix": "gbu-a11y",
+    "a11y:check": "gbu-a11y --dry-run",
+    "a11y:comprehensive": "gbu-a11y --comprehensive",
+    "a11y:cleanup": "gbu-a11y --cleanup-only",
+    "a11y:alt": "gbu-a11y --alt-only",
+    "a11y:lang": "gbu-a11y --lang-only", 
+    "a11y:role": "gbu-a11y --role-only"
+  }
+}
 ```
 
-## 🛠️ Troubleshooting
+### CI/CD Integration
+```yaml
+# GitHub Actions example
+- name: Check Accessibility
+  run: npx gbu-accessibility-package --dry-run
 
-### Lỗi "Cannot find module"
-```bash
-cd accessibility-package
-npm install
+- name: Fix Accessibility Issues  
+  run: npx gbu-accessibility-package --comprehensive
 ```
 
-### Duplicate role attributes
-Chạy cleanup script:
-```javascript
-// Tạo file cleanup.js
-const fs = require('fs');
-const path = require('path');
-
-async function cleanup() {
-  // Code cleanup duplicate roles
-  const content = await fs.promises.readFile('file.html', 'utf8');
-  const fixed = content.replace(/role="([^"]+)"(\s+role="\1")+/g, 'role="$1"');
-  await fs.promises.writeFile('file.html', fixed);
-}
-```
+## 🤝 Contributing
 
-### Performance với project lớn
-- Chạy từng thư mục con
-- Sử dụng `dryRun: true` để test trước
-- Exclude thư mục không cần thiết
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
 ## 📝 License
 
-MIT License - Tự do sử dụng cho mọi dự án.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 🤝 Contributing
+## 🆘 Support
+
+- 📧 **Issues**: [GitHub Issues](https://github.com/your-org/gbu-accessibility-package/issues)
+- 📖 **Documentation**: [GitHub Wiki](https://github.com/your-org/gbu-accessibility-package/wiki)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/your-org/gbu-accessibility-package/discussions)
+
+## 🏆 Why Choose GBU Accessibility Package?
 
-1. Fork repository
-2. Tạo feature branch
-3. Commit changes
-4. Tạo Pull Request
+- ✅ **Zero Configuration** - Works out of the box
+- ✅ **Smart & Context-Aware** - Not just generic fixes
+- ✅ **Safe & Reliable** - Automatic backups and dry run
+- ✅ **Comprehensive** - Covers all major accessibility issues
+- ✅ **Fast & Efficient** - Batch processing with detailed reports
+- ✅ **WCAG Compliant** - Follows accessibility standards
 
 ---
 
-**Happy coding! 🚀**
+Made with ❤️ by the GBU Team

package/cli.js

@@ -18,7 +18,10 @@ const options = {
   dryRun: false,
   help: false,
   cleanupOnly: false,
-  comprehensive: false
+  comprehensive: false,
+  altOnly: false,
+  langOnly: false,
+  roleOnly: false
 };
 
 // Parse arguments
@@ -51,6 +54,15 @@ for (let i = 0; i < args.length; i++) {
     case '--all':
       options.comprehensive = true;
       break;
+    case '--alt-only':
+      options.altOnly = true;
+      break;
+    case '--lang-only':
+      options.langOnly = true;
+      break;
+    case '--role-only':
+      options.roleOnly = true;
+      break;
     default:
       if (!arg.startsWith('-')) {
         options.directory = arg;
@@ -70,13 +82,19 @@ Options:
   -l, --language <lang>     Language for lang attribute (default: ja)
   --no-backup              Don't create backup files
   --dry-run                Preview changes without applying
-  --cleanup-only           Only cleanup duplicate role attributes
   --comprehensive, --all   Run all fixes including cleanup (recommended)
+  --cleanup-only           Only cleanup duplicate role attributes
+  --alt-only               Only fix alt attributes for images
+  --lang-only              Only fix HTML lang attributes
+  --role-only              Only fix role attributes
   -h, --help               Show this help message
 
 Examples:
   node cli.js                          # Fix current directory (standard fixes)
   node cli.js --comprehensive          # Run all fixes including cleanup
+  node cli.js --alt-only               # Only fix alt attributes
+  node cli.js --lang-only              # Only fix lang attributes
+  node cli.js --role-only              # Only fix role attributes
   node cli.js --cleanup-only           # Only cleanup duplicate roles
   node cli.js ./src                    # Fix src directory
   node cli.js -l en --dry-run ./dist   # Preview fixes for dist directory in English
@@ -131,6 +149,53 @@ async function main() {
         console.log(chalk.green('\n🎉 Cleanup completed successfully!'));
       }
       return;
+      
+    } else if (options.altOnly) {
+      // Only fix alt attributes
+      console.log(chalk.blue('🖼️ Running alt attribute fixes only...'));
+      const altResults = await fixer.fixEmptyAltAttributes(options.directory);
+      const altFixed = altResults.filter(r => r.status === 'fixed').length;
+      const totalAltIssues = altResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Fixed alt attributes in ${altFixed} files (${totalAltIssues} issues)`));
+      
+      if (options.dryRun) {
+        console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+      } else {
+        console.log(chalk.green('\n🎉 Alt attribute fixes completed successfully!'));
+      }
+      return;
+      
+    } else if (options.langOnly) {
+      // Only fix lang attributes
+      console.log(chalk.blue('📝 Running HTML lang attribute fixes only...'));
+      const langResults = await fixer.fixHtmlLang(options.directory);
+      const langFixed = langResults.filter(r => r.status === 'fixed').length;
+      
+      console.log(chalk.green(`\n✅ Fixed lang attributes in ${langFixed} files`));
+      
+      if (options.dryRun) {
+        console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+      } else {
+        console.log(chalk.green('\n🎉 Lang attribute fixes completed successfully!'));
+      }
+      return;
+      
+    } else if (options.roleOnly) {
+      // Only fix role attributes
+      console.log(chalk.blue('🎭 Running role attribute fixes only...'));
+      const roleResults = await fixer.fixRoleAttributes(options.directory);
+      const roleFixed = roleResults.filter(r => r.status === 'fixed').length;
+      const totalRoleIssues = roleResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Fixed role attributes in ${roleFixed} files (${totalRoleIssues} issues)`));
+      
+      if (options.dryRun) {
+        console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+      } else {
+        console.log(chalk.green('\n🎉 Role attribute fixes completed successfully!'));
+      }
+      return;
     }
 
     // Standard mode - run individual fixes

package/demo/duplicate-roles.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Test Duplicate Roles</title>
 </head>
@@ -7,29 +7,29 @@
     <h1>Test Duplicate Role Attributes</h1>
     
     <!-- Images with duplicate roles -->
-    <img src="logo.png" alt="Logo" role="img" role="img">
-    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img">
+    <img src="logo.png" alt="Logo" role="img" role="img" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img" role="img" role="img" role="img">
     
     <!-- Links with duplicate roles -->
-    <a href="/home" role="link" role="link">Home</a>
-    <a href="/about" role="link" role="link" role="link">About</a>
+    <a href="/home" role="link" role="link" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link" role="link" role="link" role="link">About</a>
     
     <!-- Buttons with duplicate roles -->
-    <button onclick="submit()" role="button" role="button">Submit</button>
+    <button onclick="submit()" role="button" role="button" role="button" role="button" role="button">Submit</button>
     <button type="button" role="button" role="button" role="button">Click Me</button>
     
     <!-- Mixed quotes -->
-    <div onclick="toggle()" role="button" role='button'>Toggle</div>
-    <span onclick="show()" role='button' role="button">Show</span>
+    <div onclick="toggle()" role="button" role='button' role="button" role="button" role="button">Toggle</div>
+    <span onclick="show()" role='button' role="button" role="button" role="button" role="button">Show</span>
     
     <!-- Navigation with duplicates -->
     <nav>
-        <ul class="nav-menu" role="menubar" role="menubar">
-            <li class="nav-item" role="menuitem" role="menuitem">
-                <a href="/products" role="link" role="link">Products</a>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/products" role="link" role="link" role="link" role="link" role="link">Products</a>
             </li>
-            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem">
-                <a href="/services" role="link" role="link" role="link">Services</a>
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/services" role="link" role="link" role="link" role="link" role="link" role="link">Services</a>
             </li>
         </ul>
     </nav>
@@ -37,9 +37,9 @@
     <!-- Complex duplicates -->
     <article>
         <h2>Article with Issues</h2>
-        <img src="article1.jpg" alt="Article Image" role="img" role="img">
+        <img src="article1.jpg" alt="Article Image" role="img" role="img" role="img" role="img" role="img">
         <p>Some content...</p>
-        <a href="/read-more" role="link" role="link" role="link" role="link">Read More</a>
+        <a href="/read-more" role="link" role="link" role="link" role="link" role="link" role="link" role="link">Read More</a>
     </article>
 </body>
 </html>

package/demo/duplicate-roles.html.backup

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Test Duplicate Roles</title>
 </head>
@@ -7,29 +7,29 @@
     <h1>Test Duplicate Role Attributes</h1>
     
     <!-- Images with duplicate roles -->
-    <img src="logo.png" alt="Logo" role="img" role="img">
-    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img">
+    <img src="logo.png" alt="Logo" role="img" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img" role="img" role="img">
     
     <!-- Links with duplicate roles -->
-    <a href="/home" role="link" role="link">Home</a>
-    <a href="/about" role="link" role="link" role="link">About</a>
+    <a href="/home" role="link" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link" role="link" role="link">About</a>
     
     <!-- Buttons with duplicate roles -->
-    <button onclick="submit()" role="button" role="button">Submit</button>
+    <button onclick="submit()" role="button" role="button" role="button" role="button">Submit</button>
     <button type="button" role="button" role="button" role="button">Click Me</button>
     
     <!-- Mixed quotes -->
-    <div onclick="toggle()" role="button" role='button'>Toggle</div>
-    <span onclick="show()" role='button' role="button">Show</span>
+    <div onclick="toggle()" role="button" role='button' role="button" role="button">Toggle</div>
+    <span onclick="show()" role='button' role="button" role="button" role="button">Show</span>
     
     <!-- Navigation with duplicates -->
     <nav>
-        <ul class="nav-menu" role="menubar" role="menubar">
-            <li class="nav-item" role="menuitem" role="menuitem">
-                <a href="/products" role="link" role="link">Products</a>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/products" role="link" role="link" role="link" role="link">Products</a>
             </li>
-            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem">
-                <a href="/services" role="link" role="link" role="link">Services</a>
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/services" role="link" role="link" role="link" role="link" role="link">Services</a>
             </li>
         </ul>
     </nav>
@@ -37,9 +37,9 @@
     <!-- Complex duplicates -->
     <article>
         <h2>Article with Issues</h2>
-        <img src="article1.jpg" alt="Article Image" role="img" role="img">
+        <img src="article1.jpg" alt="Article Image" role="img" role="img" role="img" role="img">
         <p>Some content...</p>
-        <a href="/read-more" role="link" role="link" role="link" role="link">Read More</a>
+        <a href="/read-more" role="link" role="link" role="link" role="link" role="link" role="link">Read More</a>
     </article>
 </body>
 </html>

package/demo/sample.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Demo HTML for Accessibility Testing</title>
 </head>
@@ -7,27 +7,27 @@
     <h1>Sample Website</h1>
     
     <!-- Images without alt or role -->
-    <img src="logo.png">
-    <img src="banner.jpg" alt="">
-    <img src="icon.svg" alt="Home Icon">
+    <img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
+    <img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
     
     <!-- Links without role -->
-    <a href="/home">Home</a>
-    <a href="/about">About Us</a>
+    <a href="/home" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link">About Us</a>
     
     <!-- Buttons without role -->
-    <button onclick="submit()">Submit Form</button>
+    <button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
     <button type="button">Regular Button</button>
     
     <!-- Clickable elements -->
-    <div onclick="navigate()" class="btn">Click Me</div>
-    <span onclick="toggle()">Toggle</span>
+    <div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
+    <span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
     
     <!-- Navigation -->
     <nav>
-        <ul class="nav-menu">
-            <li class="nav-item"><a href="/products">Products</a></li>
-            <li class="nav-item"><a href="/services">Services</a></li>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem"><a href="/products" role="link" role="link" role="link">Products</a></li>
+            <li class="nav-item" role="menuitem"><a href="/services" role="link" role="link" role="link">Services</a></li>
         </ul>
     </nav>
     
@@ -36,7 +36,7 @@
         <article>
             <h2>Article Title</h2>
             <p>Some content here...</p>
-            <img src="article-image.jpg" alt="">
+            <img src="article-image.jpg" alt="Article Title" role="img" role="img" role="img">
         </article>
     </main>
     

package/demo/sample.html.backup

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Demo HTML for Accessibility Testing</title>
 </head>
@@ -7,27 +7,27 @@
     <h1>Sample Website</h1>
     
     <!-- Images without alt or role -->
-    <img src="logo.png">
-    <img src="banner.jpg" alt="">
-    <img src="icon.svg" alt="Home Icon">
+    <img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
+    <img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
     
     <!-- Links without role -->
-    <a href="/home">Home</a>
-    <a href="/about">About Us</a>
+    <a href="/home" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link">About Us</a>
     
     <!-- Buttons without role -->
-    <button onclick="submit()">Submit Form</button>
+    <button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
     <button type="button">Regular Button</button>
     
     <!-- Clickable elements -->
-    <div onclick="navigate()" class="btn">Click Me</div>
-    <span onclick="toggle()">Toggle</span>
+    <div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
+    <span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
     
     <!-- Navigation -->
     <nav>
-        <ul class="nav-menu">
-            <li class="nav-item"><a href="/products">Products</a></li>
-            <li class="nav-item"><a href="/services">Services</a></li>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item"><a href="/products" role="link" role="link" role="link">Products</a></li>
+            <li class="nav-item"><a href="/services" role="link" role="link" role="link">Services</a></li>
         </ul>
     </nav>
     
@@ -36,7 +36,7 @@
         <article>
             <h2>Article Title</h2>
             <p>Some content here...</p>
-            <img src="article-image.jpg" alt="">
+            <img src="article-image.jpg" alt="Article Title" role="img" role="img" role="img">
         </article>
     </main>
     

package/lib/fixer.js

@@ -645,73 +645,105 @@ class AccessibilityFixer {
     
     // Fix all images - add role="img" (only if no role exists)
     fixed = fixed.replace(
-      /<img([^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<img([^>]*>)/gi,
+      (match, fullTag) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🖼️ Added role="img" to image element`));
-        return `<img${attrs} role="img"${end}`;
+        return match.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
       }
     );
     
     // Fix button elements with onclick - add role="button"
     fixed = fixed.replace(
-      /<button([^>]*onclick[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<button([^>]*onclick[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔘 Added role="button" to button with onclick`));
-        return `<button${attrs} role="button"${end}`;
+        return match.replace(/(<button[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix anchor elements - add role="link"
     fixed = fixed.replace(
-      /<a([^>]*href[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<a([^>]*href[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔗 Added role="link" to anchor element`));
-        return `<a${attrs} role="link"${end}`;
+        return match.replace(/(<a[^>]*?)(\s*>)/i, '$1 role="link"$2');
       }
     );
     
     // Fix any element with onclick (except a and button) - add role="button"
     fixed = fixed.replace(
-      /<((?!a|button)[a-zA-Z][a-zA-Z0-9]*)([^>]*onclick[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, tag, attrs, end) => {
+      /<((?!a|button)[a-zA-Z][a-zA-Z0-9]*)([^>]*onclick[^>]*>)/gi,
+      (match, tag) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔘 Added role="button" to ${tag} with onclick`));
-        return `<${tag}${attrs} role="button"${end}`;
+        return match.replace(/(<[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix clickable divs - add role="button"
     fixed = fixed.replace(
-      /<div([^>]*class="[^"]*(?:btn|button|click)[^"]*"[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<div([^>]*class="[^"]*(?:btn|button|click)[^"]*"[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔘 Added role="button" to clickable div`));
-        return `<div${attrs} role="button"${end}`;
+        return match.replace(/(<div[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix focusable elements with tabindex
     fixed = fixed.replace(
-      /<(div|span)([^>]*tabindex\s*=\s*[""']?[0-9-]+[""']?[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, tag, attrs, end) => {
+      /<(div|span)([^>]*tabindex\s*=\s*[""']?[0-9-]+[""']?[^>]*>)/gi,
+      (match, tag) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  ⌨️ Added role="button" to focusable ${tag}`));
-        return `<${tag}${attrs} role="button"${end}`;
+        return match.replace(/(<[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix navigation lists that should be menus
     fixed = fixed.replace(
-      /<ul([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<ul([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  📋 Added role="menubar" to navigation list`));
-        return `<ul${attrs} role="menubar"${end}`;
+        return match.replace(/(<ul[^>]*?)(\s*>)/i, '$1 role="menubar"$2');
       }
     );
     
     // Fix list items in navigation menus
     fixed = fixed.replace(
-      /<li([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<li([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  📋 Added role="menuitem" to navigation list item`));
-        return `<li${attrs} role="menuitem"${end}`;
+        return match.replace(/(<li[^>]*?)(\s*>)/i, '$1 role="menuitem"$2');
       }
     );
     

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "1.1.0",
-  "description": "Automated accessibility fixes for HTML files - Alt attributes, Lang attributes, Role attributes. Smart context-aware alt text generation and comprehensive role attribute management.",
+  "version": "1.3.0",
+  "description": "Automated accessibility fixes for HTML files - Alt attributes, Lang attributes, Role attributes. Smart context-aware alt text generation with individual fix options and comprehensive role attribute management.",
   "main": "index.js",
   "bin": {
     "gbu-a11y": "./cli.js",
@@ -11,9 +11,14 @@
     "start": "node cli.js",
     "fix": "node cli.js",
     "preview": "node cli.js --dry-run",
-    "test": "node example.js",
+    "comprehensive": "node cli.js --comprehensive",
+    "alt-only": "node cli.js --alt-only",
+    "lang-only": "node cli.js --lang-only",
+    "role-only": "node cli.js --role-only",
+    "cleanup-only": "node cli.js --cleanup-only",
+    "test": "node test-package.js",
     "demo": "node cli.js --dry-run demo",
-    "prepublishOnly": "npm run demo"
+    "prepublishOnly": "npm run test"
   },
   "keywords": [
     "accessibility",
@@ -51,7 +56,8 @@
     "PACKAGE_SUMMARY.md"
   ],
   "dependencies": {
-    "chalk": "^4.1.2"
+    "chalk": "^4.1.2",
+    "gbu-accessibility-package": "^1.3.0"
   },
   "engines": {
     "node": ">=12.0.0"
@@ -59,4 +65,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}