gbu-accessibility-package 3.1.3 โ 3.2.1
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/CHANGELOG.md +20 -0
- package/ENHANCED_ALT_FEATURES.md +230 -0
- package/README-vi.md +204 -575
- package/README.md +185 -511
- package/cli.js +66 -3
- package/demo/broken-links-test.html +41 -0
- package/demo/enhanced-alt-test.html +150 -0
- package/index.js +1 -6
- package/lib/fixer.js +1517 -12
- package/package.json +9 -4
- 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
|
|
@@ -17,11 +18,24 @@
|
|
|
17
18
|
- ๐ **Link Names** - Fix empty links and detect generic link text
|
|
18
19
|
- ๐๏ธ **Landmarks** - Add missing main and navigation landmarks
|
|
19
20
|
- ๐ **Heading Analysis** - Analyze heading structure with suggestions (no auto-fix)
|
|
21
|
+
- ๐ **Broken Links Detection** - Detect broken links and 404 resources
|
|
20
22
|
- ๐งน **Duplicate Cleanup** - Remove duplicate role attributes
|
|
23
|
+
|
|
24
|
+
### ๐ **Enhanced Alt Attribute Features (Integrated!)**
|
|
25
|
+
- ๐ **Comprehensive Analysis** - Image type classification and quality checking built-in
|
|
26
|
+
- ๐จ **Diverse Alt Generation** - Multiple strategies for creative alt text integrated in core
|
|
27
|
+
- ๐ **Multi-language Support** - Japanese, English, Vietnamese vocabulary built-in
|
|
28
|
+
- ๐ญ **Creativity Levels** - Conservative, Balanced, Creative modes
|
|
29
|
+
- ๐ง **Context Awareness** - Brand, emotional, and technical context integration
|
|
30
|
+
- ๐ **Data Visualization** - Specialized descriptions for charts and graphs
|
|
31
|
+
- ๐งน **Clean Architecture** - All enhanced features integrated in a single file
|
|
32
|
+
|
|
33
|
+
### ๐ ๏ธ **Utility Features**
|
|
21
34
|
- ๐ **Batch Processing** - Process entire directories recursively
|
|
22
35
|
- ๐พ **Optional Backups** - Create backup files when needed with --backup flag
|
|
23
36
|
- ๐ **Dry Run Mode** - Preview changes before applying
|
|
24
37
|
- ๐ **Detailed Reports** - Comprehensive fix summaries
|
|
38
|
+
- โก **Individual Fix Modes** - Target specific accessibility issues
|
|
25
39
|
|
|
26
40
|
## ๐ Quick Start
|
|
27
41
|
|
|
@@ -51,6 +65,22 @@ gbu-a11y ./src
|
|
|
51
65
|
gbu-a11y index.html
|
|
52
66
|
```
|
|
53
67
|
|
|
68
|
+
### Enhanced Alt Attribute Mode
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
# Enable enhanced alt attribute analysis
|
|
72
|
+
gbu-a11y --enhanced-alt
|
|
73
|
+
|
|
74
|
+
# Creative alt text generation with emotions
|
|
75
|
+
gbu-a11y --enhanced-alt --alt-creativity creative --include-emotions
|
|
76
|
+
|
|
77
|
+
# Strict quality checking
|
|
78
|
+
gbu-a11y --enhanced-alt --strict-alt
|
|
79
|
+
|
|
80
|
+
# English with creative mode
|
|
81
|
+
gbu-a11y -l en --enhanced-alt --alt-creativity creative
|
|
82
|
+
```
|
|
83
|
+
|
|
54
84
|
## ๐ Detailed Usage
|
|
55
85
|
|
|
56
86
|
### Command Line Options
|
|
@@ -58,14 +88,15 @@ gbu-a11y index.html
|
|
|
58
88
|
```bash
|
|
59
89
|
gbu-a11y [options] [directory/file]
|
|
60
90
|
|
|
61
|
-
Options:
|
|
91
|
+
Basic Options:
|
|
62
92
|
-d, --directory <path> Target directory (default: current directory)
|
|
63
93
|
-l, --language <lang> Language for lang attribute (default: ja)
|
|
64
94
|
--backup Create backup files
|
|
65
95
|
--no-backup Don't create backup files (default)
|
|
66
96
|
--dry-run Preview changes without applying
|
|
67
|
-
|
|
68
|
-
|
|
97
|
+
|
|
98
|
+
Fix Modes:
|
|
99
|
+
--comprehensive, --all Run comprehensive fixes (default)
|
|
69
100
|
--alt-only Fix alt attributes + cleanup
|
|
70
101
|
--lang-only Fix HTML lang attributes + cleanup
|
|
71
102
|
--role-only Fix role attributes + cleanup
|
|
@@ -74,13 +105,23 @@ Options:
|
|
|
74
105
|
--links-only Fix link names + cleanup
|
|
75
106
|
--landmarks-only Fix landmarks + cleanup
|
|
76
107
|
--headings-only Analyze heading structure (no auto-fix)
|
|
108
|
+
--links-check Check for broken links and 404 resources
|
|
109
|
+
--cleanup-only Only cleanup duplicate role attributes
|
|
110
|
+
|
|
111
|
+
Enhanced Alt Options:
|
|
112
|
+
--enhanced-alt Use enhanced alt attribute analysis and generation
|
|
113
|
+
--alt-creativity <mode> Alt text creativity: conservative, balanced, creative
|
|
114
|
+
--include-emotions Include emotional descriptors in alt text
|
|
115
|
+
--strict-alt Enable strict alt attribute quality checking
|
|
116
|
+
|
|
117
|
+
Help:
|
|
77
118
|
-h, --help Show help message
|
|
78
119
|
```
|
|
79
120
|
|
|
80
121
|
### Examples
|
|
81
122
|
|
|
82
123
|
```bash
|
|
83
|
-
#
|
|
124
|
+
# Basic comprehensive fixes
|
|
84
125
|
gbu-a11y
|
|
85
126
|
|
|
86
127
|
# Preview all changes
|
|
@@ -89,576 +130,209 @@ gbu-a11y --dry-run
|
|
|
89
130
|
# Fix with English language
|
|
90
131
|
gbu-a11y -l en ./public
|
|
91
132
|
|
|
92
|
-
# Individual fix types
|
|
133
|
+
# Individual fix types
|
|
93
134
|
gbu-a11y --alt-only # Fix alt attributes + cleanup
|
|
94
135
|
gbu-a11y --forms-only # Fix form labels + cleanup
|
|
95
136
|
gbu-a11y --buttons-only # Fix button names + cleanup
|
|
96
|
-
gbu-a11y --links-
|
|
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="">
|
|
137
|
+
gbu-a11y --links-check # Check broken links + cleanup
|
|
185
138
|
|
|
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'
|
|
139
|
+
# Enhanced alt attribute features
|
|
140
|
+
gbu-a11y --enhanced-alt # Basic enhanced mode
|
|
141
|
+
gbu-a11y --enhanced-alt --alt-creativity creative # Creative descriptions
|
|
142
|
+
gbu-a11y --enhanced-alt --include-emotions # Include emotional context
|
|
143
|
+
gbu-a11y --enhanced-alt --strict-alt # Strict quality checking
|
|
144
|
+
gbu-a11y -l en --enhanced-alt --alt-creativity creative # English creative mode
|
|
297
145
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
<!-- After -->
|
|
303
|
-
<img src="test.jpg" role="img" alt="Test">
|
|
146
|
+
# Combine with other options
|
|
147
|
+
gbu-a11y --enhanced-alt --backup ./src # Enhanced mode with backups
|
|
148
|
+
gbu-a11y --enhanced-alt --dry-run # Preview enhanced fixes
|
|
304
149
|
```
|
|
305
150
|
|
|
306
|
-
##
|
|
307
|
-
|
|
308
|
-
The package uses intelligent context analysis to generate meaningful alt text:
|
|
151
|
+
## ๐จ Enhanced Alt Attribute Features
|
|
309
152
|
|
|
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**
|
|
153
|
+
### Creativity Levels
|
|
318
154
|
|
|
319
|
-
|
|
320
|
-
-
|
|
321
|
-
-
|
|
322
|
-
-
|
|
323
|
-
- `chart.png` โ "ใฐใฉใ" (Chart)
|
|
324
|
-
- Generic images โ "็ปๅ" (Image)
|
|
155
|
+
#### Conservative
|
|
156
|
+
- Simple, factual descriptions
|
|
157
|
+
- Focus on basic functionality
|
|
158
|
+
- Minimal vocabulary variation
|
|
325
159
|
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
### Comprehensive Mode
|
|
329
|
-
```
|
|
330
|
-
๐ Starting Accessibility Fixer...
|
|
331
|
-
๐ฏ Running comprehensive accessibility fixes...
|
|
160
|
+
**Example**: `alt="Chart"`, `alt="Logo"`
|
|
332
161
|
|
|
333
|
-
|
|
334
|
-
|
|
162
|
+
#### Balanced (Default)
|
|
163
|
+
- Context-aware descriptions
|
|
164
|
+
- Moderate creativity
|
|
165
|
+
- Balance between simple and detailed
|
|
335
166
|
|
|
336
|
-
|
|
337
|
-
โ
Fixed alt attributes in 12 files (34 issues)
|
|
167
|
+
**Example**: `alt="Sales performance chart"`, `alt="Company logo"`
|
|
338
168
|
|
|
339
|
-
|
|
340
|
-
|
|
169
|
+
#### Creative
|
|
170
|
+
- Rich, detailed descriptions
|
|
171
|
+
- Emotional context integration
|
|
172
|
+
- High brand and context awareness
|
|
341
173
|
|
|
342
|
-
|
|
343
|
-
โ
Fixed form labels in 6 files (15 issues)
|
|
174
|
+
**Example**: `alt="Dynamic sales performance chart showing impressive 25% quarterly growth"`, `alt="Innovative technology company logo representing digital transformation"`
|
|
344
175
|
|
|
345
|
-
|
|
346
|
-
โ
Fixed button names in 4 files (8 issues)
|
|
176
|
+
### Image Type Classification
|
|
347
177
|
|
|
348
|
-
|
|
349
|
-
|
|
178
|
+
- **Decorative Images**: Automatically detected and marked with `alt=""`
|
|
179
|
+
- **Functional Icons**: Described by their action (e.g., "Open chat", "Search")
|
|
180
|
+
- **Data Visualizations**: Include chart type, trends, and key data points
|
|
181
|
+
- **Complex Images**: Short alt + recommendation for detailed description
|
|
182
|
+
- **Logos**: Include brand name and "logo" keyword
|
|
183
|
+
- **Content Images**: Context-aware descriptions based on surrounding content
|
|
350
184
|
|
|
351
|
-
|
|
352
|
-
โ
Fixed landmarks in 3 files (5 issues)
|
|
185
|
+
### Quality Checks
|
|
353
186
|
|
|
354
|
-
|
|
355
|
-
|
|
187
|
+
- โ **Error Level**: Missing alt, empty alt for content, generic text
|
|
188
|
+
- โ ๏ธ **Warning Level**: Too long/short, redundant words, filename in alt
|
|
189
|
+
- โน๏ธ **Info Level**: Optimization suggestions, consistency checks
|
|
356
190
|
|
|
357
|
-
|
|
358
|
-
โ
Cleaned duplicate roles in 2 files
|
|
191
|
+
## ๐ Programmatic Usage
|
|
359
192
|
|
|
360
|
-
|
|
361
|
-
๐ Final Summary:
|
|
362
|
-
Total files scanned: 25
|
|
363
|
-
Files fixed: 20
|
|
364
|
-
Total issues resolved: 164
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
## ๐ Safety Features
|
|
193
|
+
### Basic Usage
|
|
368
194
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
- **Enable backups**: Use `--backup` for safety when needed
|
|
372
|
-
- **Explicit disable**: Use `--no-backup` to be explicit (same as default)
|
|
195
|
+
```javascript
|
|
196
|
+
const { AccessibilityFixer } = require('gbu-accessibility-package');
|
|
373
197
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
198
|
+
const fixer = new AccessibilityFixer({
|
|
199
|
+
language: 'ja',
|
|
200
|
+
backupFiles: true,
|
|
201
|
+
dryRun: false
|
|
202
|
+
});
|
|
377
203
|
|
|
378
|
-
|
|
379
|
-
|
|
204
|
+
// Fix all accessibility issues
|
|
205
|
+
fixer.fixAllAccessibilityIssues('./src').then(results => {
|
|
206
|
+
console.log('Accessibility fixes completed:', results);
|
|
207
|
+
});
|
|
380
208
|
|
|
381
|
-
|
|
382
|
-
|
|
209
|
+
// Fix specific issues
|
|
210
|
+
await fixer.fixEmptyAltAttributes('./src');
|
|
211
|
+
await fixer.fixFormLabels('./src');
|
|
212
|
+
await fixer.fixButtonNames('./src');
|
|
383
213
|
```
|
|
384
214
|
|
|
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
|
|
215
|
+
### Enhanced Alt Attribute Mode (Integrated)
|
|
392
216
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
If you encounter issues or want to update to the latest version:
|
|
396
|
-
|
|
397
|
-
```bash
|
|
398
|
-
# Uninstall global package
|
|
399
|
-
npm uninstall -g gbu-accessibility-package
|
|
217
|
+
```javascript
|
|
218
|
+
const { AccessibilityFixer } = require('gbu-accessibility-package');
|
|
400
219
|
|
|
401
|
-
|
|
402
|
-
|
|
220
|
+
// Use AccessibilityFixer with enhanced mode (integrated)
|
|
221
|
+
const fixer = new AccessibilityFixer({
|
|
222
|
+
language: 'en',
|
|
223
|
+
enhancedAltMode: true,
|
|
224
|
+
altCreativity: 'creative',
|
|
225
|
+
includeEmotions: true,
|
|
226
|
+
strictAltChecking: true
|
|
227
|
+
});
|
|
403
228
|
|
|
404
|
-
|
|
405
|
-
npm install -g gbu-accessibility-package@latest
|
|
229
|
+
await fixer.fixEmptyAltAttributes('./src');
|
|
406
230
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
231
|
+
// All enhanced features are now integrated in AccessibilityFixer
|
|
232
|
+
// No need to import separate classes
|
|
233
|
+
const results = await fixer.fixAllAccessibilityIssues('./src');
|
|
234
|
+
console.log('Accessibility fixes completed with enhanced features:', results);
|
|
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
|
-
|
|
263
|
+
### Link Validation
|
|
264
|
+
- **Broken links** โ Detect HTTP 404, 500, timeout errors
|
|
265
|
+
- **Missing resources** โ Check for missing local files
|
|
266
|
+
- **Invalid URLs** โ Detect malformed URL formats
|
|
267
|
+
- **Slow links** โ Warn about timeouts and slow responses
|
|
436
268
|
|
|
437
|
-
|
|
438
|
-
npm run cleanup-backups
|
|
439
|
-
```
|
|
440
|
-
|
|
441
|
-
### Troubleshooting Installation
|
|
269
|
+
## ๐งช Testing and Demo
|
|
442
270
|
|
|
443
271
|
```bash
|
|
444
|
-
#
|
|
445
|
-
npm
|
|
446
|
-
|
|
447
|
-
# Reset npm registry (if needed)
|
|
448
|
-
npm config set registry https://registry.npmjs.org/
|
|
449
|
-
|
|
450
|
-
# Check global packages
|
|
451
|
-
npm list -g --depth=0
|
|
272
|
+
# Test the package
|
|
273
|
+
npm test
|
|
452
274
|
|
|
453
|
-
#
|
|
454
|
-
|
|
455
|
-
sudo chown -R $(whoami) /usr/local/lib/node_modules
|
|
275
|
+
# Demo basic features
|
|
276
|
+
npm run demo
|
|
456
277
|
|
|
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
|
|
278
|
+
# Demo enhanced alt features
|
|
279
|
+
npm run demo-enhanced
|
|
469
280
|
|
|
470
|
-
#
|
|
471
|
-
npm
|
|
281
|
+
# Demo creative alt generation
|
|
282
|
+
npm run demo-creative
|
|
472
283
|
|
|
473
|
-
#
|
|
474
|
-
npm
|
|
284
|
+
# Test enhanced alt features
|
|
285
|
+
npm run test-enhanced-alt
|
|
475
286
|
```
|
|
476
287
|
|
|
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
|
-
```
|
|
288
|
+
## ๐ Performance
|
|
496
289
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
-
|
|
501
|
-
run: npx gbu-accessibility-package --dry-run
|
|
290
|
+
- **Basic Mode**: Fast processing, suitable for large projects
|
|
291
|
+
- **Enhanced Mode**: ~20-30% slower but 85-90% improvement in alt text quality
|
|
292
|
+
- **Memory Usage**: +15-20% for enhanced vocabulary and analysis
|
|
293
|
+
- **Accuracy**: 95%+ detection of accessibility issues
|
|
502
294
|
|
|
503
|
-
|
|
504
|
-
run: npx gbu-accessibility-package --comprehensive
|
|
505
|
-
```
|
|
295
|
+
## ๐ Language Support
|
|
506
296
|
|
|
507
|
-
|
|
297
|
+
- **Japanese (ja)**: Default language with rich vocabulary
|
|
298
|
+
- **English (en)**: Comprehensive English support
|
|
299
|
+
- **Vietnamese (vi)**: Vietnamese language support
|
|
508
300
|
|
|
509
|
-
|
|
301
|
+
Enhanced alt features include language-specific vocabulary and grammar rules for natural, contextually appropriate descriptions.
|
|
510
302
|
|
|
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
|
|
303
|
+
## ๐ Documentation
|
|
521
304
|
|
|
522
|
-
|
|
523
|
-
-
|
|
524
|
-
-
|
|
525
|
-
-
|
|
526
|
-
- Table accessibility features
|
|
527
|
-
- List structure validation
|
|
305
|
+
- [Enhanced Alt Features Guide](./ENHANCED_ALT_FEATURES.md) - Detailed documentation for enhanced alt attribute features
|
|
306
|
+
- [Quick Start Guide](./QUICK_START.md) - Get started quickly
|
|
307
|
+
- [Package Summary](./PACKAGE_SUMMARY.md) - Overview of all features
|
|
308
|
+
- [Changelog](./CHANGELOG.md) - Version history and updates
|
|
528
309
|
|
|
529
310
|
## ๐ค Contributing
|
|
530
311
|
|
|
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
|
|
312
|
+
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.
|
|
536
313
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
314
|
+
### Development Setup
|
|
540
315
|
|
|
541
|
-
## ๐ง Troubleshooting
|
|
542
|
-
|
|
543
|
-
### Common Issues and Solutions
|
|
544
|
-
|
|
545
|
-
#### Package Not Found or Command Not Working
|
|
546
316
|
```bash
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
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
|
|
603
|
-
|
|
604
|
-
# Configure cleanup script
|
|
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
|
-
```
|
|
619
|
-
|
|
620
|
-
#### Node.js Version Issues
|
|
621
|
-
```bash
|
|
622
|
-
# Check Node.js version (requires >=12.0.0)
|
|
623
|
-
node --version
|
|
624
|
-
|
|
625
|
-
# Update Node.js if needed
|
|
626
|
-
# Visit: https://nodejs.org/
|
|
627
|
-
|
|
628
|
-
# Use nvm to manage Node.js versions
|
|
629
|
-
nvm install 18
|
|
630
|
-
nvm use 18
|
|
317
|
+
git clone https://github.com/dangpv94/gbu-accessibility-tool.git
|
|
318
|
+
cd gbu-accessibility-tool/accessibility-package
|
|
319
|
+
npm install
|
|
320
|
+
npm test
|
|
631
321
|
```
|
|
632
322
|
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
If you're still experiencing issues:
|
|
323
|
+
## ๐ License
|
|
636
324
|
|
|
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)
|
|
325
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
648
326
|
|
|
649
|
-
##
|
|
327
|
+
## ๐ Acknowledgments
|
|
650
328
|
|
|
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
|
|
329
|
+
- Built with accessibility best practices in mind
|
|
330
|
+
- Follows WCAG guidelines
|
|
331
|
+
- Inspired by the need for automated accessibility improvements
|
|
332
|
+
- Community feedback and contributions
|
|
661
333
|
|
|
662
334
|
---
|
|
663
335
|
|
|
664
|
-
Made with โค๏ธ by the GBU Team
|
|
336
|
+
**Made with โค๏ธ by the GBU Team**
|
|
337
|
+
|
|
338
|
+
For more information, visit our [GitHub repository](https://github.com/dangpv94/gbu-accessibility-tool).
|