การเปรียบเทียบ

หากต้องการแสดงรายการหรือตารางฟีเจอร์หรือเทคนิคที่อนุญาตและไม่รองรับ ให้ใช้ 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>