তুলনা

অনুমোদিত বনাম অসমর্থিত বৈশিষ্ট্য বা কৌশলগুলির একটি তালিকা বা একটি টেবিল দেখাতে, 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>