المقارنات

لعرض قائمة أو جدول بالميزات أو الأساليب المسموح بها مقابل غير المسموح بها، استخدِم 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>