Trang này là tài liệu tham khảo toàn diện 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. Chương trình 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.
- Quen thuộc với các phương pháp hay nhất và nguyên tắc 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ô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 hỗ trợ tiếp cận của một trang.
Xem bài viết Sử dụng Công cụ của Chrome cho nhà phát triển bằng công nghệ hỗ trợ nếu bạn đang cần trợ giúp về cách di chuyển trong 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 bài viết 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 các trang web dễ 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ể di chuyển trên 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 sửa 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 rất tiếc 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 có bàn phím hoặc trình đọc màn hình. Xem Cách xem xét tính năng hỗ trợ tiếp cận để tìm hiểu thêm.
Kiểm tra khả năng tiếp cận của một trang
Nói chung, hãy sử dụng quy trình kiểm tra khả năng hỗ trợ tiếp cận trong bảng điều khiển Lighthouse để xác định xem:
- Một trang được đánh dấu đúng cách cho trình đọc màn hình.
- Các thành phần văn bản trên một trang có tỷ lệ tương phản vừa đủ. Hãy xem thêm phần Làm cho trang web dễ đọc hơn.
Cách kiểm tra một trang:
- Chuyển đến 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 hiển thị 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 một thiết bị di động. Tuỳ chọn này sẽ thay đổi chuỗi tác nhân người dùng theo từng trường hợp và đổi kích thước khung nhìn. 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ể có ảnh hưởng đáng kể đến kết quả kiểm tra.
Trong mục Lighthouse, hãy đảm bảo bạn đã bật 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 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.
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. Tuỳ 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ỳ ý.
Hộp đánh dấu Xoá bộ nhớ cho phép bạn xoá hết bộ nhớ trước khi tải trang hoặc duy trì 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 số hỗ trợ tiếp cận của bạn, vì vậy, bạn có thể sử dụng tuỳ chọn mà bạn 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 báo cáo. Báo cáo này cung cấp cho bạn nhiều mẹo về cách cải thiện khả năng tiếp cận của trang.
Nhấp vào một hoạt động 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 quy trình kiểm tra đó.
Xem thêm: tiện ích aXe
Bạn nên 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. Thường thì các bảng này cung cấp cùng một thông tin, vì aXe là công cụ cơ bản cung cấp năng lượng cho 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 lượt 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à cho phép bạn kiểm tra và đánh dấu 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, các thuộc tính ARIA và các 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ẻ Accessibility (Hỗ trợ tiếp cận). Thẻ này có thể bị ẩn sau nút Thẻ khác
.
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. Thành phần này chỉ chứa các phần tử trong cây DOM có 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 qua ngăn Hỗ trợ tiếp cận.
Chế độ xem này chỉ cho phép bạn khám phá một nút duy nhất và đố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 nội dung web của bạn tiếp xúc với công nghệ hỗ trợ.
Cách khám phá cây hỗ trợ tiếp cận:
- 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 Phần tử, hãy bật nút
Switch to Accessibility Tree view (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 điện 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 hay để nắm được mối liên kết 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 đúng nội dung của trang.
Xem 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ợ để khám phá trên web.
Cách xem và gỡ lỗi theo thứ tự nguồn trên trang web:
- 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 chọn
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 các phần tử đó bằng số tương ứng với thứ tự nguồn của chúng.
Xem các thuộc tính hỗ trợ tiếp cận được 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 điện 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 được tính toán của một phần tử trong ngăn 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ụ cho nhà phát triển có thể tự động phát hiện 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. Hãy xem phần Làm cho trang web dễ đọc hơn để tìm hiểu thêm.