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