Kiến thức cơ bản về kiểm thử thủ công
Kiểm tra khả năng tiếp cận thủ công sử dụng các công cụ cũng như kiểm tra bàn phím, hình ảnh và nhận thức, và kỹ thuật để tìm ra những vấn đề mà công cụ tự động không thể làm được. Tự động không bao gồm tất cả tiêu chí thành công được xác định trong WCAG, công cụ này quan trọng là bạn không chạy kiểm thử tự động về khả năng hỗ trợ tiếp cận rồi ngừng kiểm thử!
Khi công nghệ ngày càng phát triển, chỉ có công cụ tự động có thể thực hiện được nhiều thử nghiệm hơn, nhưng ngày nay, bạn cần thêm cả quy trình kiểm tra thủ công lẫn công nghệ hỗ trợ vào quy trình thử nghiệm để bao gồm tất cả các điểm kiểm tra WCAG thích hợp.
Ưu điểm của việc kiểm thử khả năng hỗ trợ tiếp cận thủ công:
- Đơn giản và chạy nhanh chóng và hợp lý
- Phát hiện được tỷ lệ phần trăm vấn đề cao hơn so với khi chỉ kiểm thử tự động
- Cần ít công cụ và chuyên môn để thành công
Nhược điểm của việc kiểm thử khả năng hỗ trợ tiếp cận thủ công:
- Phức tạp và tốn thời gian hơn so với thử nghiệm tự động
- Có thể khó lặp lại trên quy mô lớn
- Đòi hỏi chuyên môn về khả năng hỗ trợ tiếp cận hơn để chạy kiểm thử và diễn giải kết quả
Hãy so sánh những yếu tố hỗ trợ tiếp cận và thông tin chi tiết hiện có thể phát hiện được thông qua một công cụ tự động so với những công cụ không thể phát hiện được.
Các loại kiểm thử thủ công
Có nhiều công cụ và kỹ thuật thủ công cần xem xét khi xem xét trang web hoặc ứng dụng hỗ trợ tiếp cận kỹ thuật số. Ba khía cạnh trọng tâm lớn nhất trong kiểm thử thủ công là chức năng bàn phím, bài đánh giá tập trung vào hình ảnh và kiểm tra nội dung chung.
Chúng tôi sẽ đề cập đến từng chủ đề này ở cấp độ cao trong học phần này, nhưng các thử nghiệm sau đây không phải là danh sách đầy đủ tất cả các thử nghiệm thủ công bạn có thể hoặc nên chạy. Chúng tôi khuyên bạn nên bắt đầu bằng danh sách kiểm tra khả năng hỗ trợ tiếp cận thủ công từ một nguồn có uy tín và xây dựng danh sách kiểm thử thủ công tập trung của riêng bạn phù hợp với nhu cầu của nhóm và sản phẩm kỹ thuật số cụ thể.
Kiểm tra bàn phím
Ước tính có khoảng 25% trong số tất cả các vấn đề về hỗ trợ tiếp cận kỹ thuật số có liên quan đến do thiếu hỗ trợ bàn phím. Như chúng ta đã tìm hiểu trong mô-đun tập trung vào bàn phím, điều này ảnh hưởng đến tất cả các kiểu người dùng, bao gồm cả người dùng chỉ dùng bàn phím khi thị lực, người dùng trình đọc màn hình khiếm thị/khiếm thị và những người sử dụng phần mềm nhận dạng giọng nói sử dụng công nghệ dựa vào nội dung có thể truy cập được bằng bàn phím.
Bài kiểm thử bàn phím trả lời các câu hỏi như:
- Trang web hoặc tính năng có yêu cầu dùng chuột để hoạt động không?
- Thứ tự tab có hợp lý và trực quan không?
- Chỉ báo lấy tiêu điểm bằng bàn phím có luôn hiển thị không?
- Bạn có bị kẹt trong một phần tử không được phép bẫy tiêu điểm không?
- Bạn có thể điều hướng phía sau hoặc xung quanh một phần tử cần giữ tiêu điểm không?
- Khi đóng một phần tử nhận tiêu điểm, chỉ báo lấy tiêu điểm có trở về một vị trí hợp lý không?
Mặc dù tác động của chức năng bàn phím là rất lớn, nhưng quy trình kiểm thử lại khá đơn giản. Tất cả những gì bạn cần làm là dành riêng chuột hoặc cài đặt gói JavaScript nhỏ và kiểm tra trang web chỉ bằng bàn phím. Các lệnh sau đây cần thiết để kiểm thử bàn phím.
Kiểm tra bằng hình ảnh
Quy trình kiểm tra bằng hình ảnh tập trung vào các thành phần hình ảnh của trang và sử dụng các công cụ như phóng to màn hình hoặc thu phóng trình duyệt để xem xét trang web hoặc ứng dụng về khả năng hỗ trợ tiếp cận.
Quy trình kiểm tra bằng hình ảnh có thể cho bạn biết:
- Có vấn đề nào về độ tương phản màu mà công cụ tự động không phát hiện được, chẳng hạn như văn bản ở đầu dải chuyển màu hoặc hình ảnh không?
- Có phần tử nào trông giống như tiêu đề, danh sách và phần tử cấu trúc khác nhưng không được mã hóa không?
- Đường liên kết điều hướng và thông tin nhập vào biểu mẫu có nhất quán trên toàn bộ trang web hoặc ứng dụng không?
- Có ánh sáng nhấp nháy, ánh sáng nhấp nháy hoặc ảnh động nào vượt quá mức đề xuất không?
- Nội dung có dấu cách phù hợp không? Đối với chữ cái, từ, dòng và đoạn?
- Bạn có thể xem tất cả nội dung bằng trình phóng to màn hình hoặc tính năng thu phóng của trình duyệt không?
Kiểm tra nội dung
Không giống như kiểm thử hình ảnh tập trung vào bố cục, chuyển động và màu sắc, quy trình kiểm tra nội dung tập trung vào các từ trên trang. Bạn không chỉ nên xem xét nội dung mà còn nên xem xét bối cảnh để đảm bảo người khác hiểu được bối cảnh của nội dung đó.
Quy trình kiểm tra nội dung trả lời các câu hỏi như:
- Tiêu đề trang, tiêu đề trang và nhãn biểu mẫu có rõ ràng và mô tả rõ ràng không?
- Các hình ảnh thay thế có ngắn gọn, chính xác và hữu ích không?
- Có phải chỉ sử dụng màu sắc làm cách duy nhất để truyền tải ý nghĩa hoặc thông tin không?
- Đường liên kết có mang tính mô tả hay bạn sử dụng văn bản chung chung như "đọc thêm" hoặc "nhấp vào đây không?"
- Có thay đổi nào về ngôn ngữ trên trang không?
- Có phải ngôn ngữ thuần tuý đang được sử dụng và tất cả các từ viết tắt có được nêu khi nhắc đến lần đầu tiên không?
Một số quy trình kiểm tra nội dung có thể được tự động hoá một phần. Ví dụ: bạn có thể viết một công cụ tìm lỗi mã nguồn JavaScript để kiểm tra "Nhấp vào đây" và đề xuất bạn thực hiện thay đổi. Tuy nhiên, các giải pháp tuỳ chỉnh này thường vẫn cần người dùng thay đổi bản sao thành nội dung nào đó theo ngữ cảnh.
Bản minh hoạ: Kiểm thử theo cách thủ công
Đến nay, chúng tôi đã chạy kiểm tra tự động trên trang web minh hoạ của mình và phát hiện cũng như khắc phục 8 loại vấn đề khác nhau. Chúng tôi hiện đã sẵn sàng chạy các bước kiểm tra thủ công để xem liệu chúng tôi có thể phát hiện thêm nhiều vấn đề khác về khả năng hỗ trợ tiếp cận hay không.
Bước 1
Bản minh hoạ CodePen được cập nhật của chúng tôi có tất cả các nội dung cập nhật tự động về hỗ trợ tiếp cận được áp dụng.
Hãy xem ở chế độ gỡ lỗi để tiếp tục với
các thử nghiệm tiếp theo. Thao tác này rất quan trọng vì thao tác này sẽ xoá <iframe> xung quanh
trang web minh hoạ. Trang web này có thể ảnh hưởng đến một số công cụ kiểm tra. Tìm hiểu thêm về
Chế độ gỡ lỗi của CodePen.
Bước 2
Bắt đầu quy trình kiểm tra thủ công bằng cách đặt chuột hoặc bàn di chuột sang một bên và di chuyển lên và xuống DOM chỉ bằng bàn phím của bạn.
Vấn đề 1: Chỉ báo lấy nét rõ ràng
Bạn sẽ thấy ngay vấn đề đầu tiên với bàn phím, hay đúng hơn là bạn không nên thấy vấn đề này vì chỉ báo tiêu điểm hiển thị đã bị xoá. Khi quét CSS trong bản minh hoạ, bạn sẽ thấy dòng mã "outline: none" đáng sợ được thêm vào cơ sở mã.
:focus {
outline: none;
}
Hãy khắc phục vấn đề này.
Như đã tìm hiểu trong Mô-đun tiêu điểm bàn phím, bạn cần xoá dòng mã này để cho phép trình duyệt web thêm tiêu điểm hiển thị cho người dùng. Bạn có thể tiến thêm một bước nữa và tạo chỉ báo tiêu điểm có kiểu để đáp ứng tính thẩm mỹ của sản phẩm kỹ thuật số.
:focus {
outline: 3px dotted #008576;
}
Vấn đề 2: Thứ tự đặt tiêu điểm
Sau khi bạn sửa đổi chỉ báo lấy nét và chỉ báo lấy nét đó hiển thị, hãy nhớ nhấn phím thông qua trang. Khi làm như vậy, bạn sẽ nhận thấy rằng trường nhập dữ liệu vào biểu mẫu dùng để đăng ký nhận bản tin không nhận được tiêu điểm. Đã xóa so với thứ tự tiêu điểm tự nhiên theo chỉ mục thẻ phủ định.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Vì chúng tôi muốn mọi người sử dụng trường này để đăng ký nhận bản tin, nên chúng tôi chỉ cần xoá chỉ mục thẻ phủ định hoặc đặt chỉ mục thẻ phủ định về 0 để có thể lấy lại tiêu điểm làm tiêu điểm cho nội dung nhập vào bằng bàn phím.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Bước 3
Sau khi kiểm tra tiêu điểm bàn phím, chúng tôi sẽ chuyển sang kiểm tra hình ảnh và nội dung.
Vấn đề 3: Độ tương phản màu của đường liên kết
Khi bạn trải qua các bài kiểm tra bàn phím bằng cách di chuyển lên và xuống trên trang minh hoạ, bạn có thể nhận thấy bàn phím tập trung vào ba đường liên kết ẩn trực quan trong về các tình trạng bệnh lý khác nhau.
Để trang của chúng tôi có thể truy cập được, các đường liên kết phải nổi bật so với văn bản xung quanh và bao gồm thay đổi kiểu không phải màu sắc khi di chuột bằng chuột và tiêu điểm bằng bàn phím.
Hãy cùng khắc phục nhé.
Một giải pháp nhanh là thêm dấu gạch dưới vào các đường liên kết bên trong đoạn văn để làm nổi bật các đường liên kết đó. Điều này sẽ giải quyết được vấn đề về khả năng hỗ trợ tiếp cận, nhưng có thể không phù hợp với tính thẩm mỹ tổng thể của thiết kế mà bạn muốn đạt được.
Nếu chọn không thêm dấu gạch dưới, bạn cần phải sửa đổi màu sắc sao cho đáp ứng các yêu cầu đối với cả nền và bản sao.
Khi xem bản minh hoạ sử dụng công cụ kiểm tra độ tương phản của đường liên kết, bạn sẽ thấy màu của đường liên kết đáp ứng yêu cầu về độ tương phản màu 4,5:1 giữa văn bản ở kích thước thông thường và nền. Tuy nhiên, các đường liên kết không được gạch chân cũng phải đáp ứng yêu cầu về độ tương phản màu 3:1 so với văn bản xung quanh.
Bạn có thể thay đổi màu của đường liên kết để khớp với các thành phần khác trên trang. Nhưng nếu bạn thay đổi màu của đường liên kết thành màu xanh lục, thì bạn cũng phải sửa đổi nội dung của đường liên kết để đáp ứng yêu cầu chung về độ tương phản màu giữa cả ba thành phần: đường liên kết, nền và văn bản xung quanh.
Vấn đề 4: Độ tương phản màu của biểu tượng
Một vấn đề khác bị bỏ lỡ về độ tương phản màu là các biểu tượng trên mạng xã hội. Trong mô-đun màu sắc và độ tương phản, bạn đã biết rằng các biểu tượng thiết yếu cần phải đáp ứng độ tương phản màu 3:1 so với nền. Tuy nhiên, trong bản minh hoạ, các biểu tượng mạng xã hội có tỷ lệ tương phản là 1,3:1.
Hãy cùng khắc phục nhé.
Để đáp ứng các yêu cầu về độ tương phản màu 3:1, các biểu tượng trên mạng xã hội sẽ chuyển sang màu xám đậm.
Vấn đề 5: Bố cục nội dung
Nếu bạn nhìn vào bố cục của nội dung đoạn, văn bản đã hoàn toàn đều hợp lý. Như bạn đã tìm hiểu trong Mô-đun Kiểu chữ, điều này tạo ra "những dòng sông không gian" Điều này có thể gây khó khăn cho một số để người dùng đọc.
p.bullet {
text-align: justify;
}
Để đặt lại cách căn chỉnh văn bản trong bản minh hoạ, bạn có thể cập nhật mã thành
text-align: left; hoặc xoá hoàn toàn dòng đó khỏi CSS, vì dòng bên trái là
căn chỉnh mặc định cho trình duyệt. Hãy nhớ kiểm tra mã, phòng trường hợp
kiểu kế thừa sẽ xoá cách căn chỉnh văn bản mặc định.
p.bullet {
text-align: left;
}
Bước 4
Khi bạn đã xác định và khắc phục tất cả các vấn đề về hỗ trợ tiếp cận thủ công được nêu trong các bước trước, trang của bạn sẽ trông giống như ảnh chụp màn hình của chúng tôi.
Có thể bạn sẽ gặp nhiều vấn đề về khả năng hỗ trợ tiếp cận trong các bước kiểm tra thủ công hơn so với những gì chúng tôi đã đề cập trong mô-đun này. Chúng ta sẽ tìm hiểu nhiều vấn đề trong số này trong học phần tiếp theo.
Bước tiếp theo
Bạn làm tốt lắm! Bạn đã hoàn thành các mô-đun kiểm thử tự động và thủ công. Bạn có thể xem CodePen mới của chúng tôi, áp dụng tất cả các biện pháp khắc phục sự cố tự động và thủ công liên quan đến khả năng hỗ trợ tiếp cận.
Bây giờ, hãy chuyển đến mô-đun kiểm thử gần đây nhất tập trung vào thử nghiệm công nghệ hỗ trợ.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về kiểm thử khả năng hỗ trợ tiếp cận theo cách thủ công
Những phần tử nào cần đáp ứng tiêu chuẩn về độ tương phản màu của WCAG?