So verbessern Sie den Zugriff auf HTML-Tabellen mit Markup

Webzugänglichkeit bedeutet, Webanwendungen so zu gestalten, dass sie von Menschen mit Sehbehinderungen problemlos verwendet werden können. Einige dieser Benutzer sind darauf angewiesen Bildschirmleser um den Inhalt der Webseiten auszulesen. Die Bildschirmleser Interpretiere den auf der Seite vorhandenen Code und den Inhalt dem Benutzer vorlesen.

ist ein weit verbreitetes HTML-Element zur strukturierten Darstellung von Daten in Webseiten. Das Design reicht von einfachen bis zu komplexen, mit Zeilenüberschriften, zusammengeführten Überschriften usw.

Wenn eine Tabelle nicht für die Zugänglichkeit ausgelegt ist, wird es für die Bildschirmleseprogramme schwierig, die Daten in komplexen Tabellen sinnvoll für die Benutzer zu übersetzen. Um komplexe HTML-Tabellen leichter verständlich zu machen, müssen wir die Zugänglichkeit verbessern Stellen Sie sicher, dass die Kopfzeilen, Spaltengruppen, Zeilengruppen usw. eindeutig definiert sind. Wir werden unten sehen, wie das ist in Markup erreicht.

Das Bereichsattribut

Auch für einen einfachen Tisch mit

Markup mit scope = "col" hilft der assistiven Technologie zu erkennen, dass die Zellen, die in derselben Spalte folgen, Namen von Schülern sind.

Ähnlich mögen Zellen

enthaltend scope = "colgroup" Benutzer können so erkennen, dass die Daten in den nachfolgenden Zellen in der Spaltengruppe, die sie umfassen, diesem bestimmten Betreff zugeordnet sind.

Dann ist da noch der

Markup mit Bereich = "Zeile" das definiert, dass die darauf folgenden Zellen in derselben Zeile stehen, die das “Klasse” Informationen zu diesem bestimmten Schülernamen.

Zeilengruppen

Lassen Sie uns nun zu einem anderen Beispiel übergehen. In diesem Beispiel wird fast dieselbe Tabelle wie in der obigen Tabelle verwendet, mit der Ausnahme, dass Zeilen- und Spaltentitel ausgetauscht werden, sodass wir mit Zeilengruppen arbeiten können.

Wenn Sie ein Tag definieren, das die Kopfzeilen eindeutig definiert, können Sie die Zugänglichkeit mit dem Header verbessern Umfang Attribut und nicht zu einer Verwirrung führen, die durch ähnliche Datentypen in den Zellen entstehen kann.

  Mitarbeitername  Mitarbeitercode  Projektnummer  Mitarbeiterbezeichnung  
  John Doe  32456  456789  Direktor  
  Miriam Luther  78902  456789  Stellvertretender Direktor

Was macht das Bereichsattribut? Laut W3C:

Mit anderen Worten, es hilft uns, die Datenzellen ihren entsprechenden Kopfzellen zuzuordnen.

Bitte beachten Sie, dass Sie im obigen Beispiel umschalten können

zum

. Solange es ist Umfang hat den Wert col, es wird als Kopf der entsprechenden Spalte interpretiert.

Das Umfang Das Attribut kann einen dieser vier Werte haben. col, Reihe, Zeilengruppe, colgroup , um sich auf den Kopf einer Spalte, den Kopf einer Zeile, eine Gruppe von Spaltenkopf bzw. eine Kopfzeile von Zeilen zu beziehen.

Komplexe Tabellen

Lassen Sie uns nun zu einem komplexeren Tisch übergehen.

Oben finden Sie eine Tabelle, in der die Schüler einer Klasse und ihre Noten in praktischen und theoretischen Klassen für drei Fächer aufgeführt sind.

Hier ist der HTML-Code dafür. Die Tabelle hat verwendet Rowspan und Colspan zusammengefügte Header für die Datenzellen erstellen.

  Name des Studenten  Biologie  Chemie  Physik  
  Praktisch  Theorie  Praktisch  Theorie  Praktisch  Theorie  
  John Doe  EIN  EIN+  B  EIN  EIN  EIN-  
  Miriam Luther  EIN  EIN  C  C+  EIN  EIN-

In der obigen Tabelle ist jede Datenzelle, dh jede Tabellenzelle Anzeige der Note, ist mit drei Informationen verbunden:

Zu welchem Schüler gehört diese Klasse??
Zu welchem Fach gehört diese Note??
Ist diese Note für den praktischen oder theoretischen Abschnitt??

Diese drei Informationen sind strukturell und visuell in drei verschiedenen Typen von Kopfzellen definiert:

Name des Studenten
Subjekt Name
Praktisch oder Theorie

Definieren wir dasselbe für die Zugänglichkeit.

      Name des Studenten  Biologie  Chemie  Physik  
  Praktisch  Theorie  Praktisch  Theorie  Praktisch  Theorie  
  John Doe  EIN  EIN+  B  EIN  EIN  EIN-  
  Miriam Luther  EIN  EIN  C  C+  EIN  EIN-

In der obigen Markierung haben wir hinzugefügt Umfang in Zellen, die Überschrifteninformationen zu den Datenzellen enthalten.

Spaltengruppe

Biologie-, Chemie- und Physikzellen sind einer Gruppe von je zwei Säulen zuzuordnen (Theorie & Praxis). Einfach hinzufügen colspan = "2" erstellt keine Spaltengruppen, sondern zeigt nur an, dass die betreffende Zelle den Platz von zwei Zellen einnehmen soll.

Um eine Spaltengruppe zu erstellen, müssen Sie verwenden colgroup und dann die Spanne Attribut, das angibt, wie viele Spalten die Spaltengruppe enthält.

Das

Name des Studenten

Biologie

John Doe

Gegenstand		John Doe	Miriam Luther
Biologie	Praktisch	EIN	EIN
Biologie	Theorie	EIN+	EIN
Chemie	Praktisch	B	C
Chemie	Theorie	EIN	C+
Physik	Praktisch	EIN	EIN
Physik	Theorie	EIN-	EIN-

Nachdem wir nun mit unserem Beispiel arbeiten können, erstellen wir zunächst Zeilengruppen, wie wir sie für die Spaltengruppen im vorherigen Beispiel gemacht haben.

Zeilengruppen können jedoch nicht mit einem Tag wie erstellt werden colgroup weil es kein ... gibt Zeilengruppe Element.

HTML-Zeilen werden im Allgemeinen mit gruppiert , und Elemente. Ein einzelner HTML-Code

Element kann einen haben , ein und mehrere . Wir werden mehrere verwenden Körper In unserer Tabelle erstellen Sie die Zeilengruppen und fügen den jeweiligen Bereich den Kopfzellen hinzu.

Gegenstand		John Doe	Miriam Luther
Biologie	Praktisch	EIN	EIN
Biologie	Theorie	EIN+	EIN
Chemie	Praktisch	B	C
Chemie	Theorie	EIN	C+
Physik	Praktisch	EIN	EIN
Physik	Theorie	EIN-	EIN-

Wir haben die Zeilen hinzugefügt “Praktisch” und “Theorie” in jedem Körper Zeilengruppen mit jeweils zwei Zeilen erstellen. Wir haben auch das hinzugefügt scope = "Zeilengruppe" zu den Zellen mit den Überschrifteninformationen zu diesen beiden Zeilen (dies ist der Betreffname, zu dem die Noten in diesem Fall gehören).

Jetzt lesen: Gleiche Spaltenhöhe mit CSS