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/cli.js
CHANGED
|
@@ -26,7 +26,12 @@ const options = {
|
|
|
26
26
|
buttonsOnly: false,
|
|
27
27
|
linksOnly: false,
|
|
28
28
|
landmarksOnly: false,
|
|
29
|
-
headingsOnly: false
|
|
29
|
+
headingsOnly: false,
|
|
30
|
+
// Enhanced alt options
|
|
31
|
+
enhancedAlt: false,
|
|
32
|
+
altCreativity: 'balanced', // conservative, balanced, creative
|
|
33
|
+
includeEmotions: false,
|
|
34
|
+
strictAltChecking: false
|
|
30
35
|
};
|
|
31
36
|
|
|
32
37
|
// Parse arguments
|
|
@@ -86,6 +91,18 @@ for (let i = 0; i < args.length; i++) {
|
|
|
86
91
|
case '--headings-only':
|
|
87
92
|
options.headingsOnly = true;
|
|
88
93
|
break;
|
|
94
|
+
case '--enhanced-alt':
|
|
95
|
+
options.enhancedAlt = true;
|
|
96
|
+
break;
|
|
97
|
+
case '--alt-creativity':
|
|
98
|
+
options.altCreativity = args[++i];
|
|
99
|
+
break;
|
|
100
|
+
case '--include-emotions':
|
|
101
|
+
options.includeEmotions = true;
|
|
102
|
+
break;
|
|
103
|
+
case '--strict-alt':
|
|
104
|
+
options.strictAltChecking = true;
|
|
105
|
+
break;
|
|
89
106
|
default:
|
|
90
107
|
if (!arg.startsWith('-')) {
|
|
91
108
|
options.directory = arg;
|
|
@@ -116,8 +133,26 @@ Options:
|
|
|
116
133
|
--links-only Fix link names + cleanup
|
|
117
134
|
--landmarks-only Fix landmarks + cleanup
|
|
118
135
|
--headings-only Analyze heading structure (no auto-fix)
|
|
136
|
+
--enhanced-alt Use enhanced alt attribute analysis and generation
|
|
137
|
+
--alt-creativity <mode> Alt text creativity: conservative, balanced, creative (default: balanced)
|
|
138
|
+
--include-emotions Include emotional descriptors in alt text
|
|
139
|
+
--strict-alt Enable strict alt attribute quality checking
|
|
119
140
|
-h, --help Show this help message
|
|
120
141
|
|
|
142
|
+
Enhanced Alt Features:
|
|
143
|
+
--enhanced-alt Comprehensive alt attribute analysis with:
|
|
144
|
+
• Image type classification (decorative, functional, complex, etc.)
|
|
145
|
+
• Content quality checking (length, redundancy, generic text)
|
|
146
|
+
• Context-aware alt text generation
|
|
147
|
+
• Multi-language vocabulary support
|
|
148
|
+
• Brand and emotional context integration
|
|
149
|
+
• Technical image description (charts, graphs)
|
|
150
|
+
|
|
151
|
+
Alt Creativity Modes:
|
|
152
|
+
conservative Simple, factual descriptions
|
|
153
|
+
balanced Context-aware with moderate creativity (default)
|
|
154
|
+
creative Rich descriptions with emotions and brand context
|
|
155
|
+
|
|
121
156
|
Examples:
|
|
122
157
|
node cli.js # Comprehensive fixes (no backup by default)
|
|
123
158
|
node cli.js --comprehensive # Comprehensive fixes (same as default)
|
|
@@ -131,6 +166,10 @@ Examples:
|
|
|
131
166
|
node cli.js ./src # Fix src directory (comprehensive)
|
|
132
167
|
node cli.js -l en --dry-run ./dist # Preview comprehensive fixes in English
|
|
133
168
|
node cli.js --backup ./public # Comprehensive fixes with backups
|
|
169
|
+
node cli.js --enhanced-alt # Use enhanced alt attribute analysis
|
|
170
|
+
node cli.js --enhanced-alt --alt-creativity creative # Creative alt text generation
|
|
171
|
+
node cli.js --enhanced-alt --include-emotions # Include emotional context
|
|
172
|
+
node cli.js --strict-alt --enhanced-alt # Strict quality checking
|
|
134
173
|
|
|
135
174
|
Features:
|
|
136
175
|
✅ Alt attributes for images
|
|
@@ -171,7 +210,11 @@ async function main() {
|
|
|
171
210
|
const fixer = new AccessibilityFixer({
|
|
172
211
|
language: options.language,
|
|
173
212
|
backupFiles: options.backupFiles,
|
|
174
|
-
dryRun: options.dryRun
|
|
213
|
+
dryRun: options.dryRun,
|
|
214
|
+
enhancedAltMode: options.enhancedAlt,
|
|
215
|
+
altCreativity: options.altCreativity,
|
|
216
|
+
includeEmotions: options.includeEmotions,
|
|
217
|
+
strictAltChecking: options.strictAltChecking
|
|
175
218
|
});
|
|
176
219
|
|
|
177
220
|
try {
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ja">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Enhanced Alt Attribute Test Cases</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<header>
|
|
10
|
+
<h1>Enhanced Alt Attribute Testing</h1>
|
|
11
|
+
<p>Test cases for diverse alt attribute checking and generation</p>
|
|
12
|
+
</header>
|
|
13
|
+
|
|
14
|
+
<main>
|
|
15
|
+
<!-- Test Case 1: Missing alt attribute -->
|
|
16
|
+
<section>
|
|
17
|
+
<h2>Company Logo</h2>
|
|
18
|
+
<p>Welcome to our innovative technology company</p>
|
|
19
|
+
<img src="company-logo.png" width="200" height="100">
|
|
20
|
+
</section>
|
|
21
|
+
|
|
22
|
+
<!-- Test Case 2: Empty alt attribute for content image -->
|
|
23
|
+
<section>
|
|
24
|
+
<h2>Product Showcase</h2>
|
|
25
|
+
<p>Our latest smartphone with advanced features</p>
|
|
26
|
+
<img src="smartphone-product.jpg" alt="" width="300" height="200">
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
<!-- Test Case 3: Alt text too long -->
|
|
30
|
+
<section>
|
|
31
|
+
<h2>Team Photo</h2>
|
|
32
|
+
<img src="team-photo.jpg" alt="This is a very long description of our amazing team photo showing all the wonderful people who work at our company including engineers, designers, managers, and other staff members working together in our beautiful modern office space" width="400" height="300">
|
|
33
|
+
</section>
|
|
34
|
+
|
|
35
|
+
<!-- Test Case 4: Alt text with redundant words -->
|
|
36
|
+
<section>
|
|
37
|
+
<h2>Office Environment</h2>
|
|
38
|
+
<img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250">
|
|
39
|
+
</section>
|
|
40
|
+
|
|
41
|
+
<!-- Test Case 5: Generic alt text -->
|
|
42
|
+
<section>
|
|
43
|
+
<h2>Learn More</h2>
|
|
44
|
+
<p>Discover our services</p>
|
|
45
|
+
<a href="/services">
|
|
46
|
+
<img src="arrow-right.png" alt="Click here" width="24" height="24">
|
|
47
|
+
</a>
|
|
48
|
+
</section>
|
|
49
|
+
|
|
50
|
+
<!-- Test Case 6: Data visualization without proper description -->
|
|
51
|
+
<section>
|
|
52
|
+
<h2>Sales Performance</h2>
|
|
53
|
+
<p>Our sales increased by 25% this quarter</p>
|
|
54
|
+
<img src="sales-chart.png" alt="Chart" width="500" height="300">
|
|
55
|
+
</section>
|
|
56
|
+
|
|
57
|
+
<!-- Test Case 7: Decorative image with content alt -->
|
|
58
|
+
<section>
|
|
59
|
+
<h2>Welcome Section</h2>
|
|
60
|
+
<img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20">
|
|
61
|
+
<p>Welcome to our website</p>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<!-- Test Case 8: Functional icon without proper description -->
|
|
65
|
+
<section>
|
|
66
|
+
<h2>Contact Us</h2>
|
|
67
|
+
<button onclick="openChat()">
|
|
68
|
+
<img src="chat-icon.svg" alt="Icon" width="20" height="20">
|
|
69
|
+
</button>
|
|
70
|
+
</section>
|
|
71
|
+
|
|
72
|
+
<!-- Test Case 9: Complex image needing detailed description -->
|
|
73
|
+
<section>
|
|
74
|
+
<h2>System Architecture</h2>
|
|
75
|
+
<p>Our microservices architecture overview</p>
|
|
76
|
+
<img src="architecture-diagram.png" alt="Diagram" width="600" height="400">
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<!-- Test Case 10: Image with filename in alt text -->
|
|
80
|
+
<section>
|
|
81
|
+
<h2>Product Features</h2>
|
|
82
|
+
<img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200">
|
|
83
|
+
</section>
|
|
84
|
+
|
|
85
|
+
<!-- Test Case 11: Logo without "logo" in alt text -->
|
|
86
|
+
<section>
|
|
87
|
+
<h2>Partners</h2>
|
|
88
|
+
<img src="partner-logo.png" alt="Microsoft" width="150" height="75">
|
|
89
|
+
</section>
|
|
90
|
+
|
|
91
|
+
<!-- Test Case 12: Chart with some data context -->
|
|
92
|
+
<section>
|
|
93
|
+
<h2>Growth Metrics</h2>
|
|
94
|
+
<p>User growth from 1000 to 5000 users, showing 400% increase</p>
|
|
95
|
+
<img src="growth-chart.png" alt="User growth statistics" width="400" height="250">
|
|
96
|
+
</section>
|
|
97
|
+
|
|
98
|
+
<!-- Test Case 13: Image in figure with figcaption -->
|
|
99
|
+
<figure>
|
|
100
|
+
<img src="research-data.jpg" alt="" width="350" height="200">
|
|
101
|
+
<figcaption>Research findings from our latest study on user behavior patterns</figcaption>
|
|
102
|
+
</figure>
|
|
103
|
+
|
|
104
|
+
<!-- Test Case 14: Multiple images with similar generic alt text -->
|
|
105
|
+
<section>
|
|
106
|
+
<h2>Gallery</h2>
|
|
107
|
+
<img src="photo1.jpg" alt="Photo" width="200" height="150">
|
|
108
|
+
<img src="photo2.jpg" alt="Photo" width="200" height="150">
|
|
109
|
+
<img src="photo3.jpg" alt="Photo" width="200" height="150">
|
|
110
|
+
</section>
|
|
111
|
+
|
|
112
|
+
<!-- Test Case 15: Image with inconsistent alt and aria-label -->
|
|
113
|
+
<section>
|
|
114
|
+
<h2>Navigation</h2>
|
|
115
|
+
<img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32">
|
|
116
|
+
</section>
|
|
117
|
+
|
|
118
|
+
<!-- Test Case 16: Food image in restaurant context -->
|
|
119
|
+
<section>
|
|
120
|
+
<h2>Today's Special</h2>
|
|
121
|
+
<p>Delicious authentic Japanese cuisine</p>
|
|
122
|
+
<img src="sushi-plate.jpg" alt="" width="300" height="200">
|
|
123
|
+
</section>
|
|
124
|
+
|
|
125
|
+
<!-- Test Case 17: Technology device in business context -->
|
|
126
|
+
<section>
|
|
127
|
+
<h2>Enterprise Solutions</h2>
|
|
128
|
+
<p>Professional laptop for business productivity</p>
|
|
129
|
+
<img src="business-laptop.jpg" width="250" height="180">
|
|
130
|
+
</section>
|
|
131
|
+
|
|
132
|
+
<!-- Test Case 18: Nature image in lifestyle context -->
|
|
133
|
+
<section>
|
|
134
|
+
<h2>Wellness Program</h2>
|
|
135
|
+
<p>Find peace and tranquility in nature</p>
|
|
136
|
+
<img src="peaceful-forest.jpg" alt="" width="400" height="250">
|
|
137
|
+
</section>
|
|
138
|
+
</main>
|
|
139
|
+
|
|
140
|
+
<footer>
|
|
141
|
+
<p>Enhanced Alt Attribute Test Cases - GBU Accessibility Tool</p>
|
|
142
|
+
</footer>
|
|
143
|
+
|
|
144
|
+
<script>
|
|
145
|
+
function openChat() {
|
|
146
|
+
alert('Chat opened!');
|
|
147
|
+
}
|
|
148
|
+
</script>
|
|
149
|
+
</body>
|
|
150
|
+
</html>
|
package/index.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* GBU Accessibility Package
|
|
3
|
-
* Main entry point for the package
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
1
|
const AccessibilityFixer = require('./lib/fixer.js');
|
|
2
|
+
const EnhancedAltChecker = require('./lib/enhanced-alt-checker.js');
|
|
7
3
|
|
|
8
|
-
module.exports = AccessibilityFixer;
|
|
4
|
+
module.exports = { AccessibilityFixer, EnhancedAltChecker };
|