For at vise en liste eller en tabel over tilladte kontra ikke-understøttede funktioner eller teknikker, skal du bruge class="compare-yes" og class="compare-no" . For at vise en sammenligning mellem godkendte og ikke-anbefalede tilgange skal du bruge class="compare-better" og class="compare-worse" .
De følgende eksempler viser, hvordan disse klasser indsætter passende ikoner og style teksten.
Anbefales ikke - indrykke med tabulatorer
(bad sample code)
<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>
Anbefalet — indrykning med mellemrum
(good sample code)
<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>
Følgende eksempel viser, hvordan man bruger disse klasser i en sammenligningstabel.
Følgende faner viser kildekoden for de grundlæggende og tilgængelighedskompatible versioner af denne sammenligningstabel.
Den tilgængelighedskompatible version er nødvendig for at understøtte hjælpeteknologi såsom skærmlæsere. I denne version har hver celle i tabellen et tomt <span> -element med en aria-label , der bruges til at give meningsfuld hjælpetekst. Fordi hjælpeteksten vil dokumentere sammenligningen, kan du også tilføje aria-hidden="true" til række- og kolonneoverskrifter.
Grundlæggende
<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 kompatibel
<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>