Για να εμφανίσετε μια λίστα ή έναν πίνακα επιτρεπόμενων έναντι μη υποστηριζόμενων λειτουργιών ή τεχνικών, χρησιμοποιήστε 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>
Συμβατό με 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>