Khả năng tương tác 2024: Chrome đạt 100% cho lĩnh vực hỗ trợ tiếp cận

Jocelyn Tran
Jocelyn Tran

Chrome bắt đầu năm mới với 88,2% số bài kiểm thử đạt yêu cầu trong khu vực trọng tâm về hỗ trợ tiếp cận của Interop 2024. Tháng 6 năm 2024, chúng tôi là công ty đầu tiên đạt được tỷ lệ 100% kiểm thử thành công. Bài đăng này giải thích những việc đã làm để đạt được mục tiêu này.

Giống như mọi khu vực trọng tâm trong Interop 2024, khu vực hỗ trợ tiếp cận được xác định bằng một bộ kiểm thử nền tảng web cho các tính năng đã chọn. Các bài kiểm thử trong Interop 2024 nhằm mục đích đảm bảo tất cả trình duyệt đều tạo tên có thể truy cập và vai trò được tính toán theo cùng một cách.

Tên hỗ trợ tiếp cận truyền tải mục đích hoặc ý định của một phần tử HTML. Điều này giúp người dùng hiểu được mục đích của phần tử và cách tương tác với phần tử đó. Quy cách accname xác định cách trình duyệt tạo chuỗi tên có thể truy cập này cho một phần tử. Quy cách ARIA bao gồm hướng dẫn từng bước về cách tính tên này.

Vai trò được tính toán của một phần tử là một chuỗi đại diện cho vai trò của phần tử do công cụ trình duyệt tính toán. Phương thức này chủ yếu được dùng trong các công cụ dành cho nhà phát triển và ví dụ: trong hàm WebDriver getComputedRole, cho phép kiểm thử khả năng tương tác.

Nhóm Chrome cần làm gì?

Chúng tôi cần hoàn thành hai công việc lớn hơn – thay đổi việc liên kết các vai trò thành vai trò chung và xoá các vai trò không dùng nữa. Sau đó, chúng tôi đã triển khai thêm một số tính năng và bản sửa lỗi nhỏ. Ngoài công việc sau đây mà nhóm Chrome đã hoàn thành, chúng tôi cũng đã cộng tác với Microsoft về các bản sửa lỗi mà họ cam kết cung cấp cho Chromium cho khu vực tập trung vào hỗ trợ tiếp cận.

Thay đổi mối liên kết cho một số vai trò nhất định thành vai trò chung

Việc thay đổi mối liên kết thành vai trò chung sẽ xoá ngữ nghĩa hỗ trợ tiếp cận khỏi một phần tử. Các phần tử chung không cung cấp giá trị cho cây hỗ trợ tiếp cận, vì vậy, các phần tử này không được đưa vào cây. Điều này giúp cải thiện hiệu suất và giúp cây nhỏ hơn cũng như dễ phân tích cú pháp hơn cho công nghệ hỗ trợ. Các vai trò sau đây sẽ được thay đổi thành vai trò chung.

  • <header> thuộc phạm vi <main> hoặc phần tử nội dung phân đoạn (<article>, <aside>, <nav> hoặc <section>).
  • <footer> thuộc phạm vi <main> hoặc một phần tử nội dung phân đoạn (<article>, <aside>, <nav> hoặc <section>).
  • <aside> bên trong phần tử nội dung phân đoạn (<article>, <aside>, <nav> hoặc <section>) không có tên dễ đọc.
  • <section> không có tên dễ đọc.
  • Các mục danh sách bị mất nguồn gốc (<li>).

Đối với 4 dấu đầu dòng đầu tiên, các phần tử này thường được liên kết với vai trò điểm đánh dấu. Việc có quá nhiều điểm đánh dấu trên một trang có thể khiến việc di chuyển trở nên khó khăn hơn. Vì vậy, thay đổi này giúp giảm các điểm đánh dấu thừa để giúp trang dễ di chuyển hơn. Mục cuối cùng thường cho biết lỗi của nhà phát triển trang, mục danh sách phải luôn nằm trong danh sách, do đó, mục không có đối tượng mẹ sẽ được gán vai trò chung.

Xoá vai trò không dùng nữa

Chúng tôi đã ngừng sử dụng vai trò directory và liên kết vai trò này với vai trò danh sách. ARIA 1.2 không còn hỗ trợ vai trò directory. Thông số kỹ thuật giải thích rằng vai trò này tương đương với vai trò list và nhà phát triển nên sử dụng list. Để duy trì ngữ nghĩa của nội dung cũ sử dụng directory, nội dung này hiện được liên kết với list trong Chrome.

Các bản sửa lỗi khác

Chúng tôi đã thêm tính năng hỗ trợ cho vai trò gridcell. Vai trò mới này giúp phân biệt rõ ràng hơn giữa gridcellcell. gridcell có thể lấy tiêu điểm, chỉnh sửa và chọn được, không giống như cell.

Chúng tôi đã thêm tính năng tính toán vai trò dự phòng. Trước đây, chúng ta không kiểm tra các vai trò dự phòng, vì vậy nếu vai trò đầu tiên không hợp lệ, chúng ta sẽ sử dụng một vai trò khác, không phải là vai trò được nêu chi tiết trong quy cách.

Một số vai trò chỉ hợp lệ nếu ở đúng ngữ cảnh. Chúng tôi đã thêm một bước kiểm tra để phát hiện việc sử dụng vai trò không hợp lệ như sau:

  • Vai trò row phải nằm bên trong table, grid, rowgroup hoặc treegrid.
  • Vai trò rowgroup phải nằm bên trong table, grid, tree hoặc treegrid.
  • Vai trò listitem phải nằm bên trong list.

Nếu vai trò không hợp lệ, Chrome hiện sẽ sử dụng thông tin khác, chẳng hạn như phần tử HTML, để tính toán vai trò thay thế.

Chúng tôi đã đánh dấu theadtfooter là thuộc cây hỗ trợ tiếp cận. Trước đây, các tệp này được đánh dấu là bị bỏ qua nhưng vẫn được đưa vào cây. Giờ đây, công nghệ hỗ trợ có thể phân tích cú pháp đầu trang và chân trang của bảng.


Mặc dù hầu hết các nhà phát triển có thể không thấy những thay đổi này, nhưng với tất cả các trình duyệt đang nỗ lực để đảm bảo những thay đổi này hoạt động theo cùng một cách, chúng tôi đảm bảo rằng các vai trò khác nhau được hiển thị theo cùng một cách ở mọi nơi.