比较

如需显示允许与不受支持的功能或技术的列表或表格，请使用 class="compare-yes" 和 class="compare-no"。如需显示已获批准的方法与不推荐的方法之间的对比，请使用 class="compare-better" 和 class="compare-worse"。

以下示例演示了这些类如何插入适当的图标并设置文本样式。

不推荐 - 使用制表符缩进

(bad sample code)

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

推荐 - 使用空格缩进

(good sample code)

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

以下示例展示了如何在对比表中使用这些类。

以下标签页显示了此示例对比表的基本版本和符合无障碍要求的版本的源代码。

符合无障碍功能要求的版本需要支持屏幕阅读器等辅助技术。在此版本中，表格中的每个单元格都包含一个空的 <span> 元素，其中包含一个 aria-label，用于提供有意义的帮助文本。由于帮助文本会记录比较结果，因此您还可以向行和列标题添加 aria-hidden="true"。

<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>