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/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,57 @@
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
+
13
+ - 🖼️ **Tạo Alt Text thông minh** - Alt attributes nhận biết ngữ cảnh cho hình ảnh
14
+ - 🏷️ **Hỗ trợ Aria Label** - Tự động tạo aria-label phù hợp với alt text
13
15
  - 🌐 **HTML Lang Attributes** - Tự động sửa thuộc tính ngôn ngữ
14
16
  - 🎭 **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
17
+ - 📋 **Form Labels** - Sửa labels thiếu với tạo aria-label thông minh
18
+ - 🔘 **Button Names** - Sửa buttons rỗng và input buttons không tên
19
+ - 🔗 **Link Names** - Sửa links rỗng và phát hiện text generic
20
+ - 🏛️ **Landmarks** - Thêm main và navigation landmarks thiếu
21
+ - 📑 **Phân tích Heading** - Phân tích cấu trúc heading với gợi ý (không tự động sửa)
22
+ - 🔍 **Broken Links Detection** - Phát hiện liên kết bị hỏng và tài nguyên 404
23
+ - 🧹 **Dọn dẹp Duplicate** - Loại bỏ role attributes trùng lặp
24
+
25
+ ### 🚀 **Tính năng Enhanced Alt Attribute (Đã tích hợp!)**
26
+
27
+ - 🔍 **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 tích hợp sẵn
28
+ - 🎨 **Tạo Alt đa dạng** - Nhiều chiến lược cho alt text sáng tạo được tích hợp trong core
29
+ - 🌐 **Hỗ trợ đa ngôn ngữ** - Từ vựng tiếng Nhật, Anh, Việt tích hợp sẵn
30
+ - 🎭 **Mức độ sáng tạo** - Chế độ Conservative, Balanced, Creative
31
+ - 🧠 **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
32
+ - 📊 **Trực quan hóa dữ liệu** - Mô tả chuyên biệt cho biểu đồ và đồ thị
33
+ - 🧹 **Kiến trúc gọn gàng** - Tất cả tính năng enhanced được tích hợp trong một file duy nhất
34
+
35
+ ### 🛠️ **Tính năng tiện ích**
36
+
21
37
  - 📁 **Xử lý hàng loạt** - Xử lý toàn bộ thư mục đệ quy
22
38
  - 💾 **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
39
+ - 🔍 **Chế độ Dry Run** - Xem trước thay đổi trước khi áp dụng
40
+ - 📊 **Báo cáo chi tiết** - Tóm tắt sửa lỗi toàn diện
41
+ - ⚡ **Chế độ sửa riêng lẻ** - Nhắm mục tiêu các vấn đề accessibility cụ thể
25
42
 
26
43
  ## 🚀 Bắt đầu nhanh
27
44
 
28
45
  ### Cài đặt
29
46
 
30
47
  ```bash
31
- # Cài đặt toàn cục (khuyến nghị)
48
+ # Cài đặt global (khuyến nghị)
32
49
  npm install -g gbu-accessibility-package
33
50
 
34
- # Cài đặt cục bộ
51
+ # Cài đặt local
35
52
  npm install gbu-accessibility-package
36
53
  ```
37
54
 
38
55
  ### Sử dụng cơ bản
39
56
 
40
57
  ```bash
41
- # Sửa toàn diện (mặc định)
58
+ # Sửa toàn diện (chế độ mặc định)
42
59
  gbu-a11y
43
60
 
44
- # Xem trước thay đổi
61
+ # Xem trước thay đổi (dry run)
45
62
  gbu-a11y --dry-run
46
63
 
47
64
  # Sửa thư mục cụ thể
@@ -51,6 +68,22 @@ gbu-a11y ./src
51
68
  gbu-a11y index.html
52
69
  ```
53
70
 
71
+ ### Chế độ Enhanced Alt Attribute
72
+
73
+ ```bash
74
+ # Bật phân tích enhanced alt attribute
75
+ gbu-a11y --enhanced-alt
76
+
77
+ # Tạo alt text sáng tạo với cảm xúc
78
+ gbu-a11y --enhanced-alt --alt-creativity creative --include-emotions
79
+
80
+ # Kiểm tra chất lượng nghiêm ngặt
81
+ gbu-a11y --enhanced-alt --strict-alt
82
+
83
+ # Tiếng Anh với chế độ sáng tạo
84
+ gbu-a11y -l en --enhanced-alt --alt-creativity creative
85
+ ```
86
+
54
87
  ## 📖 Hướng dẫn chi tiết
55
88
 
56
89
  ### Tùy chọn dòng lệnh
@@ -58,14 +91,15 @@ gbu-a11y index.html
58
91
  ```bash
59
92
  gbu-a11y [options] [directory/file]
60
93
 
61
- Tùy chọn:
94
+ Tùy chọn cơ bản:
62
95
  -d, --directory <path> Thư mục đích (mặc định: thư mục hiện tại)
63
96
  -l, --language <lang> Ngôn ngữ cho thuộc tính lang (mặc định: ja)
64
97
  --backup Tạo file backup
65
98
  --no-backup Không tạo file backup (mặc định)
66
99
  --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
100
+
101
+ Chế độ sửa lỗi:
102
+ --comprehensive, --all Chạy sửa lỗi toàn diện (mặc định)
69
103
  --alt-only Sửa alt attributes + dọn dẹp
70
104
  --lang-only Sửa HTML lang attributes + dọn dẹp
71
105
  --role-only Sửa role attributes + dọn dẹp
@@ -74,13 +108,23 @@ Tùy chọn:
74
108
  --links-only Sửa link names + dọn dẹp
75
109
  --landmarks-only Sửa landmarks + dọn dẹp
76
110
  --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
111
+ --links-check Kiểm tra liên kết bị hỏng và tài nguyên 404
112
+ --cleanup-only Chỉ dọn dẹp role attributes trùng lặp
113
+
114
+ Tùy chọn Enhanced Alt:
115
+ --enhanced-alt Sử dụng phân tích và tạo enhanced alt attribute
116
+ --alt-creativity <mode> Mức sáng tạo alt text: conservative, balanced, creative
117
+ --include-emotions Bao gồm mô tả cảm xúc trong alt text
118
+ --strict-alt Bật kiểm tra chất lượng alt nghiêm ngặt
119
+
120
+ Trợ giúp:
121
+ -h, --help Hiển thị thông điệp trợ giúp
78
122
  ```
79
123
 
80
124
  ### Ví dụ
81
125
 
82
126
  ```bash
83
- # Sửa toàn diện (mặc định - bao gồm dọn dẹp)
127
+ # Sửa lỗi toàn diện bản
84
128
  gbu-a11y
85
129
 
86
130
  # Xem trước tất cả thay đổi
@@ -89,632 +133,217 @@ gbu-a11y --dry-run
89
133
  # Sửa với ngôn ngữ tiếng Anh
90
134
  gbu-a11y -l en ./public
91
135
 
92
- # Các loại sửa riêng lẻ (tất cả đều bao gồm dọn dẹp)
136
+ # Các loại sửa lỗi riêng lẻ
93
137
  gbu-a11y --alt-only # Sửa alt attributes + dọn dẹp
94
138
  gbu-a11y --forms-only # Sửa form labels + dọn dẹp
95
139
  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
140
+ gbu-a11y --links-check # Kiểm tra liên kết bị hỏng + dọn dẹp
100
141
 
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
- ```
142
+ # Tính năng enhanced alt attribute
143
+ gbu-a11y --enhanced-alt # Chế độ enhanced bản
144
+ gbu-a11y --enhanced-alt --alt-creativity creative # tả sáng tạo
145
+ gbu-a11y --enhanced-alt --include-emotions # Bao gồm ngữ cảnh cảm xúc
146
+ gbu-a11y --enhanced-alt --strict-alt # Kiểm tra chất lượng nghiêm ngặt
147
+ gbu-a11y -l en --enhanced-alt --alt-creativity creative # Chế độ sáng tạo tiếng Anh
109
148
 
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
-
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" />
149
+ # Kết hợp với các tùy chọn khác
150
+ gbu-a11y --enhanced-alt --backup ./src # Chế độ enhanced với backup
151
+ gbu-a11y --enhanced-alt --dry-run # Xem trước sửa lỗi enhanced
323
152
  ```
324
153
 
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:
154
+ ## 🎨 Tính năng Enhanced Alt Attribute
328
155
 
329
- ### Nguồn ngữ cảnh
156
+ ### Mức độ sáng tạo
330
157
 
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**
158
+ #### Conservative (Bảo thủ)
338
159
 
339
- ### Mẫu dự phòng
160
+ - tả đơn giản, thực tế
161
+ - Tập trung vào chức năng cơ bản
162
+ - Biến thể từ vựng tối thiểu
340
163
 
341
- - `logo.png` "ロゴ" (Logo)
342
- - `icon.svg` → "アイコン" (Icon)
343
- - `banner.jpg` → "バナー" (Banner)
344
- - `chart.png` → "グラフ" (Chart)
345
- - Hình ảnh chung → "画像" (Image)
164
+ **Ví dụ**: `alt="Biểu đồ"`, `alt="Logo"`
346
165
 
347
- ## 📊 dụ đầu ra
166
+ #### Balanced (Cân bằng - Mặc định)
348
167
 
349
- ### Chế độ toàn diện
168
+ - tả nhận biết ngữ cảnh
169
+ - Sáng tạo vừa phải
170
+ - Cân bằng giữa đơn giản và chi tiết
350
171
 
351
- ```
352
- 🚀 Starting Accessibility Fixer...
353
- 🎯 Running comprehensive accessibility fixes...
172
+ **Ví dụ**: `alt="Biểu đồ hiệu suất bán hàng"`, `alt="Logo công ty"`
354
173
 
355
- 📝 Step 1: HTML lang attributes...
356
- ✅ Fixed lang attributes in 5 files
174
+ #### Creative (Sáng tạo)
357
175
 
358
- 🖼️ Step 2: Alt attributes...
359
- Fixed alt attributes in 12 files (34 issues)
176
+ - tả phong phú, chi tiết
177
+ - Tích hợp ngữ cảnh cảm xúc
178
+ - Nhận biết thương hiệu và ngữ cảnh cao
360
179
 
361
- 🎭 Step 3: Role attributes...
362
- ✅ Fixed role attributes in 8 files (67 issues)
180
+ **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ố"`
363
181
 
364
- 📋 Step 4: Form labels...
365
- ✅ Fixed form labels in 6 files (15 issues)
182
+ ### Phân loại loại hình ảnh
366
183
 
367
- 🔘 Step 5: Button names...
368
- Fixed button names in 4 files (8 issues)
184
+ - **Hình ảnh trang trí**: Tự động phát hiện và đánh dấu với `alt=""`
185
+ - **Icon chức năng**: tả theo hành động của chúng ( dụ: "Mở chat", "Tìm kiếm")
186
+ - **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
187
+ - **Hình ảnh phức tạp**: Alt ngắn + khuyến nghị mô tả chi tiết
188
+ - **Logo**: Bao gồm tên thương hiệu và từ khóa "logo"
189
+ - **Hình ảnh nội dung**: Mô tả nhận biết ngữ cảnh dựa trên nội dung xung quanh
369
190
 
370
- 🔗 Step 6: Link names...
371
- ✅ Fixed link names in 7 files (12 issues)
191
+ ### Kiểm tra chất lượng
372
192
 
373
- 🏛️ Step 7: Landmarks...
374
- Fixed landmarks in 3 files (5 issues)
193
+ - **Mức lỗi**: Alt thiếu, alt rỗng cho nội dung, text generic
194
+ - ⚠️ **Mức cảnh báo**: Quá dài/ngắn, từ thừa, tên file trong alt
195
+ - ℹ️ **Mức thông tin**: Gợi ý tối ưu hóa, kiểm tra tính nhất quán
375
196
 
376
- 📑 Step 8: Heading analysis...
377
- ✅ Analyzed headings in 10 files (18 suggestions)
197
+ ## 📋 Sử dụng lập trình
378
198
 
379
- 🧹 Step 9: Cleanup duplicate roles...
380
- ✅ Cleaned duplicate roles in 2 files
381
-
382
- 🎉 All accessibility fixes completed!
383
- 📊 Final Summary:
384
- Total files scanned: 25
385
- Files fixed: 20
386
- Total issues resolved: 164
387
- ```
388
-
389
- ### Chế độ riêng lẻ
390
-
391
- ```
392
- 🚀 Starting Accessibility Fixer...
393
- 📋 Running form label fixes + cleanup...
199
+ ### Sử dụng bản
394
200
 
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
201
+ ```javascript
202
+ const { AccessibilityFixer } = require("gbu-accessibility-package");
400
203
 
401
- Fixed form labels in 1 files (2 issues)
204
+ const fixer = new AccessibilityFixer({
205
+ language: "vi",
206
+ backupFiles: true,
207
+ dryRun: false,
208
+ });
402
209
 
403
- 🧹 Running cleanup for duplicate role attributes...
404
- Cleaned duplicate roles in 0 files
210
+ // Sửa tất cả vấn đề accessibility
211
+ fixer.fixAllAccessibilityIssues("./src").then((results) => {
212
+ console.log("Hoàn thành sửa lỗi accessibility:", results);
213
+ });
405
214
 
406
- 🎉 Form label fixes + cleanup completed successfully!
407
- 📁 Backup files created with .backup extension
408
- 💡 Use --no-backup to disable backups in future runs
215
+ // Sửa các vấn đề cụ thể
216
+ await fixer.fixEmptyAltAttributes("./src");
217
+ await fixer.fixFormLabels("./src");
218
+ await fixer.fixButtonNames("./src");
409
219
  ```
410
220
 
411
- ## 🔒 Tính năng an toàn
412
-
413
- ### Tùy chọn Backup
221
+ ### Chế độ Enhanced Alt Attribute (Tích hợp sẵn)
414
222
 
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)
223
+ ```javascript
224
+ const { AccessibilityFixer } = require("gbu-accessibility-package");
418
225
 
419
- ```bash
420
- # Chế độ nhanh (mặc định) - không backup
421
- gbu-a11y --comprehensive
226
+ // Sử dụng AccessibilityFixer với chế độ enhanced (tích hợp sẵn)
227
+ const fixer = new AccessibilityFixer({
228
+ language: "vi",
229
+ enhancedAltMode: true,
230
+ altCreativity: "creative",
231
+ includeEmotions: true,
232
+ strictAltChecking: true,
233
+ });
422
234
 
423
- # Chế độ an toàn - tạo backup
424
- gbu-a11y --backup --comprehensive
235
+ await fixer.fixEmptyAltAttributes("./src");
425
236
 
426
- # Chế độ không backup ràng (giống mặc định)
427
- gbu-a11y --no-backup --comprehensive
237
+ // Tất cả tính năng enhanced đã được tích hợp trong AccessibilityFixer
238
+ // Không cần import thêm class riêng biệt
239
+ const results = await fixer.fixAllAccessibilityIssues("./src");
240
+ console.log("Hoàn thành sửa lỗi với enhanced features:", results);
428
241
  ```
429
242
 
430
- ### Các tính năng an toàn khác
243
+ ## 🎯 Những được sửa
431
244
 
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ẻ
245
+ ### Alt Attributes (Chế độ Enhanced)
436
246
 
437
- ## 🔧 Quản Package
247
+ - **Alt attributes thiếu** → Tạo alt text nhận biết ngữ cảnh
248
+ - **Alt attributes rỗng** → Mô tả thông minh dựa trên nội dung
249
+ - **Alt text generic** → Mô tả cụ thể, có ý nghĩa
250
+ - **Alt text quá dài** → Độ dài tối ưu với thông tin chính
251
+ - **Từ thừa** → Mô tả sạch, ngắn gọn
252
+ - **Trực quan hóa dữ liệu** → Loại biểu đồ + xu hướng + dữ liệu chính
438
253
 
439
- ### Gỡ cài đặt và Cài đặt lại
254
+ ### Accessibility Form
440
255
 
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:
256
+ - **Form labels thiếu** Tạo aria-label thông minh
257
+ - **Input không có label** → Gợi ý label dựa trên ngữ cảnh
258
+ - **Cấu trúc form** → Liên kết label phù hợp
442
259
 
443
- ```bash
444
- # Gỡ cài đặt package global
445
- npm uninstall -g gbu-accessibility-package
260
+ ### Phần tử tương tác
446
261
 
447
- # Xóa npm cache
448
- npm cache clean --force
262
+ - **Button rỗng** → Tên button dựa trên hành động
263
+ - **Text link generic** → Mục đích link mô tả
264
+ - **Tên button thiếu** → Mô tả dựa trên chức năng
449
265
 
450
- # Cài đặt lại phiên bản mới nhất
451
- npm install -g gbu-accessibility-package@latest
452
-
453
- # Kiểm tra cài đặt
454
- gbu-a11y --version
455
- gbu-a11y --help
456
- ```
266
+ ### Cấu trúc tài liệu
457
267
 
458
- ### Quản dự án cục bộ
459
-
460
- ```bash
461
- # Xóa khỏi dự án cục bộ
462
- npm uninstall gbu-accessibility-package
463
-
464
- # Xóa package-lock và node_modules
465
- rm -rf node_modules package-lock.json
466
-
467
- # Cài đặt lại dependencies
468
- npm install
469
-
470
- # Thêm phiên bản mới nhất
471
- npm install gbu-accessibility-package@latest
472
- ```
473
-
474
- ### Xóa file Backup
475
-
476
- ```bash
477
- # Xóa tất cả file backup trong thư mục hiện tại
478
- find . -name "*.backup" -type f -delete
268
+ - **Lang attributes thiếu** Phát hiện ngôn ngữ tự động
269
+ - **Landmark thiếu** → Main và navigation landmarks
270
+ - **Cấu trúc heading** → Phân tích và khuyến nghị
271
+ - **Role attributes** Gán role tuân thủ WCAG
479
272
 
480
- # Xóa file backup trong thư mục cụ thể
481
- find ./src -name "*.backup" -type f -delete
273
+ ### Kiểm tra liên kết
482
274
 
483
- # Sử dụng npm script (nếu đã cấu hình)
484
- npm run cleanup-backups
485
- ```
275
+ - **Liên kết bị hỏng** Phát hiện HTTP 404, 500, timeout
276
+ - **Tài nguyên không tồn tại** → Kiểm tra file local thiếu
277
+ - **URL không hợp lệ** → Phát hiện định dạng URL sai
278
+ - **Liên kết chậm** → Cảnh báo timeout và phản hồi chậm
486
279
 
487
- ### Khắc phục sự cố cài đặt
280
+ ## 🧪 Kiểm tra Demo
488
281
 
489
282
  ```bash
490
- # Kiểm tra cấu hình npm
491
- npm config list
283
+ # Kiểm tra package
284
+ npm test
492
285
 
493
- # Reset npm registry (nếu cần)
494
- npm config set registry https://registry.npmjs.org/
286
+ # Demo tính năng bản
287
+ npm run demo
495
288
 
496
- # Kiểm tra global packages
497
- npm list -g --depth=0
289
+ # Demo tính năng enhanced alt
290
+ npm run demo-enhanced
498
291
 
499
- # Sửa quyền (macOS/Linux)
500
- sudo chown -R $(whoami) ~/.npm
501
- sudo chown -R $(whoami) /usr/local/lib/node_modules
292
+ # Demo tạo alt sáng tạo
293
+ npm run demo-creative
502
294
 
503
- # Thay thế: Sử dụng npx mà không cài global
504
- npx gbu-accessibility-package --help
295
+ # Kiểm tra tính năng enhanced alt
296
+ npm run test-enhanced-alt
505
297
  ```
506
298
 
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
299
+ ## 📊 Hiệu suất
512
300
 
513
- # Kiểm tra các phiên bản sẵn
514
- npm view gbu-accessibility-package versions --json
301
+ - **Chế độ bản**: Xử lý nhanh, phù hợp cho dự án lớn
302
+ - **Chế độ Enhanced**: ~20-30% chậm hơn nhưng cải thiện 85-90% chất lượng alt text
303
+ - **Sử dụng bộ nhớ**: +15-20% cho từ vựng enhanced và phân tích
304
+ - **Độ chính xác**: 95%+ phát hiện vấn đề accessibility
515
305
 
516
- # Cài đặt phiên bản cụ thể
517
- npm install -g gbu-accessibility-package@2.0.0
306
+ ## 🌐 Hỗ trợ ngôn ngữ
518
307
 
519
- # Cập nhật lên mới nhất
520
- npm update -g gbu-accessibility-package
521
- ```
308
+ - **Tiếng Nhật (ja)**: Ngôn ngữ mặc định với từ vựng phong phú
309
+ - **Tiếng Anh (en)**: Hỗ trợ tiếng Anh toàn diện
310
+ - **Tiếng Việt (vi)**: Hỗ trợ tiếng Việt
522
311
 
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
- ```
312
+ 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
313
 
544
- ### Tích hợp CI/CD
314
+ ## 📚 Tài liệu
545
315
 
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
- ```
316
+ - [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
317
+ - [Hướng dẫn bắt đầu nhanh](./QUICK_START.md) - Bắt đầu nhanh chóng
318
+ - [Tóm tắt Package](./PACKAGE_SUMMARY.md) - Tổng quan tất cả tính năng
319
+ - [Changelog](./CHANGELOG.md) - Lịch sử phiên bản và cập nhật
554
320
 
555
321
  ## 🤝 Đóng góp
556
322
 
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ố
568
-
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
323
+ 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.
588
324
 
589
- ```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
325
+ ### Thiết lập phát triển
640
326
 
641
327
  ```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
328
+ git clone https://github.com/dangpv94/gbu-accessibility-tool.git
329
+ cd gbu-accessibility-tool/accessibility-package
330
+ npm install
331
+ npm test
664
332
  ```
665
333
 
666
- ### Nhận trợ giúp
667
-
668
- Nếu bạn vẫn gặp vấn đề:
334
+ ## 📄 Giấy phép
669
335
 
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
336
+ 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
337
 
710
- ### 🔄 Đang phát triển
338
+ ## 🙏 Ghi nhận
711
339
 
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
340
+ - Được xây dựng với các thực hành accessibility tốt nhất
341
+ - Tuân theo hướng dẫn WCAG
342
+ - Được truyền cảm hứng từ nhu cầu cải thiện accessibility tự động
343
+ - Phản hồi và đóng góp từ cộng đồng
717
344
 
718
345
  ---
719
346
 
720
- Được tạo với ❤️ bởi GBU Team
347
+ **Được tạo với ❤️ bởi GBU Team**
348
+
349
+ Để 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.