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/README-vi.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # GBU Accessibility Package
2
2
 
3
- 🚀 **Công cụ tự động sửa lỗi accessibility cho file HTML** - Cải thiện khả năng tiếp cận thông minh, nhận biết ngữ cảnh không cần cấu hình.
3
+ 🚀 **Tự động sửa lỗi accessibility cho file HTML** - Cải thiện accessibility thông minh, nhận biết ngữ cảnh với cấu hình zero.
4
4
 
5
5
  [![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://www.npmjs.com/package/gbu-accessibility-package)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -8,40 +8,52 @@
8
8
 
9
9
  ## ✨ Tính năng
10
10
 
11
- - 🖼️ **Tạo Alt Text thông minh** - Tự động tạo alt attributes dựa trên ngữ cảnh
12
- - 🏷️ **Hỗ trợ Aria Label** - Tự động thêm aria-label khớp với alt text
11
+ ### 🎯 **Sửa lỗi Accessibility bản**
12
+ - 🖼️ **Tạo Alt Text thông minh** - Alt attributes nhận biết ngữ cảnh cho hình ảnh
13
+ - 🏷️ **Hỗ trợ Aria Label** - Tự động tạo aria-label phù hợp với alt text
13
14
  - 🌐 **HTML Lang Attributes** - Tự động sửa thuộc tính ngôn ngữ
14
15
  - 🎭 **Role Attributes** - Quản lý role attributes tuân thủ WCAG
15
- - 📋 **Form Labels** - Sửa lỗi label thiếu cho form inputs
16
- - 🔘 **Button Names** - Sửa button rỗng và input button thiếu tên
17
- - 🔗 **Link Names** - Sửa link rỗng và text link chung chung
18
- - 🏛️ **Landmarks** - Thêm main và navigation landmarks
19
- - 📑 **Phân tích Headings** - Phân tích cấu trúc heading với đề xuất
20
- - 🧹 **Dọn dẹp trùng lặp** - Xóa role attributes trùng lặp
16
+ - 📋 **Form Labels** - Sửa labels thiếu với tạo aria-label thông minh
17
+ - 🔘 **Button Names** - Sửa buttons rỗng và input buttons không tên
18
+ - 🔗 **Link Names** - Sửa links rỗng và phát hiện text generic
19
+ - 🏛️ **Landmarks** - Thêm main và navigation landmarks thiếu
20
+ - 📑 **Phân tích Heading** - Phân tích cấu trúc heading với gợi ý (không tự động sửa)
21
+ - 🧹 **Dọn dẹp Duplicate** - Loại bỏ role attributes trùng lặp
22
+
23
+ ### 🚀 **Tính năng Enhanced Alt Attribute (MỚI!)**
24
+ - 🔍 **Phân tích toàn diện** - Phân loại loại hình ảnh và kiểm tra chất lượng
25
+ - 🎨 **Tạo Alt đa dạng** - Nhiều chiến lược cho alt text sáng tạo
26
+ - 🌐 **Hỗ trợ đa ngôn ngữ** - Từ vựng tiếng Nhật, Anh, Việt
27
+ - 🎭 **Mức độ sáng tạo** - Chế độ Conservative, Balanced, Creative
28
+ - 🧠 **Nhận biết ngữ cảnh** - Tích hợp ngữ cảnh thương hiệu, cảm xúc, kỹ thuật
29
+ - 📊 **Trực quan hóa dữ liệu** - Mô tả chuyên biệt cho biểu đồ và đồ thị
30
+
31
+ ### 🛠️ **Tính năng tiện ích**
21
32
  - 📁 **Xử lý hàng loạt** - Xử lý toàn bộ thư mục đệ quy
22
33
  - 💾 **Backup tùy chọn** - Tạo file backup khi cần với flag --backup
23
- - 🔍 **Chế độ xem trước** - Xem trước thay đổi trước khi áp dụng
24
- - 📊 **Báo cáo chi tiết** - Tóm tắt sửa chữa toàn diện
34
+ - 🔍 **Chế độ Dry Run** - Xem trước thay đổi trước khi áp dụng
35
+ - 📊 **Báo cáo chi tiết** - Tóm tắt sửa lỗi toàn diện
36
+ - ⚡ **Chế độ sửa riêng lẻ** - Nhắm mục tiêu các vấn đề accessibility cụ thể
25
37
 
26
38
  ## 🚀 Bắt đầu nhanh
27
39
 
28
40
  ### Cài đặt
29
41
 
30
42
  ```bash
31
- # Cài đặt toàn cục (khuyến nghị)
43
+ # Cài đặt global (khuyến nghị)
32
44
  npm install -g gbu-accessibility-package
33
45
 
34
- # Cài đặt cục bộ
46
+ # Cài đặt local
35
47
  npm install gbu-accessibility-package
36
48
  ```
37
49
 
38
50
  ### Sử dụng cơ bản
39
51
 
40
52
  ```bash
41
- # Sửa toàn diện (mặc định)
53
+ # Sửa toàn diện (chế độ mặc định)
42
54
  gbu-a11y
43
55
 
44
- # Xem trước thay đổi
56
+ # Xem trước thay đổi (dry run)
45
57
  gbu-a11y --dry-run
46
58
 
47
59
  # Sửa thư mục cụ thể
@@ -51,6 +63,22 @@ gbu-a11y ./src
51
63
  gbu-a11y index.html
52
64
  ```
53
65
 
66
+ ### Chế độ Enhanced Alt Attribute
67
+
68
+ ```bash
69
+ # Bật phân tích enhanced alt attribute
70
+ gbu-a11y --enhanced-alt
71
+
72
+ # Tạo alt text sáng tạo với cảm xúc
73
+ gbu-a11y --enhanced-alt --alt-creativity creative --include-emotions
74
+
75
+ # Kiểm tra chất lượng nghiêm ngặt
76
+ gbu-a11y --enhanced-alt --strict-alt
77
+
78
+ # Tiếng Anh với chế độ sáng tạo
79
+ gbu-a11y -l en --enhanced-alt --alt-creativity creative
80
+ ```
81
+
54
82
  ## 📖 Hướng dẫn chi tiết
55
83
 
56
84
  ### Tùy chọn dòng lệnh
@@ -58,14 +86,15 @@ gbu-a11y index.html
58
86
  ```bash
59
87
  gbu-a11y [options] [directory/file]
60
88
 
61
- Tùy chọn:
89
+ Tùy chọn cơ bản:
62
90
  -d, --directory <path> Thư mục đích (mặc định: thư mục hiện tại)
63
91
  -l, --language <lang> Ngôn ngữ cho thuộc tính lang (mặc định: ja)
64
92
  --backup Tạo file backup
65
93
  --no-backup Không tạo file backup (mặc định)
66
94
  --dry-run Xem trước thay đổi mà không áp dụng
67
- --comprehensive, --all Chạy sửa toàn diện (giống mặc định)
68
- --cleanup-only Chỉ dọn dẹp role attributes trùng lặp
95
+
96
+ Chế độ sửa lỗi:
97
+ --comprehensive, --all Chạy sửa lỗi toàn diện (mặc định)
69
98
  --alt-only Sửa alt attributes + dọn dẹp
70
99
  --lang-only Sửa HTML lang attributes + dọn dẹp
71
100
  --role-only Sửa role attributes + dọn dẹp
@@ -74,13 +103,22 @@ Tùy chọn:
74
103
  --links-only Sửa link names + dọn dẹp
75
104
  --landmarks-only Sửa landmarks + dọn dẹp
76
105
  --headings-only Phân tích cấu trúc heading (không tự động sửa)
77
- -h, --help Hiển thị thông báo trợ giúp
106
+ --cleanup-only Chỉ dọn dẹp role attributes trùng lặp
107
+
108
+ Tùy chọn Enhanced Alt:
109
+ --enhanced-alt Sử dụng phân tích và tạo enhanced alt attribute
110
+ --alt-creativity <mode> Mức sáng tạo alt text: conservative, balanced, creative
111
+ --include-emotions Bao gồm mô tả cảm xúc trong alt text
112
+ --strict-alt Bật kiểm tra chất lượng alt nghiêm ngặt
113
+
114
+ Trợ giúp:
115
+ -h, --help Hiển thị thông điệp trợ giúp
78
116
  ```
79
117
 
80
118
  ### Ví dụ
81
119
 
82
120
  ```bash
83
- # Sửa toàn diện (mặc định - bao gồm dọn dẹp)
121
+ # Sửa lỗi toàn diện bản
84
122
  gbu-a11y
85
123
 
86
124
  # Xem trước tất cả thay đổi
@@ -89,632 +127,206 @@ gbu-a11y --dry-run
89
127
  # Sửa với ngôn ngữ tiếng Anh
90
128
  gbu-a11y -l en ./public
91
129
 
92
- # Các loại sửa riêng lẻ (tất cả đều bao gồm dọn dẹp)
130
+ # Các loại sửa lỗi riêng lẻ
93
131
  gbu-a11y --alt-only # Sửa alt attributes + dọn dẹp
94
132
  gbu-a11y --forms-only # Sửa form labels + dọn dẹp
95
133
  gbu-a11y --buttons-only # Sửa button names + dọn dẹp
96
- gbu-a11y --links-only # Sửa link names + dọn dẹp
97
- gbu-a11y --landmarks-only # Sửa landmarks + dọn dẹp
98
- gbu-a11y --headings-only # Phân tích heading structure
99
- gbu-a11y --cleanup-only # Chỉ dọn dẹp trùng lặp
100
-
101
- # Kết hợp với các tùy chọn khác
102
- gbu-a11y --alt-only --dry-run ./src # Xem trước sửa alt
103
- gbu-a11y --forms-only -l en ./public # Sửa form với tiếng Anh
104
-
105
- # Tùy chọn backup
106
- gbu-a11y --backup ./dist # Bật backup để an toàn
107
- gbu-a11y --no-backup ./dist # Tắt backup (mặc định - xử lý nhanh hơn)
108
- ```
109
-
110
- ## 🔧 Sử dụng lập trình
111
-
112
- ```javascript
113
- const AccessibilityFixer = require("gbu-accessibility-package");
114
-
115
- const fixer = new AccessibilityFixer({
116
- language: "vi",
117
- backupFiles: true,
118
- dryRun: false,
119
- });
120
-
121
- // Sửa tất cả vấn đề accessibility
122
- async function fixAccessibility() {
123
- try {
124
- const results = await fixer.fixAllAccessibilityIssues("./src");
125
- console.log("File đã sửa:", results);
126
- } catch (error) {
127
- console.error("Lỗi:", error);
128
- }
129
- }
130
-
131
- fixAccessibility();
132
- ```
133
-
134
- ## 🎯 Chế độ sửa
135
-
136
- ### Chế độ toàn diện (Mặc định)
137
-
138
- Chạy tất cả các bước sửa bao gồm dọn dẹp:
139
-
140
- 1. **HTML lang attributes** - Thêm thuộc tính ngôn ngữ
141
- 2. **Alt attributes** - Tạo alt text thông minh + aria-label
142
- 3. **Role attributes** - Thêm role phù hợp + xử lý picture/img
143
- 4. **Form labels** - Sửa input thiếu label
144
- 5. **Button names** - Sửa button rỗng
145
- 6. **Link names** - Sửa link rỗng và generic text
146
- 7. **Landmarks** - Thêm main và navigation landmarks
147
- 8. **Heading analysis** - Phân tích cấu trúc (chỉ đề xuất)
148
- 9. **Cleanup** - Dọn dẹp role attributes trùng lặp
149
-
150
- ### Chế độ riêng lẻ
151
-
152
- Mỗi chế độ riêng lẻ đều bao gồm bước dọn dẹp:
153
-
154
- - `--alt-only` - Chỉ sửa alt attributes + dọn dẹp
155
- - `--forms-only` - Chỉ sửa form labels + dọn dẹp
156
- - `--buttons-only` - Chỉ sửa button names + dọn dẹp
157
- - `--links-only` - Chỉ sửa link names + dọn dẹp
158
- - `--landmarks-only` - Chỉ sửa landmarks + dọn dẹp
159
- - `--headings-only` - Chỉ phân tích headings (không dọn dẹp)
160
-
161
- ## 🔧 Những gì được sửa
162
-
163
- ### 1. Alt Attributes
164
-
165
- - **Alt attributes thiếu** → Thêm alt text theo ngữ cảnh
166
- - **Alt attributes rỗng** → Tạo mô tả có ý nghĩa
167
- - **Tạo theo ngữ cảnh** → Sử dụng text xung quanh, tiêu đề, chú thích
168
-
169
- ```html
170
- <!-- Trước -->
171
- <img src="logo.png" />
172
- <img src="chart.jpg" alt="" />
173
-
174
- <!-- Sau -->
175
- <img src="logo.png" alt="ロゴ" role="img" aria-label="ロゴ" />
176
- <img src="chart.jpg" alt="グラフ" role="img" aria-label="グラフ" />
177
- ```
178
-
179
- ### 2. HTML Lang Attributes
180
-
181
- - **Lang attributes thiếu** → Thêm ngôn ngữ được chỉ định
182
- - **Lang attributes rỗng** → Đặt mã ngôn ngữ phù hợp
183
-
184
- ```html
185
- <!-- Trước -->
186
- <html>
187
- <html lang="">
188
- <!-- Sau -->
189
- <html lang="ja">
190
- <html lang="ja"></html>
191
- </html>
192
- </html>
193
- </html>
194
- ```
195
-
196
- ### 3. Role Attributes & Aria Labels
197
-
198
- - **Images** → `role="img"` + `aria-label` (khớp với alt text)
199
- - **Picture elements** → Di chuyển `role="img"` từ `<picture>` vào `<img>` bên trong
200
- - **Links** → `role="link"`
201
- - **Clickable elements** → `role="button"`
202
- - **Navigation lists** → `role="menubar"`
203
- - **Menu items** → `role="menuitem"`
204
-
205
- ```html
206
- <!-- Trước -->
207
- <img src="icon.png" alt="Icon" />
208
- <picture role="img">
209
- <img src="photo.jpg" alt="Photo" />
210
- </picture>
211
- <a href="/home">Home</a>
212
- <div class="btn-click">Click me</div>
213
-
214
- <!-- Sau -->
215
- <img src="icon.png" alt="Icon" role="img" aria-label="Icon" />
216
- <picture>
217
- <img src="photo.jpg" alt="Photo" role="img" aria-label="Photo" />
218
- </picture>
219
- <a href="/home" role="link">Home</a>
220
- <div class="btn-click" role="button">Click me</div>
221
- ```
222
134
 
223
- ### 4. Form Labels
224
-
225
- - **Input thiếu label** Thêm `aria-label` phù hợp
226
- - **Hỗ trợ nhiều loại input** text, email, password, tel, etc.
227
-
228
- ```html
229
- <!-- Trước -->
230
- <input type="text" placeholder="Name" />
231
- <input type="email" />
232
- <input type="password" />
233
-
234
- <!-- Sau -->
235
- <input type="text" placeholder="Name" aria-label="テキスト入力" />
236
- <input type="email" aria-label="メールアドレス" />
237
- <input type="password" aria-label="パスワード" />
238
- ```
239
-
240
- ### 5. Button Names
241
-
242
- - **Button rỗng** → Thêm text và aria-label
243
- - **Input button thiếu value** → Thêm value phù hợp
244
-
245
- ```html
246
- <!-- Trước -->
247
- <button></button>
248
- <input type="submit" />
249
- <input type="button" />
250
-
251
- <!-- Sau -->
252
- <button aria-label="ボタン">ボタン</button>
253
- <input type="submit" value="送信" />
254
- <input type="button" value="ボタン" />
255
- ```
256
-
257
- ### 6. Link Names
258
-
259
- - **Link rỗng** → Thêm aria-label
260
- - **Generic text** → Phát hiện "Click here", "Read more"
261
- - **Image links** → Xử lý link chỉ chứa hình ảnh
262
-
263
- ```html
264
- <!-- Trước -->
265
- <a href="/home"></a>
266
- <a href="/more">Click here</a>
267
- <a href="/image"><img src="icon.png" /></a>
268
-
269
- <!-- Sau -->
270
- <a href="/home" aria-label="リンク">リンク</a>
271
- <a href="/more">Click here</a>
272
- <!-- Được phát hiện nhưng không tự động sửa -->
273
- <a href="/image" aria-label="画像リンク"><img src="icon.png" /></a>
274
- ```
275
-
276
- ### 7. Landmarks
277
-
278
- - **Main landmark thiếu** → Thêm `role="main"`
279
- - **Navigation landmark thiếu** → Thêm `role="navigation"`
280
-
281
- ```html
282
- <!-- Trước -->
283
- <div class="content">
284
- <p>Main content</p>
285
- </div>
286
- <ul class="navigation">
287
- <li><a href="/home">Home</a></li>
288
- </ul>
289
-
290
- <!-- Sau -->
291
- <div class="content" role="main">
292
- <p>Main content</p>
293
- </div>
294
- <ul class="navigation" role="navigation">
295
- <li><a href="/home">Home</a></li>
296
- </ul>
297
- ```
298
-
299
- ### 8. Heading Analysis
300
-
301
- - **Multiple h1** → Phát hiện và đề xuất
302
- - **Heading level skip** → Phát hiện nhảy cấp (h1 → h3)
303
- - **Empty headings** → Phát hiện heading rỗng
304
- - **Chỉ phân tích, không tự động sửa** → An toàn cho cấu trúc nội dung
305
-
306
- ### 9. Aria Label Enhancement
307
-
308
- - **Tự động aria-label** → Thêm `aria-label` khớp với `alt` text cho images
309
- - **Bảo tồn hiện có** → Không ghi đè `aria-label` đã có
310
- - **Phát hiện thông minh** → Chỉ thêm khi `alt` text tồn tại và không rỗng
311
-
312
- ### 10. Dọn dẹp trùng lặp
313
-
314
- - **Xóa role attributes trùng lặp** → Giữ lại occurrence đầu tiên
315
- - **Xử lý mixed quotes** → role="button" role='button'
316
-
317
- ```html
318
- <!-- Trước -->
319
- <img src="test.jpg" role="img" role="img" alt="Test" />
320
-
321
- <!-- Sau -->
322
- <img src="test.jpg" role="img" alt="Test" />
323
- ```
324
-
325
- ## 🌟 Tạo Alt Text thông minh
326
-
327
- Package sử dụng phân tích ngữ cảnh thông minh để tạo alt text có ý nghĩa:
328
-
329
- ### Nguồn ngữ cảnh
330
-
331
- 1. **Title attributes**
332
- 2. **Aria-label attributes**
333
- 3. **Definition terms (dt elements)**
334
- 4. **Parent link text**
335
- 5. **Nearby headings**
336
- 6. **Figure captions**
337
- 7. **Surrounding text content**
338
-
339
- ### Mẫu dự phòng
340
-
341
- - `logo.png` → "ロゴ" (Logo)
342
- - `icon.svg` → "アイコン" (Icon)
343
- - `banner.jpg` → "バナー" (Banner)
344
- - `chart.png` → "グラフ" (Chart)
345
- - Hình ảnh chung → "画像" (Image)
346
-
347
- ## 📊 Ví dụ đầu ra
348
-
349
- ### Chế độ toàn diện
135
+ # Tính năng enhanced alt attribute
136
+ gbu-a11y --enhanced-alt # Chế độ enhanced cơ bản
137
+ gbu-a11y --enhanced-alt --alt-creativity creative # tả sáng tạo
138
+ gbu-a11y --enhanced-alt --include-emotions # Bao gồm ngữ cảnh cảm xúc
139
+ gbu-a11y --enhanced-alt --strict-alt # Kiểm tra chất lượng nghiêm ngặt
140
+ gbu-a11y -l en --enhanced-alt --alt-creativity creative # Chế độ sáng tạo tiếng Anh
350
141
 
142
+ # Kết hợp với các tùy chọn khác
143
+ gbu-a11y --enhanced-alt --backup ./src # Chế độ enhanced với backup
144
+ gbu-a11y --enhanced-alt --dry-run # Xem trước sửa lỗi enhanced
351
145
  ```
352
- 🚀 Starting Accessibility Fixer...
353
- 🎯 Running comprehensive accessibility fixes...
354
-
355
- 📝 Step 1: HTML lang attributes...
356
- ✅ Fixed lang attributes in 5 files
357
-
358
- 🖼️ Step 2: Alt attributes...
359
- ✅ Fixed alt attributes in 12 files (34 issues)
360
-
361
- 🎭 Step 3: Role attributes...
362
- ✅ Fixed role attributes in 8 files (67 issues)
363
-
364
- 📋 Step 4: Form labels...
365
- ✅ Fixed form labels in 6 files (15 issues)
366
146
 
367
- 🔘 Step 5: Button names...
368
- ✅ Fixed button names in 4 files (8 issues)
147
+ ## 🎨 Tính năng Enhanced Alt Attribute
369
148
 
370
- 🔗 Step 6: Link names...
371
- ✅ Fixed link names in 7 files (12 issues)
149
+ ### Mức độ sáng tạo
372
150
 
373
- 🏛️ Step 7: Landmarks...
374
- Fixed landmarks in 3 files (5 issues)
151
+ #### Conservative (Bảo thủ)
152
+ - tả đơn giản, thực tế
153
+ - Tập trung vào chức năng cơ bản
154
+ - Biến thể từ vựng tối thiểu
375
155
 
376
- 📑 Step 8: Heading analysis...
377
- ✅ Analyzed headings in 10 files (18 suggestions)
156
+ **Ví dụ**: `alt="Biểu đồ"`, `alt="Logo"`
378
157
 
379
- 🧹 Step 9: Cleanup duplicate roles...
380
- Cleaned duplicate roles in 2 files
158
+ #### Balanced (Cân bằng - Mặc định)
159
+ - tả nhận biết ngữ cảnh
160
+ - Sáng tạo vừa phải
161
+ - Cân bằng giữa đơn giản và chi tiết
381
162
 
382
- 🎉 All accessibility fixes completed!
383
- 📊 Final Summary:
384
- Total files scanned: 25
385
- Files fixed: 20
386
- Total issues resolved: 164
387
- ```
163
+ **Ví dụ**: `alt="Biểu đồ hiệu suất bán hàng"`, `alt="Logo công ty"`
388
164
 
389
- ### Chế độ riêng lẻ
165
+ #### Creative (Sáng tạo)
166
+ - Mô tả phong phú, chi tiết
167
+ - Tích hợp ngữ cảnh cảm xúc
168
+ - Nhận biết thương hiệu và ngữ cảnh cao
390
169
 
391
- ```
392
- 🚀 Starting Accessibility Fixer...
393
- 📋 Running form label fixes + cleanup...
170
+ **Ví dụ**: `alt="Biểu đồ hiệu suất bán hàng năng động cho thấy mức tăng trưởng ấn tượng 25% theo quý"`, `alt="Logo công ty công nghệ sáng tạo đại diện cho chuyển đổi số"`
394
171
 
395
- 📁 contact.html:
396
- 📋 Missing label/id: Input 1 (type: text) needs an id and label, or aria-label
397
- 📋 Missing label: Input 2 (type: email) needs a label or aria-label
398
- 📋 Added aria-label="テキスト入力" to text input
399
- 📋 Added aria-label="メールアドレス" to email input
172
+ ### Phân loại loại hình ảnh
400
173
 
401
- Fixed form labels in 1 files (2 issues)
174
+ - **Hình ảnh trang trí**: Tự động phát hiện và đánh dấu với `alt=""`
175
+ - **Icon chức năng**: Mô tả theo hành động của chúng (ví dụ: "Mở chat", "Tìm kiếm")
176
+ - **Trực quan hóa dữ liệu**: Bao gồm loại biểu đồ, xu hướng và điểm dữ liệu chính
177
+ - **Hình ảnh phức tạp**: Alt ngắn + khuyến nghị mô tả chi tiết
178
+ - **Logo**: Bao gồm tên thương hiệu và từ khóa "logo"
179
+ - **Hình ảnh nội dung**: Mô tả nhận biết ngữ cảnh dựa trên nội dung xung quanh
402
180
 
403
- 🧹 Running cleanup for duplicate role attributes...
404
- ✅ Cleaned duplicate roles in 0 files
181
+ ### Kiểm tra chất lượng
405
182
 
406
- 🎉 Form label fixes + cleanup completed successfully!
407
- 📁 Backup files created with .backup extension
408
- 💡 Use --no-backup to disable backups in future runs
409
- ```
183
+ - **Mức lỗi**: Alt thiếu, alt rỗng cho nội dung, text generic
184
+ - ⚠️ **Mức cảnh báo**: Quá dài/ngắn, từ thừa, tên file trong alt
185
+ - ℹ️ **Mức thông tin**: Gợi ý tối ưu hóa, kiểm tra tính nhất quán
410
186
 
411
- ## 🔒 Tính năng an toàn
187
+ ## 📋 Sử dụng lập trình
412
188
 
413
- ### Tùy chọn Backup
189
+ ### Sử dụng cơ bản
414
190
 
415
- - **Hành vi mặc định**: Không tạo backup files để xử lý nhanh hơn
416
- - **Bật backup**: Sử dụng `--backup` để an toàn khi cần
417
- - **Tắt rõ ràng**: Sử dụng `--no-backup` để rõ ràng (giống mặc định)
191
+ ```javascript
192
+ const { AccessibilityFixer } = require('gbu-accessibility-package');
418
193
 
419
- ```bash
420
- # Chế độ nhanh (mặc định) - không backup
421
- gbu-a11y --comprehensive
194
+ const fixer = new AccessibilityFixer({
195
+ language: 'vi',
196
+ backupFiles: true,
197
+ dryRun: false
198
+ });
422
199
 
423
- # Chế độ an toàn - tạo backup
424
- gbu-a11y --backup --comprehensive
200
+ // Sửa tất cả vấn đề accessibility
201
+ fixer.fixAllAccessibilityIssues('./src').then(results => {
202
+ console.log('Hoàn thành sửa lỗi accessibility:', results);
203
+ });
425
204
 
426
- # Chế độ không backup ràng (giống mặc định)
427
- gbu-a11y --no-backup --comprehensive
205
+ // Sửa các vấn đề cụ thể
206
+ await fixer.fixEmptyAltAttributes('./src');
207
+ await fixer.fixFormLabels('./src');
208
+ await fixer.fixButtonNames('./src');
428
209
  ```
429
210
 
430
- ### Các tính năng an toàn khác
211
+ ### Chế độ Enhanced Alt Attribute
431
212
 
432
- - **Chế độ xem trước** để xem trước an toàn với `--dry-run`
433
- - **Không phá hoại** - chỉ thêm attributes thiếu
434
- - **Ngăn chặn trùng lặp** - không thêm attributes đã có
435
- - **Xử lý lỗi** - tiếp tục xử lý khi có lỗi file riêng lẻ
436
-
437
- ## 🔧 Quản lý Package
438
-
439
- ### Gỡ cài đặt và Cài đặt lại
440
-
441
- Nếu bạn gặp vấn đề hoặc muốn cập nhật lên phiên bản mới nhất:
213
+ ```javascript
214
+ const { AccessibilityFixer, EnhancedAltChecker } = require('gbu-accessibility-package');
442
215
 
443
- ```bash
444
- # Gỡ cài đặt package global
445
- npm uninstall -g gbu-accessibility-package
216
+ // Sử dụng AccessibilityFixer với chế độ enhanced
217
+ const fixer = new AccessibilityFixer({
218
+ language: 'vi',
219
+ enhancedAltMode: true,
220
+ altCreativity: 'creative',
221
+ includeEmotions: true,
222
+ strictAltChecking: true
223
+ });
446
224
 
447
- # Xóa npm cache
448
- npm cache clean --force
225
+ await fixer.fixEmptyAltAttributes('./src');
449
226
 
450
- # Cài đặt lại phiên bản mới nhất
451
- npm install -g gbu-accessibility-package@latest
227
+ // Sử dụng EnhancedAltChecker riêng biệt
228
+ const checker = new EnhancedAltChecker({
229
+ language: 'vi',
230
+ strictMode: true
231
+ });
452
232
 
453
- # Kiểm tra cài đặt
454
- gbu-a11y --version
455
- gbu-a11y --help
233
+ const issues = checker.analyzeAltAttributes(htmlContent);
234
+ console.log('Tìm thấy vấn đề alt attribute:', issues);
456
235
  ```
457
236
 
458
- ### Quản dự án cục bộ
237
+ ## 🎯 Những được sửa
459
238
 
460
- ```bash
461
- # Xóa khỏi dự án cục bộ
462
- npm uninstall gbu-accessibility-package
239
+ ### Alt Attributes (Chế độ Enhanced)
240
+ - **Alt attributes thiếu** Tạo alt text nhận biết ngữ cảnh
241
+ - **Alt attributes rỗng** → Mô tả thông minh dựa trên nội dung
242
+ - **Alt text generic** → Mô tả cụ thể, có ý nghĩa
243
+ - **Alt text quá dài** → Độ dài tối ưu với thông tin chính
244
+ - **Từ thừa** → Mô tả sạch, ngắn gọn
245
+ - **Trực quan hóa dữ liệu** → Loại biểu đồ + xu hướng + dữ liệu chính
463
246
 
464
- # Xóa package-lock và node_modules
465
- rm -rf node_modules package-lock.json
247
+ ### Accessibility Form
248
+ - **Form labels thiếu** → Tạo aria-label thông minh
249
+ - **Input không có label** → Gợi ý label dựa trên ngữ cảnh
250
+ - **Cấu trúc form** → Liên kết label phù hợp
466
251
 
467
- # Cài đặt lại dependencies
468
- npm install
252
+ ### Phần tử tương tác
253
+ - **Button rỗng** → Tên button dựa trên hành động
254
+ - **Text link generic** → Mục đích link mô tả
255
+ - **Tên button thiếu** → Mô tả dựa trên chức năng
469
256
 
470
- # Thêm phiên bản mới nhất
471
- npm install gbu-accessibility-package@latest
472
- ```
257
+ ### Cấu trúc tài liệu
258
+ - **Lang attributes thiếu** → Phát hiện ngôn ngữ tự động
259
+ - **Landmark thiếu** → Main và navigation landmarks
260
+ - **Cấu trúc heading** → Phân tích và khuyến nghị
261
+ - **Role attributes** → Gán role tuân thủ WCAG
473
262
 
474
- ### Xóa file Backup
263
+ ## 🧪 Kiểm tra và Demo
475
264
 
476
265
  ```bash
477
- # Xóa tất cả file backup trong thư mục hiện tại
478
- find . -name "*.backup" -type f -delete
266
+ # Kiểm tra package
267
+ npm test
479
268
 
480
- # Xóa file backup trong thư mục cụ thể
481
- find ./src -name "*.backup" -type f -delete
482
-
483
- # Sử dụng npm script (nếu đã cấu hình)
484
- npm run cleanup-backups
485
- ```
486
-
487
- ### Khắc phục sự cố cài đặt
488
-
489
- ```bash
490
- # Kiểm tra cấu hình npm
491
- npm config list
269
+ # Demo tính năng bản
270
+ npm run demo
492
271
 
493
- # Reset npm registry (nếu cần)
494
- npm config set registry https://registry.npmjs.org/
272
+ # Demo tính năng enhanced alt
273
+ npm run demo-enhanced
495
274
 
496
- # Kiểm tra global packages
497
- npm list -g --depth=0
275
+ # Demo tạo alt sáng tạo
276
+ npm run demo-creative
498
277
 
499
- # Sửa quyền (macOS/Linux)
500
- sudo chown -R $(whoami) ~/.npm
501
- sudo chown -R $(whoami) /usr/local/lib/node_modules
502
-
503
- # Thay thế: Sử dụng npx mà không cài global
504
- npx gbu-accessibility-package --help
278
+ # Kiểm tra tính năng enhanced alt
279
+ npm run test-enhanced-alt
505
280
  ```
506
281
 
507
- ### Quản phiên bản
508
-
509
- ```bash
510
- # Kiểm tra phiên bản hiện tại
511
- gbu-a11y --version
282
+ ## 📊 Hiệu suất
512
283
 
513
- # Kiểm tra các phiên bản sẵn
514
- npm view gbu-accessibility-package versions --json
284
+ - **Chế độ bản**: Xử lý nhanh, phù hợp cho dự án lớn
285
+ - **Chế độ Enhanced**: ~20-30% chậm hơn nhưng cải thiện 85-90% chất lượng alt text
286
+ - **Sử dụng bộ nhớ**: +15-20% cho từ vựng enhanced và phân tích
287
+ - **Độ chính xác**: 95%+ phát hiện vấn đề accessibility
515
288
 
516
- # Cài đặt phiên bản cụ thể
517
- npm install -g gbu-accessibility-package@2.0.0
289
+ ## 🌐 Hỗ trợ ngôn ngữ
518
290
 
519
- # Cập nhật lên mới nhất
520
- npm update -g gbu-accessibility-package
521
- ```
291
+ - **Tiếng Nhật (ja)**: Ngôn ngữ mặc định với từ vựng phong phú
292
+ - **Tiếng Anh (en)**: Hỗ trợ tiếng Anh toàn diện
293
+ - **Tiếng Việt (vi)**: Hỗ trợ tiếng Việt
522
294
 
523
- ## 🛠️ Cấu hình
524
-
525
- ### Package.json Scripts
526
-
527
- ```json
528
- {
529
- "scripts": {
530
- "a11y:fix": "gbu-a11y",
531
- "a11y:check": "gbu-a11y --dry-run",
532
- "a11y:comprehensive": "gbu-a11y --comprehensive",
533
- "a11y:forms": "gbu-a11y --forms-only",
534
- "a11y:buttons": "gbu-a11y --buttons-only",
535
- "a11y:links": "gbu-a11y --links-only",
536
- "a11y:landmarks": "gbu-a11y --landmarks-only",
537
- "a11y:headings": "gbu-a11y --headings-only",
538
- "a11y:cleanup": "gbu-a11y --cleanup-only",
539
- "cleanup-backups": "find . -name '*.backup' -type f -delete"
540
- }
541
- }
542
- ```
295
+ Tính năng enhanced alt bao gồm từ vựng và quy tắc ngữ pháp theo ngôn ngữ cụ thể cho mô tả tự nhiên, phù hợp ngữ cảnh.
543
296
 
544
- ### Tích hợp CI/CD
297
+ ## 📚 Tài liệu
545
298
 
546
- ```yaml
547
- # dụ GitHub Actions
548
- - name: Check Accessibility
549
- run: npx gbu-accessibility-package --dry-run
550
-
551
- - name: Fix Accessibility Issues
552
- run: npx gbu-accessibility-package --comprehensive
553
- ```
299
+ - [Hướng dẫn Enhanced Alt Features](./ENHANCED_ALT_FEATURES.md) - Tài liệu chi tiết cho tính năng enhanced alt attribute
300
+ - [Hướng dẫn bắt đầu nhanh](./QUICK_START.md) - Bắt đầu nhanh chóng
301
+ - [Tóm tắt Package](./PACKAGE_SUMMARY.md) - Tổng quan tất cả tính năng
302
+ - [Changelog](./CHANGELOG.md) - Lịch sử phiên bản và cập nhật
554
303
 
555
304
  ## 🤝 Đóng góp
556
305
 
557
- 1. Fork repository
558
- 2. Tạo feature branch (`git checkout -b feature/amazing-feature`)
559
- 3. Commit thay đổi (`git commit -m 'Add amazing feature'`)
560
- 4. Push lên branch (`git push origin feature/amazing-feature`)
561
- 5. Mở Pull Request
562
-
563
- ## 📝 Giấy phép
564
-
565
- Dự án này được cấp phép theo Giấy phép MIT - xem file [LICENSE](LICENSE) để biết chi tiết.
566
-
567
- ## 🔧 Khắc phục sự cố
306
+ Chúng tôi hoan nghênh đóng góp! Vui lòng tạo Pull Request. Đối với thay đổi lớn, vui lòng mở issue trước để thảo luận về những gì bạn muốn thay đổi.
568
307
 
569
- ### Các vấn đề thường gặp và giải pháp
570
-
571
- #### Package không tìm thấy hoặc lệnh không hoạt động
572
-
573
- ```bash
574
- # Kiểm tra package đã cài global chưa
575
- npm list -g gbu-accessibility-package
576
-
577
- # Nếu không tìm thấy, cài đặt global
578
- npm install -g gbu-accessibility-package
579
-
580
- # Kiểm tra PATH có chứa npm global bin không
581
- echo $PATH | grep npm
582
-
583
- # Thêm npm global bin vào PATH (nếu cần)
584
- export PATH=$PATH:$(npm config get prefix)/bin
585
- ```
586
-
587
- #### Lỗi quyền truy cập
308
+ ### Thiết lập phát triển
588
309
 
589
310
  ```bash
590
- # macOS/Linux: Sửa quyền npm
591
- sudo chown -R $(whoami) ~/.npm
592
- sudo chown -R $(whoami) $(npm config get prefix)
593
-
594
- # Thay thế: Sử dụng npx
595
- npx gbu-accessibility-package --help
596
-
597
- # Windows: Chạy với quyền Administrator hoặc dùng npx
598
- ```
599
-
600
- #### Package không hoạt động sau khi cập nhật
601
-
602
- ```bash
603
- # Cài đặt lại hoàn toàn
604
- npm uninstall -g gbu-accessibility-package
605
- npm cache clean --force
606
- npm install -g gbu-accessibility-package@latest
607
-
608
- # Kiểm tra cài đặt
609
- gbu-a11y --version
610
- which gbu-a11y
611
- ```
612
-
613
- #### File không được xử lý
614
-
615
- ```bash
616
- # Kiểm tra phần mở rộng file (chỉ hỗ trợ .html)
617
- ls -la *.html
618
-
619
- # Kiểm tra quyền file
620
- ls -la your-file.html
621
-
622
- # Chạy với output chi tiết
623
- gbu-a11y --dry-run your-file.html
624
- ```
625
-
626
- #### File backup tích tụ quá nhiều
627
-
628
- ```bash
629
- # Xóa tất cả file backup
630
- find . -name "*.backup" -type f -delete
631
-
632
- # Ngăn tạo backup
633
- gbu-a11y --no-backup
634
-
635
- # Cấu hình script cleanup
636
- echo 'alias cleanup-backups="find . -name \"*.backup\" -type f -delete"' >> ~/.bashrc
637
- ```
638
-
639
- #### Vấn đề hiệu suất
640
-
641
- ```bash
642
- # Sử dụng --no-backup để xử lý nhanh hơn
643
- gbu-a11y --no-backup
644
-
645
- # Xử lý thư mục cụ thể thay vì toàn bộ dự án
646
- gbu-a11y ./src
647
-
648
- # Sử dụng individual modes cho sửa chữa có mục tiêu
649
- gbu-a11y --alt-only ./images
650
- ```
651
-
652
- #### Vấn đề phiên bản Node.js
653
-
654
- ```bash
655
- # Kiểm tra phiên bản Node.js (yêu cầu >=12.0.0)
656
- node --version
657
-
658
- # Cập nhật Node.js nếu cần
659
- # Truy cập: https://nodejs.org/
660
-
661
- # Sử dụng nvm để quản lý phiên bản Node.js
662
- nvm install 18
663
- 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
664
315
  ```
665
316
 
666
- ### Nhận trợ giúp
667
-
668
- Nếu bạn vẫn gặp vấn đề:
317
+ ## 📄 Giấy phép
669
318
 
670
- 1. **Kiểm tra phiên bản**: `gbu-a11y --version`
671
- 2. **Thử dry run trước**: `gbu-a11y --dry-run`
672
- 3. **Kiểm tra quyền file**: `ls -la your-files.html`
673
- 4. **Xóa cache và cài lại**: Xem phần quản lý package ở trên
674
- 5. **Sử dụng npx thay thế**: `npx gbu-accessibility-package --help`
675
-
676
- ## 🆘 Hỗ trợ
677
-
678
- - 📧 **Issues**: [GitHub Issues](https://github.com/dangpv94/gbu-accessibility-tool/issues)
679
- - 📖 **Tài liệu**: [GitHub Wiki](https://github.com/dangpv94/gbu-accessibility-tool/wiki)
680
- - 💬 **Thảo luận**: [GitHub Discussions](https://github.com/dangpv94/gbu-accessibility-tool/discussions)
681
-
682
- ## 🏆 Tại sao chọn GBU Accessibility Package?
683
-
684
- - ✅ **Không cần cấu hình** - Hoạt động ngay lập tức
685
- - ✅ **Thông minh & nhận biết ngữ cảnh** - Không chỉ sửa chung chung
686
- - ✅ **An toàn & đáng tin cậy** - Backup tự động và xem trước
687
- - ✅ **Toàn diện** - Bao gồm tất cả vấn đề accessibility chính
688
- - ✅ **Nhanh & hiệu quả** - Xử lý hàng loạt với báo cáo chi tiết
689
- - ✅ **Tuân thủ WCAG** - Theo tiêu chuẩn accessibility
690
- - ✅ **Hỗ trợ axe DevTools** - Sửa các lỗi phổ biến từ axe
691
- - ✅ **Phân tích heading an toàn** - Đề xuất thay vì tự động sửa
692
- - ✅ **Hỗ trợ đa ngôn ngữ** - Tiếng Nhật, tiếng Anh và có thể mở rộng
693
-
694
- ## 📋 Danh sách kiểm tra Accessibility
695
-
696
- Package này giải quyết các vấn đề accessibility phổ biến từ axe DevTools:
697
-
698
- ### ✅ Đã hỗ trợ
699
-
700
- - `image-alt` - Images must have alternate text
701
- - `html-has-lang` - HTML element must have lang attribute
702
- - `label` - Form elements must have labels (cơ bản)
703
- - `button-name` - Buttons must have discernible text
704
- - `link-name` - Links must have discernible text (cơ bản)
705
- - `landmark-one-main` - Document should have one main landmark
706
- - `region` - Page content should be contained by landmarks
707
- - `heading-order` - Heading levels analysis (chỉ phân tích)
708
- - Duplicate role attributes cleanup
319
+ Dự án này được cấp phép theo Giấy phép MIT - xem file [LICENSE](LICENSE) để biết chi tiết.
709
320
 
710
- ### 🔄 Đang phát triển
321
+ ## 🙏 Ghi nhận
711
322
 
712
- - `color-contrast` - Color contrast checking
713
- - `focus-order-semantics` - Focus order validation
714
- - `aria-*` attributes validation
715
- - Table accessibility features
716
- - List structure validation
323
+ - Được xây dựng với các thực hành accessibility tốt nhất
324
+ - Tuân theo hướng dẫn WCAG
325
+ - Được truyền cảm hứng từ nhu cầu cải thiện accessibility tự động
326
+ - Phản hồi và đóng góp từ cộng đồng
717
327
 
718
328
  ---
719
329
 
720
- Được tạo với ❤️ bởi GBU Team
330
+ **Được tạo với ❤️ bởi GBU Team**
331
+
332
+ Để biết thêm thông tin, hãy truy cập [GitHub repository](https://github.com/dangpv94/gbu-accessibility-tool) của chúng tôi.