gbu-accessibility-package 3.12.0 → 3.13.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/CHANGELOG.md +17 -1
- package/QUICK_START.md +14 -157
- package/README-vi.md +104 -672
- package/README.md +105 -652
- package/bin/fix.js +1 -138
- package/cli.js +297 -535
- package/index.js +5 -2
- package/lib/checker.js +233 -0
- package/lib/fixer.js +325 -161
- package/package.json +14 -13
package/README-vi.md
CHANGED
|
@@ -1,732 +1,164 @@
|
|
|
1
1
|
# GBU Accessibility Package
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Bộ công cụ kiểm tra và xuất báo cáo accessibility cho dự án HTML.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
Package hoạt động ở chế độ check-only. Tool không chỉnh sửa hay xóa source code, và được dùng để rà soát accessibility, kiểm tra chất lượng dự án, và xuất báo cáo.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/gbu-accessibility-package)
|
|
8
8
|
[](https://opensource.org/licenses/MIT)
|
|
9
9
|
[](https://nodejs.org/)
|
|
10
10
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
### 🎯 **Sửa lỗi Accessibility cơ bản**
|
|
14
|
-
|
|
15
|
-
- 🖼️ **Tạo Alt Text thông minh** - Alt attributes nhận biết ngữ cảnh cho hình ảnh
|
|
16
|
-
- 🏷️ **Hỗ trợ Aria Label** - Tự động tạo aria-label phù hợp với alt text
|
|
17
|
-
- 🌐 **HTML Lang Attributes** - Tự động sửa thuộc tính ngôn ngữ
|
|
18
|
-
- 🎭 **Role Attributes** - Quản lý role attributes tuân thủ WCAG
|
|
19
|
-
- 🏷️ **Aria Labels** - Tự động tạo aria-label từ alt text và nội dung
|
|
20
|
-
- 📋 **Form Labels** - Sửa labels thiếu với tạo aria-label thông minh
|
|
21
|
-
- 🔘 **Button Names** - Sửa buttons rỗng và input buttons không có tên
|
|
22
|
-
- 🔗 **Link Names** - Sửa links rỗng và phát hiện text generic
|
|
23
|
-
- 🏛️ **Landmarks** - Thêm main và navigation landmarks thiếu
|
|
24
|
-
- 📑 **Phân tích và Sửa Heading** - Phân tích cấu trúc heading với tùy chọn tự động sửa `--auto-fix-headings`
|
|
25
|
-
- 🎯 **Nested Controls Detection** - Phát hiện và sửa các control tương tác lồng nhau
|
|
26
|
-
- 🔍 **Broken Links Detection** - Phát hiện liên kết external bị hỏng
|
|
27
|
-
- 📁 **404 Resources Detection** - Phát hiện tài nguyên local bị thiếu (hình ảnh, CSS, JS, v.v.)
|
|
28
|
-
- 🏷️ **Kiểm tra Google Tag Manager** - Xác thực cài đặt GTM (script + noscript)
|
|
29
|
-
- 🏷️ **Xác thực Meta Tags** - Kiểm tra lỗi chính tả và cú pháp trong meta tags và Open Graph Protocol
|
|
30
|
-
- ✏️ **Tự động sửa Meta Tags** - Tự động sửa lỗi chính tả trong tên property và giá trị content
|
|
31
|
-
- 🗂️ **Unused Files Detection** - Tìm file không được tham chiếu ở đâu trong dự án
|
|
32
|
-
- ☠️ **Dead Code Analysis** - Phát hiện CSS rules và JavaScript functions không sử dụng
|
|
33
|
-
- 📏 **File Size Analysis** - Kiểm tra dung lượng file và đề xuất tối ưu hóa
|
|
34
|
-
- 🧹 **Dọn dẹp Duplicate** - Loại bỏ role attributes trùng lặp
|
|
35
|
-
|
|
36
|
-
### 🚀 **Tính năng Enhanced Alt Attribute (Đã tích hợp!)**
|
|
37
|
-
|
|
38
|
-
- 🔍 **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
|
|
39
|
-
- 🎨 **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
|
|
40
|
-
- 🌐 **Hỗ trợ đa ngôn ngữ** - Từ vựng tiếng Nhật, Anh, Việt tích hợp sẵn
|
|
41
|
-
- 🎭 **Mức độ sáng tạo** - Chế độ Conservative, Balanced, Creative
|
|
42
|
-
- 🧠 **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
|
|
43
|
-
- 📊 **Trực quan hóa dữ liệu** - Mô tả chuyên biệt cho biểu đồ và đồ thị
|
|
44
|
-
- 🧹 **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
|
|
45
|
-
|
|
46
|
-
### 🛠️ **Tính năng tiện ích**
|
|
47
|
-
|
|
48
|
-
- 📁 **Xử lý hàng loạt** - Xử lý toàn bộ thư mục đệ quy
|
|
49
|
-
- 💾 **Backup tùy chọn** - Tạo file backup khi cần với flag --backup
|
|
50
|
-
- 🔍 **Chế độ Dry Run** - Xem trước thay đổi trước khi áp dụng
|
|
51
|
-
- 📊 **Báo cáo chi tiết** - Tóm tắt sửa lỗi toàn diện
|
|
52
|
-
- ⚡ **Chế độ sửa riêng lẻ** - Nhắm mục tiêu các vấn đề accessibility cụ thể
|
|
53
|
-
|
|
54
|
-
## 🚀 Bắt đầu nhanh
|
|
55
|
-
|
|
56
|
-
### Cài đặt
|
|
11
|
+
## Tool Làm Được Gì
|
|
57
12
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
13
|
+
- Kiểm tra `lang`, `alt`, `role`, `aria-label`, form, button, link, landmark, nested controls, heading, và description list
|
|
14
|
+
- Kiểm tra broken external links và missing local resources
|
|
15
|
+
- Kiểm tra meta tags, Google Tag Manager, dead code, unused files, và file lớn
|
|
16
|
+
- Xuất danh sách unused files và báo cáo Excel tổng hợp
|
|
17
|
+
- Hỗ trợ enhanced alt analysis với rule chặt hơn và suggestion tốt hơn
|
|
61
18
|
|
|
62
|
-
|
|
63
|
-
npm install gbu-accessibility-package
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### Gỡ cài đặt và Cài đặt lại
|
|
19
|
+
## Cài Đặt
|
|
67
20
|
|
|
68
21
|
```bash
|
|
69
|
-
|
|
70
|
-
npm uninstall -g gbu-accessibility-package
|
|
71
|
-
|
|
72
|
-
# Gỡ cài đặt package local
|
|
73
|
-
npm uninstall gbu-accessibility-package
|
|
74
|
-
|
|
75
|
-
# Xóa cache npm (khuyến nghị khi có vấn đề)
|
|
76
|
-
npm cache clean --force
|
|
77
|
-
|
|
78
|
-
# Cài đặt lại phiên bản mới nhất
|
|
79
|
-
npm install -g gbu-accessibility-package@latest
|
|
80
|
-
|
|
81
|
-
# Kiểm tra phiên bản đã cài đặt
|
|
82
|
-
npm list -g gbu-accessibility-package
|
|
83
|
-
gbu-a11y --version
|
|
84
|
-
|
|
85
|
-
# Cài đặt phiên bản cụ thể
|
|
86
|
-
npm install -g gbu-accessibility-package@3.2.1
|
|
22
|
+
npm install -g gbu-accessibility-package
|
|
87
23
|
```
|
|
88
24
|
|
|
89
|
-
|
|
25
|
+
Hoặc cài local:
|
|
90
26
|
|
|
91
27
|
```bash
|
|
92
|
-
|
|
93
|
-
sudo npm install -g gbu-accessibility-package
|
|
94
|
-
|
|
95
|
-
# Nếu gặp lỗi cache
|
|
96
|
-
npm cache clean --force
|
|
97
|
-
npm install -g gbu-accessibility-package --force
|
|
98
|
-
|
|
99
|
-
# Kiểm tra cài đặt
|
|
100
|
-
which gbu-a11y
|
|
101
|
-
gbu-a11y --help
|
|
102
|
-
|
|
103
|
-
# Cập nhật lên phiên bản mới nhất
|
|
104
|
-
npm update -g gbu-accessibility-package
|
|
28
|
+
npm install gbu-accessibility-package
|
|
105
29
|
```
|
|
106
30
|
|
|
107
|
-
|
|
31
|
+
## Bắt Đầu Nhanh
|
|
108
32
|
|
|
109
33
|
```bash
|
|
110
|
-
#
|
|
34
|
+
# Kiểm tra toàn diện mặc định
|
|
111
35
|
gbu-a11y
|
|
112
36
|
|
|
113
|
-
#
|
|
114
|
-
gbu-a11y --dry-run
|
|
115
|
-
|
|
116
|
-
# Sửa thư mục cụ thể
|
|
37
|
+
# Kiểm tra thư mục cụ thể
|
|
117
38
|
gbu-a11y ./src
|
|
118
39
|
|
|
119
|
-
#
|
|
120
|
-
gbu-a11y
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
### Chế độ Enhanced Alt Attribute
|
|
124
|
-
|
|
125
|
-
```bash
|
|
126
|
-
# Bật phân tích enhanced alt attribute
|
|
127
|
-
gbu-a11y --enhanced-alt
|
|
40
|
+
# Chỉ kiểm tra alt text
|
|
41
|
+
gbu-a11y --alt-only ./src
|
|
128
42
|
|
|
129
|
-
#
|
|
130
|
-
gbu-a11y --
|
|
43
|
+
# Kiểm tra broken links và missing resources
|
|
44
|
+
gbu-a11y --links-check ./public
|
|
131
45
|
|
|
132
|
-
#
|
|
133
|
-
gbu-a11y --
|
|
134
|
-
|
|
135
|
-
# Tiếng Anh với chế độ sáng tạo
|
|
136
|
-
gbu-a11y -l en --enhanced-alt --alt-creativity creative
|
|
46
|
+
# Xuất báo cáo Excel
|
|
47
|
+
gbu-a11y --full-report -o reports/accessibility-report.xlsx
|
|
137
48
|
```
|
|
138
49
|
|
|
139
|
-
##
|
|
140
|
-
|
|
141
|
-
### Tùy chọn dòng lệnh
|
|
50
|
+
## CLI
|
|
142
51
|
|
|
143
52
|
```bash
|
|
144
|
-
gbu-a11y [options] [directory
|
|
53
|
+
gbu-a11y [options] [directory]
|
|
54
|
+
```
|
|
145
55
|
|
|
146
56
|
Tùy chọn cơ bản:
|
|
147
|
-
-d, --directory <path> Thư mục đích (mặc định: thư mục hiện tại)
|
|
148
|
-
-l, --language <lang> Ngôn ngữ cho thuộc tính lang (mặc định: ja)
|
|
149
|
-
--backup Tạo file backup
|
|
150
|
-
--no-backup Không tạo file backup (mặc định)
|
|
151
|
-
--dry-run Xem trước thay đổi mà không áp dụng
|
|
152
|
-
|
|
153
|
-
Chế độ sửa lỗi:
|
|
154
|
-
--comprehensive, --all Chạy sửa lỗi toàn diện (mặc định)
|
|
155
|
-
--alt-only Sửa alt attributes + dọn dẹp
|
|
156
|
-
--lang-only Sửa HTML lang attributes + dọn dẹp
|
|
157
|
-
--role-only Sửa role attributes + dọn dẹp
|
|
158
|
-
--aria-label-only Sửa aria-label attributes + dọn dẹp
|
|
159
|
-
--forms-only Sửa form labels + dọn dẹp
|
|
160
|
-
--buttons-only Sửa button names + dọn dẹp
|
|
161
|
-
--links-only Sửa link names + dọn dẹp
|
|
162
|
-
--landmarks-only Sửa landmarks + dọn dẹp
|
|
163
|
-
--headings-only Phân tích cấu trúc heading với tùy chọn tự động sửa
|
|
164
|
-
--auto-fix-headings Bật tự động sửa lỗi heading structure
|
|
165
|
-
--links-check Kiểm tra liên kết bị hỏng và tài nguyên 404 (toàn diện, không tự động sửa)
|
|
166
|
-
--broken-links Chỉ kiểm tra liên kết external bị hỏng (không tự động sửa)
|
|
167
|
-
--404-resources Chỉ kiểm tra tài nguyên local bị thiếu (không tự động sửa)
|
|
168
|
-
--gtm-check Kiểm tra cài đặt Google Tag Manager (không tự động sửa)
|
|
169
|
-
--check-meta, --meta-check Kiểm tra meta tags lỗi chính tả và cú pháp (không tự động sửa)
|
|
170
|
-
--fix-meta, --meta-fix Tự động sửa lỗi chính tả và cú pháp meta tags
|
|
171
|
-
--full-report Tạo báo cáo Excel toàn diện (tất cả kiểm tra)
|
|
172
|
-
-o, --output <file> Đường dẫn output cho báo cáo Excel (dùng với --full-report)
|
|
173
|
-
--unused-files Kiểm tra file không sử dụng trong dự án
|
|
174
|
-
--dead-code Kiểm tra dead code trong CSS và JavaScript
|
|
175
|
-
--file-size, --size-check Kiểm tra dung lượng file và đề xuất tối ưu hóa
|
|
176
|
-
--cleanup-only Chỉ dọn dẹp role attributes trùng lặp
|
|
177
|
-
|
|
178
|
-
Tùy chọn Enhanced Alt:
|
|
179
|
-
--enhanced-alt Sử dụng phân tích và tạo enhanced alt attribute
|
|
180
|
-
--alt-creativity <mode> Mức sáng tạo alt text: conservative, balanced, creative
|
|
181
|
-
--include-emotions Bao gồm mô tả cảm xúc trong alt text
|
|
182
|
-
--strict-alt Bật kiểm tra chất lượng alt nghiêm ngặt
|
|
183
|
-
|
|
184
|
-
Trợ giúp:
|
|
185
|
-
-h, --help Hiển thị thông điệp trợ giúp
|
|
186
|
-
-v, --version Hiển thị số phiên bản
|
|
187
|
-
```
|
|
188
57
|
|
|
189
|
-
|
|
58
|
+
- `-d, --directory <path>`: thư mục mục tiêu, mặc định là thư mục hiện tại
|
|
59
|
+
- `-l, --language <lang>`: ngữ cảnh ngôn ngữ, mặc định là `ja`
|
|
60
|
+
- `--dry-run`: cờ legacy; tool luôn ở chế độ check-only
|
|
61
|
+
- `-h, --help`: hiển thị trợ giúp
|
|
62
|
+
- `-v, --version`: hiển thị phiên bản
|
|
63
|
+
|
|
64
|
+
Các mode kiểm tra:
|
|
65
|
+
|
|
66
|
+
- `--comprehensive`, `--all`: chạy bộ rà soát mặc định trên nhiều nhóm vấn đề cùng lúc, gồm accessibility structure, labels, links/resources, và các tín hiệu chất lượng ở cấp dự án
|
|
67
|
+
- `--alt-only`: rà soát chất lượng alt text của ảnh, gồm thiếu `alt`, để `alt` rỗng cho ảnh có nghĩa, mô tả quá chung chung, và enhanced alt analysis nếu bạn bật mode này
|
|
68
|
+
- `--lang-only`: rà soát việc khai báo `lang` ở thẻ HTML gốc để phát hiện trang thiếu ngôn ngữ tài liệu hoặc dùng ngôn ngữ không đúng kỳ vọng
|
|
69
|
+
- `--role-only`: rà soát việc dùng ARIA role có dấu hiệu sai hoặc chưa phù hợp, ví dụ phần tử có hành vi tương tác nhưng semantics/role chưa phản ánh đúng
|
|
70
|
+
- `--aria-label-only`: rà soát các phần tử phụ thuộc vào `aria-label` để có accessible name, như ảnh, link, hoặc control không có đủ text hiển thị
|
|
71
|
+
- `--forms-only`: rà soát lỗi accessibility của form như input thiếu label rõ ràng, accessible name yếu, hoặc field đang phụ thuộc quá nhiều vào placeholder
|
|
72
|
+
- `--nested-only`: rà soát nested interactive controls, ví dụ `button` nằm trong link, link nằm trong button, hoặc một control clickable bị đặt bên trong widget focusable khác; các pattern này thường gây rối cho keyboard users và screen reader vì target tương tác bị chồng lấn
|
|
73
|
+
- `--buttons-only`: rà soát button và các control dạng button để phát hiện thiếu accessible name, text rỗng, hoặc control nhìn có vẻ bấm được nhưng không truyền đủ ý nghĩa
|
|
74
|
+
- `--links-only`: rà soát accessible link name, như link rỗng, link chỉ chứa ảnh nhưng không có text thay thế hữu ích, hoặc label quá mơ hồ như “click here” mà thiếu ngữ cảnh
|
|
75
|
+
- `--landmarks-only`: rà soát cấu trúc landmark của trang như thiếu `main`, vùng navigation yếu, hoặc layout khiến việc điều hướng theo region khó hơn với người dùng assistive technology
|
|
76
|
+
- `--headings-only`: rà soát heading hierarchy và outline của tài liệu, như nhảy cấp heading, heading trùng trong cùng ngữ cảnh, nhiều heading cấp cao nhất, hoặc heading rỗng
|
|
77
|
+
- `--dl-only`: rà soát markup của description list, như cấu trúc `dl` không hợp lệ, thiếu cặp `dt`/`dd`, hoặc nội dung đặt trong description list bị sai
|
|
78
|
+
- `--links-check`: chạy đồng thời kiểm tra external links và sự tồn tại của local resources để bắt cả URL hỏng lẫn file thiếu trong một lượt
|
|
79
|
+
- `--broken-links`: chỉ kiểm tra external HTTP/HTTPS links và báo các URL không truy cập được, trả về 404/5xx, redirect lỗi, hoặc các vấn đề tương tự
|
|
80
|
+
- `--404-resources`: chỉ kiểm tra local resources như ảnh, script, stylesheet, và các file được tham chiếu nhưng không tồn tại ở path mong đợi
|
|
81
|
+
- `--gtm-check`: rà soát cách cài đặt Google Tag Manager, gồm việc có đủ phần script và `noscript` hay không, cũng như vị trí chèn có hợp lệ không
|
|
82
|
+
- `--check-meta`: rà soát meta tags và Open Graph metadata để phát hiện typo, attribute sai cú pháp, property name đáng ngờ, và các lỗi metadata khác
|
|
83
|
+
- `--unused-files`: quét dự án để tìm các file có vẻ không được tham chiếu ở đâu, giúp bạn phát hiện asset thừa hoặc source cũ cần review thủ công
|
|
84
|
+
- `--unused-files-list`: xuất kết quả unused-file ra file text để team review và tự cleanup thủ công bên ngoài tool
|
|
85
|
+
- `--dead-code`: rà soát CSS và JavaScript để tìm selector, rule, hoặc function có vẻ không còn được dùng dựa trên static reference trong dự án
|
|
86
|
+
- `--file-size`: rà soát file lớn và asset quá nặng để chỉ ra cơ hội tối ưu và các rủi ro hiệu năng frontend
|
|
87
|
+
- `--full-report`: tạo báo cáo Excel tổng hợp toàn bộ findings từ các nhóm kiểm tra được hỗ trợ để tiện chia sẻ, triage, hoặc theo dõi audit
|
|
88
|
+
- `-o, --output <file>`: tùy chỉnh output cho `--full-report`
|
|
89
|
+
- `--list-file <file>`: tùy chỉnh output cho `--unused-files-list`
|
|
90
|
+
|
|
91
|
+
Enhanced alt analysis:
|
|
92
|
+
|
|
93
|
+
- `--enhanced-alt`
|
|
94
|
+
- `--alt-creativity <mode>`: `conservative`, `balanced`, `creative`
|
|
95
|
+
- `--include-emotions`
|
|
96
|
+
- `--strict-alt`
|
|
97
|
+
|
|
98
|
+
## Ví Dụ
|
|
190
99
|
|
|
191
100
|
```bash
|
|
192
|
-
#
|
|
101
|
+
# Kiểm tra toàn diện
|
|
193
102
|
gbu-a11y
|
|
194
103
|
|
|
195
|
-
#
|
|
196
|
-
gbu-a11y --
|
|
197
|
-
|
|
198
|
-
# Sửa với ngôn ngữ tiếng Anh
|
|
199
|
-
gbu-a11y -l en ./public
|
|
200
|
-
|
|
201
|
-
# Các loại sửa lỗi riêng lẻ
|
|
202
|
-
gbu-a11y --alt-only # Sửa alt attributes + dọn dẹp
|
|
203
|
-
gbu-a11y --forms-only # Sửa form labels + dọn dẹp
|
|
204
|
-
gbu-a11y --buttons-only # Sửa button names + dọn dẹp
|
|
205
|
-
gbu-a11y --headings-only # Phân tích heading structure
|
|
206
|
-
gbu-a11y --headings-only --auto-fix-headings # Tự động sửa heading structure
|
|
207
|
-
gbu-a11y --links-check # Kiểm tra liên kết bị hỏng và tài nguyên thiếu + dọn dẹp
|
|
208
|
-
gbu-a11y --broken-links # Chỉ kiểm tra liên kết external bị hỏng + dọn dẹp
|
|
209
|
-
gbu-a11y --404-resources # Chỉ kiểm tra tài nguyên local bị thiếu + dọn dẹp
|
|
210
|
-
gbu-a11y --gtm-check # Kiểm tra cài đặt Google Tag Manager
|
|
211
|
-
gbu-a11y --check-meta # Kiểm tra meta tags lỗi chính tả và cú pháp
|
|
212
|
-
gbu-a11y --fix-meta # Tự động sửa lỗi chính tả meta tags
|
|
213
|
-
gbu-a11y --fix-meta --dry-run # Xem trước sửa lỗi meta tags
|
|
214
|
-
gbu-a11y --full-report # Tạo báo cáo Excel toàn diện
|
|
215
|
-
gbu-a11y --full-report -o report.xlsx # Đường dẫn output tùy chỉnh
|
|
216
|
-
gbu-a11y --unused-files # Kiểm tra file không sử dụng trong dự án
|
|
217
|
-
gbu-a11y --dead-code # Kiểm tra dead CSS và JavaScript code
|
|
218
|
-
gbu-a11y --file-size # Kiểm tra dung lượng file và đề xuất tối ưu hóa
|
|
219
|
-
|
|
220
|
-
# Tính năng enhanced alt attribute
|
|
221
|
-
gbu-a11y --enhanced-alt # Chế độ enhanced cơ bản
|
|
222
|
-
gbu-a11y --enhanced-alt --alt-creativity creative # Mô tả sáng tạo
|
|
223
|
-
gbu-a11y --enhanced-alt --include-emotions # Bao gồm ngữ cảnh cảm xúc
|
|
224
|
-
gbu-a11y --enhanced-alt --strict-alt # Kiểm tra chất lượng nghiêm ngặt
|
|
225
|
-
gbu-a11y -l en --enhanced-alt --alt-creativity creative # Chế độ sáng tạo tiếng Anh
|
|
226
|
-
|
|
227
|
-
# Kết hợp với các tùy chọn khác
|
|
228
|
-
gbu-a11y --enhanced-alt --backup ./src # Chế độ enhanced với backup
|
|
229
|
-
gbu-a11y --enhanced-alt --dry-run # Xem trước sửa lỗi enhanced
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
## 🎨 Tính năng Enhanced Alt Attribute
|
|
233
|
-
|
|
234
|
-
### Mức độ sáng tạo
|
|
235
|
-
|
|
236
|
-
#### Conservative (Bảo thủ)
|
|
237
|
-
|
|
238
|
-
- Mô tả đơn giản, thực tế
|
|
239
|
-
- Tập trung vào chức năng cơ bản
|
|
240
|
-
- Biến thể từ vựng tối thiểu
|
|
241
|
-
|
|
242
|
-
**Ví dụ**: `alt="Biểu đồ"`, `alt="Logo"`
|
|
243
|
-
|
|
244
|
-
#### Balanced (Cân bằng - Mặc định)
|
|
245
|
-
|
|
246
|
-
- Mô tả nhận biết ngữ cảnh
|
|
247
|
-
- Sáng tạo vừa phải
|
|
248
|
-
- Cân bằng giữa đơn giản và chi tiết
|
|
104
|
+
# Chỉ kiểm tra form
|
|
105
|
+
gbu-a11y --forms-only ./pages
|
|
249
106
|
|
|
250
|
-
|
|
107
|
+
# Chỉ kiểm tra broken links
|
|
108
|
+
gbu-a11y --broken-links ./dist
|
|
251
109
|
|
|
252
|
-
|
|
110
|
+
# Chỉ kiểm tra meta tags
|
|
111
|
+
gbu-a11y --check-meta ./site
|
|
253
112
|
|
|
254
|
-
|
|
255
|
-
-
|
|
256
|
-
- Nhận biết thương hiệu và ngữ cảnh cao
|
|
113
|
+
# Xuất danh sách unused files
|
|
114
|
+
gbu-a11y --unused-files-list --list-file reports/unused-files.txt ./project
|
|
257
115
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
### Phân loại loại hình ảnh
|
|
261
|
-
|
|
262
|
-
- **Hình ảnh trang trí**: Tự động phát hiện và đánh dấu với `alt=""`
|
|
263
|
-
- **Icon chức năng**: Mô tả theo hành động của chúng (ví dụ: "Mở chat", "Tìm kiếm")
|
|
264
|
-
- **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
|
|
265
|
-
- **Hình ảnh phức tạp**: Alt ngắn + khuyến nghị mô tả chi tiết
|
|
266
|
-
- **Logo**: Bao gồm tên thương hiệu và từ khóa "logo"
|
|
267
|
-
- **Hình ảnh nội dung**: Mô tả nhận biết ngữ cảnh dựa trên nội dung xung quanh
|
|
268
|
-
|
|
269
|
-
### Kiểm tra chất lượng
|
|
270
|
-
|
|
271
|
-
- ❌ **Mức lỗi**: Alt thiếu, alt rỗng cho nội dung, text generic
|
|
272
|
-
- ⚠️ **Mức cảnh báo**: Quá dài/ngắn, từ thừa, tên file trong alt
|
|
273
|
-
- ℹ️ **Mức thông tin**: Gợi ý tối ưu hóa, kiểm tra tính nhất quán
|
|
274
|
-
|
|
275
|
-
## 📋 Sử dụng lập trình
|
|
276
|
-
|
|
277
|
-
### Sử dụng cơ bản
|
|
278
|
-
|
|
279
|
-
```javascript
|
|
280
|
-
const { AccessibilityFixer } = require("gbu-accessibility-package");
|
|
281
|
-
|
|
282
|
-
const fixer = new AccessibilityFixer({
|
|
283
|
-
language: "vi",
|
|
284
|
-
backupFiles: true,
|
|
285
|
-
dryRun: false,
|
|
286
|
-
});
|
|
287
|
-
|
|
288
|
-
// Sửa tất cả vấn đề accessibility
|
|
289
|
-
fixer.fixAllAccessibilityIssues("./src").then((results) => {
|
|
290
|
-
console.log("Hoàn thành sửa lỗi accessibility:", results);
|
|
291
|
-
});
|
|
292
|
-
|
|
293
|
-
// Sửa các vấn đề cụ thể
|
|
294
|
-
await fixer.fixEmptyAltAttributes("./src");
|
|
295
|
-
await fixer.fixFormLabels("./src");
|
|
296
|
-
await fixer.fixButtonNames("./src");
|
|
116
|
+
# Kiểm tra alt nâng cao
|
|
117
|
+
gbu-a11y --alt-only --enhanced-alt --strict-alt ./src
|
|
297
118
|
```
|
|
298
119
|
|
|
299
|
-
|
|
120
|
+
## Dùng Trong Code
|
|
300
121
|
|
|
301
|
-
```
|
|
302
|
-
const {
|
|
122
|
+
```js
|
|
123
|
+
const { AccessibilityChecker } = require('gbu-accessibility-package');
|
|
303
124
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
language: "vi",
|
|
125
|
+
const checker = new AccessibilityChecker({
|
|
126
|
+
language: 'en',
|
|
307
127
|
enhancedAltMode: true,
|
|
308
|
-
|
|
309
|
-
includeEmotions: true,
|
|
310
|
-
strictAltChecking: true,
|
|
128
|
+
strictAltChecking: true
|
|
311
129
|
});
|
|
312
130
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
console.log("Hoàn thành sửa lỗi với enhanced features:", results);
|
|
319
|
-
|
|
320
|
-
// Mới: Kiểm tra file không sử dụng
|
|
321
|
-
await fixer.checkUnusedFiles('./src');
|
|
322
|
-
|
|
323
|
-
// Mới: Kiểm tra dead code
|
|
324
|
-
await fixer.checkDeadCode('./src');
|
|
325
|
-
|
|
326
|
-
// Mới: Kiểm tra dung lượng file
|
|
327
|
-
await fixer.checkFileSizes('./src');
|
|
328
|
-
```
|
|
329
|
-
|
|
330
|
-
## 🎯 Những gì được sửa
|
|
331
|
-
|
|
332
|
-
### Alt Attributes (Chế độ Enhanced)
|
|
333
|
-
|
|
334
|
-
- **Alt attributes thiếu** → Tạo alt text nhận biết ngữ cảnh
|
|
335
|
-
- **Alt attributes rỗng** → Mô tả thông minh dựa trên nội dung
|
|
336
|
-
- **Alt text generic** → Mô tả cụ thể, có ý nghĩa
|
|
337
|
-
- **Alt text quá dài** → Độ dài tối ưu với thông tin chính
|
|
338
|
-
- **Từ thừa** → Mô tả sạch, ngắn gọn
|
|
339
|
-
- **Trực quan hóa dữ liệu** → Loại biểu đồ + xu hướng + dữ liệu chính
|
|
340
|
-
|
|
341
|
-
### Accessibility Form
|
|
342
|
-
|
|
343
|
-
- **Form labels thiếu** → Tạo aria-label thông minh
|
|
344
|
-
- **Input không có label** → Gợi ý label dựa trên ngữ cảnh
|
|
345
|
-
- **Cấu trúc form** → Liên kết label phù hợp
|
|
346
|
-
|
|
347
|
-
### Phần tử tương tác
|
|
348
|
-
|
|
349
|
-
- **Button rỗng** → Tên button dựa trên hành động
|
|
350
|
-
- **Text link generic** → Mục đích link mô tả
|
|
351
|
-
- **Tên button thiếu** → Mô tả dựa trên chức năng
|
|
352
|
-
|
|
353
|
-
### Cấu trúc tài liệu
|
|
354
|
-
|
|
355
|
-
- **Lang attributes thiếu** → Phát hiện ngôn ngữ tự động
|
|
356
|
-
- **Landmark thiếu** → Main và navigation landmarks
|
|
357
|
-
- **Cấu trúc heading** → Phân tích và tự động sửa với `--auto-fix-headings`
|
|
358
|
-
- Sửa multiple h1 elements
|
|
359
|
-
- Sửa heading level skipping (h2 → h4)
|
|
360
|
-
- Thêm text cho empty headings
|
|
361
|
-
- Sửa duplicate headings
|
|
362
|
-
- **Nested interactive controls** → Phát hiện và sửa controls lồng nhau
|
|
363
|
-
- **Role attributes** → Gán role tuân thủ WCAG
|
|
364
|
-
|
|
365
|
-
### Kiểm tra liên kết
|
|
366
|
-
|
|
367
|
-
- **Liên kết External bị hỏng** → Phát hiện HTTP 404, 500, timeout trên URL external
|
|
368
|
-
- URL không hợp lệ → Phát hiện định dạng URL sai
|
|
369
|
-
- Liên kết chậm → Cảnh báo timeout và phản hồi chậm
|
|
370
|
-
- Lỗi mạng → Kết nối thất bại và host không thể tiếp cận
|
|
371
|
-
- **Tài nguyên 404 bị thiếu** → Kiểm tra file local bị thiếu
|
|
372
|
-
- Hình ảnh (img src), file CSS (link href), file JavaScript (script src)
|
|
373
|
-
- Video/audio sources, tài nguyên local khác
|
|
374
|
-
- Kiểm tra đường dẫn relative và absolute
|
|
375
|
-
|
|
376
|
-
### Tối ưu hóa dự án
|
|
377
|
-
|
|
378
|
-
- **File không sử dụng** → Phát hiện file không được tham chiếu ở đâu trong toàn bộ dự án
|
|
379
|
-
- **File types được kiểm tra**: Hình ảnh, CSS, SCSS/Sass, JavaScript, JSX, TypeScript, Vue, PHP, JSON, Markdown, XML, PDF, Video, Audio files (không bao gồm HTML)
|
|
380
|
-
- **Quét toàn diện**: Phân tích từ project root, không giới hạn thư mục hiện tại
|
|
381
|
-
- **Cross-reference detection**: Tìm tham chiếu từ HTML, CSS, JavaScript, JSON, và các file khác
|
|
382
|
-
- **Multiple path formats**: Hỗ trợ relative paths, absolute paths, imports, requires
|
|
383
|
-
- **Smart file resolution**: Xử lý ES6 imports, CommonJS requires, và dynamic imports
|
|
384
|
-
- **Phân tích heuristic**: Khuyến nghị xem xét thủ công cho các file có thể được tham chiếu động
|
|
385
|
-
- **Phân tích Dead Code** → Tìm CSS rules và JavaScript functions không sử dụng toàn project
|
|
386
|
-
- CSS selectors không được sử dụng trong bất kỳ HTML file nào
|
|
387
|
-
- JavaScript functions không bao giờ được gọi trong toàn bộ codebase
|
|
388
|
-
- Variables được khai báo nhưng không sử dụng
|
|
389
|
-
- Smart skipping các patterns động và third-party code
|
|
390
|
-
- **Kiểm tra Google Tag Manager** → Xác thực cài đặt GTM
|
|
391
|
-
- Phát hiện GTM script trong phần `<head>`
|
|
392
|
-
- Xác minh noscript fallback trong phần `<body>`
|
|
393
|
-
- Kiểm tra tính nhất quán của container ID
|
|
394
|
-
- Xác thực vị trí đặt đúng của cả hai đoạn mã
|
|
395
|
-
- Báo cáo: cài đặt hoàn chỉnh, thiếu thành phần, vấn đề vị trí
|
|
396
|
-
- **Xác thực Meta Tags** → Kiểm tra lỗi chính tả và cú pháp trong meta tags
|
|
397
|
-
- Phát hiện lỗi chính tả property name (og:titel → og:title, discription → description)
|
|
398
|
-
- Phát hiện lỗi chính tả content value (websit → website, ja_jp → ja_JP)
|
|
399
|
-
- Kiểm tra lỗi cú pháp (thiếu content, giá trị rỗng)
|
|
400
|
-
- Hỗ trợ Open Graph Protocol và Twitter Card
|
|
401
|
-
- 40+ pattern lỗi chính tả phổ biến trong dictionary
|
|
402
|
-
- **Tự động sửa Meta Tags** → Tự động sửa lỗi meta tags
|
|
403
|
-
- Sửa lỗi chính tả property name chỉ trong một click
|
|
404
|
-
- Sửa lỗi chính tả content value
|
|
405
|
-
- Xử lý nhiều lỗi trên cùng một tag
|
|
406
|
-
- Chế độ dry-run để xem trước
|
|
407
|
-
- Hỗ trợ backup để an toàn
|
|
408
|
-
- **Phân tích dung lượng file** → Kiểm tra kích thước file và đề xuất tối ưu hóa
|
|
409
|
-
- Phát hiện file lớn vượt ngưỡng khuyến nghị
|
|
410
|
-
- Đề xuất tối ưu hóa theo từng loại file (hình ảnh, CSS, JS, v.v.)
|
|
411
|
-
- Thống kê dung lượng theo loại file
|
|
412
|
-
- Top 10 file có dung lượng lớn nhất
|
|
413
|
-
|
|
414
|
-
## 🏷️ Xác thực Google Tag Manager
|
|
415
|
-
|
|
416
|
-
Tính năng `--gtm-check` xác thực cài đặt Google Tag Manager đúng cách trong toàn bộ dự án của bạn.
|
|
417
|
-
|
|
418
|
-
### Những gì được kiểm tra
|
|
419
|
-
|
|
420
|
-
1. **Script trong `<head>`**: Xác minh GTM script có mặt trước thẻ đóng `</head>`
|
|
421
|
-
2. **Noscript trong `<body>`**: Xác nhận noscript fallback ngay sau thẻ mở `<body>`
|
|
422
|
-
3. **Container ID**: Đảm bảo cả hai đoạn mã sử dụng cùng GTM container ID (định dạng: GTM-XXXXXX)
|
|
423
|
-
4. **Xác thực vị trí**: Kiểm tra vị trí tối ưu của cả hai đoạn mã
|
|
424
|
-
|
|
425
|
-
### Cách sử dụng
|
|
426
|
-
|
|
427
|
-
```bash
|
|
428
|
-
# Kiểm tra cài đặt GTM trong toàn bộ dự án
|
|
429
|
-
gbu-a11y --gtm-check
|
|
430
|
-
|
|
431
|
-
# Kiểm tra thư mục cụ thể
|
|
432
|
-
gbu-a11y --gtm-check ./public
|
|
131
|
+
async function main() {
|
|
132
|
+
await checker.checkAltText('./src');
|
|
133
|
+
await checker.checkBrokenLinks('./src');
|
|
134
|
+
await checker.generateFullReport('./src', './reports/accessibility-report.xlsx');
|
|
135
|
+
}
|
|
433
136
|
|
|
434
|
-
|
|
435
|
-
gbu-a11y --check-gtm
|
|
436
|
-
gbu-a11y --google-tag-manager
|
|
137
|
+
main().catch(console.error);
|
|
437
138
|
```
|
|
438
139
|
|
|
439
|
-
|
|
140
|
+
`AccessibilityFixer` vẫn còn được export để tránh gãy code cũ, nhưng hiện cũng bị khóa ở chế độ check-only và sẽ không sửa source files.
|
|
440
141
|
|
|
441
|
-
|
|
442
|
-
🏷️ Đang kiểm tra cài đặt Google Tag Manager (GTM)...
|
|
443
|
-
|
|
444
|
-
📁 public/index.html:
|
|
445
|
-
✅ GTM Container ID: GTM-ABC1234
|
|
446
|
-
✅ Script trong head: Đã đặt đúng vị trí trước </head>
|
|
447
|
-
✅ Noscript trong body: Đã đặt đúng vị trí sau <body>
|
|
448
|
-
|
|
449
|
-
📁 public/about.html:
|
|
450
|
-
✅ GTM Container ID: GTM-ABC1234
|
|
451
|
-
✅ Script trong head: Đã đặt đúng vị trí trước </head>
|
|
452
|
-
❌ Noscript trong body: Thiếu sau thẻ <body>
|
|
453
|
-
❌ Thiếu GTM Noscript: Tìm thấy GTM script nhưng thiếu noscript dự phòng trong <body>
|
|
454
|
-
💡 Thêm đoạn mã GTM noscript ngay sau thẻ mở <body>
|
|
455
|
-
|
|
456
|
-
📊 Tóm tắt: Đã phân tích 2 file
|
|
457
|
-
✅ File có GTM: 2
|
|
458
|
-
⚠️ File có vấn đề về GTM: 1
|
|
459
|
-
💡 GTM cần có cả <script> trong <head> và <noscript> sau <body>
|
|
460
|
-
```
|
|
142
|
+
## Hành Vi Output
|
|
461
143
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
1. **Đoạn mã script trong `<head>`**:
|
|
467
|
-
```html
|
|
468
|
-
<head>
|
|
469
|
-
<!-- Google Tag Manager -->
|
|
470
|
-
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
471
|
-
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
472
|
-
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
473
|
-
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
474
|
-
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
|
|
475
|
-
<!-- End Google Tag Manager -->
|
|
476
|
-
</head>
|
|
477
|
-
```
|
|
144
|
+
- Source files luôn giữ nguyên
|
|
145
|
+
- `--unused-files-list` chỉ ghi file report
|
|
146
|
+
- `--full-report` chỉ ghi file Excel report
|
|
147
|
+
- Kết quả phân tích sẽ được in ra console khi chạy
|
|
478
148
|
|
|
479
|
-
|
|
480
|
-
```html
|
|
481
|
-
<body>
|
|
482
|
-
<!-- Google Tag Manager (noscript) -->
|
|
483
|
-
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
|
|
484
|
-
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
485
|
-
<!-- End Google Tag Manager (noscript) -->
|
|
486
|
-
|
|
487
|
-
<!-- Nội dung trang của bạn -->
|
|
488
|
-
</body>
|
|
489
|
-
```
|
|
490
|
-
|
|
491
|
-
## 🏷️ Xác thực và Tự động sửa Meta Tags
|
|
492
|
-
|
|
493
|
-
Tính năng `--check-meta` và `--fix-meta` giúp bạn duy trì meta tags và Open Graph Protocol chính xác.
|
|
494
|
-
|
|
495
|
-
### Những gì được kiểm tra
|
|
496
|
-
|
|
497
|
-
1. **Lỗi chính tả Property Name**: Phát hiện lỗi chính tả phổ biến trong meta tag properties
|
|
498
|
-
- `og:titel` → `og:title`
|
|
499
|
-
- `og:descripion` → `og:description`
|
|
500
|
-
- `og:sitename` → `og:site_name`
|
|
501
|
-
- `discription` → `description`
|
|
502
|
-
- Và 40+ lỗi chính tả phổ biến khác
|
|
503
|
-
|
|
504
|
-
2. **Lỗi chính tả Content Value**: Sửa giá trị không chính xác
|
|
505
|
-
- `websit` → `website` (og:type)
|
|
506
|
-
- `ja_jp` → `ja_JP` (og:locale)
|
|
507
|
-
- `summary_larg_image` → `summary_large_image` (twitter:card)
|
|
508
|
-
|
|
509
|
-
3. **Lỗi cú pháp**: Xác định vấn đề cấu trúc
|
|
510
|
-
- Thiếu thuộc tính content
|
|
511
|
-
- Giá trị content rỗng
|
|
512
|
-
- Lẫn lộn kiểu dấu ngoặc
|
|
513
|
-
|
|
514
|
-
### Cách sử dụng
|
|
149
|
+
## Checklist Trước Khi Publish
|
|
515
150
|
|
|
516
151
|
```bash
|
|
517
|
-
# Kiểm tra lỗi meta tags
|
|
518
|
-
gbu-a11y --check-meta
|
|
519
|
-
|
|
520
|
-
# Kiểm tra thư mục cụ thể
|
|
521
|
-
gbu-a11y --check-meta ./public
|
|
522
|
-
|
|
523
|
-
# Tự động sửa lỗi
|
|
524
|
-
gbu-a11y --fix-meta
|
|
525
|
-
|
|
526
|
-
# Xem trước sửa lỗi mà không áp dụng
|
|
527
|
-
gbu-a11y --fix-meta --dry-run
|
|
528
|
-
|
|
529
|
-
# Sửa với backup
|
|
530
|
-
gbu-a11y --fix-meta --backup
|
|
531
|
-
|
|
532
|
-
# Các lệnh thay thế
|
|
533
|
-
gbu-a11y --meta-check
|
|
534
|
-
gbu-a11y --meta-fix
|
|
535
|
-
```
|
|
536
|
-
|
|
537
|
-
### Ví dụ Output
|
|
538
|
-
|
|
539
|
-
**Chế độ kiểm tra (`--check-meta`)**:
|
|
540
|
-
```
|
|
541
|
-
🔍 Checking meta tags for typos and syntax errors...
|
|
542
|
-
|
|
543
|
-
❌ public/index.html
|
|
544
|
-
1. Lỗi chính tả property: "og:titel" → "og:title"
|
|
545
|
-
2. Lỗi chính tả property: "og:descripion" → "og:description"
|
|
546
|
-
3. Lỗi giá trị og:type: "websit" → "website"
|
|
547
|
-
4. Lỗi chính tả property: "twitter:car" → "twitter:card"
|
|
548
|
-
|
|
549
|
-
✅ public/about.html - No errors
|
|
550
|
-
|
|
551
|
-
📊 Summary:
|
|
552
|
-
Total files checked: 2
|
|
553
|
-
Files with errors: 1
|
|
554
|
-
Total errors found: 4
|
|
555
|
-
Files OK: 1
|
|
556
|
-
|
|
557
|
-
💡 Sử dụng --meta-fix để tự động sửa các lỗi này
|
|
558
|
-
```
|
|
559
|
-
|
|
560
|
-
**Chế độ sửa lỗi (`--fix-meta`)**:
|
|
561
|
-
```
|
|
562
|
-
🔧 Fixing meta tag typos and syntax errors...
|
|
563
|
-
|
|
564
|
-
🔧 Fixing: public/index.html
|
|
565
|
-
✓ Fixed property: og:titel → og:title
|
|
566
|
-
✓ Fixed property: og:descripion → og:description
|
|
567
|
-
✓ Fixed og:type value: websit → website
|
|
568
|
-
✓ Fixed property: twitter:car → twitter:card
|
|
569
|
-
💾 Saved 4 fix(es) to public/index.html
|
|
570
|
-
|
|
571
|
-
✅ public/about.html - No errors to fix
|
|
572
|
-
|
|
573
|
-
📊 Summary:
|
|
574
|
-
Total files checked: 2
|
|
575
|
-
Files fixed: 1
|
|
576
|
-
Total fixes applied: 4
|
|
577
|
-
```
|
|
578
|
-
|
|
579
|
-
### Các pattern lỗi chính tả được hỗ trợ
|
|
580
|
-
|
|
581
|
-
**Open Graph Properties**:
|
|
582
|
-
- `og:titel`, `og:tittle`, `og:tilte` → `og:title`
|
|
583
|
-
- `og:descripion`, `og:discription`, `og:desciption` → `og:description`
|
|
584
|
-
- `og:imge`, `og:iamge` → `og:image`
|
|
585
|
-
- `og:typ`, `og:tipe` → `og:type`
|
|
586
|
-
- `og:sitename`, `og:sit_name` → `og:site_name`
|
|
587
|
-
- `og:local` → `og:locale`
|
|
588
|
-
|
|
589
|
-
**Twitter Card Properties**:
|
|
590
|
-
- `twitter:car` → `twitter:card`
|
|
591
|
-
- `twitter:titel`, `twitter:tittle` → `twitter:title`
|
|
592
|
-
- `twitter:descripion`, `twitter:discription` → `twitter:description`
|
|
593
|
-
- `twitter:imge` → `twitter:image`
|
|
594
|
-
- `twitter:creater` → `twitter:creator`
|
|
595
|
-
|
|
596
|
-
**Meta Tag Properties**:
|
|
597
|
-
- `discription`, `descripion`, `desciption` → `description`
|
|
598
|
-
- `viewpor`, `veiwport` → `viewport`
|
|
599
|
-
- `keyword` → `keywords`
|
|
600
|
-
- `auther`, `autor` → `author`
|
|
601
|
-
|
|
602
|
-
**Content Values**:
|
|
603
|
-
- `websit`, `web-site`, `artical`, `aticle` (og:type)
|
|
604
|
-
- `ja_jp` → `ja_JP`, `en_us` → `en_US`, `vi_vn` → `vi_VN` (og:locale)
|
|
605
|
-
- `summary_larg_image`, `summay` (twitter:card)
|
|
606
|
-
|
|
607
|
-
<!-- Nội dung trang của bạn -->
|
|
608
|
-
</body>
|
|
609
|
-
```
|
|
610
|
-
|
|
611
|
-
### Các vấn đề thường gặp được phát hiện
|
|
612
|
-
|
|
613
|
-
- ❌ **Thiếu Script**: Không tìm thấy GTM script trong `<head>`
|
|
614
|
-
- ❌ **Thiếu Noscript**: Không tìm thấy noscript fallback sau `<body>`
|
|
615
|
-
- ⚠️ **Vị trí sai**: Script hoặc noscript không ở vị trí tối ưu
|
|
616
|
-
- ❌ **ID không khớp**: Container ID khác nhau giữa script và noscript
|
|
617
|
-
- ⚠️ **Cài đặt không đầy đủ**: Chỉ có một trong hai đoạn mã bắt buộc
|
|
618
|
-
|
|
619
|
-
## 🔧 Quản lý Package
|
|
620
|
-
|
|
621
|
-
### Kiểm tra thông tin package
|
|
622
|
-
|
|
623
|
-
```bash
|
|
624
|
-
# Xem version hiện tại
|
|
625
|
-
gbu-a11y --version
|
|
626
|
-
npm list -g gbu-accessibility-package
|
|
627
|
-
|
|
628
|
-
# Xem thông tin package
|
|
629
|
-
npm info gbu-accessibility-package
|
|
630
|
-
|
|
631
|
-
# Kiểm tra package đã cài đặt
|
|
632
|
-
which gbu-a11y
|
|
633
|
-
npm list -g | grep gbu-accessibility-package
|
|
634
|
-
```
|
|
635
|
-
|
|
636
|
-
### Cập nhật package
|
|
637
|
-
|
|
638
|
-
```bash
|
|
639
|
-
# Kiểm tra version mới
|
|
640
|
-
npm outdated -g gbu-accessibility-package
|
|
641
|
-
|
|
642
|
-
# Cập nhật lên version mới nhất
|
|
643
|
-
npm update -g gbu-accessibility-package
|
|
644
|
-
|
|
645
|
-
# Hoặc cài đặt lại version mới
|
|
646
|
-
npm uninstall -g gbu-accessibility-package
|
|
647
|
-
npm install -g gbu-accessibility-package@latest
|
|
648
|
-
```
|
|
649
|
-
|
|
650
|
-
### Quản lý cache
|
|
651
|
-
|
|
652
|
-
```bash
|
|
653
|
-
# Xem cache info
|
|
654
|
-
npm cache verify
|
|
655
|
-
|
|
656
|
-
# Xóa cache (khi có vấn đề)
|
|
657
|
-
npm cache clean --force
|
|
658
|
-
|
|
659
|
-
# Xem cache location
|
|
660
|
-
npm config get cache
|
|
661
|
-
```
|
|
662
|
-
|
|
663
|
-
## 🧪 Kiểm tra và Demo
|
|
664
|
-
|
|
665
|
-
```bash
|
|
666
|
-
# Kiểm tra package
|
|
667
152
|
npm test
|
|
668
|
-
|
|
669
|
-
# Demo tính năng cơ bản
|
|
670
|
-
npm run demo
|
|
671
|
-
|
|
672
|
-
# Demo tính năng enhanced alt
|
|
673
|
-
npm run demo-enhanced
|
|
674
|
-
|
|
675
|
-
# Demo tạo alt sáng tạo
|
|
676
|
-
npm run demo-creative
|
|
677
|
-
|
|
678
|
-
# Kiểm tra tính năng enhanced alt
|
|
679
|
-
npm run test-enhanced-alt
|
|
153
|
+
npm pack
|
|
680
154
|
```
|
|
681
155
|
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
- **Chế độ cơ bản**: Xử lý nhanh, phù hợp cho dự án lớn
|
|
685
|
-
- **Chế độ Enhanced**: ~20-30% chậm hơn nhưng cải thiện 85-90% chất lượng alt text
|
|
686
|
-
- **Sử dụng bộ nhớ**: +15-20% cho từ vựng enhanced và phân tích
|
|
687
|
-
- **Độ chính xác**: 95%+ phát hiện vấn đề accessibility
|
|
688
|
-
|
|
689
|
-
## 🌐 Hỗ trợ ngôn ngữ
|
|
690
|
-
|
|
691
|
-
- **Tiếng Nhật (ja)**: Ngôn ngữ mặc định với từ vựng phong phú
|
|
692
|
-
- **Tiếng Anh (en)**: Hỗ trợ tiếng Anh toàn diện
|
|
693
|
-
- **Tiếng Việt (vi)**: Hỗ trợ tiếng Việt
|
|
694
|
-
|
|
695
|
-
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.
|
|
696
|
-
|
|
697
|
-
## 📚 Tài liệu
|
|
698
|
-
|
|
699
|
-
- [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
|
|
700
|
-
- [Hướng dẫn bắt đầu nhanh](./QUICK_START.md) - Bắt đầu nhanh chóng
|
|
701
|
-
- [Tóm tắt Package](./PACKAGE_SUMMARY.md) - Tổng quan tất cả tính năng
|
|
702
|
-
- [Changelog](./CHANGELOG.md) - Lịch sử phiên bản và cập nhật
|
|
703
|
-
|
|
704
|
-
## 🤝 Đóng góp
|
|
705
|
-
|
|
706
|
-
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.
|
|
707
|
-
|
|
708
|
-
### Thiết lập phát triển
|
|
709
|
-
|
|
710
|
-
```bash
|
|
711
|
-
git clone https://github.com/example/gbu-accessibility-tool.git
|
|
712
|
-
cd gbu-accessibility-tool/accessibility-package
|
|
713
|
-
npm install
|
|
714
|
-
npm test
|
|
715
|
-
```
|
|
716
|
-
|
|
717
|
-
## 📄 Giấy phép
|
|
718
|
-
|
|
719
|
-
Dự án này được cấp phép theo Giấy phép MIT - xem file [LICENSE](LICENSE) để biết chi tiết.
|
|
720
|
-
|
|
721
|
-
## 🙏 Ghi nhận
|
|
722
|
-
|
|
723
|
-
- Được xây dựng với các thực hành accessibility tốt nhất
|
|
724
|
-
- Tuân theo hướng dẫn WCAG
|
|
725
|
-
- Được truyền cảm hứng từ nhu cầu cải thiện accessibility tự động
|
|
726
|
-
- Phản hồi và đóng góp từ cộng đồng
|
|
156
|
+
Sau đó kiểm tra:
|
|
727
157
|
|
|
728
|
-
|
|
158
|
+
- `gbu-a11y --help`
|
|
159
|
+
- `gbu-a11y`
|
|
160
|
+
- `gbu-a11y --full-report`
|
|
729
161
|
|
|
730
|
-
|
|
162
|
+
## License
|
|
731
163
|
|
|
732
|
-
|
|
164
|
+
MIT
|