gbu-accessibility-package 3.1.3 โ 3.2.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/ENHANCED_ALT_FEATURES.md +230 -0
- package/README-vi.md +195 -583
- package/README.md +179 -511
- package/cli.js +45 -2
- package/demo/enhanced-alt-test.html +150 -0
- package/index.js +2 -6
- package/lib/enhanced-alt-checker.js +632 -0
- package/lib/enhanced-alt-generator.js +741 -0
- package/lib/fixer.js +83 -9
- package/package.json +5 -1
- package/demo/advanced-test.html.backup +0 -44
- package/demo/backup-test.html +0 -18
- package/demo/backup-test2.html +0 -13
- package/demo/backup-test3.html +0 -12
- package/demo/comprehensive-test.html.backup +0 -21
- package/demo/no-backup-test.html +0 -12
- package/demo/no-backup-test.html.backup +0 -12
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
## โจ Features
|
|
10
10
|
|
|
11
|
+
### ๐ฏ **Core Accessibility Fixes**
|
|
11
12
|
- ๐ผ๏ธ **Smart Alt Text Generation** - Context-aware alt attributes for images
|
|
12
13
|
- ๐ท๏ธ **Aria Label Support** - Automatic aria-label matching alt text
|
|
13
14
|
- ๐ **HTML Lang Attributes** - Automatic language attribute fixes
|
|
@@ -18,10 +19,21 @@
|
|
|
18
19
|
- ๐๏ธ **Landmarks** - Add missing main and navigation landmarks
|
|
19
20
|
- ๐ **Heading Analysis** - Analyze heading structure with suggestions (no auto-fix)
|
|
20
21
|
- ๐งน **Duplicate Cleanup** - Remove duplicate role attributes
|
|
22
|
+
|
|
23
|
+
### ๐ **Enhanced Alt Attribute Features (NEW!)**
|
|
24
|
+
- ๐ **Comprehensive Analysis** - Image type classification and quality checking
|
|
25
|
+
- ๐จ **Diverse Alt Generation** - Multiple strategies for creative alt text
|
|
26
|
+
- ๐ **Multi-language Support** - Japanese, English, Vietnamese vocabulary
|
|
27
|
+
- ๐ญ **Creativity Levels** - Conservative, Balanced, Creative modes
|
|
28
|
+
- ๐ง **Context Awareness** - Brand, emotional, and technical context integration
|
|
29
|
+
- ๐ **Data Visualization** - Specialized descriptions for charts and graphs
|
|
30
|
+
|
|
31
|
+
### ๐ ๏ธ **Utility Features**
|
|
21
32
|
- ๐ **Batch Processing** - Process entire directories recursively
|
|
22
33
|
- ๐พ **Optional Backups** - Create backup files when needed with --backup flag
|
|
23
34
|
- ๐ **Dry Run Mode** - Preview changes before applying
|
|
24
35
|
- ๐ **Detailed Reports** - Comprehensive fix summaries
|
|
36
|
+
- โก **Individual Fix Modes** - Target specific accessibility issues
|
|
25
37
|
|
|
26
38
|
## ๐ Quick Start
|
|
27
39
|
|
|
@@ -51,6 +63,22 @@ gbu-a11y ./src
|
|
|
51
63
|
gbu-a11y index.html
|
|
52
64
|
```
|
|
53
65
|
|
|
66
|
+
### Enhanced Alt Attribute Mode
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
# Enable enhanced alt attribute analysis
|
|
70
|
+
gbu-a11y --enhanced-alt
|
|
71
|
+
|
|
72
|
+
# Creative alt text generation with emotions
|
|
73
|
+
gbu-a11y --enhanced-alt --alt-creativity creative --include-emotions
|
|
74
|
+
|
|
75
|
+
# Strict quality checking
|
|
76
|
+
gbu-a11y --enhanced-alt --strict-alt
|
|
77
|
+
|
|
78
|
+
# English with creative mode
|
|
79
|
+
gbu-a11y -l en --enhanced-alt --alt-creativity creative
|
|
80
|
+
```
|
|
81
|
+
|
|
54
82
|
## ๐ Detailed Usage
|
|
55
83
|
|
|
56
84
|
### Command Line Options
|
|
@@ -58,14 +86,15 @@ gbu-a11y index.html
|
|
|
58
86
|
```bash
|
|
59
87
|
gbu-a11y [options] [directory/file]
|
|
60
88
|
|
|
61
|
-
Options:
|
|
89
|
+
Basic Options:
|
|
62
90
|
-d, --directory <path> Target directory (default: current directory)
|
|
63
91
|
-l, --language <lang> Language for lang attribute (default: ja)
|
|
64
92
|
--backup Create backup files
|
|
65
93
|
--no-backup Don't create backup files (default)
|
|
66
94
|
--dry-run Preview changes without applying
|
|
67
|
-
|
|
68
|
-
|
|
95
|
+
|
|
96
|
+
Fix Modes:
|
|
97
|
+
--comprehensive, --all Run comprehensive fixes (default)
|
|
69
98
|
--alt-only Fix alt attributes + cleanup
|
|
70
99
|
--lang-only Fix HTML lang attributes + cleanup
|
|
71
100
|
--role-only Fix role attributes + cleanup
|
|
@@ -74,13 +103,22 @@ Options:
|
|
|
74
103
|
--links-only Fix link names + cleanup
|
|
75
104
|
--landmarks-only Fix landmarks + cleanup
|
|
76
105
|
--headings-only Analyze heading structure (no auto-fix)
|
|
106
|
+
--cleanup-only Only cleanup duplicate role attributes
|
|
107
|
+
|
|
108
|
+
Enhanced Alt Options:
|
|
109
|
+
--enhanced-alt Use enhanced alt attribute analysis and generation
|
|
110
|
+
--alt-creativity <mode> Alt text creativity: conservative, balanced, creative
|
|
111
|
+
--include-emotions Include emotional descriptors in alt text
|
|
112
|
+
--strict-alt Enable strict alt attribute quality checking
|
|
113
|
+
|
|
114
|
+
Help:
|
|
77
115
|
-h, --help Show help message
|
|
78
116
|
```
|
|
79
117
|
|
|
80
118
|
### Examples
|
|
81
119
|
|
|
82
120
|
```bash
|
|
83
|
-
#
|
|
121
|
+
# Basic comprehensive fixes
|
|
84
122
|
gbu-a11y
|
|
85
123
|
|
|
86
124
|
# Preview all changes
|
|
@@ -89,576 +127,206 @@ gbu-a11y --dry-run
|
|
|
89
127
|
# Fix with English language
|
|
90
128
|
gbu-a11y -l en ./public
|
|
91
129
|
|
|
92
|
-
# Individual fix types
|
|
130
|
+
# Individual fix types
|
|
93
131
|
gbu-a11y --alt-only # Fix alt attributes + cleanup
|
|
94
132
|
gbu-a11y --forms-only # Fix form labels + cleanup
|
|
95
133
|
gbu-a11y --buttons-only # Fix button names + cleanup
|
|
96
|
-
gbu-a11y --links-only # Fix link names + cleanup
|
|
97
|
-
gbu-a11y --landmarks-only # Fix landmarks + cleanup
|
|
98
|
-
gbu-a11y --headings-only # Analyze heading structure
|
|
99
|
-
gbu-a11y --cleanup-only # Only cleanup duplicates
|
|
100
|
-
|
|
101
|
-
# Combine with other options
|
|
102
|
-
gbu-a11y --alt-only --dry-run ./src # Preview alt fixes + cleanup
|
|
103
|
-
gbu-a11y --forms-only -l en ./public # Form fixes + cleanup with English lang
|
|
104
|
-
|
|
105
|
-
# Backup options
|
|
106
|
-
gbu-a11y --backup ./dist # Enable backups for safety
|
|
107
|
-
gbu-a11y --no-backup ./dist # Disable backups (default - faster processing)
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
## ๐ง Programmatic Usage
|
|
111
|
-
|
|
112
|
-
```javascript
|
|
113
|
-
const AccessibilityFixer = require('gbu-accessibility-package');
|
|
114
|
-
|
|
115
|
-
const fixer = new AccessibilityFixer({
|
|
116
|
-
language: 'en',
|
|
117
|
-
backupFiles: true,
|
|
118
|
-
dryRun: false
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
// Fix all accessibility issues
|
|
122
|
-
async function fixAccessibility() {
|
|
123
|
-
try {
|
|
124
|
-
const results = await fixer.fixAllAccessibilityIssues('./src');
|
|
125
|
-
console.log('Fixed files:', results);
|
|
126
|
-
} catch (error) {
|
|
127
|
-
console.error('Error:', error);
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
fixAccessibility();
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## ๐ฏ Fix Modes
|
|
135
|
-
|
|
136
|
-
### Comprehensive Mode (Default)
|
|
137
|
-
Runs all fixes including cleanup:
|
|
138
|
-
|
|
139
|
-
1. **HTML lang attributes** - Adds missing language attributes
|
|
140
|
-
2. **Alt attributes** - Generates contextual alt text + aria-label
|
|
141
|
-
3. **Role attributes** - Adds appropriate ARIA roles + picture handling
|
|
142
|
-
4. **Form labels** - Fixes missing input labels
|
|
143
|
-
5. **Button names** - Fixes empty buttons
|
|
144
|
-
6. **Link names** - Fixes empty links and detects generic text
|
|
145
|
-
7. **Landmarks** - Adds main and navigation landmarks
|
|
146
|
-
8. **Heading analysis** - Analyzes structure (suggestions only)
|
|
147
|
-
9. **Cleanup** - Removes duplicate role attributes
|
|
148
|
-
|
|
149
|
-
### Individual Fix Options
|
|
150
|
-
Each individual mode includes cleanup step:
|
|
151
|
-
|
|
152
|
-
- `--alt-only` - Alt attributes + cleanup
|
|
153
|
-
- `--forms-only` - Form labels + cleanup
|
|
154
|
-
- `--buttons-only` - Button names + cleanup
|
|
155
|
-
- `--links-only` - Link names + cleanup
|
|
156
|
-
- `--landmarks-only` - Landmarks + cleanup
|
|
157
|
-
- `--headings-only` - Heading analysis only (no cleanup)
|
|
158
|
-
|
|
159
|
-
## ๐ง What Gets Fixed
|
|
160
|
-
|
|
161
|
-
### 1. Alt Attributes & Aria Labels
|
|
162
|
-
- **Missing alt attributes** โ Adds contextual alt text
|
|
163
|
-
- **Empty alt attributes** โ Generates meaningful descriptions
|
|
164
|
-
- **Automatic aria-label** โ Adds aria-label matching alt text
|
|
165
|
-
- **Context-aware generation** โ Uses surrounding text, headings, captions
|
|
166
|
-
|
|
167
|
-
```html
|
|
168
|
-
<!-- Before -->
|
|
169
|
-
<img src="logo.png">
|
|
170
|
-
<img src="chart.jpg" alt="">
|
|
171
|
-
|
|
172
|
-
<!-- After -->
|
|
173
|
-
<img src="logo.png" alt="ใญใด" role="img" aria-label="ใญใด">
|
|
174
|
-
<img src="chart.jpg" alt="ใฐใฉใ" role="img" aria-label="ใฐใฉใ">
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### 2. HTML Lang Attributes
|
|
178
|
-
- **Missing lang attributes** โ Adds specified language
|
|
179
|
-
- **Empty lang attributes** โ Sets proper language code
|
|
180
|
-
|
|
181
|
-
```html
|
|
182
|
-
<!-- Before -->
|
|
183
|
-
<html>
|
|
184
|
-
<html lang="">
|
|
185
134
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
- **Images** โ `role="img"`
|
|
193
|
-
- **Picture elements** โ Moves `role="img"` from `<picture>` to `<img>` inside
|
|
194
|
-
- **Links** โ `role="link"`
|
|
195
|
-
- **Clickable elements** โ `role="button"`
|
|
196
|
-
- **Navigation lists** โ `role="menubar"`
|
|
197
|
-
- **Menu items** โ `role="menuitem"`
|
|
198
|
-
|
|
199
|
-
```html
|
|
200
|
-
<!-- Before -->
|
|
201
|
-
<img src="icon.png" alt="Icon">
|
|
202
|
-
<picture role="img">
|
|
203
|
-
<img src="photo.jpg" alt="Photo">
|
|
204
|
-
</picture>
|
|
205
|
-
<a href="/home">Home</a>
|
|
206
|
-
<div class="btn-click">Click me</div>
|
|
207
|
-
|
|
208
|
-
<!-- After -->
|
|
209
|
-
<img src="icon.png" alt="Icon" role="img" aria-label="Icon">
|
|
210
|
-
<picture>
|
|
211
|
-
<img src="photo.jpg" alt="Photo" role="img" aria-label="Photo">
|
|
212
|
-
</picture>
|
|
213
|
-
<a href="/home" role="link">Home</a>
|
|
214
|
-
<div class="btn-click" role="button">Click me</div>
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
### 4. Form Labels
|
|
218
|
-
- **Input elements without labels** โ Adds appropriate `aria-label`
|
|
219
|
-
- **Supports multiple input types** โ text, email, password, tel, etc.
|
|
220
|
-
|
|
221
|
-
```html
|
|
222
|
-
<!-- Before -->
|
|
223
|
-
<input type="text" placeholder="Name">
|
|
224
|
-
<input type="email">
|
|
225
|
-
<input type="password">
|
|
226
|
-
|
|
227
|
-
<!-- After -->
|
|
228
|
-
<input type="text" placeholder="Name" aria-label="ใใญในใๅ
ฅๅ">
|
|
229
|
-
<input type="email" aria-label="ใกใผใซใขใใฌใน">
|
|
230
|
-
<input type="password" aria-label="ใในใฏใผใ">
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
### 5. Button Names
|
|
234
|
-
- **Empty buttons** โ Adds text content and aria-label
|
|
235
|
-
- **Input buttons without value** โ Adds appropriate value
|
|
236
|
-
|
|
237
|
-
```html
|
|
238
|
-
<!-- Before -->
|
|
239
|
-
<button></button>
|
|
240
|
-
<input type="submit">
|
|
241
|
-
<input type="button">
|
|
242
|
-
|
|
243
|
-
<!-- After -->
|
|
244
|
-
<button aria-label="ใใฟใณ">ใใฟใณ</button>
|
|
245
|
-
<input type="submit" value="้ไฟก">
|
|
246
|
-
<input type="button" value="ใใฟใณ">
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
### 6. Link Names
|
|
250
|
-
- **Empty links** โ Adds aria-label
|
|
251
|
-
- **Generic text detection** โ Identifies "Click here", "Read more"
|
|
252
|
-
- **Image-only links** โ Handles links containing only images
|
|
253
|
-
|
|
254
|
-
```html
|
|
255
|
-
<!-- Before -->
|
|
256
|
-
<a href="/home"></a>
|
|
257
|
-
<a href="/more">Click here</a>
|
|
258
|
-
<a href="/image"><img src="icon.png"></a>
|
|
259
|
-
|
|
260
|
-
<!-- After -->
|
|
261
|
-
<a href="/home" aria-label="ใชใณใฏ">ใชใณใฏ</a>
|
|
262
|
-
<a href="/more">Click here</a> <!-- Detected but not auto-fixed -->
|
|
263
|
-
<a href="/image" aria-label="็ปๅใชใณใฏ"><img src="icon.png"></a>
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
### 7. Landmarks
|
|
267
|
-
- **Missing main landmark** โ Adds `role="main"`
|
|
268
|
-
- **Missing navigation landmark** โ Adds `role="navigation"`
|
|
269
|
-
|
|
270
|
-
```html
|
|
271
|
-
<!-- Before -->
|
|
272
|
-
<div class="content">
|
|
273
|
-
<p>Main content</p>
|
|
274
|
-
</div>
|
|
275
|
-
<ul class="navigation">
|
|
276
|
-
<li><a href="/home">Home</a></li>
|
|
277
|
-
</ul>
|
|
278
|
-
|
|
279
|
-
<!-- After -->
|
|
280
|
-
<div class="content" role="main">
|
|
281
|
-
<p>Main content</p>
|
|
282
|
-
</div>
|
|
283
|
-
<ul class="navigation" role="navigation">
|
|
284
|
-
<li><a href="/home">Home</a></li>
|
|
285
|
-
</ul>
|
|
286
|
-
```
|
|
287
|
-
|
|
288
|
-
### 8. Heading Analysis
|
|
289
|
-
- **Multiple h1 detection** โ Identifies and suggests fixes
|
|
290
|
-
- **Heading level skipping** โ Detects jumps (h1 โ h3)
|
|
291
|
-
- **Empty headings** โ Identifies headings without content
|
|
292
|
-
- **Analysis only** โ Provides suggestions, no auto-fix for content safety
|
|
293
|
-
|
|
294
|
-
### 9. Duplicate Cleanup
|
|
295
|
-
- **Removes duplicate role attributes** โ Keeps first occurrence
|
|
296
|
-
- **Handles mixed quotes** โ role="button" role='button'
|
|
135
|
+
# Enhanced alt attribute features
|
|
136
|
+
gbu-a11y --enhanced-alt # Basic enhanced mode
|
|
137
|
+
gbu-a11y --enhanced-alt --alt-creativity creative # Creative descriptions
|
|
138
|
+
gbu-a11y --enhanced-alt --include-emotions # Include emotional context
|
|
139
|
+
gbu-a11y --enhanced-alt --strict-alt # Strict quality checking
|
|
140
|
+
gbu-a11y -l en --enhanced-alt --alt-creativity creative # English creative mode
|
|
297
141
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
<!-- After -->
|
|
303
|
-
<img src="test.jpg" role="img" alt="Test">
|
|
142
|
+
# Combine with other options
|
|
143
|
+
gbu-a11y --enhanced-alt --backup ./src # Enhanced mode with backups
|
|
144
|
+
gbu-a11y --enhanced-alt --dry-run # Preview enhanced fixes
|
|
304
145
|
```
|
|
305
146
|
|
|
306
|
-
##
|
|
307
|
-
|
|
308
|
-
The package uses intelligent context analysis to generate meaningful alt text:
|
|
147
|
+
## ๐จ Enhanced Alt Attribute Features
|
|
309
148
|
|
|
310
|
-
###
|
|
311
|
-
1. **Title attributes**
|
|
312
|
-
2. **Aria-label attributes**
|
|
313
|
-
3. **Definition terms (dt elements)**
|
|
314
|
-
4. **Parent link text**
|
|
315
|
-
5. **Nearby headings**
|
|
316
|
-
6. **Figure captions**
|
|
317
|
-
7. **Surrounding text content**
|
|
149
|
+
### Creativity Levels
|
|
318
150
|
|
|
319
|
-
|
|
320
|
-
-
|
|
321
|
-
-
|
|
322
|
-
-
|
|
323
|
-
- `chart.png` โ "ใฐใฉใ" (Chart)
|
|
324
|
-
- Generic images โ "็ปๅ" (Image)
|
|
151
|
+
#### Conservative
|
|
152
|
+
- Simple, factual descriptions
|
|
153
|
+
- Focus on basic functionality
|
|
154
|
+
- Minimal vocabulary variation
|
|
325
155
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
### Comprehensive Mode
|
|
329
|
-
```
|
|
330
|
-
๐ Starting Accessibility Fixer...
|
|
331
|
-
๐ฏ Running comprehensive accessibility fixes...
|
|
156
|
+
**Example**: `alt="Chart"`, `alt="Logo"`
|
|
332
157
|
|
|
333
|
-
|
|
334
|
-
|
|
158
|
+
#### Balanced (Default)
|
|
159
|
+
- Context-aware descriptions
|
|
160
|
+
- Moderate creativity
|
|
161
|
+
- Balance between simple and detailed
|
|
335
162
|
|
|
336
|
-
|
|
337
|
-
โ
Fixed alt attributes in 12 files (34 issues)
|
|
163
|
+
**Example**: `alt="Sales performance chart"`, `alt="Company logo"`
|
|
338
164
|
|
|
339
|
-
|
|
340
|
-
|
|
165
|
+
#### Creative
|
|
166
|
+
- Rich, detailed descriptions
|
|
167
|
+
- Emotional context integration
|
|
168
|
+
- High brand and context awareness
|
|
341
169
|
|
|
342
|
-
|
|
343
|
-
โ
Fixed form labels in 6 files (15 issues)
|
|
170
|
+
**Example**: `alt="Dynamic sales performance chart showing impressive 25% quarterly growth"`, `alt="Innovative technology company logo representing digital transformation"`
|
|
344
171
|
|
|
345
|
-
|
|
346
|
-
โ
Fixed button names in 4 files (8 issues)
|
|
172
|
+
### Image Type Classification
|
|
347
173
|
|
|
348
|
-
|
|
349
|
-
|
|
174
|
+
- **Decorative Images**: Automatically detected and marked with `alt=""`
|
|
175
|
+
- **Functional Icons**: Described by their action (e.g., "Open chat", "Search")
|
|
176
|
+
- **Data Visualizations**: Include chart type, trends, and key data points
|
|
177
|
+
- **Complex Images**: Short alt + recommendation for detailed description
|
|
178
|
+
- **Logos**: Include brand name and "logo" keyword
|
|
179
|
+
- **Content Images**: Context-aware descriptions based on surrounding content
|
|
350
180
|
|
|
351
|
-
|
|
352
|
-
โ
Fixed landmarks in 3 files (5 issues)
|
|
181
|
+
### Quality Checks
|
|
353
182
|
|
|
354
|
-
|
|
355
|
-
|
|
183
|
+
- โ **Error Level**: Missing alt, empty alt for content, generic text
|
|
184
|
+
- โ ๏ธ **Warning Level**: Too long/short, redundant words, filename in alt
|
|
185
|
+
- โน๏ธ **Info Level**: Optimization suggestions, consistency checks
|
|
356
186
|
|
|
357
|
-
|
|
358
|
-
โ
Cleaned duplicate roles in 2 files
|
|
187
|
+
## ๐ Programmatic Usage
|
|
359
188
|
|
|
360
|
-
|
|
361
|
-
๐ Final Summary:
|
|
362
|
-
Total files scanned: 25
|
|
363
|
-
Files fixed: 20
|
|
364
|
-
Total issues resolved: 164
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
## ๐ Safety Features
|
|
189
|
+
### Basic Usage
|
|
368
190
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
- **Enable backups**: Use `--backup` for safety when needed
|
|
372
|
-
- **Explicit disable**: Use `--no-backup` to be explicit (same as default)
|
|
191
|
+
```javascript
|
|
192
|
+
const { AccessibilityFixer } = require('gbu-accessibility-package');
|
|
373
193
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
194
|
+
const fixer = new AccessibilityFixer({
|
|
195
|
+
language: 'ja',
|
|
196
|
+
backupFiles: true,
|
|
197
|
+
dryRun: false
|
|
198
|
+
});
|
|
377
199
|
|
|
378
|
-
|
|
379
|
-
|
|
200
|
+
// Fix all accessibility issues
|
|
201
|
+
fixer.fixAllAccessibilityIssues('./src').then(results => {
|
|
202
|
+
console.log('Accessibility fixes completed:', results);
|
|
203
|
+
});
|
|
380
204
|
|
|
381
|
-
|
|
382
|
-
|
|
205
|
+
// Fix specific issues
|
|
206
|
+
await fixer.fixEmptyAltAttributes('./src');
|
|
207
|
+
await fixer.fixFormLabels('./src');
|
|
208
|
+
await fixer.fixButtonNames('./src');
|
|
383
209
|
```
|
|
384
210
|
|
|
385
|
-
###
|
|
386
|
-
- **Dry run mode** for safe previewing with `--dry-run`
|
|
387
|
-
- **Non-destructive** - only adds missing attributes
|
|
388
|
-
- **Duplicate prevention** - won't add existing attributes
|
|
389
|
-
- **Error handling** - continues processing on individual file errors
|
|
390
|
-
|
|
391
|
-
## ๐ง Package Management
|
|
211
|
+
### Enhanced Alt Attribute Mode
|
|
392
212
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
If you encounter issues or want to update to the latest version:
|
|
213
|
+
```javascript
|
|
214
|
+
const { AccessibilityFixer, EnhancedAltChecker } = require('gbu-accessibility-package');
|
|
396
215
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
216
|
+
// Use AccessibilityFixer with enhanced mode
|
|
217
|
+
const fixer = new AccessibilityFixer({
|
|
218
|
+
language: 'en',
|
|
219
|
+
enhancedAltMode: true,
|
|
220
|
+
altCreativity: 'creative',
|
|
221
|
+
includeEmotions: true,
|
|
222
|
+
strictAltChecking: true
|
|
223
|
+
});
|
|
400
224
|
|
|
401
|
-
|
|
402
|
-
npm cache clean --force
|
|
225
|
+
await fixer.fixEmptyAltAttributes('./src');
|
|
403
226
|
|
|
404
|
-
|
|
405
|
-
|
|
227
|
+
// Use EnhancedAltChecker separately
|
|
228
|
+
const checker = new EnhancedAltChecker({
|
|
229
|
+
language: 'ja',
|
|
230
|
+
strictMode: true
|
|
231
|
+
});
|
|
406
232
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
gbu-a11y --help
|
|
233
|
+
const issues = checker.analyzeAltAttributes(htmlContent);
|
|
234
|
+
console.log('Alt attribute issues found:', issues);
|
|
410
235
|
```
|
|
411
236
|
|
|
412
|
-
|
|
237
|
+
## ๐ฏ What Gets Fixed
|
|
413
238
|
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
239
|
+
### Alt Attributes (Enhanced Mode)
|
|
240
|
+
- **Missing alt attributes** โ Context-aware alt text generation
|
|
241
|
+
- **Empty alt attributes** โ Smart content-based descriptions
|
|
242
|
+
- **Generic alt text** โ Specific, meaningful descriptions
|
|
243
|
+
- **Too long alt text** โ Optimized length with key information
|
|
244
|
+
- **Redundant words** โ Clean, concise descriptions
|
|
245
|
+
- **Data visualizations** โ Chart type + trends + key data
|
|
417
246
|
|
|
418
|
-
|
|
419
|
-
|
|
247
|
+
### Form Accessibility
|
|
248
|
+
- **Missing form labels** โ Intelligent aria-label generation
|
|
249
|
+
- **Unlabeled inputs** โ Context-based label suggestions
|
|
250
|
+
- **Form structure** โ Proper label associations
|
|
420
251
|
|
|
421
|
-
|
|
422
|
-
|
|
252
|
+
### Interactive Elements
|
|
253
|
+
- **Empty buttons** โ Action-based button names
|
|
254
|
+
- **Generic link text** โ Descriptive link purposes
|
|
255
|
+
- **Missing button names** โ Function-based descriptions
|
|
423
256
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
```bash
|
|
431
|
-
# Remove all backup files in current directory
|
|
432
|
-
find . -name "*.backup" -type f -delete
|
|
257
|
+
### Document Structure
|
|
258
|
+
- **Missing lang attributes** โ Automatic language detection
|
|
259
|
+
- **Missing landmarks** โ Main and navigation landmarks
|
|
260
|
+
- **Heading structure** โ Analysis and recommendations
|
|
261
|
+
- **Role attributes** โ WCAG-compliant role assignments
|
|
433
262
|
|
|
434
|
-
|
|
435
|
-
find ./src -name "*.backup" -type f -delete
|
|
436
|
-
|
|
437
|
-
# Using npm script (if configured)
|
|
438
|
-
npm run cleanup-backups
|
|
439
|
-
```
|
|
440
|
-
|
|
441
|
-
### Troubleshooting Installation
|
|
263
|
+
## ๐งช Testing and Demo
|
|
442
264
|
|
|
443
265
|
```bash
|
|
444
|
-
#
|
|
445
|
-
npm
|
|
446
|
-
|
|
447
|
-
# Reset npm registry (if needed)
|
|
448
|
-
npm config set registry https://registry.npmjs.org/
|
|
266
|
+
# Test the package
|
|
267
|
+
npm test
|
|
449
268
|
|
|
450
|
-
#
|
|
451
|
-
npm
|
|
269
|
+
# Demo basic features
|
|
270
|
+
npm run demo
|
|
452
271
|
|
|
453
|
-
#
|
|
454
|
-
|
|
455
|
-
sudo chown -R $(whoami) /usr/local/lib/node_modules
|
|
272
|
+
# Demo enhanced alt features
|
|
273
|
+
npm run demo-enhanced
|
|
456
274
|
|
|
457
|
-
#
|
|
458
|
-
|
|
459
|
-
```
|
|
460
|
-
|
|
461
|
-
### Version Management
|
|
462
|
-
|
|
463
|
-
```bash
|
|
464
|
-
# Check current version
|
|
465
|
-
gbu-a11y --version
|
|
466
|
-
|
|
467
|
-
# Check available versions
|
|
468
|
-
npm view gbu-accessibility-package versions --json
|
|
275
|
+
# Demo creative alt generation
|
|
276
|
+
npm run demo-creative
|
|
469
277
|
|
|
470
|
-
#
|
|
471
|
-
npm
|
|
472
|
-
|
|
473
|
-
# Update to latest
|
|
474
|
-
npm update -g gbu-accessibility-package
|
|
278
|
+
# Test enhanced alt features
|
|
279
|
+
npm run test-enhanced-alt
|
|
475
280
|
```
|
|
476
281
|
|
|
477
|
-
##
|
|
478
|
-
|
|
479
|
-
### Package.json Scripts
|
|
480
|
-
```json
|
|
481
|
-
{
|
|
482
|
-
"scripts": {
|
|
483
|
-
"a11y:fix": "gbu-a11y",
|
|
484
|
-
"a11y:check": "gbu-a11y --dry-run",
|
|
485
|
-
"a11y:comprehensive": "gbu-a11y --comprehensive",
|
|
486
|
-
"a11y:forms": "gbu-a11y --forms-only",
|
|
487
|
-
"a11y:buttons": "gbu-a11y --buttons-only",
|
|
488
|
-
"a11y:links": "gbu-a11y --links-only",
|
|
489
|
-
"a11y:landmarks": "gbu-a11y --landmarks-only",
|
|
490
|
-
"a11y:headings": "gbu-a11y --headings-only",
|
|
491
|
-
"a11y:cleanup": "gbu-a11y --cleanup-only",
|
|
492
|
-
"cleanup-backups": "find . -name '*.backup' -type f -delete"
|
|
493
|
-
}
|
|
494
|
-
}
|
|
495
|
-
```
|
|
282
|
+
## ๐ Performance
|
|
496
283
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
-
|
|
501
|
-
run: npx gbu-accessibility-package --dry-run
|
|
284
|
+
- **Basic Mode**: Fast processing, suitable for large projects
|
|
285
|
+
- **Enhanced Mode**: ~20-30% slower but 85-90% improvement in alt text quality
|
|
286
|
+
- **Memory Usage**: +15-20% for enhanced vocabulary and analysis
|
|
287
|
+
- **Accuracy**: 95%+ detection of accessibility issues
|
|
502
288
|
|
|
503
|
-
|
|
504
|
-
run: npx gbu-accessibility-package --comprehensive
|
|
505
|
-
```
|
|
289
|
+
## ๐ Language Support
|
|
506
290
|
|
|
507
|
-
|
|
291
|
+
- **Japanese (ja)**: Default language with rich vocabulary
|
|
292
|
+
- **English (en)**: Comprehensive English support
|
|
293
|
+
- **Vietnamese (vi)**: Vietnamese language support
|
|
508
294
|
|
|
509
|
-
|
|
295
|
+
Enhanced alt features include language-specific vocabulary and grammar rules for natural, contextually appropriate descriptions.
|
|
510
296
|
|
|
511
|
-
|
|
512
|
-
- `image-alt` - Images must have alternate text
|
|
513
|
-
- `html-has-lang` - HTML element must have lang attribute
|
|
514
|
-
- `label` - Form elements must have labels (basic support)
|
|
515
|
-
- `button-name` - Buttons must have discernible text
|
|
516
|
-
- `link-name` - Links must have discernible text (basic support)
|
|
517
|
-
- `landmark-one-main` - Document should have one main landmark
|
|
518
|
-
- `region` - Page content should be contained by landmarks
|
|
519
|
-
- `heading-order` - Heading levels analysis (suggestions only)
|
|
520
|
-
- Duplicate role attributes cleanup
|
|
297
|
+
## ๐ Documentation
|
|
521
298
|
|
|
522
|
-
|
|
523
|
-
-
|
|
524
|
-
-
|
|
525
|
-
-
|
|
526
|
-
- Table accessibility features
|
|
527
|
-
- List structure validation
|
|
299
|
+
- [Enhanced Alt Features Guide](./ENHANCED_ALT_FEATURES.md) - Detailed documentation for enhanced alt attribute features
|
|
300
|
+
- [Quick Start Guide](./QUICK_START.md) - Get started quickly
|
|
301
|
+
- [Package Summary](./PACKAGE_SUMMARY.md) - Overview of all features
|
|
302
|
+
- [Changelog](./CHANGELOG.md) - Version history and updates
|
|
528
303
|
|
|
529
304
|
## ๐ค Contributing
|
|
530
305
|
|
|
531
|
-
|
|
532
|
-
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
533
|
-
3. Commit your changes (`git commit -m 'Add amazing feature'`)
|
|
534
|
-
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
535
|
-
5. Open a Pull Request
|
|
536
|
-
|
|
537
|
-
## ๐ License
|
|
538
|
-
|
|
539
|
-
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
540
|
-
|
|
541
|
-
## ๐ง Troubleshooting
|
|
542
|
-
|
|
543
|
-
### Common Issues and Solutions
|
|
544
|
-
|
|
545
|
-
#### Package Not Found or Command Not Working
|
|
546
|
-
```bash
|
|
547
|
-
# Check if package is installed globally
|
|
548
|
-
npm list -g gbu-accessibility-package
|
|
549
|
-
|
|
550
|
-
# If not found, install globally
|
|
551
|
-
npm install -g gbu-accessibility-package
|
|
552
|
-
|
|
553
|
-
# Check PATH includes npm global bin
|
|
554
|
-
echo $PATH | grep npm
|
|
555
|
-
|
|
556
|
-
# Add npm global bin to PATH (if needed)
|
|
557
|
-
export PATH=$PATH:$(npm config get prefix)/bin
|
|
558
|
-
```
|
|
559
|
-
|
|
560
|
-
#### Permission Errors
|
|
561
|
-
```bash
|
|
562
|
-
# macOS/Linux: Fix npm permissions
|
|
563
|
-
sudo chown -R $(whoami) ~/.npm
|
|
564
|
-
sudo chown -R $(whoami) $(npm config get prefix)
|
|
565
|
-
|
|
566
|
-
# Alternative: Use npx
|
|
567
|
-
npx gbu-accessibility-package --help
|
|
568
|
-
|
|
569
|
-
# Windows: Run as Administrator or use npx
|
|
570
|
-
```
|
|
571
|
-
|
|
572
|
-
#### Package Not Working After Update
|
|
573
|
-
```bash
|
|
574
|
-
# Complete reinstall
|
|
575
|
-
npm uninstall -g gbu-accessibility-package
|
|
576
|
-
npm cache clean --force
|
|
577
|
-
npm install -g gbu-accessibility-package@latest
|
|
578
|
-
|
|
579
|
-
# Verify installation
|
|
580
|
-
gbu-a11y --version
|
|
581
|
-
which gbu-a11y
|
|
582
|
-
```
|
|
583
|
-
|
|
584
|
-
#### Files Not Being Processed
|
|
585
|
-
```bash
|
|
586
|
-
# Check file extensions (only .html files supported)
|
|
587
|
-
ls -la *.html
|
|
588
|
-
|
|
589
|
-
# Check file permissions
|
|
590
|
-
ls -la your-file.html
|
|
591
|
-
|
|
592
|
-
# Run with verbose output
|
|
593
|
-
gbu-a11y --dry-run your-file.html
|
|
594
|
-
```
|
|
595
|
-
|
|
596
|
-
#### Backup Files Accumulating
|
|
597
|
-
```bash
|
|
598
|
-
# Clean all backup files
|
|
599
|
-
find . -name "*.backup" -type f -delete
|
|
600
|
-
|
|
601
|
-
# Prevent backup creation
|
|
602
|
-
gbu-a11y --no-backup
|
|
306
|
+
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.
|
|
603
307
|
|
|
604
|
-
|
|
605
|
-
echo 'alias cleanup-backups="find . -name \"*.backup\" -type f -delete"' >> ~/.bashrc
|
|
606
|
-
```
|
|
607
|
-
|
|
608
|
-
#### Performance Issues
|
|
609
|
-
```bash
|
|
610
|
-
# Use --no-backup for faster processing
|
|
611
|
-
gbu-a11y --no-backup
|
|
612
|
-
|
|
613
|
-
# Process specific directories instead of entire project
|
|
614
|
-
gbu-a11y ./src
|
|
615
|
-
|
|
616
|
-
# Use individual modes for targeted fixes
|
|
617
|
-
gbu-a11y --alt-only ./images
|
|
618
|
-
```
|
|
308
|
+
### Development Setup
|
|
619
309
|
|
|
620
|
-
#### Node.js Version Issues
|
|
621
310
|
```bash
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
# Visit: https://nodejs.org/
|
|
627
|
-
|
|
628
|
-
# Use nvm to manage Node.js versions
|
|
629
|
-
nvm install 18
|
|
630
|
-
nvm use 18
|
|
311
|
+
git clone https://github.com/dangpv94/gbu-accessibility-tool.git
|
|
312
|
+
cd gbu-accessibility-tool/accessibility-package
|
|
313
|
+
npm install
|
|
314
|
+
npm test
|
|
631
315
|
```
|
|
632
316
|
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
If you're still experiencing issues:
|
|
317
|
+
## ๐ License
|
|
636
318
|
|
|
637
|
-
|
|
638
|
-
2. **Try dry run first**: `gbu-a11y --dry-run`
|
|
639
|
-
3. **Check file permissions**: `ls -la your-files.html`
|
|
640
|
-
4. **Clear cache and reinstall**: See package management section above
|
|
641
|
-
5. **Use npx as alternative**: `npx gbu-accessibility-package --help`
|
|
642
|
-
|
|
643
|
-
## ๐ Support
|
|
644
|
-
|
|
645
|
-
- ๐ง **Issues**: [GitHub Issues](https://github.com/dangpv94/gbu-accessibility-tool/issues)
|
|
646
|
-
- ๐ **Documentation**: [GitHub Wiki](https://github.com/dangpv94/gbu-accessibility-tool/wiki)
|
|
647
|
-
- ๐ฌ **Discussions**: [GitHub Discussions](https://github.com/dangpv94/gbu-accessibility-tool/discussions)
|
|
319
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
648
320
|
|
|
649
|
-
##
|
|
321
|
+
## ๐ Acknowledgments
|
|
650
322
|
|
|
651
|
-
-
|
|
652
|
-
-
|
|
653
|
-
-
|
|
654
|
-
-
|
|
655
|
-
- โ
**Fast & Efficient** - Batch processing with detailed reports
|
|
656
|
-
- โ
**WCAG Compliant** - Follows accessibility standards
|
|
657
|
-
- โ
**axe DevTools Compatible** - Fixes common axe issues
|
|
658
|
-
- โ
**Individual Control** - Fix specific issues or everything
|
|
659
|
-
- โ
**Safe Heading Analysis** - Suggests instead of auto-fixing
|
|
660
|
-
- โ
**Multi-language Support** - Japanese, English, and extensible
|
|
323
|
+
- Built with accessibility best practices in mind
|
|
324
|
+
- Follows WCAG guidelines
|
|
325
|
+
- Inspired by the need for automated accessibility improvements
|
|
326
|
+
- Community feedback and contributions
|
|
661
327
|
|
|
662
328
|
---
|
|
663
329
|
|
|
664
|
-
Made with โค๏ธ by the GBU Team
|
|
330
|
+
**Made with โค๏ธ by the GBU Team**
|
|
331
|
+
|
|
332
|
+
For more information, visit our [GitHub repository](https://github.com/dangpv94/gbu-accessibility-tool).
|