So sánh

Để hiển thị danh sách hoặc bảng các tính năng hoặc kỹ thuật được phép so với không được hỗ trợ, hãy sử dụng class="compare-yes" và class="compare-no". Để so sánh giữa các phương pháp được phê duyệt và không được đề xuất, hãy sử dụng class="compare-better" và class="compare-worse".

Các ví dụ sau đây minh hoạ cách các lớp này chèn biểu tượng thích hợp và tạo kiểu văn bản.

Không nên – thụt lề bằng thẻ

(bad sample code)

<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>

Nên dùng – thụt lề bằng dấu cách

(good sample code)

<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>

Ví dụ sau đây cho thấy cách sử dụng các lớp này trong bảng so sánh.

Các thẻ sau đây hiển thị mã nguồn cho các phiên bản cơ bản và tuân thủ khả năng hỗ trợ tiếp cận của bảng so sánh mẫu này.

Phiên bản tuân thủ tiêu chuẩn hỗ trợ tiếp cận là cần thiết để hỗ trợ công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình. Trong phiên bản này, mỗi ô trong bảng có một phần tử <span> trống với aria-label dùng để cung cấp văn bản trợ giúp có ý nghĩa. Vì văn bản trợ giúp sẽ ghi lại nội dung so sánh, nên bạn cũng có thể thêm aria-hidden="true" vào tiêu đề hàng và cột.

<table>
  <tr>
    <th>Resource Type</th>
    <th><code>list</code></th>
    <th><code>insert</code></th>
    <th><code>update</code></th>
    <th><code>delete</code></th>
  </tr>
  <tr>
    <td><code>activity</code></td>
    <td><span class="compare-yes"></span></td>
    <td><span class="compare-yes"></span></td>
    <td><span class="compare-no"></span></td>
    <td><span class="compare-no"></span></td>
  </tr>
  <tr>
    <td><code>channel</code></td>
    <td><span class="compare-yes"></span></td>
    <td><span class="compare-no"></span></td>
    <td><span class="compare-no"></span></td>
    <td><span class="compare-no"></span></td>
  </tr>
  <tr>
    <td><code>channelBanner</code></td>
    <td><span class="compare-no"></span></td>
    <td><span class="compare-yes"></span></td>
    <td><span class="compare-no"></span></td>
    <td><span class="compare-no"></span></td>
  </tr>
</table>

<table>
  <tr aria-hidden="true">
    <th>Resource Type</th>
    <th><code>list</code></th>
    <th><code>insert</code></th>
    <th><code>update</code></th>
    <th><code>delete</code></th>
  </tr>
  <tr>
    <td aria-hidden="true"><code>activity</code></td>
    <td><span aria-label="The activity resource type has a list method" class="compare-yes"></span></td>
    <td><span aria-label="The activity resource type has an insert method" class="compare-yes"></span></td>
    <td><span aria-label="The activity resource type does not have an update method" class="compare-no"></span></td>
    <td><span aria-label="The activity resource type does not have a delete method" class="compare-no"></span></td>
  </tr>
  <tr>
    <td aria-hidden="true"><code>channel</code></td>
    <td><span aria-label="The channel resource type has a list method" class="compare-yes"></span></td>
    <td><span aria-label="The channel resource type does not have an insert method" class="compare-no"></span></td>
    <td><span aria-label="The channel resource type does not have an update method" class="compare-no"></span></td>
    <td><span aria-label="The channel resource type does not have a delete method" class="compare-no"></span></td>
  </tr>
  <tr>
    <td aria-hidden="true"><code>channelBanner</code></td>
    <td><span aria-label="The channelBanner resource type does not have a list method" class="compare-no"></span></td>
    <td><span aria-label="The channelBanner resource type has an insert method" class="compare-yes"></span></td>
    <td><span aria-label="The channelBanner resource type does not have an update method" class="compare-no"></span></td>
    <td><span aria-label="The channelBanner resource type does not have a delete method" class="compare-no"></span></td>
  </tr>
</table>