Kiểm tra khả năng tiếp cận website: nhóm lỗi cần soát và giới hạn của công cụ tự động
Trang này minh họa cách một báo cáo kiểm tra khả năng tiếp cận được trình bày, gồm điểm tổng và danh sách nhóm lỗi thường gặp theo hai mức cảnh báo và lỗi. Cần nói rõ ngay: kết quả hiển thị là dữ liệu mô phỏng, công cụ không tải và không phân tích trang bạn nhập, nên hãy dùng phần nội dung bên dưới làm danh sách kiểm tra thay vì lấy con số làm căn cứ.
Tính năng nổi bật
- Ô nhập địa chỉ trang và nút chạy kiểm tra, mô phỏng luồng làm việc của một công cụ rà soát
- Hiển thị điểm tổng theo thang phần trăm kèm thanh tiến trình và màu phân mức
- Liệt kê nhóm lỗi theo hai mức: lỗi cần sửa và cảnh báo cần xem lại
- Năm nhóm lỗi mẫu bao đúng những vấn đề phổ biến nhất trong thực tế rà soát
- Có ghi chú ngay dưới kết quả nói rõ đây là phân tích mô phỏng
- Kết quả và điểm số là dữ liệu dựng sẵn, không phải kết quả phân tích trang bạn nhập
- Không gửi địa chỉ bạn nhập tới máy chủ nào vì không có bước tải trang
- Phần nội dung bên dưới đóng vai trò danh sách kiểm tra để bạn tự rà soát thủ công
Vì sao khả năng tiếp cận là việc phải làm, không phải việc nên làm
Một website khó tiếp cận không chỉ gây khó cho người khiếm thị. Nhóm bị ảnh hưởng rộng hơn nhiều: người lớn tuổi mắt kém đọc chữ xám nhạt trên nền trắng, người dùng chỉ điều khiển được bàn phím vì đau cổ tay, người dùng điện thoại ngoài trời nắng chói, người xem video ở nơi ồn không nghe được tiếng, người dùng máy cũ tải ảnh chậm nên chỉ thấy phần chữ thay thế. Mọi cải thiện về khả năng tiếp cận đều là cải thiện trải nghiệm cho toàn bộ người dùng. Thêm vào đó, phần lớn kỹ thuật đúng về tiếp cận trùng khớp với kỹ thuật đúng về tối ưu tìm kiếm: cấu trúc tiêu đề mạch lạc, chữ thay thế mô tả đúng ảnh, nhãn rõ ràng cho biểu mẫu, đánh dấu ngôn ngữ của trang. Điều khiến việc này hay bị bỏ qua là nó vô hình với người phát triển: bạn không nhìn thấy lỗi tiếp cận khi ngồi trước màn hình lớn với chuột và mắt tốt. Vì vậy cần một danh sách kiểm tra có hệ thống, và đó là thứ phần dưới đây cung cấp.
Lợi ích khi sử dụng
- Có danh sách nhóm lỗi cụ thể để rà soát thay vì kiểm tra theo cảm tính
- Biết rõ ranh giới giữa phần máy kiểm tra được và phần bắt buộc phải kiểm tra bằng tay
- Các mốc số cụ thể về tương phản màu và kích thước vùng bấm để đối chiếu ngay khi thiết kế
- Phần lớn việc sửa lỗi tiếp cận cũng cải thiện cấu trúc trang cho công cụ tìm kiếm
- Thứ tự ưu tiên rõ ràng giúp nhóm nhỏ biết sửa gì trước khi thời gian có hạn
Cách rà soát khả năng tiếp cận cho một trang
- 1Chạy trước một lượt bằng công cụ kiểm tra tự động thật, chẳng hạn phần kiểm tra tiếp cận có sẵn trong công cụ dành cho nhà phát triển của trình duyệt.
- 2Sửa hết các lỗi máy bắt được, vì đó là nhóm rẻ nhất và rõ ràng nhất: thiếu chữ thay thế, thiếu nhãn biểu mẫu, thiếu thuộc tính ngôn ngữ, tương phản màu không đạt.
- 3Rút chuột ra và dùng phím Tab đi hết trang, kiểm tra xem có tới được mọi thành phần bấm được không và viền tiêu điểm có luôn nhìn thấy không.
- 4Phóng to trình duyệt lên hai trăm phần trăm và thu cửa sổ về khoảng 320 pixel bề ngang, xem nội dung có bị cắt hoặc chồng lên nhau không.
- 5Cuối cùng đọc lại trang bằng trình đọc màn hình hoặc nhờ người dùng thật kiểm tra, vì phần lớn tiêu chí quan trọng không có cách nào kiểm tra tự động.
Nói thẳng: kết quả trên trang này là mô phỏng
Khi bạn nhập một địa chỉ và bấm kiểm tra, trang chờ khoảng hai giây rồi hiện ra một con số điểm được sinh ngẫu nhiên trong khoảng từ 60 tới 95, kèm hai tới bốn mục lấy từ một danh sách lỗi viết sẵn. Không có bước tải trang của bạn về, không có bước phân tích mã HTML, và địa chỉ bạn nhập không hề ảnh hưởng tới kết quả. Nhập một địa chỉ không tồn tại vẫn ra điểm số như thường. Chính giao diện cũng có một dòng ghi chú thừa nhận điều này ngay dưới danh sách kết quả. Vì vậy tuyệt đối đừng dùng con số ở đây để báo cáo cho khách hàng, để so sánh hai phiên bản website, hay để kết luận trang của bạn đã đạt hay chưa đạt tiêu chuẩn nào. Giá trị thật của trang nằm ở chỗ khác: năm nhóm lỗi mẫu được liệt kê đúng là năm nhóm mà công cụ rà soát thật hay phát hiện nhất, và phần nội dung phía dưới giải thích từng nhóm cùng cách sửa. Hãy dùng nó như một danh sách kiểm tra, và chạy kiểm tra thật bằng công cụ chuyên dụng.
Công cụ tự động thật bắt được gì và không bắt được gì
Ngay cả những công cụ rà soát tốt nhất cũng chỉ kiểm tra được phần tiêu chí có thể diễn đạt thành quy tắc máy móc, và phần đó là thiểu số trong toàn bộ danh sách tiêu chí. Máy kiểm tra tốt các lỗi có mặt hoặc vắng mặt: ảnh có thuộc tính chữ thay thế hay không, ô nhập có nhãn liên kết hay không, trang có khai báo ngôn ngữ hay không, tỷ lệ tương phản giữa hai màu là bao nhiêu, thứ tự cấp tiêu đề có nhảy cóc hay không. Máy không kiểm tra được chất lượng: một tấm ảnh biểu đồ có chữ thay thế ghi đúng một chữ hình ảnh thì vẫn qua được máy nhưng hoàn toàn vô dụng với người dùng trình đọc màn hình. Máy cũng không biết thứ tự đọc có hợp lý không, tên của một nút có mô tả đúng hành động không, thông báo lỗi có được truyền tới người dùng không nhìn thấy màn hình không, hay một video có phụ đề đúng nội dung hay chỉ là phụ đề tự động sai bét. Kết luận thực tế: chạy máy để dọn sạch tầng lỗi cơ học, rồi bắt đầu công việc thật bằng tay.
Tương phản màu: các mốc số cần nhớ
Đây là nhóm lỗi phổ biến nhất và cũng là nhóm dễ kiểm tra nhất vì có con số rõ ràng. Chữ cỡ thường cần tỷ lệ tương phản tối thiểu 4,5 trên 1 so với nền để đạt mức AA. Chữ cỡ lớn, tức từ 18 điểm trở lên hoặc từ 14 điểm trở lên nếu in đậm, được hạ xuống mức 3 trên 1. Các thành phần giao diện bấm được và các nét đồ họa mang thông tin, chẳng hạn viền ô nhập, biểu tượng chức năng, đường biểu đồ, cũng cần tối thiểu 3 trên 1 so với vùng xung quanh. Mức AAA nâng hai ngưỡng đầu lên 7 trên 1 và 4,5 trên 1, thường chỉ áp dụng cho nội dung đặc thù. Hai chỗ hay bị bỏ sót: chữ đặt trên ảnh nền, nơi tương phản thay đổi theo từng vùng ảnh nên phải kiểm tra ở vùng xấu nhất; và trạng thái phụ của thành phần như chữ giữ chỗ trong ô nhập, nhãn bị làm mờ, hay nút ở trạng thái rê chuột, những chỗ mà thiết kế hay hạ độ đậm màu xuống dưới ngưỡng.
Bàn phím và tiêu điểm: phép thử năm phút phát hiện nhiều lỗi nhất
Bỏ tay khỏi chuột và nhấn phím Tab từ đầu trang. Ba câu hỏi cần trả lời. Thứ nhất, bạn có nhìn thấy mình đang ở đâu không: mỗi thành phần nhận tiêu điểm phải có viền hoặc dấu hiệu rõ ràng, và lỗi thường gặp là ai đó xóa viền mặc định của trình duyệt vì thấy xấu mà không thay bằng kiểu khác. Thứ hai, bạn có tới được mọi thứ bấm được không: các thành phần dựng bằng thẻ chia khối kèm sự kiện nhấp chuột thường không nhận được tiêu điểm bàn phím, đó là lý do nên dùng đúng thẻ nút và thẻ liên kết. Thứ ba, bạn có bị mắc kẹt ở đâu không: cửa sổ bật lên là chỗ hay giữ tiêu điểm sai cách, phải giữ tiêu điểm bên trong khi đang mở và trả lại đúng chỗ cũ khi đóng, đồng thời đóng được bằng phím Escape. Thêm một chi tiết nhỏ mà tác động lớn: một liên kết bỏ qua điều hướng đặt ở đầu trang giúp người dùng bàn phím không phải nhấn Tab qua toàn bộ trình đơn ở mỗi trang.
Chữ thay thế, cấu trúc tiêu đề và nhãn biểu mẫu
Với chữ thay thế của ảnh, quy tắc là mô tả chức năng của ảnh trong ngữ cảnh chứ không mô tả ảnh. Ảnh trang trí thuần túy nên để chữ thay thế rỗng để trình đọc màn hình bỏ qua, chứ không phải bỏ hẳn thuộc tính. Ảnh là liên kết thì chữ thay thế phải mô tả đích đến. Ảnh chứa chữ hoặc biểu đồ thì phải truyền đạt được thông tin đó, và nếu quá dài thì đặt phần diễn giải ngay trong nội dung trang. Với cấu trúc tiêu đề, mỗi trang nên có đúng một tiêu đề cấp một mô tả nội dung chính, các cấp sau đi tuần tự không nhảy cóc, và tuyệt đối không chọn cấp tiêu đề vì lý do cỡ chữ. Người dùng trình đọc màn hình duyệt trang bằng cách nhảy giữa các tiêu đề, nên cấu trúc lộn xộn khiến họ mất khả năng định vị. Với biểu mẫu, mỗi ô nhập cần một nhãn thật sự liên kết bằng thuộc tính tương ứng, không dùng chữ giữ chỗ thay nhãn vì chữ đó biến mất ngay khi bắt đầu gõ, và thông báo lỗi phải gắn với đúng ô nhập chứ không chỉ đổi màu viền.
Câu hỏi thường gặp (FAQ)
Kết quả trên trang này có phải phân tích trang tôi vừa nhập không?
Không. Trang không tải và không phân tích địa chỉ bạn nhập; điểm số được sinh ngẫu nhiên và danh sách lỗi lấy từ một tập viết sẵn. Nhập một địa chỉ không tồn tại vẫn cho kết quả như thường. Hãy dùng nội dung bên dưới làm danh sách kiểm tra và chạy rà soát thật bằng công cụ chuyên dụng.
Vậy nên dùng công cụ nào để kiểm tra thật?
Bắt đầu bằng phần kiểm tra khả năng tiếp cận có sẵn trong công cụ dành cho nhà phát triển của trình duyệt, đây là lựa chọn miễn phí và không cần cài gì. Sau đó bổ sung một tiện ích rà soát chuyên dụng để có báo cáo chi tiết theo từng tiêu chí, rồi tự kiểm tra thủ công bằng bàn phím và trình đọc màn hình.
Công cụ tự động bắt được bao nhiêu phần lỗi tiếp cận?
Chỉ một phần, và phần còn lại luôn lớn hơn. Máy kiểm tra tốt những thứ có hoặc không có, ví dụ ảnh thiếu chữ thay thế hay tương phản màu dưới ngưỡng. Máy không đánh giá được chất lượng, chẳng hạn chữ thay thế có mô tả đúng ảnh hay không, thứ tự đọc có hợp lý hay không, tên nút có nói đúng hành động hay không.
Tỷ lệ tương phản tối thiểu là bao nhiêu?
Ở mức AA, chữ cỡ thường cần 4,5 trên 1, chữ cỡ lớn từ 18 điểm hoặc từ 14 điểm in đậm cần 3 trên 1. Các thành phần giao diện bấm được và nét đồ họa mang thông tin cũng cần tối thiểu 3 trên 1. Mức AAA nâng hai ngưỡng đầu lên 7 trên 1 và 4,5 trên 1.
WCAG mức A, AA và AAA khác nhau ra sao?
A là mức tối thiểu, thiếu nó thì một số nhóm người dùng không sử dụng được trang. AA là mức mà hầu hết tổ chức và quy định trên thế giới lấy làm mục tiêu, cân bằng giữa tác động và chi phí. AAA đặt yêu cầu rất cao và thường chỉ áp dụng cho từng phần nội dung cụ thể chứ không cho cả website.
Ảnh trang trí nên đặt chữ thay thế thế nào?
Để thuộc tính chữ thay thế rỗng chứ không bỏ hẳn thuộc tính. Chữ thay thế rỗng là tín hiệu để trình đọc màn hình bỏ qua ảnh đó, còn khi thiếu hẳn thuộc tính thì một số trình đọc sẽ đọc tên tệp, thứ thường là một chuỗi vô nghĩa và gây nhiễu cho người nghe.
Dùng chữ giữ chỗ thay cho nhãn ô nhập được không?
Không nên. Chữ giữ chỗ biến mất ngay khi người dùng bắt đầu gõ, nên người ta mất thông tin về việc ô đó dùng để nhập gì, đặc biệt khi quay lại kiểm tra biểu mẫu dài. Ngoài ra chữ giữ chỗ thường có màu nhạt nên hay không đạt ngưỡng tương phản. Hãy dùng nhãn thật sự liên kết với ô nhập.
Vì sao không nên xóa viền tiêu điểm mặc định?
Vì đó là dấu hiệu duy nhất cho người dùng bàn phím biết mình đang ở đâu trên trang. Xóa đi mà không thay bằng kiểu hiển thị khác khiến việc điều hướng bằng phím Tab trở nên bất khả thi. Nếu viền mặc định không hợp thiết kế, hãy thay bằng viền riêng có tương phản đủ chứ đừng bỏ trắng.
Cấu trúc tiêu đề sai thì ảnh hưởng gì?
Người dùng trình đọc màn hình thường duyệt trang bằng cách nhảy giữa các tiêu đề để tìm phần mình cần, giống như người sáng lướt mắt qua trang. Cấu trúc nhảy cóc hoặc chọn cấp tiêu đề theo cỡ chữ khiến họ mất khả năng định vị. Mỗi trang nên có đúng một tiêu đề cấp một và các cấp sau đi tuần tự.
Vùng bấm trên di động nên rộng bao nhiêu?
Nên đủ lớn để ngón tay chạm chính xác, và các nút nhỏ nằm sát nhau là nguồn của rất nhiều thao tác nhầm. Nếu vì lý do thiết kế mà biểu tượng phải nhỏ, hãy mở rộng vùng bấm bằng phần đệm trong suốt xung quanh, hoặc chừa khoảng cách đủ lớn giữa các mục liền kề.
Làm khả năng tiếp cận có giúp ích cho tối ưu tìm kiếm không?
Có, một cách gián tiếp nhưng rõ ràng. Cấu trúc tiêu đề mạch lạc, thẻ ngữ nghĩa đúng vai trò, chữ thay thế mô tả đúng ảnh, khai báo ngôn ngữ và tiêu đề trang rõ ràng đều là những thứ giúp máy tìm kiếm hiểu nội dung. Ngoài ra trải nghiệm tốt hơn cho mọi người cũng làm giảm tỷ lệ rời trang.
Nên sửa nhóm lỗi nào trước khi thời gian có hạn?
Ưu tiên những lỗi chặn hẳn việc sử dụng: thành phần bấm được nhưng không tới được bằng bàn phím, biểu mẫu thiếu nhãn, viền tiêu điểm bị xóa, và tương phản quá thấp ở phần nội dung chính. Sau đó tới chữ thay thế của ảnh mang thông tin và cấu trúc tiêu đề. Các mục còn lại xử lý dần theo từng đợt phát hành.
Từ khóa liên quan
- kiểm tra khả năng tiếp cận website
- wcag là gì
- accessibility website
- tương phản màu chữ và nền
- chữ thay thế cho ảnh
- điều hướng bằng bàn phím
- trình đọc màn hình
- nhãn biểu mẫu html
- cấu trúc thẻ tiêu đề
- wcag mức aa
- liên kết bỏ qua điều hướng
- viền tiêu điểm css
- html ngữ nghĩa
- thuộc tính aria
- kiểm tra accessibility bằng lighthouse
- lỗi tiếp cận thường gặp
- thiết kế web cho người khiếm thị
- phóng to trang 200 phần trăm
- vùng bấm trên di động
- audit accessibility thủ công
