Az engedélyezett és a nem támogatott funkciók vagy technikák listájának vagy táblázatának megjelenítéséhez használja class="compare-yes" és class="compare-no" . A jóváhagyott és a nem javasolt megközelítések összehasonlításához használja class="compare-better" és class="compare-worse" .
A következő példák bemutatják, hogy ezek az osztályok hogyan illesztik be a megfelelő ikonokat, és hogyan alakítják ki a szöveget.
Nem ajánlott – behúzás tabulátorral
(bad sample code)
<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>
Ajánlott – behúzás szóközökkel
(good sample code)
<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>
A következő példa bemutatja, hogyan kell ezeket az osztályokat használni egy összehasonlító táblázatban.
A következő lapok jelenítik meg ennek a minta-összehasonlító táblázatnak az alapvető és a kisegítő lehetőségeknek megfelelő verzióinak forráskódját.
A kisegítő technológiák, például a képernyőolvasók támogatásához a kisegítő lehetőségek kompatibilis verziója szükséges. Ebben a verzióban a táblázat minden cellájában van egy üres <span> elem egy aria-label , amely értelmes súgószöveg biztosítására szolgál. Mivel a súgószöveg dokumentálja az összehasonlítást, aria-hidden="true" is hozzáadhatja a sor- és oszlopfejlécekhez.
Alapvető
<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 kompatibilis
<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>