Comparații

Pentru a afișa o listă sau un tabel de caracteristici sau tehnici permise versus neacceptate, utilizați class="compare-yes" și class="compare-no" . Pentru a afișa o comparație între abordările aprobate și cele nerecomandate, utilizați class="compare-better" și class="compare-worse" .

Următoarele exemple demonstrează modul în care aceste clase introduc pictograme adecvate și stilează textul.

Nerecomandat - indentare cu file

(bad sample code)
<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>

Recomandat — indentare cu spații

(good sample code)
<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>

Următorul exemplu arată cum să utilizați aceste clase într-un tabel de comparație.

Următoarele file afișează codul sursă pentru versiunile de bază și compatibile cu accesibilitatea ale acestui exemplu de tabel de comparație.

Versiunea compatibilă cu accesibilitatea este necesară pentru a sprijini tehnologia de asistență, cum ar fi cititoarele de ecran. În această versiune, fiecare celulă din tabel are un element <span> gol cu ​​o aria-label care este folosită pentru a furniza text de ajutor semnificativ. Deoarece textul de ajutor va documenta comparația, puteți adăuga și aria-hidden="true" la antetele rândurilor și coloanelor.

De bază 

<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>

Conform 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>