Mit class="compare-yes" und class="compare-no" können Sie eine Liste oder Tabelle mit zulässigen und nicht unterstützten Funktionen oder Techniken anzeigen. Verwenden Sie class="compare-better" und class="compare-worse", um einen Vergleich zwischen genehmigten und nicht empfohlenen Ansätzen zu zeigen.
In den folgenden Beispielen wird gezeigt, wie mit diesen Klassen entsprechende Symbole eingefügt und der Text formatiert wird.
Nicht empfohlen: Einzug mit Tabulatorzeichen
(bad sample code)
<p><span class="compare-worse">Not recommended</span> — indent with tabs</p>
<pre class="prettyprint">
(bad sample code)
</pre>
Empfohlen: Einzug mit Leerzeichen
(good sample code)
<p><span class="compare-better">Recommended</span> — indent with spaces</p>
<pre class="prettyprint">
(good sample code)
</pre>
Das folgende Beispiel zeigt, wie diese Klassen in einer Vergleichstabelle verwendet werden.
Auf den folgenden Tabs sehen Sie den Quellcode für die einfache und die barrierefreie Version dieser Beispieltabelle.
Die barrierefreie Version ist erforderlich, um Hilfstechnologien wie Screenreader zu unterstützen. In dieser Version enthält jede Zelle in der Tabelle ein leeres <span>-Element mit einem aria-label, das für aussagekräftigen Hilfetext verwendet wird. Da der Vergleich im Hilfetext dokumentiert wird, können Sie Zeilen- und Spaltenüberschriften auch mit aria-hidden="true" kennzeichnen.
Einfach
<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-konform
<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>