Krahasimet

Për të shfaqur një listë ose një tabelë të veçorive ose teknikave të lejuara kundrejt atyre të pambështetura, përdorni class="compare-yes" dhe class="compare-no" . Për të treguar një krahasim midis qasjeve të miratuara dhe jo të rekomanduara, përdorni class="compare-better" dhe class="compare-worse" .

Shembujt e mëposhtëm tregojnë se si këto klasa futin ikona të përshtatshme dhe stilojnë tekstin.

Nuk rekomandohet - dhëmbëzimi me skeda

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

Rekomandohet - dhëmbëzimi me hapësira

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

Shembulli i mëposhtëm tregon se si të përdoren këto klasa në një tabelë krahasimi.

Skedat e mëposhtme shfaqin kodin burimor për versionet bazë dhe ato që përputhen me aksesueshmërinë e kësaj tabele krahasimi të mostrës.

Versioni në përputhje me aksesueshmërinë nevojitet për të mbështetur teknologjinë ndihmëse si lexuesit e ekranit. Në këtë version, çdo qelizë në tabelë ka një element bosh <span> me një aria-label që përdoret për të ofruar tekst ndihmës kuptimplotë. Për shkak se teksti i ndihmës do të dokumentojë krahasimin, ju gjithashtu mund të shtoni aria-hidden="true" në titujt e rreshtave dhe kolonave.

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>

Në përputhje me 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>