Hướng dẫn này nhằm giúp những người dùng chủ yếu dựa vào công nghệ hỗ trợ (AT), chẳng hạn như trình đọc màn hình, truy cập và sử dụng Chrome DevTools. Chrome DevTools là một bộ công cụ dành cho nhà phát triển web được tích hợp vào trình duyệt Google Chrome. Hãy xem Tài liệu tham khảo về khả năng hỗ trợ tiếp cận nếu bạn đang tìm các tính năng của Công cụ cho nhà phát triển liên quan đến việc cải thiện khả năng hỗ trợ tiếp cận của một trang web.
Khả năng hỗ trợ tiếp cận của Công cụ cho nhà phát triển vẫn đang trong quá trình hoàn thiện. Một số bảng điều khiển và thẻ hoạt động hiệu quả hơn với công nghệ hỗ trợ so với những bảng điều khiển và thẻ khác. Hướng dẫn này sẽ chỉ cho bạn những bảng điều khiển có khả năng hỗ trợ tiếp cận cao nhất và nêu bật các vấn đề cụ thể mà bạn có thể gặp phải trong quá trình sử dụng.
Tổng quan
Công cụ cho nhà phát triển được chia thành một loạt bảng điều khiển được sắp xếp trong một
ARIA tablist. Ví dụ:
- Bảng điều khiển Phần tử cho phép bạn xem và thay đổi các nút DOM hoặc CSS.
- Bảng điều khiển Bảng điều khiển cho phép bạn đọc nhật ký JavaScript và chỉnh sửa trực tiếp các đối tượng.
Trong vùng nội dung của mỗi bảng điều khiển, có một số công cụ khác nhau, thường được gọi là thẻ hoặc ngăn trong tài liệu. Ví dụ: bảng điều khiển Phần tử chứa các thẻ bổ sung để kiểm tra trình nghe sự kiện, cây hỗ trợ tiếp cận và nhiều nội dung khác. Sự khác biệt giữa thẻ và ngăn là tương đối. Lý do duy nhất khiến bạn thấy một thuật ngữ này hoặc thuật ngữ khác là để duy trì tính nhất quán với phần còn lại của tài liệu chính thức về Công cụ cho nhà phát triển.
Phím tắt
Tài liệu tham khảo về Phím tắt của Công cụ cho nhà phát triển là một bảng ghi nhớ hữu ích. Hãy nhớ đánh dấu trang này và tham khảo lại khi bạn khám phá các bảng điều khiển khác nhau.
Mở Công cụ cho nhà phát triển
Để bắt đầu, hãy đọc bài viết Mở Công cụ cho nhà phát triển Chrome. Có một số cách để mở Công cụ cho nhà phát triển, thông qua phím tắt hoặc mục trong trình đơn.
Di chuyển giữa các bảng điều khiển
Bạn có thể di chuyển giữa các bảng điều khiển bằng bàn phím, Trình đơn lệnh hoặc bằng chuột hoặc bàn di chuột.
Di chuyển bằng bàn phím
- Khi Công cụ cho nhà phát triển đang mở, hãy nhấn tổ hợp phím Control+] hoặc Command+] (Mac) để lấy tiêu điểm cho bảng điều khiển tiếp theo.
- Nhấn tổ hợp phím Control+[ hoặc Command+[ (Mac) để lấy tiêu điểm cho bảng điều khiển trước đó.
- Bạn cũng có thể sử dụng tổ hợp phím Shift+Tab để di chuyển tiêu điểm vào
của một bảng điều khiển và sử dụng các phím mũi tên để thay đổi bảng điều khiển, mặc dù có thể
nhanh hơn khi sử dụng các phím tắt đã đề cập trước đó.
tablist
Vấn đề đã biết
- Một số bảng điều khiển, chẳng hạn như bảng điều khiển Bảng điều khiển và Hiệu suất, có thể di chuyển tiêu điểm vào vùng nội dung ngay khi được kích hoạt. Điều này có thể khiến việc di chuyển bằng các phím mũi tên trở nên khó khăn.
- Tên của bảng điều khiển đã chọn sẽ được thông báo, nhưng chỉ sau khi trình đọc màn hình đọc nội dung được lấy tiêu điểm trong bảng điều khiển. Điều này có thể khiến bạn rất dễ bỏ lỡ.
Di chuyển bằng Trình đơn lệnh
Để lấy tiêu điểm cho một bảng điều khiển cụ thể, hãy sử dụng Trình đơn lệnh:
- Khi Công cụ cho nhà phát triển đang mở, hãy nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh. Trình đơn lệnh là một hộp tổ hợp tự động hoàn thành tìm kiếm gần đúng.
- Nhập tên của bảng điều khiển mà bạn muốn mở, sau đó sử dụng bàn phím Down Arrow để di chuyển đến lựa chọn chính xác.
- Nhấn Enter để chạy một lệnh.
Ví dụ: để mở bảng điều khiển Phần tử:
- Mở Trình đơn lệnh.
- Nhập E rồi L. Lựa chọn Bảng điều khiển > Hiện các phần tử được chọn.
- Nhấn Enter để chạy lệnh mở bảng điều khiển.
Việc mở một bảng điều khiển theo cách này sẽ chuyển tiêu điểm đến nội dung của chính bảng điều khiển đó. Trong trường hợp bảng điều khiển Phần tử, tiêu điểm sẽ di chuyển vào Cây DOM.
Bảng điều khiển Phần tử
Kiểm tra một phần tử trên trang
- Di chuyển đến phần tử mà bạn muốn kiểm tra bằng con trỏ của trình đọc màn hình.
- Mô phỏng thao tác nhấp chuột phải vào phần tử để mở trình đơn theo bối cảnh.
- Chọn lựa chọn Kiểm tra. Thao tác này sẽ mở bảng điều khiển Phần tử và lấy tiêu điểm cho phần tử trong Cây DOM.
Cây DOM được bố trí dưới dạng ARIA tree. Xem ví dụ trong bài viết
Điều hướng Cây DOM bằng bàn phím.
Sao chép mã cho một phần tử trong Cây DOM
- Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy mở trình đơn theo bối cảnh bằng cách nhấp chuột phải.
- Mở rộng lựa chọn Sao chép.
- Chọn Sao chép outerHTML.
Vấn đề đã biết
- Sao chép
outerHTMLthường chọn nút mẹ thay vì nút dự định nút. Tuy nhiên, nội dung của phần tử vẫn phải nằm trong nội dung đã sao chép trongouterHTML.
Sửa đổi các thuộc tính của một phần tử trong Cây DOM
- Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy nhấn Enter để làm cho nút đó có thể chỉnh sửa.
- Nhấn Tab để di chuyển giữa các giá trị thuộc tính. Khi bạn nghe thấy "dấu cách", tức là bạn đang ở trong một trường nhập văn bản trống và có thể nhập giá trị thuộc tính mới.
- Nhấn tổ hợp phím Control+Enter hoặc Command+Enter (Mac) để chấp nhận thay đổi và nghe toàn bộ nội dung của phần tử.
Vấn đề đã biết
- Khi bạn nhập vào trường nhập văn bản, bạn sẽ không nhận được ý kiến phản hồi. Nếu bạn nhập sai và sử dụng các phím mũi tên để khám phá nội dung bạn nhập, bạn sẽ không nhận được ý kiến phản hồi. Cách dễ nhất để kiểm tra công việc của bạn là chấp nhận thay đổi, sau đó nghe toàn bộ phần tử được thông báo.
Chỉnh sửa HTML của một phần tử trong Cây DOM
- Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy nhấn Enter để làm cho nút đó có thể chỉnh sửa.
- Nhấn Tab để di chuyển giữa các giá trị thuộc tính. Khi bạn nghe thấy tên của phần tử, ví dụ:
h2, tức là bạn đang ở trong một trường nhập văn bản và có thể thay đổi loại của phần tử. - Nhấn tổ hợp phím Control+Enter hoặc Command+Enter (Mac) để chấp nhận thay đổi.
Ví dụ: việc nhập h3 và nhấn tổ hợp phím Control+Enter hoặc
Command+Enter (Mac) sẽ thay đổi thẻ bắt đầu và thẻ kết thúc
của phần tử thành h3.
Thẻ của bảng điều khiển Phần tử
Bảng điều khiển Phần tử chứa các thẻ bổ sung để kiểm tra những nội dung như CSS được áp dụng cho một phần tử hoặc vị trí của phần tử đó trong cây hỗ trợ tiếp cận.
- Khi tiêu điểm nằm trên một nút trong Cây DOM, hãy nhấn Tab cho đến khi bạn nghe thấy rằng ngăn Kiểu được chọn.
- Sử dụng Right Arrow để khám phá các thẻ khác có sẵn.
Cây DOM chuyển các phần tử có thuộc tính href thành các đường liên kết có thể lấy tiêu điểm, vì vậy
bạn có thể cần nhấn Tab nhiều lần để chuyển đến ngăn Kiểu.
Vấn đề đã biết
Bạn không thể truy cập vào các thẻ Điểm ngắt DOM và Thuộc tính bằng bàn phím.
Ngăn Kiểu
Trong ngăn Kiểu, bạn sẽ thấy các chế độ điều khiển để lọc kiểu, bật/tắt
trạng thái phần tử (chẳng hạn như :active và :focus), bật/tắt lớp,
và thêm lớp mới. Ngoài ra, còn có một công cụ kiểm tra kiểu mạnh mẽ để khám phá và sửa đổi các kiểu được áp dụng cho phần tử đang là trọng tâm trong Cây DOM.
Khái niệm chính cần hiểu về ngăn Kiểu là ngăn này chỉ hiển thị các kiểu cho nút hiện được chọn trong Cây DOM. Ví dụ:
giả sử bạn đã kiểm tra xong các kiểu của nút <header> và giờ bạn muốn
xem các kiểu của nút <footer>. Để làm như vậy, bạn phải chọn nút
<footer> trong Cây DOM.
Bạn có thể thấy việc sử dụng quy trình làm việc Kiểm tra sẽ nhanh hơn để kiểm tra một nút
nằm trong vùng lân cận chung của nút footer (chẳng hạn như một đường liên kết trong
chân trang), nút này sẽ lấy tiêu điểm cho Cây DOM, sau đó sử dụng bàn phím để di chuyển
đến nút chính xác mà bạn quan tâm.
Di chuyển trong ngăn Kiểu
Vì tất cả các công cụ kiểu đều kết nối theo cách này hay cách khác với ngăn Kiểu, nên trước tiên bạn nên trở thành chuyên gia về công cụ này.
- Khi tiêu điểm nằm trên ngăn Kiểu, hãy nhấn Tab để di chuyển tiêu điểm vào bên trong và khám phá nội dung của ngăn này.
- Nhấn Tab cho đến khi kiểu đầu tiên trở nên hoạt động. Nếu bạn đang sử dụng trình đọc màn hình, thì kiểu đầu tiên này sẽ được thông báo là "
element.style {}". - Nhấn Down Arrow để di chuyển trong danh sách các kiểu theo thứ tự mức độ
cụ thể. Trình đọc màn hình sẽ thông báo từng kiểu bắt đầu bằng tên của tệp CSS, số dòng mà kiểu đó xuất hiện và chính tên kiểu đó. Ví dụ: "
main.css:233.card__img {}" - Nhấn Enter để kiểm tra một kiểu chi tiết hơn. Tiêu điểm bắt đầu trên một phiên bản có thể chỉnh sửa của tên kiểu.
- Nhấn Tab để di chuyển giữa các phiên bản có thể chỉnh sửa của từng thuộc tính CSS và các giá trị tương ứng. Ở cuối mỗi khối kiểu là một trường văn bản trống có thể chỉnh sửa mà bạn có thể dùng để thêm các thuộc tính CSS khác.
- Bạn có thể tiếp tục nhấn Tab để di chuyển trong danh sách các kiểu, hoặc nhấn Escape để thoát khỏi chế độ này và quay lại chế độ di chuyển bằng các phím mũi tên.
Đọc tài liệu tham khảo về bàn phím của ngăn Kiểu để biết thêm các phím tắt.
Vấn đề đã biết
- Nếu bạn sử dụng trường văn bản có thể chỉnh sửa Bộ lọc, bạn sẽ không thể di chuyển trong danh sách các kiểu.
Bật/tắt trạng thái phần tử
Cách bật/tắt trạng thái của một phần tử, chẳng hạn như :active hoặc :focus:
- Di chuyển đến ngăn Kiểu và nhấn Tab cho đến khi nút Bật/tắt trạng thái phần tử được lấy tiêu điểm.
- Nhấn Enter để mở rộng tập hợp các trạng thái phần tử. Các trạng thái phần tử được trình bày dưới dạng một nhóm hộp kiểm.
- Nhấn Tab cho đến khi trạng thái đầu tiên,
:active, được lấy tiêu điểm. - Nhấn Space để bật. Nếu phần tử hiện được chọn trong Cây DOM có kiểu
:active, thì kiểu đó sẽ được áp dụng. - Tiếp tục nhấn Tab để khám phá tất cả các trạng thái có sẵn.
Thêm một lớp thoát
Nút Lớp phần tử nằm cạnh nút Bật/tắt trạng thái phần tử. Di chuyển tiêu điểm đến nút này bằng cách nhấn Tab rồi Enter. Tiêu điểm sẽ di chuyển vào một trường văn bản chỉnh sửa có nhãn Thêm lớp mới.
Nút Lớp phần tử chủ yếu được dùng để thêm các lớp hiện có vào một phần tử. Ví dụ: nếu biểu định kiểu của bạn chứa một lớp trợ giúp có tên là
.clearfix bạn có thể nhấn . bên trong trường văn bản chỉnh sửa để xem danh sách các lớp đề xuất và sử dụng Mũi tên xuống để tìm đề xuất
.clearfix. Hoặc tự nhập tên lớp và nhấn
Enter để áp dụng.
Thêm quy tắc kiểu mới
Nút Quy tắc kiểu mới nằm cạnh nút Lớp phần tử. Di chuyển tiêu điểm đến nút này bằng cách nhấn Tab rồi nhấn Enter. Tiêu điểm sẽ di chuyển vào một trường văn bản có thể chỉnh sửa bên trong trình kiểm tra kiểu. Nội dung văn bản ban đầu của trường là tên thẻ của phần tử được chọn trong Cây DOM. Bạn có thể nhập bất kỳ tên lớp nào bạn muốn vào trường này, sau đó nhấn Tab để gán các thuộc tính CSS cho lớp đó.
Thẻ Đã tính toán
Khi tiêu điểm nằm trên thẻ Đã tính toán, hãy nhấn Tab để di chuyển tiêu điểm vào bên trong và khám phá nội dung của thẻ này. Trong thẻ Đã tính toán , có các chế độ điều khiển để khám phá những thuộc tính CSS thực sự được áp dụng cho một phần tử theo thứ tự mức độ cụ thể.
Khám phá tất cả các kiểu đã tính toán
Nhấn Tab cho đến khi bạn chuyển đến tập hợp các kiểu đã tính toán. Các kiểu này được trình bày dưới dạng tree ARIA. Việc mở rộng hộp danh sách sẽ cho biết công cụ chọn CSS nào đang áp dụng kiểu đã tính toán. Các công cụ chọn này được sắp xếp theo mức độ cụ thể.
Trình đọc màn hình sẽ thông báo giá trị đã tính toán, bộ chọn CSS nào đang khớp, tên tệp của biểu định kiểu chứa bộ chọn và số dòng của bộ chọn.
Vấn đề đã biết
- Nếu sử dụng trường văn bản Bộ lọc , bạn sẽ không thể kiểm tra các kiểu nữa.
Thẻ Trình nghe sự kiện
Trong bảng điều khiển Phần tử , bạn có thể kiểm tra các trình nghe sự kiện được áp dụng cho một phần tử bằng thẻ Trình nghe sự kiện. Khi tiêu điểm nằm trên ngăn Kiểu, hãy nhấn Right Arrow để di chuyển đến thẻ Trình nghe sự kiện.
Khám phá trình nghe sự kiện
Trình nghe sự kiện được trình bày dưới dạng tree ARIA. Bạn có thể sử dụng các phím mũi tên để di chuyển trong các trình nghe sự kiện. Trình đọc màn hình sẽ thông báo tên của đối tượng DOM mà trình nghe sự kiện được đính kèm, cũng như tên tệp nơi trình nghe sự kiện được xác định và số dòng của trình nghe sự kiện đó.
Ngăn Hỗ trợ tiếp cận
Khi tiêu điểm nằm trên ngăn Hỗ trợ tiếp cận, hãy nhấn Tab để di chuyển tiêu điểm vào bên trong và khám phá nội dung của ngăn này. Trong ngăn Hỗ trợ tiếp cận, có các chế độ điều khiển để khám phá cây hỗ trợ tiếp cận, các thuộc tính ARIA được áp dụng cho một phần tử và các thuộc tính hỗ trợ tiếp cận đã tính toán của phần tử đó.
Cây hỗ trợ tiếp cận
Cây hỗ trợ tiếp cận được trình bày dưới dạng ARIA tree, trong đó mỗi treeitem
tương ứng với một phần tử trong DOM. Cây này sẽ thông báo vai trò đã tính toán cho nút được chọn. Các phần tử chung, chẳng hạn như div và span, được thông báo là "GenericContainer" trong cây. Sử dụng các phím mũi tên để di chuyển trong cây và khám phá mối quan hệ mẹ-con.
Vấn đề đã biết
- Loại cây ARIA mà ngăn Hỗ trợ tiếp cận sử dụng có thể không có trong Chrome cho trình đọc màn hình của hệ điều hành Mac, chẳng hạn như VoiceOver. Hãy đăng ký theo dõi vấn đề #868480 trên Chromium để được thông báo về tiến trình giải quyết vấn đề này.
- Các phần Thuộc tính ARIA và Thuộc tính đã tính toán được đánh dấu là cây ARIA, nhưng không bao gồm tính năng quản lý tiêu điểm. Điều này có nghĩa là bạn không thể thao tác các phần này bằng bàn phím.
Bảng điều khiển Kiểm tra
Bảng điều khiển Kiểm tra cho phép bạn chạy một loạt các bài kiểm tra trên một trang web để kiểm tra các vấn đề thường gặp liên quan đến hiệu suất, khả năng hỗ trợ tiếp cận, SEO và một số danh mục khác.
Định cấu hình và chạy quy trình kiểm tra
- Khi bảng điều khiển Kiểm tra được mở lần đầu tiên, tiêu điểm sẽ được đặt trên nút Chạy quy trình kiểm tra ở cuối biểu mẫu. Theo mặc định, biểu mẫu được định cấu hình để chạy quy trình kiểm tra cho mọi danh mục bằng cách sử dụng tính năng mô phỏng thiết bị di động trên kết nối 3G mô phỏng.
- Sử dụng Shift+Tab hoặc di chuyển ngược lại ở chế độ Duyệt xem để thay đổi chế độ cài đặt kiểm tra.
- Khi bạn đã sẵn sàng chạy quy trình kiểm tra, hãy di chuyển ngược lại đến nút Chạy quy trình kiểm tra rồi nhấn Enter.
- Tiêu điểm sẽ di chuyển vào một cửa sổ phương thức có nút Huỷ cho phép bạn thoát khỏi quy trình kiểm tra. Bạn có thể nghe thấy một loạt âm thanh cảnh báo khi quy trình kiểm tra chạy và làm mới trang nhiều lần.
Vấn đề đã biết
- Các phần khác nhau của biểu mẫu cấu hình không được đánh dấu bằng phần tử
fieldset. Bạn có thể dễ dàng di chuyển trong các phần này ở chế độ Duyệt xem để tìm ra các chế độ điều khiển được liên kết với từng phần. - Không có âm báo hoặc thông báo về khu vực trực tiếp khi quy trình kiểm tra chạy xong. Thông thường, quy trình này mất khoảng 30 giây, sau đó bạn có thể di chuyển đến kết quả. Sử dụng chế độ Duyệt xem để nhanh chóng xem kết quả.
Di chuyển trong báo cáo kiểm tra
Báo cáo kiểm tra được sắp xếp thành các phần tương ứng với từng danh mục kiểm tra. Báo cáo sẽ mở ra với danh sách điểm số cho từng danh mục.
Các điểm số này cũng là đường liên kết mà bạn có thể dùng để chuyển đến các phần có liên quan.
Trong mỗi phần là các phần tử details có thể mở rộng, chứa thông tin liên quan đến các quy trình kiểm tra đã vượt qua hoặc không vượt qua. Theo mặc định, chỉ các quy trình kiểm tra không vượt qua mới được hiển thị.
Mỗi phần kết thúc bằng một phần tử details cuối cùng chứa tất cả các quy trình kiểm tra đã vượt qua.
Để chạy một quy trình kiểm tra mới, hãy sử dụng tổ hợp phím Shift+Tab để thoát khỏi báo cáo và tìm nút Thực hiện quy trình kiểm tra.