Barrierearmes Webdesign Peter Mages | www.mages-online.de |

Dala Statistik

Inhaltsbereich

Sie befinden sich hier: Barrierearm » Befehle » Datentabelle

Peter Mages als Porträtaufnahme

Untertitel zum Foto Peter Mages an der Kieler Förde (Strande) im März 2011 © Margarete Voelzke.

Datentabelle

Codierungsbeispiel für eine "Datentabelle". Als Beispiel wähle ich die Tabelle von der Seite Priorität 1.

Klassische Tabellen (Datentabellen) sind der Stundenplan oder die Bundesligatabelle. Zur Erstellung des Layouts sollten keine Tabellen (Layouttabellen) verwandt werden. Layouttabellen sind für Hilfsmittelnutzer kaum zugänglich und sie sind auch nicht standardkonform.

CSS (Cascading Style Sheets)

#info_tab {
margin:0;
padding:0;
text-align:left;
}

table {
width:auto;
font-size: 1em;
margin:0px 25px 25px;
padding:0;
border-collapse:collapse;
}

caption {
display:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:1em;
letter-spacing:.1ex;
text-align:left;
font-weight:bold;
margin:0;
padding:0 0 8px;
color:#000;
background:#cc9;
}/*auskommentiert*/

th {
background:#eee;
color:#000;
border:1px solid #999;
padding:5px;
font-size:.8em;
margin:0;
vertical-align:top;
text-align:left;
letter-spacing:0ex;
line-height:1em;
}

td {
font-size:.85em;
line-height:1.3em;
padding:5px;
margin:0;
vertical-align:top;
border:1px solid #999;
text-align:left;
background:#fafafa;
color:#000;
}

XHTML (Extensible Hypertext Markup Language)

<div id="info_tab">

<table summary="Diese Tabelle zeigt als Beispiel die Priotitätenliste 1 der BITV">
<caption>Priorität 1:</caption>

<thead>
<tr>
<th id="prioritaet">Priorität</th>
<th id="anforderung">Anforderung</th>
<th id="bedingung">Bedingung</th>
</tr>
</thead>

<tbody>
<tr>
<th id="prioritaet_1">1</th>
<td headers="prioritaet_1 anforderung">Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen.</td>
<td headers="prioritaet_1 bedingung">&nbsp;</td>
</tr>

<tr>
<th id="prioritaet_1_1">1.1</th>
<td headers="prioritaet_1_1 anforderung">&nbsp;</td>
<td headers="prioritaet_1_1 bedingung">Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für: Bilder, graphisch dargestellten Text einschließlich Symbolen, Regionen von <span lang="en" xml:lang="en">Imagemaps</span>, Animationen (<abbr title="zum Beispiel">z. B.</abbr> animierte <acronym lang="en" xml:lang="en" title="Graphics Interchange Format">GIFs</acronym>), <span lang="en" xml:lang="en">Applets</span> und programmierte Objekte, Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des <acronym lang="en" xml:lang="en" title="American Standard Code For Information Interchange">ASCII</acronym>-Codes basieren (ASCII-Zeichnungen), <span lang="en" xml:lang="en">Frames</span>, <span lang="en" xml:lang="en">Scripts</span>, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Graphiken, graphische <span lang="en" xml:lang="en">Buttons</span>, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.</td>
</tr>

<tr>
<th id="prioritaet_1_2">1.2</th>
<td headers="prioritaet_1_2 anforderung">&nbsp;</td>
<td headers="prioritaet_1_2 bedingung">Für jede aktive Region einer <span lang="en" xml:lang="en">server</span>seitigen <span lang="en" xml:lang="en">Imagemap</span> sind redundante Texthyperlinks bereitzustellen.</td>
</tr>

<tr>
<th id="prioritaet_1_3">1.3</th>
<td headers="prioritaet_1_3 anforderung">&nbsp;</td>
<td headers="prioritaet_1_3 bedingung">Für Multimedia-Präsentationen ist eine Audio-Beschreibung der wichtigen Informationen der Videospur bereitzustellen.</td>
</tr>

<tr>
<th id="prioritaet_1_4">1.4</th>
<td headers="prioritaet_1_4 anforderung">&nbsp;</td>
<td headers="prioritaet_1_4 bedingung">Für jede zeitgesteuerte Multimedia-Präsentation (insbesondere Film oder Animation) sind äquivalente Alternativen (<abbr title="zum Beispiel">z. B.</abbr> Untertitel oder Audiobeschreibungen der Videospur) mit der Präsentation zu synchronisieren.</td>
</tr>
</tbody>

</table>

</div>

Weitere Befehle zu:

Adresse von Peter Mages

Peter Mages Peter Mages
Graefestr. 19
10967 Berlin
Telefon: 0 30 – 6 94 57 22
E–Mail: peter@mages-online.de
Internet: www.mages-online.de

[ nach oben ] · zum Seitenanfang ·

Navigation am Ende
Rechte Spalte mit Referenzen, Links, Downloads und Werbung
Referenzen
Links
Downloads
Werbung