0

Trình kiểm tra khả năng truy cập HTML

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

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 trước/nền sau nào — hex, rgb(), hsl() hoặc màu được đặt tên như 'cà chua' đều hoạt động.

Buy Me a Coffee at ko-fi.com
Đang xử lý... 0%
Phân tích cú pháp HTML thành DOM thực
Đi bộ trên cây để kiểm tra WCAG
Tính toán tỷ lệ tương phản
Xong

kết quả

Hầu hết các kiểm tra khả năng truy cập nhanh chóng đều là quét từ khóa hời hợt hoặc thư viện nặng mà bạn phải tin cậy như một hộp đen. Công cụ này đi theo con đường thứ ba: nó phân tích bất kỳ HTML nào bạn dán bằng cách sử dụng DOMParser tích hợp sẵn của trình duyệt — không có lõi rìu, không có thư viện trợ năng bên ngoài, không có nội dung nào được tải xuống — rồi duyệt qua cây DOM kết quả bằng một bộ kiểm tra viết tay phản ánh các kiểu lỗi WCAG 2.1 thực, phổ biến. Điều đó có nghĩa là logic hoàn toàn có thể kiểm tra được và quá trình kiểm tra diễn ra hoàn toàn bên trong trình duyệt của bạn: đánh dấu bạn dán và bất kỳ cặp màu nào bạn kiểm tra sẽ không bao giờ được tải lên hoặc gửi đi bất cứ đâu.

Việc kiểm tra bao gồm các lỗi xuất hiện thường xuyên nhất trong các trang thực: các phần tử <img> không có thuộc tính alt nào cả (lỗi WCAG thực sự, khác với alt="" được cố ý để trống cho hình ảnh trang trí, được bỏ gắn cờ một cách chính xá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 dựa trên mọi đường dẫn thực sự tới một nhãn — <nhãn cho> phù hợp, được gói bên trong một <nhãn> hoặc thuộc tính aria-label/aria-labelledby), các cấp tiêu đề nhảy mà không có cảnh báo (một <h1> thẳng tới <h3> hoặc một tài liệu hoàn toàn không có <h1> hoặc nhiều hơn một), liên kết không có href hoặc có văn bản mơ hồ, lạc lõng như "nhấp vào đây" hoặc "đọc thêm" và thiếu thuộc tính lang khi dán một tài liệu HTML đầy đủ (không chỉ một đoạn).

Phần nổi bật là phép toán tương phản thực sự, không phải là một phương pháp phỏng đoán hời hợt 'trông có thể đọc được'. Đối với bất kỳ phần tử nào mang màu nội tuyến và màu nền, công cụ sẽ đọc cả hai giá trị, phân giải chúng thành số RGB thực thông qua công cụ CSS của trình duyệt (vì vậy hex, rgb(), hsl() và các màu được đặt tên như 'cà chua' đều hoạt động giống hệt nhau) và tính toán độ chói tương đối WCAG chính xác cho mỗi giá trị — L = 0,2126×R + 0,7152×G + 0,0722×B, với mỗi kênh được điều chỉnh gamma trước tiên bằng cách sử dụng đường cong chuyển sRGB thực — 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 + 0,05 nhạt hơn) / (L + 0,05 tối hơn). Kích thước phông chữ và độ đậm phông chữ của thành phần quyết định xem có áp dụng ngưỡng 'văn bản bình thường' chặt chẽ hơn hay ngưỡng 'văn bản lớn' nhẹ nhàng hơn (18pt+ hoặc 14pt+ in đậm) và kết quả được kiểm tra dựa trên tất cả bốn số WCAG thực cùng một lúc: 4,5:1 và 3:1 đối với AA, 7:1 và 4,5:1 đối với AAA — không bao giờ chuyển thành một phán đoán tốt/xấu giả duy nhất.

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