Dùng bảng khi người đọc cần so sánh dữ liệu

Bảng phù hợp khi quan hệ giữa hàng và cột tạo ý nghĩa cho một giá trị. Trong bảng so sánh gói, riêng số “10” chưa nói được nhiều. “Gói Cơ bản, số dự án: 10” mới rõ. Tiêu đề bảng HTML biểu diễn các quan hệ ấy để người đọc so sánh bằng mắt hoặc qua công nghệ hỗ trợ.

Nếu bạn đang chọn giữa CSS Grid và bảng, hãy xác định việc người đọc cần làm. Bộ sưu tập các thẻ độc lập thường là bài toán bố cục. Ma trận so cùng thuộc tính giữa các gói là bài toán bảng dữ liệu, kể cả khi thiết kế yêu cầu khoảng cách rộng và góc bo tròn.

Đánh dấu cả hai chiều so sánh

Ví dụ gói dịch vụ giả định sau có tiêu đề cột cho các gói và tiêu đề hàng cho tính năng. Các con số chỉ minh họa mã HTML, không mô tả sản phẩm thật.

<div class="comparison-scroll" tabindex="0" role="region"
     aria-labelledby="plan-comparison-caption">
<table>
  <caption id="plan-comparison-caption">Giới hạn dự án và thành viên theo gói</caption>
  <thead>
    <tr>
      <th scope="col">Tính năng</th>
      <th scope="col">Cơ bản</th>
      <th scope="col">Nhóm</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Dự án</th>
      <td>10</td>
      <td>100</td>
    </tr>
    <tr>
      <th scope="row">Thành viên</th>
      <td>1</td>
      <td>20</td>
    </tr>
  </tbody>
</table>
</div>

caption đặt tên cho cả bảng. Nó giúp người đọc biết các giá trị đang nói về điều gì mà không phải lặp mọi tiêu đề. Thuộc tính scope cho biết tiêu đề áp dụng theo hàng hay cột. Hướng dẫn bảng có hai hướng tiêu đề của WAI dùng mẫu này cho bảng có quan hệ theo cả chiều ngang lẫn chiều dọc.

Ô dữ liệu in đậm không trở thành tiêu đề chỉ vì trông giống tiêu đề. Dùng th để biểu diễn quan hệ rồi mới định kiểu. Tương tự, làm tiêu đề bớt nổi bật về thị giác không xóa vai trò ngữ nghĩa. Lệnh điều hướng bảng của trình đọc màn hình dựa vào cấu trúc, không dựa vào độ đậm chữ.

Giữ ý nghĩa của giá trị rõ ràng

Đơn vị thuộc cả mô hình dữ liệu lẫn cách trình bày. Cột dung lượng có thể ghi đơn vị chung trong tiêu đề, hoặc từng ô tự ghi đơn vị nếu như vậy dễ so sánh hơn. Trộn gigabyte và megabyte mà không ghi nhãn buộc người đọc phải đoán.

Ô trống cũng cần có ý nghĩa được chọn rõ. Nó có thể là số không, không được cung cấp, không áp dụng hoặc chưa biết. Đó là những thông tin khác nhau. Chỉ dùng dấu gạch khi bảng giải thích nó nghĩa là gì; cụm ngắn như “Không bao gồm” thường dễ hiểu hơn.

Dấu tích cần có tên nếu chữ thông thường chưa truyền đạt ý nghĩa. Một biểu tượng đứng riêng có thể chỉ được đọc là ảnh hoặc không được đọc gì. Bạn có thể hiển thị dấu tích, đồng thời cung cấp chữ “Có bao gồm” trong ô và ẩn biểu tượng trang trí khỏi cây accessibility. Thông tin vẫn cần tồn tại khi phông biểu tượng riêng tải thất bại.

Mở ảnh kích thước đầy đủ ↗

Hai dải giao nhau trong hình giải thích vì sao làm phẳng bảng thành dãy số không nhãn sẽ mất thông tin. Cả hai trục đều góp phần tạo ý nghĩa cho giá trị.

Màn hình hẹp không xóa quan hệ dữ liệu

Bảng nhỏ có thể vừa màn hình khi chữ được xuống dòng và phần đệm giảm. Bảng rộng có thể cần vùng cuộn ngang. Vùng đó không nên gây tràn ngang toàn trang, che mất dấu hiệu có thể cuộn hoặc giữ chặt focus bàn phím.

Nếu trình duyệt được hỗ trợ cần lớp bao nhận focus để cuộn bằng bàn phím, hãy đặt tên truy cập cho nó và xem điểm dừng thêm này trong toàn trang. Hành vi focus của vùng cuộn khác nhau giữa trình duyệt, nên cần thử trên tập nền tảng thật. Không nên thêm điểm Tab cho mọi bảng theo thói quen.

Cột đầu bám dính có thể giúp giữ nhãn hàng khi cuộn. Nó cũng tạo lớp nền chồng nhau và vấn đề thứ tự vẽ cần kiểm tra bằng mắt. Tiêu đề bám dính có nền trong suốt có thể trở nên khó đọc khi ô khác đi dưới nó. Kiểm tra tương phản cả ở trạng thái đã cuộn, không chỉ lúc đầu.

Đổi mỗi hàng thành một thẻ là lựa chọn khác, nhưng có thể làm so sánh giữa cột khó hơn. Nếu chọn cách đó, bảo đảm mọi giá trị vẫn gắn với tiêu đề và thay đổi CSS không làm mất ngữ nghĩa bảng hữu ích trên trình duyệt, công cụ hỗ trợ cần dùng. Bố cục đẹp ở 375 pixel vẫn có thể khiến việc so hai gói trở nên mệt mỏi.

Biết giới hạn của scope đơn giản

Tiêu đề theo nhóm và ô gộp không đều có thể cần liên kết cẩn thận hơn. Bảng có nhóm “Hàng tháng” trên vài cột giá, cạnh nhóm “Hàng năm”, có nhiều tầng tiêu đề. ID của tiêu đề cùng thuộc tính headers có thể mô tả quan hệ phức tạp khi scope đơn giản chưa biểu đạt rõ.

Mã phức tạp cũng tăng rủi ro bảo trì. Đổi ID tiêu đề mà không cập nhật các ô tham chiếu sẽ âm thầm làm hỏng quan hệ. Trước khi xây bảng rất bất quy tắc, hãy xét liệu có thể chia thông tin thành những bảng so sánh đơn giản hơn không. Đó là quyết định nội dung, không chỉ là cách xử lý vấn đề tiếp cận.

Tránh dùng bảng cho bố cục trang không có quan hệ dữ liệu. Trình đọc màn hình có thể cung cấp điều hướng hàng và cột ở nơi chúng không mang ý nghĩa; việc sắp xếp lại trên màn hình hẹp cũng bị ràng buộc không cần thiết. CSS Grid và Flexbox đã xử lý bố cục thị giác mà không gán cho nó quan hệ của bảng dữ liệu.

Giới hạn nhiệm vụ của vùng cuộn

Lớp bao trong ví dụ được chủ ý cho nhận focus và dùng caption làm tên vùng. Thêm CSS sau vào trang nhỏ chứa đoạn HTML. Độ rộng tối thiểu tạo tình huống thử bảng rộng; không phải mọi bảng ba cột đều cần chiếm 32rem.

.comparison-scroll {
  max-inline-size: 100%;
  overflow: auto;
}
.comparison-scroll:focus-visible {
  outline: 2px solid #41492e;
  outline-offset: 3px;
}
.comparison-scroll table {
  inline-size: 100%;
  min-inline-size: 32rem;
  border-collapse: collapse;
}
.comparison-scroll th,
.comparison-scroll td {
  border: 1px solid #777;
  padding: 0.75rem;
  text-align: start;
}
.comparison-scroll caption {
  padding-block: 0.75rem;
  text-align: start;
}

Ở khung nhìn hẹp, đưa focus tới lớp bao rồi dùng phím mũi tên để tới cột Nhóm. Sau đó, Tab phải đưa focus ra khỏi vùng tới điều khiển tiếp theo. Đừng thêm bộ xử lý phím chặn Tab hoặc tự xây lại hành vi cuộn của trình duyệt. Tài liệu overflow của MDN trình bày khả năng cuộn bằng bàn phím và ích lợi của vùng có tên khi cần thêm điểm focus. Trang thử chọn điểm vào rõ ràng để thao tác bàn phím dễ dự đoán; thành phần dùng thật cần đánh giá lựa chọn đó trên các trình duyệt được hỗ trợ.

Bảng giữ nguyên các phần tử HTML gốc trong lúc cuộn. Các giá trị bên phải phải tới được, nhưng cột đầu có thể ra khỏi khung. Đây là đánh đổi thật khi so sánh bằng mắt. Cột tiêu đề hàng bám dính có thể hữu ích nếu khung đủ rộng, nhưng vùng bám dính lớn có thể chiếm gần hết màn hình nhỏ. Hãy kiểm tra chỗ còn lại cho giá trị, thay vì cho rằng bám dính luôn tốt hơn.

Mở ảnh kích thước đầy đủ ↗

Giải thích về reflow của WCAG thừa nhận bảng dữ liệu có thể cần bố cục hai chiều để giữ ý nghĩa. Ngoại lệ này không cho phép làm cả trang cuộn ngang hoặc ngăn chữ trong từng ô xuống dòng khi phù hợp. Giữ tiêu đề và đoạn văn xung quanh trong luồng trang thông thường. Ở ví dụ, phần tràn thuộc lớp bao; đường viền focus giúp nhận ra ranh giới ấy.

Khôi phục ngữ cảnh từ cấu trúc dữ liệu đơn giản

Bài tập console sau đổi đúng bảng chữ nhật trong ví dụ thành các bản ghi có nhãn. Nó giả định một hàng tiêu đề cột, một ô tiêu đề hàng ở đầu mỗi hàng dữ liệu, không gộp hàng hay cột. Kết quả cần có bản ghi với tính năng “Dự án”, gói “Nhóm” và giá trị “100”.

const comparison = document.querySelector('.comparison-scroll table');
const plans = Array.from(comparison.tHead.rows[0].cells)
  .slice(1).map((header) => header.textContent.trim());
const records = Array.from(comparison.tBodies[0].rows).flatMap((row) => {
  const feature = row.cells[0].textContent.trim();
  return Array.from(row.cells).slice(1).map((cell, index) => ({
    feature,
    plan: plans[index],
    value: cell.textContent.trim(),
  }));
});
console.table(records);

Kết quả làm rõ mô hình thông tin của phép so sánh. Chỉ chép 100 sẽ bỏ cả hai nhãn; xuất một bản ghi giữ được chúng. Cách nhìn này hữu ích khi đối chiếu tệp CSV hoặc giao diện điện thoại đã thiết kế lại với dữ liệu nguồn.

Đây không phải kiểm tra khả năng tiếp cận. Script dùng vị trí ô và không tính liên kết tiêu đề của trình duyệt. Bỏ một thuộc tính scope, kết quả của nó vẫn giữ nguyên. Vì thế, xuất dữ liệu thành công chưa chứng minh công nghệ hỗ trợ nhận được cùng ngữ cảnh. Kiểm tra bảng gốc riêng, nhất là sau khi thêm ô gộp hoặc đổi loại phần tử. Hướng dẫn bảng nhiều tầng của WAI giải thích liên kết tiêu đề tường minh cho trường hợp nằm ngoài cấu trúc đơn giản này.

Thử tiếp bằng cách đổi chỗ hai cột gói, chuyển mỗi tiêu đề cùng toàn bộ ô dữ liệu của nó. Sau khi sắp xếp bản ghi xuất ra, bốn thông tin có nhãn vẫn phải như cũ. Sau đó chỉ đổi một tiêu đề và quan sát thông tin thay đổi dù mọi ô số giữ nguyên. Ý nghĩa của bảng nằm trong quan hệ, nên thiết kế lại giao diện hay chuyển đổi dữ liệu đều phải giữ nhiều hơn các con số.

Xác minh một ô trong ngữ cảnh

Chọn một ô giữa bảng và xác định tiêu đề hàng, cột nào cần nhận diện nó. Sau đó kiểm tra cây accessibility hoặc điều hướng bảng bằng trình đọc màn hình để đối chiếu ngữ cảnh được cung cấp. Lặp lại ở ranh giới tiêu đề và ô có biểu tượng.

Ở độ rộng hẹp và khi tăng cỡ chữ, kiểm tra cột cuối vẫn tới được và không có giá trị biến mất sau vùng bám dính. Chép một hàng thành chữ thuần rồi xem nhãn, đơn vị còn có nghĩa không. Bảng làm tốt nhiệm vụ khi người đọc vẫn có thể so sánh qua những cách đọc khác nhau ấy.