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-vi.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# GBU Accessibility Package
|
|
2
2
|
|
|
3
|
-
🚀 **
|
|
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
|
[](https://www.npmjs.com/package/gbu-accessibility-package)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
@@ -8,40 +8,57 @@
|
|
|
8
8
|
|
|
9
9
|
## ✨ Tính năng
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
### 🎯 **Sửa lỗi Accessibility cơ 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
|
|
16
|
-
- 🔘 **Button Names** - Sửa
|
|
17
|
-
- 🔗 **Link Names** - Sửa
|
|
18
|
-
- 🏛️ **Landmarks** - Thêm main và navigation landmarks
|
|
19
|
-
- 📑 **Phân tích
|
|
20
|
-
-
|
|
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 có 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ế độ
|
|
24
|
-
- 📊 **Báo cáo chi tiết** - Tóm tắt sửa
|
|
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
|
|
48
|
+
# Cài đặt global (khuyến nghị)
|
|
32
49
|
npm install -g gbu-accessibility-package
|
|
33
50
|
|
|
34
|
-
# Cài đặt
|
|
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
|
-
|
|
68
|
-
|
|
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
|
-
-
|
|
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
|
|
127
|
+
# Sửa lỗi toàn diện cơ 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ẻ
|
|
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-
|
|
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
|
-
#
|
|
102
|
-
gbu-a11y --alt
|
|
103
|
-
gbu-a11y --
|
|
104
|
-
|
|
105
|
-
#
|
|
106
|
-
gbu-a11y --
|
|
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 cơ bản
|
|
144
|
+
gbu-a11y --enhanced-alt --alt-creativity creative # Mô 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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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
|
-
##
|
|
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
|
-
###
|
|
156
|
+
### Mức độ sáng tạo
|
|
330
157
|
|
|
331
|
-
|
|
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
|
-
|
|
160
|
+
- Mô 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
|
-
|
|
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
|
-
|
|
166
|
+
#### Balanced (Cân bằng - Mặc định)
|
|
348
167
|
|
|
349
|
-
|
|
168
|
+
- Mô 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
|
-
|
|
356
|
-
✅ Fixed lang attributes in 5 files
|
|
174
|
+
#### Creative (Sáng tạo)
|
|
357
175
|
|
|
358
|
-
|
|
359
|
-
|
|
176
|
+
- Mô 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
|
-
|
|
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
|
-
|
|
365
|
-
✅ Fixed form labels in 6 files (15 issues)
|
|
182
|
+
### Phân loại loại hình ảnh
|
|
366
183
|
|
|
367
|
-
|
|
368
|
-
|
|
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**: Mô tả theo hành động của chúng (ví 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
|
-
|
|
371
|
-
✅ Fixed link names in 7 files (12 issues)
|
|
191
|
+
### Kiểm tra chất lượng
|
|
372
192
|
|
|
373
|
-
|
|
374
|
-
|
|
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
|
-
|
|
377
|
-
✅ Analyzed headings in 10 files (18 suggestions)
|
|
197
|
+
## 📋 Sử dụng lập trình
|
|
378
198
|
|
|
379
|
-
|
|
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 cơ bản
|
|
394
200
|
|
|
395
|
-
|
|
396
|
-
|
|
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
|
-
|
|
204
|
+
const fixer = new AccessibilityFixer({
|
|
205
|
+
language: "vi",
|
|
206
|
+
backupFiles: true,
|
|
207
|
+
dryRun: false,
|
|
208
|
+
});
|
|
402
209
|
|
|
403
|
-
|
|
404
|
-
|
|
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
|
-
|
|
407
|
-
|
|
408
|
-
|
|
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
|
-
|
|
412
|
-
|
|
413
|
-
### Tùy chọn Backup
|
|
221
|
+
### Chế độ Enhanced Alt Attribute (Tích hợp sẵn)
|
|
414
222
|
|
|
415
|
-
|
|
416
|
-
|
|
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
|
-
|
|
420
|
-
|
|
421
|
-
|
|
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
|
-
|
|
424
|
-
gbu-a11y --backup --comprehensive
|
|
235
|
+
await fixer.fixEmptyAltAttributes("./src");
|
|
425
236
|
|
|
426
|
-
|
|
427
|
-
|
|
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
|
-
|
|
243
|
+
## 🎯 Những gì được sửa
|
|
431
244
|
|
|
432
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
254
|
+
### Accessibility Form
|
|
440
255
|
|
|
441
|
-
|
|
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
|
-
|
|
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
|
-
|
|
448
|
-
|
|
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
|
-
|
|
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
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
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
|
-
|
|
481
|
-
find ./src -name "*.backup" -type f -delete
|
|
273
|
+
### Kiểm tra liên kết
|
|
482
274
|
|
|
483
|
-
|
|
484
|
-
|
|
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
|
-
|
|
280
|
+
## 🧪 Kiểm tra và Demo
|
|
488
281
|
|
|
489
282
|
```bash
|
|
490
|
-
# Kiểm tra
|
|
491
|
-
npm
|
|
283
|
+
# Kiểm tra package
|
|
284
|
+
npm test
|
|
492
285
|
|
|
493
|
-
#
|
|
494
|
-
npm
|
|
286
|
+
# Demo tính năng cơ bản
|
|
287
|
+
npm run demo
|
|
495
288
|
|
|
496
|
-
#
|
|
497
|
-
npm
|
|
289
|
+
# Demo tính năng enhanced alt
|
|
290
|
+
npm run demo-enhanced
|
|
498
291
|
|
|
499
|
-
#
|
|
500
|
-
|
|
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
|
-
#
|
|
504
|
-
|
|
295
|
+
# Kiểm tra tính năng enhanced alt
|
|
296
|
+
npm run test-enhanced-alt
|
|
505
297
|
```
|
|
506
298
|
|
|
507
|
-
|
|
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
|
-
|
|
514
|
-
|
|
301
|
+
- **Chế độ cơ 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
|
-
|
|
517
|
-
npm install -g gbu-accessibility-package@2.0.0
|
|
306
|
+
## 🌐 Hỗ trợ ngôn ngữ
|
|
518
307
|
|
|
519
|
-
|
|
520
|
-
|
|
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
|
-
|
|
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
|
-
|
|
314
|
+
## 📚 Tài liệu
|
|
545
315
|
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
-
|
|
549
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
643
|
-
gbu-
|
|
644
|
-
|
|
645
|
-
|
|
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
|
-
|
|
667
|
-
|
|
668
|
-
Nếu bạn vẫn gặp vấn đề:
|
|
334
|
+
## 📄 Giấy phép
|
|
669
335
|
|
|
670
|
-
|
|
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
|
-
|
|
338
|
+
## 🙏 Ghi nhận
|
|
711
339
|
|
|
712
|
-
-
|
|
713
|
-
-
|
|
714
|
-
-
|
|
715
|
-
-
|
|
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
|
-
|
|
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.
|