موازنہ، موازنہ، موازنہ

اجازت یافتہ بمقابلہ غیر تعاون یافتہ خصوصیات یا تکنیکوں کی فہرست یا جدول دکھانے کے لیے، 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>