Ak chcete zobraziť zoznam alebo tabuľku povolených a nepodporovaných funkcií alebo techník, použite class="compare-yes"
a class="compare-no"
. Ak chcete zobraziť porovnanie medzi schválenými a neodporúčanými prístupmi, použite class="compare-better"
a class="compare-worse"
.
Nasledujúce príklady demonštrujú, ako tieto triedy vkladajú vhodné ikony a štylizujú text.
Neodporúča sa – odsadenie pomocou tabulátorov
(bad sample code)
<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>
Odporúčané — odsadenie s medzerami
(good sample code)
<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>
Nasledujúci príklad ukazuje, ako použiť tieto triedy v porovnávacej tabuľke.
Na nasledujúcich kartách sa zobrazuje zdrojový kód pre základné verzie a verzie tejto vzorovej porovnávacej tabuľky, ktoré sú v súlade s prístupnosťou.
Verzia kompatibilná s prístupnosťou je potrebná na podporu asistenčných technológií, ako sú čítačky obrazovky. V tejto verzii má každá bunka v tabuľke prázdny prvok <span>
s aria-label
, ktorý sa používa na poskytnutie zmysluplného pomocného textu. Pretože text pomocníka zdokumentuje porovnanie, môžete do hlavičiek riadkov a stĺpcov pridať aj aria-hidden="true"
.
Základné
<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>
V súlade s A11y
<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>