비교

허용되는 기능 또는 기법과 지원되지 않는 기능 또는 기법의 목록 또는 표를 표시하려면 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>

다음 예는 비교 표에서 이러한 클래스를 사용하는 방법을 보여줍니다.

다음 탭에는 이 샘플 비교 표의 기본 버전과 접근성 준수 버전의 소스 코드가 표시됩니다.

스크린 리더와 같은 보조 기술을 지원하려면 접근성 준수 버전이 필요합니다. 이 버전에서는 테이블의 각 셀에 의미 있는 도움말 텍스트를 제공하는 데 사용되는 aria-label가 있는 빈 <span> 요소가 있습니다. 도움말 텍스트에 비교가 문서화되므로 행 및 열 헤더에 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>

접근성 준수

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