Công cụ của Chrome cho nhà phát triển sẽ ra mắt một cây hỗ trợ tiếp cận đầy đủ để giúp nhà phát triển dễ dàng nắm được thông tin tổng quan về toàn bộ cây. Trong bài đăng này, hãy tìm hiểu cách tạo cây này và cách sử dụng cây này trong công việc của bạn.
Cây hỗ trợ tiếp cận là gì?
Công nghệ hỗ trợ như trình đọc màn hình sử dụng API hỗ trợ tiếp cận của Chromium để tương tác với nội dung web. Mô hình cơ bản của API này là cây hỗ trợ tiếp cận: cây gồm các đối tượng hỗ trợ tiếp cận mà công nghệ hỗ trợ có thể truy vấn các thuộc tính và thuộc tính cũng như thực hiện các thao tác trên đó. Nhà phát triển web định hình và thao tác với cây hỗ trợ tiếp cận chủ yếu thông qua các thuộc tính DOM, chẳng hạn như thuộc tính ARIA cho HTML.
Trong Công cụ của Chrome cho nhà phát triển, chúng tôi cung cấp ngăn hỗ trợ tiếp cận để giúp nhà phát triển hiểu cách nội dung của họ hiển thị với công nghệ hỗ trợ. Cụ thể, khi một nút được chọn trong trình xem cây DOM, các thuộc tính của nút hỗ trợ tiếp cận tương ứng sẽ hiển thị trong ngăn cùng với chế độ xem của các nút cấp trên và cấp con của nút đó.
Cây được tạo như thế nào?
Trước khi tìm hiểu về giao diện xem cây đầy đủ mới này trong DevTools, hãy cùng chúng tôi tìm hiểu sơ lược về cây hỗ trợ tiếp cận theo cách dễ hiểu hơn. Cây hỗ trợ tiếp cận là một phần phái sinh của cây DOM. Cấu trúc của tệp này gần giống như vậy, nhưng được đơn giản hoá để xoá các nút không có nội dung ngữ nghĩa, chẳng hạn như phần tử <div> chỉ dùng để tạo kiểu. Mỗi nút trong cây có một vai trò như Button hoặc Heading và thường có tên có thể lấy từ các thuộc tính ARIA hoặc bắt nguồn từ nội dung của nút. Nếu chúng ta xem xét một tài liệu HTML:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
Trình kết xuất trong Chromium, có tên là Blink, lấy một cây hỗ trợ tiếp cận nội bộ theo cách tương tự như sau.
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
Xin lưu ý rằng cách trình bày này chứa nhiều nút thừa có vai trò genericContainer, điều này dường như mâu thuẫn với câu nhận định ở trên rằng cây hỗ trợ tiếp cận là một dẫn xuất đơn giản của cây DOM. Tuy nhiên, hầu hết các nút này chỉ xuất hiện trong cây nội bộ và sẽ không hiển thị với công nghệ hỗ trợ. Vì Công cụ cho nhà phát triển thu thập thông tin hỗ trợ tiếp cận trực tiếp từ quy trình kết xuất, nên đây là cách trình bày dạng cây mà Công cụ cho nhà phát triển xử lý.
Cây hỗ trợ tiếp cận đầy đủ trong Công cụ cho nhà phát triển
Cây hỗ trợ tiếp cận mới, đầy đủ được đồng bộ hoá với cây DOM để nhà phát triển có thể chuyển đổi qua lại giữa hai cây. Chúng tôi hy vọng rằng cây mới sẽ dễ khám phá, hữu ích và dễ sử dụng hơn.
Giờ đây, khi đã biết cách hoạt động của cây hỗ trợ tiếp cận, bạn có thể sử dụng Công cụ cho nhà phát triển để xem giao diện của chế độ xem cây mới. Tài liệu HTML sau đây có tiêu đề, tiêu đề và hai nút được dùng để hiển thị cây.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
Chế độ xem cây trước đó chỉ cho phép bạn khám phá một nút và các nút cấp trên của nút đó.
Giờ đây, khi bạn bật/tắt cây mới, cây này sẽ thay thế chế độ xem cây DOM và cho phép bạn xem toàn bộ cây hỗ trợ tiếp cận cho trang:
Xây dựng cây Lazy
Để cây hoạt động hiệu quả ngay cả đối với các trang web lớn hơn, cây được tạo từng phần trên giao diện người dùng khi được khám phá. Sau khi một nút được mở rộng trong cây, các nút con của nút đó sẽ được tìm nạp thông qua Giao thức DevTools của Chrome (CDP) và cây sẽ được tạo lại.
Phát trực tiếp
Chế độ xem cây mới hoạt động và cập nhật linh động nếu cây hỗ trợ tiếp cận thay đổi trong trình kết xuất. Công cụ này sẽ liên kết với cùng một cơ chế để thông báo cho công nghệ hỗ trợ về những thay đổi đối với cây và sử dụng cơ chế đó để phát sự kiện đến giao diện người dùng của DevTools bằng các nút đã cập nhật. Trong thực tế, phần phụ trợ CDP sẽ theo dõi các bản cập nhật cho cây, theo dõi những nút đã được yêu cầu trước đó và gửi sự kiện đến giao diện người dùng DevTools nếu có bất kỳ nút nào trong số này thay đổi.
Câu chuyện về nhiều cây
Trong phần mô tả cây hỗ trợ tiếp cận là gì, bạn đã tìm hiểu cách Blink tạo cây hỗ trợ tiếp cận cho DOM mà nó đang hiển thị và DevTools tìm nạp cây này thông qua CDP. Mặc dù điều này là đúng, nhưng chúng tôi đã bỏ qua một số chức năng trong phần mô tả này. Trên thực tế, có khá nhiều cách để trải nghiệm cây hỗ trợ tiếp cận trong Chromium. Khi thiết kế chế độ xem dạng cây mới cho DevTools, chúng tôi đã đưa ra một số lựa chọn về phần nội bộ hỗ trợ tiếp cận của Chromium mà chúng tôi muốn hiển thị.
Nền tảng
Mỗi nền tảng có một API hỗ trợ tiếp cận khác nhau và mặc dù hình dạng của cây giống nhau trên tất cả nền tảng, nhưng API để tương tác với cây lại khác nhau và tên của các thuộc tính cũng có thể khác nhau. Công cụ của nhà phát triển hiển thị cây nội bộ của Chromium, trong đó các vai trò và thuộc tính có xu hướng khớp với các vai trò và thuộc tính được xác định trong quy cách ARIA.
Nhiều khung và tính năng tách biệt trang web
Vì Chromium không chỉ đặt nội dung của mỗi thẻ trong các quy trình kết xuất khác nhau mà còn phân tách các tài liệu trên nhiều trang web trong các quy trình kết xuất khác nhau, nên chúng ta phải kết nối riêng với từng tài liệu con ngoài quy trình qua CDP và tìm nạp cây hỗ trợ tiếp cận của tài liệu đó. Sau đó, chúng ta sẽ nối các cây con này với nhau trên giao diện người dùng để tạo cảm giác về một cây nhất quán, mặc dù các cây con này nằm trong các quy trình kết xuất khác nhau trong Chromium.
Các nút bị bỏ qua và không thú vị
Theo mặc định, chúng tôi ẩn một số nút: nút bị bỏ qua và nút có vai trò "chung" không có tên. Các nút này không mang ý nghĩa ngữ nghĩa và trong trường hợp các nút bị bỏ qua, không hiển thị với công nghệ hỗ trợ. Chúng ta ẩn các nút này để tránh làm lộn xộn chế độ xem dạng cây. Nếu không, cây hỗ trợ tiếp cận cho hầu hết các trang web sẽ có dạng như sau:
Lưu ý ở đây là về cơ bản, điều này có nghĩa là chúng ta cần tạo một cây khác với cây có sẵn trên phần phụ trợ. Ví dụ: giả sử chúng ta có các nút A, B, C và X, trong đó A có nút con X và B, còn X có nút con C. Nếu X là một nút bị bỏ qua, chúng ta sẽ loại bỏ X khỏi cây và tạo một cây trong đó C là nút con của A.
Trên giao diện người dùng, chúng ta tạo cây đầy đủ bao gồm cả các nút bị bỏ qua và chỉ cắt bỏ các nút đó ngay trước khi hiển thị các nút. Chúng ta làm điều này vì hai lý do:
- Điều này giúp bạn dễ dàng xử lý các bản cập nhật nút từ phần phụ trợ hơn nhiều, vì chúng ta có cùng cấu trúc cây trên cả hai điểm cuối. Ví dụ: nếu xoá nút B trong ví dụ, chúng ta sẽ nhận được thông tin cập nhật cho nút X (vì các nút con của nút X đã thay đổi), nhưng nếu đã cắt tỉa nút đó, chúng ta sẽ khó xác định được nội dung cần cập nhật.
- Đây là cách đảm bảo rằng tất cả các nút DOM đều có một nút hỗ trợ tiếp cận tương ứng. Khi cây được bật/tắt, chúng ta sẽ chọn nút tương ứng với nút hiện đang được chọn trong cây DOM. Vì vậy, đối với ví dụ trước, nếu người dùng bật/tắt cây trong khi nút DOM tương ứng với X được chọn, chúng ta sẽ chèn X giữa các nút A và B rồi chọn X trong cây. Điều này cho phép người dùng kiểm tra nút hỗ trợ tiếp cận cho tất cả các nút DOM và giúp xác định lý do nút bị bỏ qua.
Ý tưởng trong tương lai
Việc khởi chạy cây hỗ trợ tiếp cận mới chỉ là bước khởi đầu. Chúng tôi có một vài ý tưởng cho các dự án trong tương lai mà chúng tôi có thể xây dựng dựa trên chế độ xem mới, nhưng chúng tôi cũng rất mong nhận được ý kiến phản hồi của bạn!
Bộ lọc thay thế
Như đã giải thích ở trên, chúng tôi hiện lọc ra các nút được coi là không thú vị. Chúng ta có thể cung cấp cách tắt hành vi này và hiển thị tất cả các nút hoặc cung cấp các bộ lọc thay thế như Hiển thị nút điểm tham chiếu hoặc Hiển thị tiêu đề.
Làm nổi bật các vấn đề về a11y
Chúng ta có thể kết hợp phân tích "các phương pháp hay nhất về hỗ trợ tiếp cận" với cây và làm nổi bật các vấn đề về hỗ trợ tiếp cận ngay trên các nút vi phạm.
Hiển thị các thao tác hỗ trợ tiếp cận trong Công cụ cho nhà phát triển
Cây mà chúng tôi hiện hiển thị chỉ có một chiều: Cây này cho phép chúng tôi biết thông tin nào sẽ được cung cấp cho công nghệ hỗ trợ khi duyệt qua một trang web cụ thể. Các thao tác hỗ trợ tiếp cận thể hiện quá trình giao tiếp theo hướng khác: Cho phép công nghệ hỗ trợ tiếp cận hoạt động trên giao diện người dùng được trình bày. Chúng ta có thể hiển thị các hành động như vậy trong DevTools để cho phép các hành động như "nhấp", cuộn hoặc thay đổi giá trị trên trang bằng API có sẵn cho công nghệ hỗ trợ.