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