Checklist chất lượng kỹ thuật của The Washington Post

Danh sách kiểm tra sau đây được lấy từ hướng dẫn chi tiết hơn của WCAG. Điều này không bao gồm mọi vấn đề về khả năng tiếp cận có thể xảy ra nhưng nhằm mục đích bao gồm các giống nổi bật nhất. Nó có nghĩa là một hướng dẫn cấp nhập cảnh.

Quan trọng: Lặp lại tất cả các bước bên dưới trên tất cả các kích thước màn hình (thiết bị di động, máy tính bảng, máy tính để bàn) để đánh giá tốt hơn khả năng truy cập trên các thiết bị.

Nhiều mục trong danh sách kiểm tra liên kết đến hướng dẫn chi tiết hơn từ tài liệu trợ năng của chúng tôi về cách kiểm tra.

1. Trình đọc màn hình & điều khiển bàn phím

Nó có vẻ phức tạp, nhưng quá trình kiểm tra này thường chỉ mất một hoặc hai phút! Sử dụng các liên kết bên dưới và liên hệ với bất kỳ câu hỏi nào.

Chỉ điều hướng nội dung bằng bàn phím. Nhấn phím tab (cần thiết lập nếu sử dụng Firefox và Safari) và shift+ tab để chuyển tiếp và lùi qua các nút, liên kết, phần tử có thể di chuột và bất kỳ phần tử nào khác mà người dùng có thể tương tác, đảm bảo (a) mỗi nút nhận được kiểu tiêu điểm thích hợp và (b) chúng có thể nhấp được bằng phím enter (liên kết và button) và/hoặc phím cách (button). Mỗi lần nhấn tab, bạn sẽ thấy có gì đó thay đổi trên trang. Nếu không, có vấn đề về kiểu tiêu điểm hoặc chỉ mục tab bị thiếu.
Thử nghiệm tuyến tính với trình đọc màn hình VoiceOver (Apple). Sử dụng trình đọc màn hình, điều hướng trang từ trên xuống dưới. Bạn có thể nhấp bằng chuột để định vị trình đọc màn hình, điều này hữu ích cho việc kiểm tra các phần cụ thể của trang. Đảm bảo tất cả văn bản hiển thị được đọc to với cách phát âm chính xác và theo thứ tự hợp lý.
Thử nghiệm với rotor (caps lock+ U -với VoiceOver) và đảm bảo tất cả các liên kết, nút và các thành phần khác đều có tên phù hợp. Các phần tử tương tác không được có tên chung chung như “bấm vào đây”. Bạn sẽ có thể hiểu chức năng của từng liên kết hoặc nút từ menu rotor mà không cần ngữ cảnh khác từ trang.
Xác nhận thứ tự tiêu đề là chính xác. Kiểm tra tiêu đề trang bằng trình đọc màn hình. Trình tự tiêu đề có ý nghĩa không? Chỉ nên có một h1, tiêu đề trang. Từ đó, các tiêu đề phải được sắp xếp nghiêm ngặt theo phân cấp trang (không chuyển từ h2 sang h4, không sử dụng h2 làm tiêu đề phụ của một h3, v.v.).
Xác nhận các mốc trang hiện có và có nội dung chính xác Các mốc trang cơ sở có hiện diện không? Nếu có nội dung trang bổ sung như sidebar hoặc right rail, thì nội dung đó có nằm trong thẻ không? Các mốc có thể truy cập được bằng trình đọc màn hình không? Chúng phải chứa nội dung phù hợp để giúp trình đọc màn hình quét trang nhanh chóng.

2. Đa phương tiện

Đảm bảo tất cả hình ảnh đều có văn bản thay thế. Nếu một hình ảnh hoàn toàn là trang trí, hãy đảm bảo rằng hình ảnh đó vẫn có alt hoặc alt=”” hiện diện trong HTML. Tương tự, video và ảnh gif phải có mô tả bằng văn bản cho người dùng trình đọc màn hình.
Kiểm tra với cài đặt chuyển động giảm được bật. Bật chuyển động giảm và đảm bảo tất cả hoạt ảnh không cần thiết và nội dung chuyển động khác được loại bỏ khi làm mới trang. Nếu không, thì bạn nên sử dụng truy vấn phương tiện chuyển động ưu tiên hơn để sửa đổi hành vi cho phù hợp.
Ẩn nội dung không cần thiết khỏi trình đọc màn hình. Giống như bạn đặt alt=”” cho các hình ảnh trang trí đơn thuần để ẩn chúng khỏi trình đọc màn hình, bạn nên thêm aria-hidden=”true” cho nội dung trên trang không thân thiện với trình đọc màn hình. Một ví dụ có thể là một bản đồ bầu cử chứa đầy svgs và nhãn, v.v. Bạn có thể bao gồm một phiên bản bảng của dữ liệu hoặc một số thay thế khác cho khả năng truy cập, sau đó ẩn bản đồ bằng aria-hidden.
Tránh tự động phát âm thanh và video. Không bao giờ tự động phát âm thanh. Video tự động phát, hoạt ảnh và đồ họa khác (bao gồm cả gif) không được khuyến khích. Đảm bảo tất cả các phiên bản âm thanh và video đều có nút tạm dừng, dừng hoặc ẩn có thể truy cập được.
Loại bỏ nội dung nhấp nháy nhanh. Video, gif và hoạt ảnh không được bao gồm bất kỳ trường hợp nhấp nháy hoặc nhấp nháy nào hơn 3 lần trong vòng một giây bất kỳ, vì đây là nguy cơ bị giật.
Cung cấp phụ đề và bản chép lời. Bất cứ nơi nào có âm thanh, nên cung cấp bản chép lời. Video có âm thanh nên bao gồm phụ đề ngoài bản ghi. Cả hai nên bao gồm các từ được nói VÀ bất kỳ âm thanh có ý nghĩa nào khác từ âm thanh (chẳng hạn như tiếng thở dài hoặc tiếng cười trong cuộc trò chuyện hoặc tiếng chặt dao khi nấu ăn).

3. Cài đặt văn bản, nhãn và thu phóng

Đảm bảo văn bản có thể đọc được và bằng ngôn ngữ đơn giản. Văn bản không được nhỏ hơn 12px và được viết bằng ngôn ngữ đơn giản bất cứ khi nào có thể. Có bất kỳ biệt ngữ hoặc sử dụng các thành ngữ? Những điều này nên tránh.
Đảm bảo không cần trang trí văn bản để hiểu nghĩa. Bạn có sử dụng văn bản được gạch chân hoặc văn bản gạch ngang? Các trang trí văn bản như thế này thường không được trình đọc màn hình nhận ra và cũng thường gây nhầm lẫn cho những người dùng khác, vì vậy chúng thường không được khuyến nghị. Nếu bạn sử dụng trang trí văn bản để truyền đạt ý nghĩa thì bạn cũng phải cung cấp các cách khác để người dùng hiểu ý nghĩa của văn bản được trang trí.
Đảm bảo nội dung không phải tiếng Anh được gắn nhãn như vậy. Nội dung bằng các ngôn ngữ không phải tiếng Anh, chẳng hạn như tiếng Ả Rập hoặc tiếng Tây Ban Nha, phải có bộ thuộc tính lang=”CODE”, trong đó CODE là mã ngôn ngữ, ví dụ: “ar” cho tiếng Ả Rập hoặc “es” cho tiếng Tây Ban Nha. Có một danh sách các mã ngôn ngữ . Điều này là cần thiết để trình đọc màn hình có thể đọc chính xác văn bản không phải tiếng Anh. Ngoài ra, tiếng Ả Rập và một số ngôn ngữ khác được đọc từ phải sang trái. Trong những trường hợp đó, chúng ta cần đặt một thuộc tính bổ sung trong HTML, dir=”rtl.
Gắn nhãn rõ ràng cho nội dung tương tác. Ý nghĩa của các biểu tượng, nút và các yếu tố khác phải được truyền đạt rõ ràng qua văn bản bất cứ khi nào có thể. Trong mọi trường hợp, các phần tử tương tác phải có nhãn aria thích hợp. Tránh lời nhắc hoặc thông báo của người dùng tự động biến mất. Nếu nội dung bao gồm một biểu mẫu, hãy đảm bảo cung cấp các lời nhắc và thông báo lỗi rõ ràng. Xem hướng dẫn của chúng tôi về các biểu mẫu.
Thay đổi mức thu phóng trang và cài đặt thu phóng trình duyệt. Đặt thu phóng trang thành 200% (trên máy Mac, nhấn command +để phóng to). Văn bản có chia tỷ lệ chính xác không? Nó vẫn có thể đọc được (không bị tràn, chồng lên nhau, v.v.)? Sau đó, Khôi phục thu phóng trang thành 100% và tăng kích thước phông chữ trong cài đặt trình duyệt của bạn lên 200%. Văn bản có chia tỷ lệ chính xác không? Nó vẫn có thể đọc được?

4. Màu sắc

Xác nhận văn bản màu trắng không bao giờ có trên nền đen thuần. Văn bản trắng trên nền đen thuần gây ra hiện tượng mờ được gọi là hiện tượng mờ đối với nhiều người dùng bị loạn thị. Xem hướng dẫn của chúng tôi để tránh halation .
Xác nhận văn bản màu đen không bao giờ có trên nền trắng tinh khiết. Văn bản màu đen trên nền trắng tinh khiết gây mỏi mắt cho nhiều người dùng . Xem hướng dẫn của chúng tôi để tránh mỏi mắt .
Đảm bảo độ tương phản màu đáp ứng tiêu chuẩn WCAG AA. Tất cả các kết hợp màu, đặc biệt đối với văn bản và các phần tử tương tác, phải đáp ứng ít nhất tiêu chuẩn tương phản màu AA (tốt nhất là AAA) bằng công cụ WebAIM .
Kiểm tra độ tương phản để biết các dạng mù màu phổ biến. Đảm bảo các tổ hợp màu đáp ứng tiêu chuẩn độ tương phản màu AA dành cho người dùng mù màu trong số ít nhất ba dạng mù màu phổ biến nhất.
Xem trang ở chế độ tối và sáng. Cả chế độ tối và chế độ sáng đều phải được hỗ trợ. Trang có tự động chuyển sang chế độ sáng hoặc tối theo cài đặt trình duyệt không? Trang có vượt qua ngưỡng tương phản màu ở cả hai chế độ không? Và mọi thứ có thay đổi màu sắc chính xác khi chuyển sang sáng hoặc tối không? Tất cả các liên kết, nút, phông chữ, v.v. trên trang vẫn hiển thị chứ?

5. Kiểm thử tự động (sẽ không bắt được hầu hết các vấn đề)

Nếu bạn là nhà phát triển, hãy đọc tài liệu của chúng tôi về kiểm tra tự động để biết thông tin về cách thêm kiểm tra tự động vào mã của bạn.

Chạy thử nghiệm WAVE. Cài đặt tiện ích mở rộng WAVE Chrome và sau đó sử dụng nó trên trang. Công cụ này rất phù hợp cho người mới bắt đầu vì nó cho phép bạn tìm hiểu về các loại vấn đề khác nhau bằng cách nhấp vào các nhãn tương tác xuất hiện trên trang. Khắc phục mọi sự cố được gắn cờ.
Chạy thử nghiệm ax DevTools. Cài đặt Tiện ích mở rộng ax DevTools cho Chrome và sau đó sử dụng nó trên trang ( hướng dẫn sử dụng ax DevTools ). Khắc phục mọi sự cố được gắn cờ.