השוואות

כדי להציג רשימה או טבלה של תכונות או שיטות מותרות לעומת תכונות או שיטות לא נתמכות, משתמשים ב-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>