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/README-vi.md CHANGED
@@ -1,732 +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
- --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
- ### 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ụ
190
99
 
191
100
  ```bash
192
- # Sửa lỗi toàn diện cơ bản
101
+ # Kiểm tra toàn diện
193
102
  gbu-a11y
194
103
 
195
- # Xem trước tất cả thay đổi
196
- gbu-a11y --dry-run
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
- **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
251
109
 
252
- #### Creative (Sáng tạo)
110
+ # Chỉ kiểm tra meta tags
111
+ gbu-a11y --check-meta ./site
253
112
 
254
- - tả phong phú, chi tiết
255
- - Tích hợp ngữ cảnh cảm xúc
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
- **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ố"`
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
- ### Chế độ Enhanced Alt Attribute (Tích hợp sẵn)
120
+ ## Dùng Trong Code
300
121
 
301
- ```javascript
302
- const { AccessibilityFixer } = require("gbu-accessibility-package");
122
+ ```js
123
+ const { AccessibilityChecker } = require('gbu-accessibility-package');
303
124
 
304
- // Sử dụng AccessibilityFixer với chế độ enhanced (tích hợp sẵn)
305
- const fixer = new AccessibilityFixer({
306
- language: "vi",
125
+ const checker = new AccessibilityChecker({
126
+ language: 'en',
307
127
  enhancedAltMode: true,
308
- altCreativity: "creative",
309
- includeEmotions: true,
310
- strictAltChecking: true,
128
+ strictAltChecking: true
311
129
  });
312
130
 
313
- await fixer.fixEmptyAltAttributes("./src");
314
-
315
- // Tất cả tính năng enhanced đã được tích hợp trong AccessibilityFixer
316
- // Không cần import thêm class riêng biệt
317
- const results = await fixer.fixAllAccessibilityIssues("./src");
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
- # Các lệnh thay thế
435
- gbu-a11y --check-gtm
436
- gbu-a11y --google-tag-manager
137
+ main().catch(console.error);
437
138
  ```
438
139
 
439
- ### 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.
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
- ### Yêu cầu cài đặt GTM
463
-
464
- Để cài đặt GTM đúng cách, mỗi trang cần có:
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
- 2. **Đoạn noscript ngay sau `<body>`**:
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
- ## 📊 Hiệu suất
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
- **Được tạo với ❤️ bởi GBU Team**
162
+ ## License
731
163
 
732
- Để 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