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ụ của Chrome cho nhà phát triển. Hướng dẫn này dành cho các 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ụ cho nhà phát triển.
- Nắm rõ các 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ó sẵn trong Công cụ cho nhà phát triển có thể giúp bạn kiểm tra khả năng truy cập của một trang.
Xem bài viết Điều hướng Công cụ của Chrome cho nhà phát triển bằng công nghệ hỗ trợ nếu bạn muốn được trợ giúp về cách điều hướng Công cụ 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ề Hỗ trợ tiếp cận nếu bạn muốn tìm hiểu cách phát triển các trang web hỗ trợ tiếp cận.
Tổng quan về bộ tính năng hỗ trợ tiếp cận trong Công cụ của Chrome cho nhà phát triển
Phần này giải thích cách Công cụ cho nhà phát triển 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ó truy cập được hay không, bạn cần lưu ý 2 câu hỏi chung:
- 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, Công cụ cho nhà phát triển có thể giúp bạn khắc phục lỗi liên quan đến câu hỏi số 2, vì những lỗi này rất 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 tiếc là Công cụ cho nhà phát triển không thể giúp bạn ở đó. Cách duy nhất để tìm lỗi liên quan đến câu hỏi số 1 là thử tự sử dụng một trang bằng bàn phím hoặc trình đọc màn hình. Hãy xem 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 truy cập của trang
Nhìn chung, hãy sử dụng các bước kiểm tra khả năng hỗ trợ tiếp cận trong bảng 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 một trang có tỷ lệ tương phản phù hợp. Hãy xem thêm mục 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ụ cho nhà phát triển, hãy nhấp vào thẻ Lighthouse. Công cụ cho nhà phát triển cho bạn thấy nhiều lựa 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 sẽ thay đổi khác nhau đối với chuỗi tác nhân người dùng và đổi kích thước khung nhìn. Nếu phiên bản dành cho thiết bị di động của trang 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ả kiểm tra của bạn.
Trong phần Lighthouse, hãy đảm bảo rằng bạn đã bật tính năng Hỗ trợ tiếp cận. Hãy tắt các danh mục khác nếu bạn muốn loại trừ chúng khỏi báo cáo. Hãy bật 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.
Phần Điều tiết cho phép bạn điều tiết mạng và CPU. Điều này rất hữu ích khi phân tích hiệu suất tải. Lựa chọn này không liên quan đến điểm số hỗ trợ tiếp cận của bạn, vì vậy, bạn có thể sử dụng tuỳ chọn nào mình muốn.
Hộp đánh dấu Xoá bộ nhớ cho phép bạn xoá toàn bộ bộ nhớ trước khi tải trang hoặc giữ nguyên bộ nhớ giữa các lần tải trang. Lựa chọn này có thể cũng không liên quan đến điểm số hỗ trợ tiếp cận của bạn, vì vậy, bạn có thể sử dụng tuỳ chọn nào mình muốn.
Nhấp vào Tạo báo cáo. Sau 10 đến 30 giây, Công cụ cho nhà phát triển sẽ cung cấp một báo cáo. Báo cáo của bạn sẽ cung cấp cho bạn 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 bản kiểm tra để tìm hiểu thêm.
Nhấp vào Tìm hiểu thêm để xem tài liệu của kết quả kiểm tra đó.
Xem thêm: phần mở rộng 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 lớp này thường cung cấp cùng một thông tin, vì aXe là công cụ cơ bản chạy bảng điều khiển Lighthouse. Tiện ích aXe có giao diện người dùng khác và mô tả các nội dung 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à nó cho phép bạn kiểm tra và làm nổi bật các nút không thành công.
Ngăn Hỗ trợ tiếp cận
Ngăn hỗ trợ tiếp cận là nơi bạn có thể xem cây hỗ trợ tiếp cận, thuộc tính ARIA và thuộc tính hỗ trợ tiếp cận đã tính toán của các nút DOM.
Cách mở ngăn Hỗ trợ tiếp cận:
- Nhấp vào thẻ Phần tử.
- Trong 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 Thêm thẻ
.
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. Lớp này chỉ chứa các phần tử từ cây DOM phù hợp và hữu ích cho việc 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 bằng Ngăn hỗ trợ tiếp cận.
Khung hiển thị này chỉ cho phép bạn khám phá một nút duy nhất và các đối tượng 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.
(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 công nghệ hỗ trợ tiếp cận nội dung trên web của bạn.
Cách khám phá cây hỗ trợ tiếp cận:
- Đánh dấu chọn
Bật cây hỗ trợ tiếp cận toàn trang. Trên thanh thao tác ở trên cùng, hãy nhấp vào Tải lại Công cụ cho nhà phát triển.
Ở góc trên bên phải của bảng điều khiển Phần tử, hãy bật/tắt nút
Chuyển sang chế độ xem dạng 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 đã tính toán.
Chọn một nút và nhấp vào nút
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 rất hiệu quả để hiểu về việc ánh xạ giữa nút DOM và nút cây hỗ trợ tiếp cận của nút này.
Xem các 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 để thể hiện chính xác nội dung của trang.
Xem các thuộc tính ARIA của một phần tử trong ngăn Hỗ trợ tiếp cận.
Xem thứ tự nguồn của các thành phần 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ự xuất hiện 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ợ để điều hướng 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 Phần tử > Hỗ trợ tiếp cận > Trình xem thứ tự nguồn, hãy đánh dấu vào
Hiển thị thứ tự nguồn.
Trong khung nhìn, Công cụ cho nhà phát triển phác thảo các phần tử lồng nhau bằng đường viền và đánh dấu chúng bằng các số tương ứng với thứ tự nguồ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ử
Một số thuộc tính hỗ trợ tiếp cận được trình duyệt tính toán một cách linh động. Bạn có thể xem các thuộc tính này trong phần Computed Properties (Thuộc tính đã tính toán) của ngăn Accessibility (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 ngăn Hỗ trợ tiếp cận.
Khám phá và sửa văn bản có độ tương phản thấp
Công cụ 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 màu sắc phù hợp hơn để giúp bạn khắc phục vấn đề đó. 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.