Trang này là tài liệu tham khảo toàn diện về các tính năng hỗ trợ tiếp cận trong Công cụ dành cho nhà phát triển của Chrome. Tài liệu này dành cho những nhà phát triển web:
- Có kiến thức cơ bản về Công cụ cho nhà phát triển, chẳng hạn như cách mở công cụ này.
- Quen thuộc với nguyên tắc và phương pháp hay nhất về hỗ trợ tiếp cận.
Mục đích của tài liệu tham khảo này là giúp bạn khám phá tất cả các công cụ có trong DevTools có thể giúp bạn kiểm tra khả năng hỗ trợ tiếp cận của một trang.
Hãy xem bài viết Di chuyển trong Công cụ của Chrome cho nhà phát triển bằng công nghệ hỗ trợ nếu bạn cần trợ giúp về cách di chuyển trong Công cụ của Chrome cho nhà phát triển bằng một công nghệ hỗ trợ như trình đọc màn hình.
Hãy xem phần Tìm hiểu về tính năng hỗ trợ tiếp cận nếu bạn muốn tìm hiểu cách phát triển trang web hỗ trợ tiếp cận.
Tổng quan về các tính năng hỗ trợ tiếp cận trong Công cụ dành cho nhà phát triển của Chrome
Phần này giải thích cách DevTools phù hợp với bộ công cụ hỗ trợ tiếp cận tổng thể của bạn.
Khi xác định xem một trang có thể truy cập được hay không, bạn cần lưu ý 2 câu hỏi chung sau:
- Tôi có thể điều hướng trang bằng bàn phím hoặc trình đọc màn hình không?
- Các phần tử của trang có được đánh dấu đúng cách cho trình đọc màn hình không?
Nhìn chung, DevTools có thể giúp bạn khắc phục các lỗi liên quan đến câu hỏi #2, vì những lỗi này dễ phát hiện theo cách tự động. Câu hỏi số 1 cũng quan trọng không kém, nhưng rất tiếc là DevTools không thể giúp bạn ở đó. Cách duy nhất để tìm lỗi liên quan đến câu hỏi 1 là tự thử sử dụng một trang bằng bàn phím hoặc trình đọc màn hình. Hãy xem bài viết Cách đánh giá khả năng hỗ trợ tiếp cận để tìm hiểu thêm.
Kiểm tra khả năng hỗ trợ tiếp cận của trang
Nhìn chung, hãy sử dụng tính năng kiểm tra chức năng hỗ trợ tiếp cận trong bảng điều khiển Lighthouse để xác định xem:
- Trang được đánh dấu đúng cách cho trình đọc màn hình.
- Các phần tử văn bản trên trang có tỷ lệ tương phản đủ. Xem thêm bài viết Làm cho trang web của bạn dễ đọc hơn.
Cách kiểm tra một trang:
- Truy cập vào URL mà bạn muốn kiểm tra.
Trong Công cụ dành cho nhà phát triển, hãy nhấp vào bảng điều khiển Lighthouse. DevTools hiển thị cho bạn nhiều tuỳ chọn cấu hình.
Đối với Thiết bị, hãy chọn Thiết bị di động nếu bạn muốn mô phỏng thiết bị di động. Tuỳ chọn này thay đổi chuỗi tác nhân người dùng và đổi kích thước khung nhìn theo cách khác. Nếu phiên bản trang dành cho thiết bị di động hiển thị khác với phiên bản dành cho máy tính, thì tuỳ chọn này có thể ảnh hưởng đáng kể đến kết quả của quy trình kiểm tra.
Trong phần Lighthouse, hãy đảm bảo bạn đã bật tính năng Hỗ trợ tiếp cận. Tắt các danh mục khác nếu bạn muốn loại trừ các danh mục đó khỏi báo cáo. Hãy bật các tính năng này nếu bạn muốn khám phá các cách khác để cải thiện chất lượng trang.
Mục Throttling (Giới hạn) cho phép bạn giới hạn mạng và CPU. Điều này rất hữu ích khi phân tích hiệu suất tải. Tuỳ chọn này không liên quan đến điểm hỗ trợ tiếp cận, vì vậy, bạn có thể sử dụng bất kỳ tuỳ chọn nào mình muốn.
Hộp đánh dấu Xoá bộ nhớ cho phép bạn xoá tất cả bộ nhớ trước khi tải trang hoặc giữ nguyên bộ nhớ giữa các lần tải trang. Tuỳ chọn này cũng có thể không liên quan đến điểm hỗ trợ tiếp cận, vì vậy, bạn có thể sử dụng bất kỳ tuỳ chọn nào bạn muốn.
Nhấp vào Tạo báo cáo. Sau 10 đến 30 giây, DevTools sẽ cung cấp một báo cáo. Báo cáo của bạn đưa ra nhiều mẹo về cách cải thiện khả năng hỗ trợ tiếp cận của trang.
Nhấp vào một quy trình kiểm tra để tìm hiểu thêm về quy trình đó.
Nhấp vào Tìm hiểu thêm để xem tài liệu về quy trình kiểm tra đó.
Xem thêm: Tiện ích aXe
Bạn nên sử dụng tiện ích aXe hoặc tiện ích Lighthouse thay vì bảng điều khiển Lighthouse có sẵn theo mặc định trong Chrome. Các báo cáo này thường cung cấp cùng một thông tin, vì aXe là công cụ cơ bản hỗ trợ bảng điều khiển Lighthouse. Tiện ích aXe có giao diện người dùng khác và mô tả quy trình kiểm tra hơi khác.
Một lợi thế của tiện ích aXe so với bảng điều khiển Kiểm tra là tiện ích này cho phép bạn kiểm tra và làm nổi bật các nút không đạt.
Kiểm thử tính năng luồng lại nội dung bằng Thanh công cụ thiết bị
Tiêu chí lưu lại luồng (reflow) theo Hướng dẫn tiếp cận nội dung web (WCAG) đề xuất rằng nội dung web vẫn có thể xem được mà không bị mất thông tin ngay cả khi thay đổi kích thước khung nhìn hoặc thay đổi hướng. Bằng cách căn chỉnh nội dung thành một cột, bạn có thể hỗ trợ những người dùng sử dụng văn bản phóng to. Để kiểm tra cách nội dung của bạn định hình lại, hãy đổi kích thước khung nhìn một cách linh động bằng thanh công cụ Thiết bị trong bảng điều khiển Lighthouse.
Để đổi kích thước khung nhìn, hãy kéo các ô điều khiển đến bất kỳ kích thước nào bạn cần. Để biết các phương diện cụ thể cần kiểm thử, hãy xem Tiêu chí thành công về tính năng luồng lại của WCAG.
Thẻ Hỗ trợ tiếp cận
Thẻ Hỗ trợ tiếp cận là nơi bạn có thể xem cây hỗ trợ tiếp cận, các thuộc tính ARIA và các thuộc tính hỗ trợ tiếp cận được tính toán của các nút DOM.
Cách mở thẻ Hỗ trợ tiếp cận:
- Nhấp vào bảng điều khiển Elements (Phần tử).
- Trong DOM Tree (Cây DOM), hãy chọn phần tử mà bạn muốn kiểm tra.
- Nhấp vào thẻ Hỗ trợ tiếp cận. Thẻ này có thể bị ẩn sau nút More Tabs (Thẻ khác) keyboard_double_arrow_right .
Bạn có thể kéo thẻ Hỗ trợ tiếp cận lên phía trước để truy cập nhanh hơn trong tương lai.
Xem vị trí của một phần tử trong cây hỗ trợ tiếp cận
Cây hỗ trợ tiếp cận là một tập hợp con của cây DOM. Tệp này chỉ chứa các phần tử từ cây DOM liên quan và hữu ích để hiển thị nội dung của trang trong trình đọc màn hình.
Kiểm tra vị trí của một phần tử trong cây hỗ trợ tiếp cận từ thẻ Hỗ trợ tiếp cận.
Chế độ xem này cho phép bạn chỉ khám phá một nút và các nút cấp trên của nút đó. Để khám phá toàn bộ cây hỗ trợ tiếp cận, hãy làm theo các bước dưới đây.
(Bản xem trước) Khám phá cây hỗ trợ tiếp cận toàn trang
Chế độ xem toàn trang của cây hỗ trợ tiếp cận cho phép bạn khám phá toàn bộ cây và giúp bạn hiểu rõ hơn về cách nội dung trang web của bạn hiển thị với công nghệ hỗ trợ.
Cách khám phá cây hỗ trợ tiếp cận:
- Đánh dấu vào science Bật chế độ xem toàn trang cho cây hỗ trợ tiếp cận.
Trên thanh thao tác ở trên cùng, hãy nhấp vào Reload DevTools (Tải lại công cụ phát triển).
Ở góc trên bên phải của bảng điều khiển Elements (Thành phần), hãy bật/tắt nút accessibility_new Switch to Accessibility Tree view (Chuyển sang chế độ xem cây Hỗ trợ tiếp cận).
Duyệt qua cây hỗ trợ tiếp cận. Bạn có thể mở rộng các nút hoặc nhấp để xem thông tin chi tiết trong phần Thuộc tính được tính toán.
Chọn một nút rồi nhấp vào nút accessibility_new Chuyển sang chế độ xem dạng cây DOM để chuyển về cây DOM.
Nút DOM tương ứng hiện đã được chọn. Đây là một cách hay để hiểu mối liên kết giữa nút DOM và nút cây hỗ trợ tiếp cận.
Xem thuộc tính ARIA của một phần tử
Các thuộc tính ARIA đảm bảo rằng trình đọc màn hình có tất cả thông tin cần thiết để trình bày đúng nội dung của trang.
Xem các thuộc tính ARIA của một phần tử trong thẻ Hỗ trợ tiếp cận.
Xem thứ tự nguồn của các phần tử trên màn hình
Các phần tử trên trang không phải lúc nào cũng xuất hiện theo thứ tự trong nguồn. Điều này có thể gây nhầm lẫn cho những người dùng phụ thuộc vào công nghệ hỗ trợ để di chuyển trên web.
Cách xem và gỡ lỗi thứ tự nguồn trên trang web của bạn:
- Kiểm tra một phần tử trên trang.
- Trong Elements (Thành phần) > Accessibility (Hỗ trợ tiếp cận) > Source Order Viewer (Trình xem thứ tự nguồn), hãy đánh dấu vào check_box Show source order (Hiện thứ tự nguồn).
Trong khung nhìn, DevTools sẽ vẽ đường viền cho các phần tử lồng nhau và đánh dấu các phần tử đó bằng các số tương ứng với thứ tự nguồn của phần tử.
Xem các thuộc tính hỗ trợ tiếp cận đã tính của một phần tử
Một số thuộc tính hỗ trợ tiếp cận được trình duyệt tính toán linh động. Bạn có thể xem các thuộc tính này trong mục Thuộc tính được tính toán của thẻ Hỗ trợ tiếp cận.
Xem các thuộc tính hỗ trợ tiếp cận đã tính toán của một phần tử trong thẻ Hỗ trợ tiếp cận.
Khám phá và khắc phục văn bản có độ tương phản thấp
Công cụ dành cho nhà phát triển có thể tự động tìm các vấn đề về độ tương phản thấp và đề xuất các màu sắc phù hợp hơn để giúp bạn khắc phục. Hãy xem bài viết Làm cho trang web của bạn dễ đọc hơn để tìm hiểu thêm.