0

Trình Đánh Giá Trợ Năng HTML

Dán HTML thô và nhận đánh giá trợ năng WCAG thực tế: một trình duyệt DOM thủ công kiểm tra ảnh, nhãn biểu mẫu, thứ tự tiêu đề và văn bản liên kết, cùng một công cụ tính tỉ lệ tương phản dựa trên độ chói tương đối chính xác, đối chiếu với các ngưỡng AA/AAA thực sự — không dùng thư viện ngoài, không gửi dữ liệu đi đâu cả.

🔒 Được xử lý hoàn toàn trong trình duyệt của bạn — không có nội dung nào bạn nhập ở đây được tải lên.

Trình kiểm tra tương phản độc lập

Kiểm tra trực tiếp bất kỳ cặp màu nền/chữ nào — dùng được hex, rgb(), hsl() hoặc tên màu như 'tomato'.

Đang xử lý... 0%
Đang phân tích HTML thành DOM thực sự
Đang duyệt cây DOM để kiểm tra WCAG
Đang tính toán tỉ lệ tương phản
Hoàn tất

Kết quả

Hầu hết các kiểm tra trợ năng nhanh hiện nay hoặc chỉ quét từ khóa hời hợt, hoặc là một thư viện nặng nề mà bạn phải tin tưởng như một hộp đen. Công cụ này chọn một hướng đi thứ ba: nó phân tích cú pháp HTML bạn dán bằng chính DOMParser tích hợp của trình duyệt — không axe-core, không thư viện trợ năng bên ngoài, không tải xuống gì cả — rồi duyệt cây DOM kết quả với một bộ kiểm tra viết tay, phản ánh những lỗi WCAG 2.1 thường gặp trong thực tế. Điều đó có nghĩa là logic hoàn toàn có thể xem xét được và việc đánh giá diễn ra hoàn toàn trong trình duyệt của bạn: mã đánh dấu bạn dán và mọi cặp màu bạn kiểm tra không bao giờ được tải lên hay gửi đi đâu cả.

Các kiểm tra bao gồm những lỗi xuất hiện thường xuyên nhất trên các trang thực tế: phần tử <img> không hề có thuộc tính alt (một lỗi WCAG thực sự, khác với alt="" cố ý để trống cho ảnh trang trí, vốn được giữ nguyên không gắn cờ), các điều khiển biểu mẫu không có cách nào để công nghệ hỗ trợ biết chúng dùng để làm gì (được kiểm tra qua mọi cách liên kết nhãn thực tế — có <label for> tương ứng, được bao bọc trong <label>, hoặc có thuộc tính aria-label/aria-labelledby), cấp độ tiêu đề bị nhảy không báo trước (từ <h1> xuống thẳng <h3>, hoặc tài liệu không hề có <h1>, hoặc có nhiều hơn một), liên kết không có href hoặc có văn bản mơ hồ, thiếu ngữ cảnh như "click here" hay "read more", và thiếu thuộc tính lang khi dán vào một tài liệu HTML hoàn chỉnh (không chỉ là đoạn rời).

Điểm nổi bật là toán học tương phản chính xác, không phải một phép suy đoán 'trông dễ đọc' hời hợt. Với bất kỳ phần tử nào có color và background-color nội tuyến, công cụ đọc cả hai giá trị, phân giải chúng thành các số RGB thực sự qua chính engine CSS của trình duyệt (vì vậy hex, rgb(), hsl() và tên màu như 'tomato' đều hoạt động như nhau), rồi tính toán độ chói tương đối WCAG chính xác cho từng cái — L = 0.2126×R + 0.7152×G + 0.0722×B, với từng kênh được hiệu chỉnh gamma trước bằng đường cong truyền sRGB thực tế — trước khi kết hợp chúng vào công thức tỉ lệ tương phản chính thức, (L sáng hơn + 0.05) / (L tối hơn + 0.05). Chính font-size và font-weight của phần tử quyết định nên áp dụng ngưỡng 'văn bản thông thường' khắt khe hơn hay ngưỡng 'văn bản lớn' dễ hơn (từ 18pt trở lên, hoặc từ 14pt in đậm trở lên), và kết quả được đối chiếu với cả bốn ngưỡng WCAG thực tế cùng lúc: 4.5:1 và 3:1 cho AA, 7:1 và 4.5:1 cho AAA — không bao giờ bị gộp vào một phán quyết đỗ/trượt giả tạo duy nhất.

Đây là một tập hợp con thực dụng, trung thực của một đánh giá trợ năng đầy đủ, không phải công cụ chứng nhận: nó không đánh giá tương tác do JavaScript điều khiển, các mẫu ARIA widget ngoài gán nhãn cơ bản, thứ tự lấy tiêu điểm bàn phím, hay bất cứ thứ gì đòi hỏi phải hiển thị và chạy trang thực sự. Hãy coi đây là bước kiểm tra nhanh đầu tiên giúp phát hiện một số lỗi WCAG phổ biến và nghiêm trọng nhất — thiếu văn bản alt, trường nhập liệu không nhãn, phân cấp tiêu đề hỏng, văn bản độ tương phản thấp và liên kết mơ hồ — trước khi xuất bản trang, bên cạnh (chứ không thay thế) một đánh giá thủ công đầy đủ hoặc công cụ kiểm thử chuyên dụng cho mọi thứ sắp đưa lên môi trường thực tế.