gbu-accessibility-package 3.12.0 โ†’ 3.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,713 +1,166 @@
1
1
  # GBU Accessibility Package
2
2
 
3
- ๐Ÿš€ **Automated accessibility fixes for HTML files** - Smart, context-aware accessibility improvements with zero configuration.
3
+ Accessibility checking and reporting toolkit for HTML projects.
4
+
5
+ The package runs in check-only mode. It does not edit or delete source files, and is intended for accessibility review, project validation, and report export.
4
6
 
5
7
  [![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://www.npmjs.com/package/gbu-accessibility-package)
6
8
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
9
  [![Node.js Version](https://img.shields.io/badge/node-%3E%3D12.0.0-brightgreen)](https://nodejs.org/)
8
10
 
9
- ## โœจ Features
10
-
11
- ### ๐ŸŽฏ **Core Accessibility Fixes**
12
- - ๐Ÿ–ผ๏ธ **Smart Alt Text Generation** - Context-aware alt attributes for images
13
- - ๐Ÿท๏ธ **Aria Label Support** - Automatic aria-label matching alt text
14
- - ๐ŸŒ **HTML Lang Attributes** - Automatic language attribute fixes
15
- - ๐ŸŽญ **Role Attributes** - WCAG-compliant role attribute management
16
- - ๐Ÿท๏ธ **Aria Labels** - Automatic aria-label generation from alt text and content
17
- - ๐Ÿ“‹ **Form Labels** - Fix missing labels with intelligent aria-label generation
18
- - ๐Ÿ”˜ **Button Names** - Fix empty buttons and input buttons without names
19
- - ๐Ÿ”— **Link Names** - Fix empty links and detect generic link text
20
- - ๐Ÿ›๏ธ **Landmarks** - Add missing main and navigation landmarks
21
- - ๐Ÿ“‘ **Heading Analysis & Auto-Fix** - Analyze heading structure with optional auto-fix using `--auto-fix-headings`
22
- - ๐ŸŽฏ **Nested Controls Detection** - Detect and fix nested interactive controls
23
- - ๐Ÿ” **Broken Links Detection** - Detect broken external links
24
- - ๐Ÿ“ **404 Resources Detection** - Detect missing local resources (images, CSS, JS, etc.)
25
- - ๐Ÿท๏ธ **Google Tag Manager Check** - Validate GTM installation (script + noscript)
26
- - ๐Ÿท๏ธ **Meta Tags Validation** - Check for typos and syntax errors in meta tags and Open Graph Protocol
27
- - โœ๏ธ **Meta Tags Auto-Fix** - Automatically fix typos in meta property names and content values
28
- - ๐Ÿ—‚๏ธ **Unused Files Detection** - Find files not referenced anywhere in the project
29
- - โ˜ ๏ธ **Dead Code Analysis** - Detect unused CSS rules and JavaScript functions
30
- - ๐Ÿ“ **File Size Analysis** - Check file sizes and suggest optimizations
31
- - ๐Ÿงน **Duplicate Cleanup** - Remove duplicate role attributes
32
-
33
- ### ๐Ÿš€ **Enhanced Alt Attribute Features (Integrated!)**
34
- - ๐Ÿ” **Comprehensive Analysis** - Image type classification and quality checking built-in
35
- - ๐ŸŽจ **Diverse Alt Generation** - Multiple strategies for creative alt text integrated in core
36
- - ๐ŸŒ **Multi-language Support** - Japanese, English, Vietnamese vocabulary built-in
37
- - ๐ŸŽญ **Creativity Levels** - Conservative, Balanced, Creative modes
38
- - ๐Ÿง  **Context Awareness** - Brand, emotional, and technical context integration
39
- - ๐Ÿ“Š **Data Visualization** - Specialized descriptions for charts and graphs
40
- - ๐Ÿงน **Clean Architecture** - All enhanced features integrated in a single file
41
-
42
- ### ๐Ÿ› ๏ธ **Utility Features**
43
- - ๐Ÿ“ **Batch Processing** - Process entire directories recursively
44
- - ๐Ÿ’พ **Optional Backups** - Create backup files when needed with --backup flag
45
- - ๐Ÿ” **Dry Run Mode** - Preview changes before applying
46
- - ๐Ÿ“Š **Detailed Reports** - Comprehensive fix summaries
47
- - โšก **Individual Fix Modes** - Target specific accessibility issues
48
-
49
- ## ๐Ÿš€ Quick Start
50
-
51
- ### Installation
52
-
53
- ```bash
54
- # Global installation (recommended)
55
- npm install -g gbu-accessibility-package
11
+ ## What It Does
56
12
 
57
- # Local installation
58
- npm install gbu-accessibility-package
59
- ```
13
+ - Checks HTML `lang`, `alt`, `role`, `aria-label`, forms, buttons, links, landmarks, nested controls, headings, and description lists
14
+ - Checks broken external links and missing local resources
15
+ - Checks meta tags, Google Tag Manager installation, dead code, unused files, and large files
16
+ - Exports unused file lists and comprehensive Excel reports
17
+ - Supports enhanced alt-text analysis with stricter review rules and richer suggestions
60
18
 
61
- ### Uninstall and Reinstall
19
+ ## Installation
62
20
 
63
21
  ```bash
64
- # Uninstall global package
65
- npm uninstall -g gbu-accessibility-package
66
-
67
- # Uninstall local package
68
- npm uninstall gbu-accessibility-package
69
-
70
- # Clear npm cache (recommended when having issues)
71
- npm cache clean --force
72
-
73
- # Reinstall latest version
74
- npm install -g gbu-accessibility-package@latest
75
-
76
- # Check installed version
77
- npm list -g gbu-accessibility-package
78
- gbu-a11y --version
79
-
80
- # Install specific version
81
- npm install -g gbu-accessibility-package@3.2.1
22
+ npm install -g gbu-accessibility-package
82
23
  ```
83
24
 
84
- ### Installation Troubleshooting
25
+ Or install locally:
85
26
 
86
27
  ```bash
87
- # If permission errors (macOS/Linux)
88
- sudo npm install -g gbu-accessibility-package
89
-
90
- # If cache issues
91
- npm cache clean --force
92
- npm install -g gbu-accessibility-package --force
93
-
94
- # Verify installation
95
- which gbu-a11y
96
- gbu-a11y --help
97
-
98
- # Update to latest version
99
- npm update -g gbu-accessibility-package
28
+ npm install gbu-accessibility-package
100
29
  ```
101
30
 
102
- ### Basic Usage
31
+ ## Quick Start
103
32
 
104
33
  ```bash
105
- # Comprehensive fixes (default mode)
34
+ # Default comprehensive check
106
35
  gbu-a11y
107
36
 
108
- # Preview changes (dry run)
109
- gbu-a11y --dry-run
110
-
111
- # Fix specific directory
37
+ # Check a specific directory
112
38
  gbu-a11y ./src
113
39
 
114
- # Fix specific file
115
- gbu-a11y index.html
116
- ```
117
-
118
- ### Enhanced Alt Attribute Mode
119
-
120
- ```bash
121
- # Enable enhanced alt attribute analysis
122
- gbu-a11y --enhanced-alt
123
-
124
- # Creative alt text generation with emotions
125
- gbu-a11y --enhanced-alt --alt-creativity creative --include-emotions
40
+ # Check only alt text issues
41
+ gbu-a11y --alt-only ./src
126
42
 
127
- # Strict quality checking
128
- gbu-a11y --enhanced-alt --strict-alt
43
+ # Check broken links and missing resources
44
+ gbu-a11y --links-check ./public
129
45
 
130
- # English with creative mode
131
- gbu-a11y -l en --enhanced-alt --alt-creativity creative
46
+ # Export a full Excel report
47
+ gbu-a11y --full-report -o reports/accessibility-report.xlsx
132
48
  ```
133
49
 
134
- ## ๐Ÿ“– Detailed Usage
135
-
136
- ### Command Line Options
50
+ ## CLI
137
51
 
138
52
  ```bash
139
- gbu-a11y [options] [directory/file]
140
-
141
- Basic Options:
142
- -d, --directory <path> Target directory (default: current directory)
143
- -l, --language <lang> Language for lang attribute (default: ja)
144
- --backup Create backup files
145
- --no-backup Don't create backup files (default)
146
- --dry-run Preview changes without applying
147
-
148
- Fix Modes:
149
- --comprehensive, --all Run comprehensive fixes (default)
150
- --alt-only Fix alt attributes + cleanup
151
- --lang-only Fix HTML lang attributes + cleanup
152
- --role-only Fix role attributes + cleanup
153
- --aria-label-only Fix aria-label attributes + cleanup
154
- --forms-only Fix form labels + cleanup
155
- --buttons-only Fix button names + cleanup
156
- --links-only Fix link names + cleanup
157
- --landmarks-only Fix landmarks + cleanup
158
- --headings-only Analyze heading structure with optional auto-fix
159
- --auto-fix-headings Enable automatic heading structure fixes
160
- --links-check Check for broken links and 404 resources (comprehensive, no auto-fix)
161
- --broken-links Check for broken external links only (no auto-fix)
162
- --404-resources Check for missing local resources only (no auto-fix)
163
- --gtm-check Check Google Tag Manager installation (no auto-fix)
164
- --check-meta, --meta-check Check meta tags for typos and syntax errors (no auto-fix)
165
- --fix-meta, --meta-fix Auto-fix meta tag typos and syntax errors
166
- --full-report Generate comprehensive Excel report (all checks)
167
- -o, --output <file> Output path for Excel report (use with --full-report)
168
- --unused-files Check for unused files in project
169
- --dead-code Check for dead code in CSS and JavaScript
170
- --file-size, --size-check Check file sizes and suggest optimizations
171
- --cleanup-only Only cleanup duplicate role attributes
172
-
173
- Enhanced Alt Options:
174
- --enhanced-alt Use enhanced alt attribute analysis and generation
175
- --alt-creativity <mode> Alt text creativity: conservative, balanced, creative
176
- --include-emotions Include emotional descriptors in alt text
177
- --strict-alt Enable strict alt attribute quality checking
178
-
179
- Help:
180
- -h, --help Show help message
181
- -v, --version Show version number
182
- ```
183
-
184
- ### Examples
53
+ gbu-a11y [options] [directory]
54
+ ```
55
+
56
+ Core options:
57
+
58
+ - `-d, --directory <path>`: target directory, defaults to current directory
59
+ - `-l, --language <lang>`: language context, defaults to `ja`
60
+ - `--dry-run`: legacy alias; check-only mode is always on
61
+ - `-h, --help`: show help
62
+ - `-v, --version`: show version
63
+
64
+ Check modes:
65
+
66
+ - `--comprehensive`, `--all`: run the default multi-area review for accessibility structure, labels, links/resources, and project-level quality signals in one pass
67
+ - `--alt-only`: review image alt text quality, including missing `alt`, empty `alt` on meaningful images, overly generic descriptions, and enhanced alt analysis when enabled
68
+ - `--lang-only`: review missing or incorrect root HTML `lang` usage so you can catch pages that do not declare the expected document language
69
+ - `--role-only`: review suspicious or missing ARIA role usage, including cases where elements may need better semantic roles or have role patterns that do not match their behavior
70
+ - `--aria-label-only`: review elements that depend on `aria-label` for accessible naming, such as images, links, or controls that do not expose enough text on their own
71
+ - `--forms-only`: review form accessibility issues such as inputs without clear labels, weak accessible names, or fields that rely too heavily on placeholder text
72
+ - `--nested-only`: review nested interactive controls, for example a `button` inside a link, a link inside a button, or clickable controls placed inside other focusable widgets; these patterns often confuse keyboard users and screen readers because multiple interactive targets overlap
73
+ - `--buttons-only`: review buttons and button-like controls for missing accessible names, empty text, or controls that appear clickable but do not expose enough meaning
74
+ - `--links-only`: review accessible link naming issues such as empty links, image-only links without usable text alternatives, or vague labels like โ€œclick hereโ€ without context
75
+ - `--landmarks-only`: review page landmark structure such as missing `main`, weak navigation structure, or layouts that make region-based navigation harder for assistive technology users
76
+ - `--headings-only`: review heading hierarchy and document outline problems, such as skipped heading levels, duplicate headings in the same context, multiple top-level headings, or empty heading text
77
+ - `--dl-only`: review description list markup problems, such as invalid `dl` structure, missing `dt`/`dd` pairing, or malformed content inside description lists
78
+ - `--links-check`: run both external link validation and local resource existence checks so you can catch broken URLs and missing files together
79
+ - `--broken-links`: check external HTTP/HTTPS links only and report unreachable URLs, 404/5xx responses, redirects that fail, and similar outbound link problems
80
+ - `--404-resources`: check local resources only, such as missing images, scripts, stylesheets, and other referenced files that do not exist at the expected path
81
+ - `--gtm-check`: review Google Tag Manager installation patterns, including whether the expected script and `noscript` pieces are present and placed correctly
82
+ - `--check-meta`: review meta tags and Open Graph metadata for typos, malformed attributes, suspicious property names, and other metadata quality issues
83
+ - `--unused-files`: scan the project for files that do not appear to be referenced anywhere, helping you spot dead assets or stale source files for manual review
84
+ - `--unused-files-list`: export the unused-file findings to a text file so your team can review and clean them up manually outside the tool
85
+ - `--dead-code`: review CSS and JavaScript for selectors, rules, or functions that appear unused based on static project references
86
+ - `--file-size`: review large files and oversized assets to highlight optimization opportunities and possible frontend performance risks
87
+ - `--full-report`: generate the Excel report with aggregated findings across the supported check areas for sharing, triage, or audit tracking
88
+ - `-o, --output <file>`: custom output path for `--full-report`
89
+ - `--list-file <file>`: custom output path/name for `--unused-files-list`
90
+
91
+ Enhanced alt analysis:
92
+
93
+ - `--enhanced-alt`
94
+ - `--alt-creativity <mode>`: `conservative`, `balanced`, `creative`
95
+ - `--include-emotions`
96
+ - `--strict-alt`
97
+
98
+ ## Examples
185
99
 
186
100
  ```bash
187
- # Basic comprehensive fixes
101
+ # Comprehensive review
188
102
  gbu-a11y
189
103
 
190
- # Preview all changes
191
- gbu-a11y --dry-run
192
-
193
- # Fix with English language
194
- gbu-a11y -l en ./public
195
-
196
- # Individual fix types
197
- gbu-a11y --alt-only # Fix alt attributes + cleanup
198
- gbu-a11y --aria-label-only # Fix aria-label attributes + cleanup
199
- gbu-a11y --forms-only # Fix form labels + cleanup
200
- gbu-a11y --buttons-only # Fix button names + cleanup
201
- gbu-a11y --headings-only # Analyze heading structure
202
- gbu-a11y --headings-only --auto-fix-headings # Auto-fix heading structure
203
- gbu-a11y --links-check # Check broken links and missing resources + cleanup
204
- gbu-a11y --broken-links # Check broken external links only + cleanup
205
- gbu-a11y --404-resources # Check missing local resources only + cleanup
206
- gbu-a11y --gtm-check # Check Google Tag Manager installation
207
- gbu-a11y --check-meta # Check meta tags for typos and syntax errors
208
- gbu-a11y --fix-meta # Auto-fix meta tag typos
209
- gbu-a11y --fix-meta --dry-run # Preview meta tag fixes
210
- gbu-a11y --full-report # Generate comprehensive Excel report
211
- gbu-a11y --full-report -o report.xlsx # Custom output path
212
- gbu-a11y --unused-files # Check for unused files in project
213
- gbu-a11y --dead-code # Check for dead CSS and JavaScript code
214
- gbu-a11y --file-size # Check file sizes and suggest optimizations
215
-
216
- # Enhanced alt attribute features
217
- gbu-a11y --enhanced-alt # Basic enhanced mode
218
- gbu-a11y --enhanced-alt --alt-creativity creative # Creative descriptions
219
- gbu-a11y --enhanced-alt --include-emotions # Include emotional context
220
- gbu-a11y --enhanced-alt --strict-alt # Strict quality checking
221
- gbu-a11y -l en --enhanced-alt --alt-creativity creative # English creative mode
222
-
223
- # Combine with other options
224
- gbu-a11y --enhanced-alt --backup ./src # Enhanced mode with backups
225
- gbu-a11y --enhanced-alt --dry-run # Preview enhanced fixes
226
- ```
227
-
228
- ## ๐ŸŽจ Enhanced Alt Attribute Features
229
-
230
- ### Creativity Levels
231
-
232
- #### Conservative
233
- - Simple, factual descriptions
234
- - Focus on basic functionality
235
- - Minimal vocabulary variation
236
-
237
- **Example**: `alt="Chart"`, `alt="Logo"`
238
-
239
- #### Balanced (Default)
240
- - Context-aware descriptions
241
- - Moderate creativity
242
- - Balance between simple and detailed
243
-
244
- **Example**: `alt="Sales performance chart"`, `alt="Company logo"`
104
+ # Forms only
105
+ gbu-a11y --forms-only ./pages
245
106
 
246
- #### Creative
247
- - Rich, detailed descriptions
248
- - Emotional context integration
249
- - High brand and context awareness
107
+ # Broken links only
108
+ gbu-a11y --broken-links ./dist
250
109
 
251
- **Example**: `alt="Dynamic sales performance chart showing impressive 25% quarterly growth"`, `alt="Innovative technology company logo representing digital transformation"`
110
+ # Meta tags only
111
+ gbu-a11y --check-meta ./site
252
112
 
253
- ### Image Type Classification
113
+ # Unused file list export
114
+ gbu-a11y --unused-files-list --list-file reports/unused-files.txt ./project
254
115
 
255
- - **Decorative Images**: Automatically detected and marked with `alt=""`
256
- - **Functional Icons**: Described by their action (e.g., "Open chat", "Search")
257
- - **Data Visualizations**: Include chart type, trends, and key data points
258
- - **Complex Images**: Short alt + recommendation for detailed description
259
- - **Logos**: Include brand name and "logo" keyword
260
- - **Content Images**: Context-aware descriptions based on surrounding content
261
-
262
- ### Quality Checks
263
-
264
- - โŒ **Error Level**: Missing alt, empty alt for content, generic text
265
- - โš ๏ธ **Warning Level**: Too long/short, redundant words, filename in alt
266
- - โ„น๏ธ **Info Level**: Optimization suggestions, consistency checks
267
-
268
- ## ๐Ÿ“‹ Programmatic Usage
269
-
270
- ### Basic Usage
271
-
272
- ```javascript
273
- const { AccessibilityFixer } = require('gbu-accessibility-package');
274
-
275
- const fixer = new AccessibilityFixer({
276
- language: 'ja',
277
- backupFiles: true,
278
- dryRun: false
279
- });
280
-
281
- // Fix all accessibility issues
282
- fixer.fixAllAccessibilityIssues('./src').then(results => {
283
- console.log('Accessibility fixes completed:', results);
284
- });
285
-
286
- // Fix specific issues
287
- await fixer.fixEmptyAltAttributes('./src');
288
- await fixer.fixFormLabels('./src');
289
- await fixer.fixButtonNames('./src');
116
+ # Enhanced alt review
117
+ gbu-a11y --alt-only --enhanced-alt --strict-alt ./src
290
118
  ```
291
119
 
292
- ### Enhanced Alt Attribute Mode (Integrated)
120
+ ## Programmatic Usage
293
121
 
294
- ```javascript
295
- const { AccessibilityFixer } = require('gbu-accessibility-package');
122
+ ```js
123
+ const { AccessibilityChecker } = require('gbu-accessibility-package');
296
124
 
297
- // Use AccessibilityFixer with enhanced mode (integrated)
298
- const fixer = new AccessibilityFixer({
125
+ const checker = new AccessibilityChecker({
299
126
  language: 'en',
300
127
  enhancedAltMode: true,
301
- altCreativity: 'creative',
302
- includeEmotions: true,
303
128
  strictAltChecking: true
304
129
  });
305
130
 
306
- await fixer.fixEmptyAltAttributes('./src');
307
-
308
- // All enhanced features are now integrated in AccessibilityFixer
309
- // No need to import separate classes
310
- const results = await fixer.fixAllAccessibilityIssues('./src');
311
- console.log('Accessibility fixes completed with enhanced features:', results);
312
-
313
- // New: Check for unused files
314
- await fixer.checkUnusedFiles('./src');
131
+ async function main() {
132
+ await checker.checkAltText('./src');
133
+ await checker.checkBrokenLinks('./src');
134
+ await checker.generateFullReport('./src', './reports/accessibility-report.xlsx');
135
+ }
315
136
 
316
- // New: Check for dead code
317
- await fixer.checkDeadCode('./src');
318
-
319
- // New: Check file sizes
320
- await fixer.checkFileSizes('./src');
137
+ main().catch(console.error);
321
138
  ```
322
139
 
323
- ## ๐ŸŽฏ What Gets Fixed
324
-
325
- ### Alt Attributes (Enhanced Mode)
326
- - **Missing alt attributes** โ†’ Context-aware alt text generation
327
- - **Empty alt attributes** โ†’ Smart content-based descriptions
328
- - **Generic alt text** โ†’ Specific, meaningful descriptions
329
- - **Too long alt text** โ†’ Optimized length with key information
330
- - **Redundant words** โ†’ Clean, concise descriptions
331
- - **Data visualizations** โ†’ Chart type + trends + key data
332
-
333
- ### Form Accessibility
334
- - **Missing form labels** โ†’ Intelligent aria-label generation
335
- - **Unlabeled inputs** โ†’ Context-based label suggestions
336
- - **Form structure** โ†’ Proper label associations
337
-
338
- ### Interactive Elements
339
- - **Empty buttons** โ†’ Action-based button names
340
- - **Generic link text** โ†’ Descriptive link purposes
341
- - **Missing button names** โ†’ Function-based descriptions
342
-
343
- ### Document Structure
344
- - **Missing lang attributes** โ†’ Automatic language detection
345
- - **Missing landmarks** โ†’ Main and navigation landmarks
346
- - **Heading structure** โ†’ Analysis and auto-fix with `--auto-fix-headings`
347
- - Fix multiple h1 elements
348
- - Fix heading level skipping (h2 โ†’ h4)
349
- - Add text to empty headings
350
- - Fix duplicate headings
351
- - **Nested interactive controls** โ†’ Detect and fix nested controls
352
- - **Role attributes** โ†’ WCAG-compliant role assignments
353
-
354
- ### Link Validation
355
- - **Broken External Links** โ†’ Detect HTTP 404, 500, timeout errors on external URLs
356
- - Invalid URLs โ†’ Detect malformed URL formats
357
- - Slow links โ†’ Warn about timeouts and slow responses
358
- - Network errors โ†’ Connection failures and unreachable hosts
359
- - **404 Missing Resources** โ†’ Check for missing local files
360
- - Images (img src), CSS files (link href), JavaScript files (script src)
361
- - Video/audio sources, other local assets
362
- - Relative and absolute path checking
363
-
364
- ### Project Optimization
365
- - **Unused Files** โ†’ Detect files not referenced anywhere in the project
366
- - Images, CSS, SCSS/Sass, JavaScript, JSX, TypeScript, Vue, PHP, JSON, Markdown, XML, PDF, Video, Audio files
367
- - Local file references analysis
368
- - Heuristic detection with manual review recommendations
369
- - **Dead Code Analysis** โ†’ Find unused CSS rules and JavaScript functions
370
- - CSS selectors not used in HTML
371
- - JavaScript functions never called
372
- - Variables declared but never used
373
- - Smart skipping of dynamic patterns
374
- - **Google Tag Manager Check** โ†’ Validate GTM installation
375
- - Detect GTM script in `<head>` section
376
- - Verify noscript fallback in `<body>` section
377
- - Check container ID consistency
378
- - Validate proper positioning of both snippets
379
- - Reports: complete installation, missing components, position issues
380
- - **Meta Tags Validation** โ†’ Check typos and syntax errors in meta tags
381
- - Detect property name typos (og:titel โ†’ og:title, discription โ†’ description)
382
- - Detect content value typos (websit โ†’ website, ja_jp โ†’ ja_JP)
383
- - Check syntax errors (missing content, empty values)
384
- - Support Open Graph Protocol and Twitter Card
385
- - 40+ common typo patterns in dictionary
386
- - **Meta Tags Auto-Fix** โ†’ Automatically fix meta tag errors
387
- - Fix property name typos in one click
388
- - Fix content value typos
389
- - Handle multiple errors on same tag
390
- - Dry-run mode for preview
391
- - Backup support for safety
392
- - **File Size Analysis** โ†’ Check file sizes and suggest optimizations
393
- - Detect large files exceeding recommended thresholds
394
- - Type-specific optimization suggestions (images, CSS, JS, etc.)
395
- - File size breakdown by type
396
- - Top 10 largest files reporting
397
-
398
- ## ๐Ÿท๏ธ Google Tag Manager Validation
399
-
400
- The `--gtm-check` feature validates proper Google Tag Manager installation across your project.
401
-
402
- ### What It Checks
403
-
404
- 1. **Script in `<head>`**: Verifies GTM script is present before `</head>` closing tag
405
- 2. **Noscript in `<body>`**: Confirms noscript fallback is immediately after `<body>` opening tag
406
- 3. **Container ID**: Ensures both snippets use the same GTM container ID (format: GTM-XXXXXX)
407
- 4. **Position Validation**: Checks optimal placement of both code snippets
408
-
409
- ### Usage
140
+ `AccessibilityFixer` is still exported for compatibility, but it is now locked to the same check-only behavior and will not modify source files.
410
141
 
411
- ```bash
412
- # Check GTM installation in entire project
413
- gbu-a11y --gtm-check
142
+ ## Output Behavior
414
143
 
415
- # Check specific directory
416
- gbu-a11y --gtm-check ./public
144
+ - Source files stay unchanged
145
+ - `--unused-files-list` writes a report file only
146
+ - `--full-report` writes an Excel report only
147
+ - Findings are printed to the console during analysis
417
148
 
418
- # Alternative commands
419
- gbu-a11y --check-gtm
420
- gbu-a11y --google-tag-manager
421
- ```
149
+ ## Publish Checklist
422
150
 
423
- ### Example Output
424
-
425
- ```
426
- ๐Ÿท๏ธ ฤang kiแปƒm tra cร i ฤ‘แบทt Google Tag Manager (GTM)...
427
-
428
- ๐Ÿ“ public/index.html:
429
- โœ… GTM Container ID: GTM-ABC1234
430
- โœ… Script trong head: ฤรฃ ฤ‘แบทt ฤ‘รบng vแป‹ trรญ trฦฐแป›c </head>
431
- โœ… Noscript trong body: ฤรฃ ฤ‘แบทt ฤ‘รบng vแป‹ trรญ sau <body>
432
-
433
- ๐Ÿ“ public/about.html:
434
- โœ… GTM Container ID: GTM-ABC1234
435
- โœ… Script trong head: ฤรฃ ฤ‘แบทt ฤ‘รบng vแป‹ trรญ trฦฐแป›c </head>
436
- โŒ Noscript trong body: Thiแบฟu sau thแบป <body>
437
- โŒ Thiแบฟu GTM Noscript: Tรฌm thแบฅy GTM script nhฦฐng thiแบฟu noscript dแปฑ phรฒng trong <body>
438
- ๐Ÿ’ก Thรชm ฤ‘oแบกn mรฃ GTM noscript ngay sau thแบป mแปŸ <body>
439
-
440
- ๐Ÿ“Š Tรณm tแบฏt: ฤรฃ phรขn tรญch 2 file
441
- โœ… File cรณ GTM: 2
442
- โš ๏ธ File cรณ vแบฅn ฤ‘แป vแป GTM: 1
443
- ๐Ÿ’ก GTM cแบงn cรณ cแบฃ <script> trong <head> vร  <noscript> sau <body>
444
- ```
445
-
446
- ### GTM Installation Requirements
447
-
448
- For proper GTM installation, each page should have:
449
-
450
- 1. **Script snippet in `<head>`**:
451
- ```html
452
- <head>
453
- <!-- Google Tag Manager -->
454
- <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
455
- new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
456
- j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
457
- 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
458
- })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
459
- <!-- End Google Tag Manager -->
460
- </head>
461
- ```
462
-
463
- 2. **Noscript snippet immediately after `<body>`**:
464
- ```html
465
- <body>
466
- <!-- Google Tag Manager (noscript) -->
467
- <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
468
- height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
469
- <!-- End Google Tag Manager (noscript) -->
470
-
471
- <!-- Your page content -->
472
- </body>
473
- ```
474
-
475
- ## ๐Ÿท๏ธ Meta Tags Validation & Auto-Fix
476
-
477
- The `--check-meta` and `--fix-meta` features help you maintain correct meta tags and Open Graph Protocol implementation.
478
-
479
- ### What It Checks
480
-
481
- 1. **Property Name Typos**: Detects common misspellings in meta tag properties
482
- - `og:titel` โ†’ `og:title`
483
- - `og:descripion` โ†’ `og:description`
484
- - `og:sitename` โ†’ `og:site_name`
485
- - `discription` โ†’ `description`
486
- - And 40+ more common typos
487
-
488
- 2. **Content Value Typos**: Fixes incorrect values
489
- - `websit` โ†’ `website` (og:type)
490
- - `ja_jp` โ†’ `ja_JP` (og:locale)
491
- - `summary_larg_image` โ†’ `summary_large_image` (twitter:card)
492
-
493
- 3. **Syntax Errors**: Identifies structural issues
494
- - Missing content attributes
495
- - Empty content values
496
- - Mixed quote styles
497
-
498
- ### Usage
151
+ Before publishing:
499
152
 
500
153
  ```bash
501
- # Check for meta tag errors
502
- gbu-a11y --check-meta
503
-
504
- # Check specific directory
505
- gbu-a11y --check-meta ./public
506
-
507
- # Auto-fix errors
508
- gbu-a11y --fix-meta
509
-
510
- # Preview fixes without applying
511
- gbu-a11y --fix-meta --dry-run
512
-
513
- # Fix with backup
514
- gbu-a11y --fix-meta --backup
515
-
516
- # Alternative commands
517
- gbu-a11y --meta-check
518
- gbu-a11y --meta-fix
519
- ```
520
-
521
- ### Example Output
522
-
523
- **Check Mode (`--check-meta`)**:
524
- ```
525
- ๐Ÿ” Checking meta tags for typos and syntax errors...
526
-
527
- โŒ public/index.html
528
- 1. Lแป—i chรญnh tแบฃ property: "og:titel" โ†’ "og:title"
529
- 2. Lแป—i chรญnh tแบฃ property: "og:descripion" โ†’ "og:description"
530
- 3. Lแป—i giรก trแป‹ og:type: "websit" โ†’ "website"
531
- 4. Lแป—i chรญnh tแบฃ property: "twitter:car" โ†’ "twitter:card"
532
-
533
- โœ… public/about.html - No errors
534
-
535
- ๐Ÿ“Š Summary:
536
- Total files checked: 2
537
- Files with errors: 1
538
- Total errors found: 4
539
- Files OK: 1
540
-
541
- ๐Ÿ’ก Sแปญ dแปฅng --meta-fix ฤ‘แปƒ tแปฑ ฤ‘แป™ng sแปญa cรกc lแป—i nร y
542
- ```
543
-
544
- **Fix Mode (`--fix-meta`)**:
545
- ```
546
- ๐Ÿ”ง Fixing meta tag typos and syntax errors...
547
-
548
- ๐Ÿ”ง Fixing: public/index.html
549
- โœ“ Fixed property: og:titel โ†’ og:title
550
- โœ“ Fixed property: og:descripion โ†’ og:description
551
- โœ“ Fixed og:type value: websit โ†’ website
552
- โœ“ Fixed property: twitter:car โ†’ twitter:card
553
- ๐Ÿ’พ Saved 4 fix(es) to public/index.html
554
-
555
- โœ… public/about.html - No errors to fix
556
-
557
- ๐Ÿ“Š Summary:
558
- Total files checked: 2
559
- Files fixed: 1
560
- Total fixes applied: 4
561
- ```
562
-
563
- ### Supported Typo Patterns
564
-
565
- **Open Graph Properties**:
566
- - `og:titel`, `og:tittle`, `og:tilte` โ†’ `og:title`
567
- - `og:descripion`, `og:discription`, `og:desciption` โ†’ `og:description`
568
- - `og:imge`, `og:iamge` โ†’ `og:image`
569
- - `og:typ`, `og:tipe` โ†’ `og:type`
570
- - `og:sitename`, `og:sit_name` โ†’ `og:site_name`
571
- - `og:local` โ†’ `og:locale`
572
-
573
- **Twitter Card Properties**:
574
- - `twitter:car` โ†’ `twitter:card`
575
- - `twitter:titel`, `twitter:tittle` โ†’ `twitter:title`
576
- - `twitter:descripion`, `twitter:discription` โ†’ `twitter:description`
577
- - `twitter:imge` โ†’ `twitter:image`
578
- - `twitter:creater` โ†’ `twitter:creator`
579
-
580
- **Meta Tag Properties**:
581
- - `discription`, `descripion`, `desciption` โ†’ `description`
582
- - `viewpor`, `veiwport` โ†’ `viewport`
583
- - `keyword` โ†’ `keywords`
584
- - `auther`, `autor` โ†’ `author`
585
-
586
- **Content Values**:
587
- - `websit`, `web-site`, `artical`, `aticle` (og:type)
588
- - `ja_jp` โ†’ `ja_JP`, `en_us` โ†’ `en_US`, `vi_vn` โ†’ `vi_VN` (og:locale)
589
- - `summary_larg_image`, `summay` (twitter:card)
590
-
591
- <!-- Your page content -->
592
- </body>
593
- ```
594
-
595
- ### Common Issues Detected
596
-
597
- - โŒ **Missing Script**: GTM script not found in `<head>`
598
- - โŒ **Missing Noscript**: Noscript fallback not found after `<body>`
599
- - โš ๏ธ **Wrong Position**: Script or noscript not in optimal position
600
- - โŒ **ID Mismatch**: Different container IDs between script and noscript
601
- - โš ๏ธ **Incomplete Installation**: Only one of the two required snippets present
602
-
603
- ## ๐Ÿ”ง Package Management
604
-
605
- ### Check package information
606
- ```bash
607
- # Check current version
608
- gbu-a11y --version
609
- npm list -g gbu-accessibility-package
610
-
611
- # View package info
612
- npm info gbu-accessibility-package
613
-
614
- # Verify installation
615
- which gbu-a11y
616
- npm list -g | grep gbu-accessibility-package
617
- ```
618
-
619
- ### Update package
620
- ```bash
621
- # Check for new versions
622
- npm outdated -g gbu-accessibility-package
623
-
624
- # Update to latest version
625
- npm update -g gbu-accessibility-package
626
-
627
- # Or reinstall latest version
628
- npm uninstall -g gbu-accessibility-package
629
- npm install -g gbu-accessibility-package@latest
630
- ```
631
-
632
- ### Cache management
633
- ```bash
634
- # Verify cache
635
- npm cache verify
636
-
637
- # Clean cache (when having issues)
638
- npm cache clean --force
639
-
640
- # View cache location
641
- npm config get cache
642
- ```
643
-
644
- ## ๐Ÿงช Testing and Demo
645
-
646
- ```bash
647
- # Test the package
648
154
  npm test
649
-
650
- # Demo basic features
651
- npm run demo
652
-
653
- # Demo enhanced alt features
654
- npm run demo-enhanced
655
-
656
- # Demo creative alt generation
657
- npm run demo-creative
658
-
659
- # Test enhanced alt features
660
- npm run test-enhanced-alt
155
+ npm pack
661
156
  ```
662
157
 
663
- ## ๐Ÿ“Š Performance
664
-
665
- - **Basic Mode**: Fast processing, suitable for large projects
666
- - **Enhanced Mode**: ~20-30% slower but 85-90% improvement in alt text quality
667
- - **Memory Usage**: +15-20% for enhanced vocabulary and analysis
668
- - **Accuracy**: 95%+ detection of accessibility issues
669
-
670
- ## ๐ŸŒ Language Support
671
-
672
- - **Japanese (ja)**: Default language with rich vocabulary
673
- - **English (en)**: Comprehensive English support
674
- - **Vietnamese (vi)**: Vietnamese language support
675
-
676
- Enhanced alt features include language-specific vocabulary and grammar rules for natural, contextually appropriate descriptions.
677
-
678
- ## ๐Ÿ“š Documentation
679
-
680
- - [Enhanced Alt Features Guide](./ENHANCED_ALT_FEATURES.md) - Detailed documentation for enhanced alt attribute features
681
- - [Quick Start Guide](./QUICK_START.md) - Get started quickly
682
- - [Package Summary](./PACKAGE_SUMMARY.md) - Overview of all features
683
- - [Changelog](./CHANGELOG.md) - Version history and updates
684
-
685
- ## ๐Ÿค Contributing
686
-
687
- Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
688
-
689
- ### Development Setup
690
-
691
- ```bash
692
- git clone https://github.com/example/gbu-accessibility-tool.git
693
- cd gbu-accessibility-tool/accessibility-package
694
- npm install
695
- npm test
696
- ```
697
-
698
- ## ๐Ÿ“„ License
699
-
700
- This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
701
-
702
- ## ๐Ÿ™ Acknowledgments
703
-
704
- - Built with accessibility best practices in mind
705
- - Follows WCAG guidelines
706
- - Inspired by the need for automated accessibility improvements
707
- - Community feedback and contributions
158
+ Then verify:
708
159
 
709
- ---
160
+ - `gbu-a11y --help`
161
+ - `gbu-a11y`
162
+ - `gbu-a11y --full-report`
710
163
 
711
- **Made with โค๏ธ by the GBU Team**
164
+ ## License
712
165
 
713
- For more information, visit our [GitHub repository](https://github.com/example/gbu-accessibility-tool).
166
+ MIT