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 bắt 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 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 trên web. Mô hình cơ bản của API này là cây hỗ trợ tiếp cận: một 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 thao tác trên đó. Các 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ư các 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 công nghệ hỗ trợ hiển thị nội dung của họ. 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 đối tượng cấp trên và con trực tiếp của nút.
Cây được tạo ra như thế nào?
Trước khi tìm hiểu về giao diện của chế độ xem dạng cây đầy đủ mới này trong Công cụ cho nhà phát triển, hãy cùng tìm hiểu sơ bộ về cây hỗ trợ tiếp cận một cách rõ ràng hơn. Cây hỗ trợ tiếp cận là một cây dẫn xuất của cây DOM. Cấu trúc của lớp này gần như tương tự, 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ư một phần tử <div> chỉ dùng để tạo kiểu. Mỗi nút trong cây có vai trò như Button hoặc Heading và thường là 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 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, suy ra một cây hỗ trợ tiếp cận nội bộ 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'
Lưu ý rằng cách trình bày này chứa nhiều nút không cần thiết có vai trò genericContainer, mà có vẻ mâu thuẫn với tuyên bố nêu trên rằng cây hỗ trợ tiếp cận là một đạo hàm đơn giản của cây DOM. Tuy nhiên, hầu hết các nút này chỉ xảy ra 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 đồ hoạ, nên đây là cách biểu diễn 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 để các nhà phát triển có thể chuyển đổi qua lại giữa 2 cây. Chúng tôi hy vọng rằng cây mới sẽ trở nên dễ khám phá, hữu ích và dễ sử dụng hơn.
Giờ đây, khi đã biết cách thức 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 dạng cây mới. Tài liệu HTML sau đây có tiêu đề, đề mục 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 dạng cây trước đó sẽ 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 đó.
Giờ đây, khi bạn bật/tắt cây mới, nó sẽ thay thế chế độ xem dạng 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 lười
Để cây có hiệu suất tốt ngay cả đối với các trang web lớn hơn, cây được xây dựng từng phần trên giao diện người dùng khi khám phá cây. Sau khi một nút được mở rộng trong cây, con của các nút đó sẽ được tìm nạp thông qua Giao thức Công cụ của Chrome cho nhà phát triển (CDP) và cây sẽ được xây dựng lại.
Phát trực tiếp
Chế độ xem dạng cây mới đang hoạt động và tự động cập nhật nếu cây hỗ trợ tiếp cận thay đổi trong trình kết xuất. Công cụ này kết nối với cùng một cơ chế sẽ thông báo cho công nghệ hỗ trợ về những thay đổi đối với cây và sử dụng sự kiện đó để phát các sự kiện đến giao diện người dùng Công cụ cho nhà phát triển với các nút đã cập nhật. Trên thực tế, phần phụ trợ CDP theo dõi các bản cập nhật cho cây, theo dõi nút nào đã được yêu cầu trước đó và gửi sự kiện đến giao diện người dùng Công cụ cho nhà phát triển nếu có bất kỳ nút nào trong số này thay đổi.
Câu chuyện về nhiều cái cây
Trong nội dung mô tả về 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à Công cụ cho nhà phát triển 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 nội dung mô tả này. Trên thực tế, có khá nhiều cách khác nhau để 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 Công cụ cho nhà phát triển, chúng tôi đã thực hiện 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 dùng để tương tác với cây thì khác và tên của các thuộc tính có thể khác nhau. Công cụ cho nhà phát triển cho thấy cây nội bộ của Chromium, trong đó vai trò và thuộc tính có xu hướng khớp với vai trò và thuộc tính được xác định trong phần thông số kỹ thuật ARIA.
Nhiều khung và tách biệt trang web
Vì Chromium không chỉ đưa nội dung của mỗi thẻ vào 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 nhiều quy trình kết xuất, nên chúng tôi phải kết nối riêng biệt 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 tôi ghép các cây con này lại với nhau trên giao diện người dùng để tạo ra ảo ảnh về một cây nhất quán, mặc dù chúng nằm trong các quy trình kết xuất đồ hoạ khác nhau trong Chromium.
Các nút bị bỏ qua và không thú vị
Chúng tôi ẩn một số nút theo mặc định: các nút bị bỏ qua và các nút có vai trò "chung" mà không có tên. Các nút này không có ý nghĩa ngữ nghĩa và trong trường hợp có các nút bị bỏ qua, sẽ không được hiển thị cho 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 làm như vậy, 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 xây dựng một cây khác ngoài những 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ó phần tử con X và B, còn X có phần tử con C. Nếu X là một nút bị bỏ qua, chúng ta sẽ cắt X từ cây và thay vào đó tạo một cây trong đó C là phầ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 nút bị bỏ qua và chỉ cắt bớt chúng ngay trước khi kết xuất các nút. Chúng tôi làm điều này vì hai lý do:
- Việc này giúp việc xử lý các bản cập nhật nút qua phần phụ trợ trở nên đơn giản hơn nhiều vì chúng ta có cùng một cấu trúc cây trên cả hai điểm cuối. Ví dụ: nếu nút B bị xoá trong ví dụ, chúng ta sẽ nhận được thông tin cập nhật cho nút X (vì con của nó đã thay đổi), nhưng nếu đã cắt bớt nút đó, chúng ta sẽ gặp khó khăn trong việc tìm ra nội dung cần cập nhật.
- Tính năng này đả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 bật cây, chúng ta sẽ chọn nút tương ứng với nút hiện được chọn trong cây DOM. Vì vậy, trong 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 chèn X vào giữa các nút A và B, đồng thờ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 đối với tất cả các nút DOM và giúp xác định lý do nút này 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. Tuy nhiên, chúng tôi cũng rất mong được lắng nghe ý 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 bị 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 nút mốc hoặc Hiện tiêu đề.
Làm nổi bật các vấn đề về a11y
Chúng tôi có thể kết hợp quy trình phân tích "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ề khả năng hỗ trợ tiếp cận ngay trên các nút vi phạm.
Cho thấy các hành động 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 đang trình bày chỉ mang tính một chiều: Nó cho phép chúng tôi biết được thông tin nào sẽ được cung cấp cho công nghệ hỗ trợ khi duyệt một trang web cụ thể. Các thao tác hỗ trợ tiếp cận thể hiện hoạt động giao tiếp theo hướng khác: Các thao tác này cho phép công nghệ hỗ trợ hành động trên giao diện người dùng được trình bày. Chúng ta có thể hiển thị những hành động như vậy trong Công cụ cho nhà phát triển để cho phép các hành động như “nhấp chuột”, cuộn hoặc thay đổi các giá trị trên trang bằng API có sẵn cho công nghệ hỗ trợ.