Tài liệu tham khảo về tính năng hỗ trợ tiếp cận

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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 Chrome DevTools. Tài liệu này dành cho nhà phát triển web:

  • Có kiến thức cơ bản về DevTools, chẳng hạn như cách mở công cụ này.
  • 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ó 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 Điều hướng trong Chrome DevTools bằng công nghệ hỗ trợ nếu bạn đang tìm cách điều hướng trong DevTools 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ề khả 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ề bộ tính năng hỗ trợ tiếp cận trong Chrome DevTools

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ó hỗ trợ tiếp cận hay không, bạn cần lưu ý 2 câu hỏi chung sau:

  1. 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?
  2. 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 số 2, vì những lỗi này dễ dàng phát hiện một cách tự động. Câu hỏi số 1 cũng quan trọng không kém, nhưng tiếc là DevTools không thể giúp bạn trong trường hợp này. Cách duy nhất để tìm lỗi liên quan đến câu hỏi số 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 một trang

Nhìn chung, hãy sử dụng các chế độ 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ó được đánh dấu đúng cách cho trình đọc màn hình hay không.
  • Các phần tử văn bản trên một trang có tỷ lệ tương phản đủ hay không. Hãy xem thêm bài viết Giúp trang web của bạn dễ đọc hơn.

Cách kiểm tra một trang:

  1. Chuyển đến URL mà bạn muốn kiểm tra.

  2. Trong DevTools, hãy nhấp vào bảng điều khiển Lighthouse. DevTools sẽ cho bạn thấy nhiều lựa chọn cấu hình.

    Định cấu hình chế độ quét hỗ trợ tiếp cận trong bảng điều khiển Lighthouse.

  3. Đối với Device (Thiết bị), hãy chọn Mobile (Thiết bị di động) nếu bạn muốn mô phỏng một thiết bị di động. Lựa chọn này sẽ thay đổ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ì lựa chọn này có thể ảnh hưởng đáng kể đến kết quả kiểm tra.

  4. Trong phần Lighthouse, hãy đảm bảo rằng bạn đã bật Accessibility (Khả 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ừ chúng khỏi báo cáo. Hãy bật các danh mục đó nếu bạn muốn khám phá những cách khác để cải thiện chất lượng trang của mình.

  5. Phần Throttling (Điều tiết) cho phép bạn điều tiết mạng và CPU, 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 hỗ trợ tiếp cận của bạn, vì vậy, bạn có thể sử dụng lựa chọn nào tuỳ thích.

  6. Hộp đánh dấu Clear Storage (Xoá bộ nhớ) cho phép bạn xoá tất cả bộ nhớ trước khi tải trang hoặc giữ lại bộ nhớ giữa các lần tải trang. Lựa chọn này cũng có thể không liên quan đến điểm hỗ trợ tiếp cận của bạn, vì vậy, bạn có thể sử dụng lựa chọn nào tuỳ thích.

  7. Nhấp vào Generate Report (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 này 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.

    Báo cáo.

  8. Nhấp vào một bài kiểm tra để tìm hiểu thêm về bài kiểm tra đó.

    Thông tin khác về quy trình kiểm tra.

  9. Nhấp vào Learn More (Tìm hiểu thêm) để xem tài liệu của bài kiểm tra đó.

    Xem tài liệu của một hoạt động kiểm tra.

Xem thêm: Tiện ích aXe

Bạn có thể muố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 tiện ích 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ả các bài kiểm tra hơi khác một chút.

Tiện ích aXe.

Một ưu điểm của tiện ích aXe so với bảng điều khiển Audits (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 thành công.

Kiểm thử việc sắp xếp lại nội dung bằng Thanh công cụ thiết bị

Tiêu chí sắp xếp lại của Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) khuyến nghị rằng nội dung web vẫn có thể xem được mà không bị mất thông tin ngay cả khi khung nhìn được đổi kích thước hoặc thay đổi hướng. Bằng cách căn chỉnh nội dung theo một cột, người dùng sử dụng văn bản phóng to sẽ được hỗ trợ. Để kiểm thử cách sắp xếp lại nội dung, đổi kích thước khung nhìn một cách linh hoạt bằng Thanh công cụ thiết bị trong bảng điều khiển Lighthouse.

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ểm điều khiển đến bất kỳ kích thước nào bạn cần. Để biết các kích thước cụ thể cần kiểm thử, hãy xem tiêu chí thành công về việc sắp xếp 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, 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:

  1. Nhấp vào bảng điều khiển Phần tử.
  2. Trong Cây DOM, hãy chọn phần tử bạn muốn kiểm tra.
  3. Nhấp vào thẻ Hỗ trợ tiếp cận. Thẻ này có thể bị ẩn sau nút More Tabs (Thêm thẻ) keyboard_double_arrow_right .

Kiểm tra một phần tử div trong thẻ Hỗ trợ tiếp cận.

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. Cây này chỉ chứa các phần tử từ 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 từ thẻ Hỗ trợ tiếp cận, hãy bật/tắt Show accessibility tree (Hiện cây hỗ trợ tiếp cận).

Đã bật nút bật/tắt "Hiện cây hỗ trợ tiếp cận".

Nút bật/tắt này sẽ thay thế cây DOM trong bảng điều khiển Phần tử bằng cây hỗ trợ tiếp cận toàn trang. Cây này giúp bạn hiểu rõ hơn về cách nội dung web của bạn được hiển thị cho công nghệ hỗ trợ.

Để duyệt cây hỗ trợ tiếp cận, bạn có thể mở rộng và chọn các nút để xem thông tin chi tiết của chúng trong phần Computed properties (Thuộc tính được tính toán).

Bạn có thể chuyển đổi trở lại cây DOM bất cứ lúc nào. Nút DOM tương ứng vẫn được chọn. Đây là một cách tuyệt vời để hiểu mối quan hệ giữa nút DOM và nút cây hỗ trợ tiếp cận của nút đó.

Xem thuộc tính ARIA của một phần tử

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 một trang.

Xem thuộc tính ARIA của một phần tử trong thẻ Hỗ trợ tiếp cận.

Phần Thuộc tính ARIA.

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:

  1. Kiểm tra một phần tử trên trang.
  2. Trong Elements (Phần tử) > 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ạch ra các phần tử lồng nhau bằng đường viền 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 chúng.

Đã đánh dấu lựa chọn thứ tự nguồ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ử

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 hoạt. Bạn có thể xem các thuộc tính này trong phần Computed Properties (Thuộc tính được tính toán) của thẻ 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 thẻ Hỗ trợ tiếp cận.

Mục "Thuộc tính đã tính toán (hỗ trợ tiếp cận)".

Thẻ Kết xuất

Sử dụng thẻ Rendering (Kết xuất) để mô phỏng một số tính năng đa phương tiện của CSS mà không cần chỉ định các tính năng đó theo cách thủ công trong mã hoặc môi trường kiểm thử. Các tính năng đa phương tiện này sẽ thay đổi giao diện của trang web dựa trên các lựa chọn ưu tiên của thiết bị người dùng. Để kiểm thử khả năng hỗ trợ tiếp cận trực quan của trang, hãy mở thẻ Rendering (Kết xuất) và khám phá các lựa chọn sau:

Khám phá và khắc phục văn bản có độ tương phản thấp

DevTools có thể tự động tìm các vấn đề về độ tương phản thấp và đề xuất các màu tốt hơn để giúp bạn khắc phục các vấn đề đó. Hãy xem bài viết Giúp trang web của bạn dễ đọc hơn để tìm hiểu thêm.