İzin verilen ve desteklenmeyen özellikler ya da tekniklerin listesini veya tablosunu göstermek için class="compare-yes" ve class="compare-no" simgesini kullanın. Onaylanmış ve önerilmeyen yaklaşımlar arasındaki karşılaştırmayı göstermek için class="compare-better" ve class="compare-worse" simgesini kullanın.
Aşağıdaki örneklerde, bu sınıfların uygun simgeleri nasıl yerleştirdiği ve metne nasıl stil uyguladığı gösterilmektedir.
Önerilmeyen: Sekmelerle girinti oluşturma
(bad sample code)
<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>
Önerilen: Boşluklarla girinti oluşturma
(good sample code)
<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>
Aşağıdaki örnekte, bu sınıfların bir karşılaştırma tablosunda nasıl kullanılacağı gösterilmektedir.
Aşağıdaki sekmelerde, bu örnek karşılaştırma tablosunun temel ve erişilebilirlik uyumlu sürümlerinin kaynak kodu gösterilmektedir.
Erişilebilirlik uyumlu sürüm, ekran okuyucu gibi yardımcı teknolojileri desteklemek için gereklidir. Bu sürümde, tablodaki her hücrede anlamlı yardım metni sağlamak için kullanılan bir aria-label içeren boş bir <span> öğesi bulunur. Yardım metni karşılaştırmayı belgeleyeceğinden satır ve sütun başlıklarına da aria-hidden="true" ekleyebilirsiniz.
Temel
<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>
Erişilebilirlik uyumlu
<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>