مقایسه ها

برای نمایش لیست یا جدولی از ویژگی‌ها یا تکنیک‌های مجاز در مقابل پشتیبانی‌نشده، 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>

سازگار با A11y 

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