Erstellen barrierefreier Tabellen

Erstellen barrierefreier Tabellen

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Der wesentliche Zweck des table-Tags besteht darin, Daten darzustellen, die mehr als eine Dimension aufweisen. Darüber hinaus wird das table-Tag häufig für Seitenlayouts verwendet, obwohl dies nicht mehr empfehlenswert ist.

Bei Tabellen, die mehrdimensionale Daten darstellen, ist es wichtig, genügend Barrierefreiheitsinformationen bereitzustellen, um Benutzer beim Verstehen der Daten zu helfen. Zu den Barrierefreiheitsinformationen zählt Folgendes.

  • Ein von einem caption-Kennzeichen in der Tabelle bereitgestellter barrierefreier Name.
  • Eine von einem summary-Attribut bereitgestellte barrierefreie Beschreibung.
  • Alternativ: Tabellenüberschriften, die th-Kennzeichen mit den Attributen scope und headers verwenden, wie dies später in diesem Thema beschrieben wird.

Das folgende Beispiel zeigt eine Tabelle, gefolgt vom HTML-Code, mit dem sie erstellt wurde.

MealsHotelsTransportSubtotals
San Jose65.02224.0090.00379.02
San Diego80.50250.0080.00410.50
Los Angeles74.00300.00100.00474.00
Totals219.52774.00270.001263.52

 


<p id="tableDesc">This table describes the travel expenses broken by ...</p>
<table border="1" aria-describedby="tableDesc">
   <caption>Travel Expense Report</caption>
   <thead>
     <tr>
       <th></th>
       <th>Meals</th>
       <th>Hotels</th>
       <th>Transport</th>
       <th>Subtotals</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>San Jose</th>
       <td>65.02</td>
       <td>224.00</td>
       <td>90.00</td>
       <td>379.02</td>
     </tr>
     ...
   </tbody>
</table>

Verwenden Sie die Attribute scope und headers, um die Beziehung zwischen Zellen und Überschriften genauer zu definieren. Verwenden Sie das scope-Attribut in einem th-Tag, um den Zweck der Überschrift genauer zu definieren. Verwenden Sie das headers-Attribut in entsprechenden td-Tags in komplexen Tabellen, falls mehrere Überschriften für eine einzelne Zelle gelten.

MealsHotelsTransportSubtotals
San Jose
25-Aug-9737.74112.0045.00194.74
26-Aug-9727.28112.0045.00184.28
...
Totals219.52774.00270.001263.52

 


<table border="1">
   <caption>Travel Expense Report</caption>
   <thead>
      <tr>
         <th></th>
         <th id="c2">Meals</th>
         <th id="c3">Hotels</th>
         <th id="c4">Transport</th>
         <th id="c5">Subtotals</td>
      </tr>
   </thead>
   <tbody>
	...
      <tr><td id="r2" colspan="5">San Jose</td></tr>
      <tr>
         <td id="r3" >25-Aug-97</td>
         <td headers="c2 r2 r3">37.74</td>
         <td headers="c3 r2 r3">112.00</td>
         <td headers="c4 r2 r3">45.00</td>
         <td headers="c5 r2 r3">1,263.52</td>
      </tr>
	...
   </tbody>
</table>

Hinweis  Die Plattform und die Sprachausgabe machen das headers-Attribut nicht verfügbar. Einige Sprachausgaben oder Hilfstechnologietools von Drittanbietern nutzen diese Informationen jedoch vielleicht, indem sie sie direkt aus dem Dokumentobjektmodell (DOM) abrufen.
 

Verwandte Themen

Erfüllen grundlegender Anforderungen für Barrierefreiheit

 

 

Anzeigen:
© 2016 Microsoft