तुलना

इस्तेमाल की जा सकने वाली बनाम इस्तेमाल न की जा सकने वाली सुविधाओं या तकनीकों की सूची या टेबल दिखाने के लिए, 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>