Wie HTML Accessibility mit Markup verbessert werden kann

Barrierefreiheit im Web bezieht sich auf die Entwicklung von Webanwendungen, die von Menschen mit Sehbehinderungen problemlos genutzt werden können. Einige dieser Benutzer verlassen sich auf Bildschirmleseprogramme, um den Inhalt der Webseiten auszulesen. Die Screenreader interpretieren den auf der Seite vorhandenen Code und lesen den Inhalt für den Benutzer aus .

ist ein weit verbreitetes HTML-Element, um Daten strukturiert in Webseiten darzustellen. Sein Design reicht von einfachen bis hin zu komplexen, komplett mit Zeilenköpfen, gemischten Headern usw.

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

Das Bereichsattribut

Selbst 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

Mit scope="colgroup" Benutzer identifizieren, dass die Daten in den Zellen, die in der Spaltengruppe folgen, mit der sie sich überspannt, mit diesem bestimmten Thema verknüpft sind.

Dann gibt es das

Markup mit scope="row", das definiert, dass die Zellen, die ihm in derselben Zeile folgen, die "Grad" -Information bezüglich des bestimmten Studentennamens enthalten.

Zeilengruppen

Lassen Sie uns nun zu einem anderen Beispiel übergehen, dieses Beispiel wird fast die gleiche Tabelle wie die obige haben, außer dass wir Zeilen- und Spaltenüberschriften vertauschen werden, so dass wir in der Lage sind, mit Zeilengruppen zu arbeiten.

Durch das Tag, das die Header eindeutig definiert, können Sie die Zugänglichkeit mit dem Attribut scope verbessern und keine Verwirrung durch ähnliche Datentypen in den Zellen verursachen. Mitarbeitername Mitarbeitercode Projektnummer Mitarbeiter Bezeichnung John Doe 32456 456789 Direktor Miriam Luther 78902 456789 Stellvertretender Direktor Was bewirkt das Bereichsattribut? Laut W3C: Mit anderen Worten, es hilft uns, die Datenzellen mit ihren entsprechenden Kopfzellen zu assoziieren. Bitte beachten Sie, dass Sie im obigen Beispiel wechseln können	zum	. Solange sein scope den Wert col, wird er als Header der entsprechenden Spalte interpretiert. Das scope kann einen beliebigen dieser vier Werte haben. col, row, rowgroup, colgroup, um auf den Header einer Spalte, den Header einer Zeile, eine Gruppe von Spaltenheadern bzw. eine Gruppe von colgroup zu verweisen. Komplexe Tabellen Kommen wir nun zu einer komplexeren Tabelle. Oben ist eine Tabelle, die Schüler in einer Klasse und ihre Noten in Theorie und Praxis für drei Fächer auflistet. Hier ist der HTML-Code dafür. Die Tabelle hat rowspan und colspan, um zusammengeführte Header für die colspan zu erstellen. Name des Studenten Biologie Chemie Physik Praktisch Theorie Praktisch Theorie Praktisch Theorie John Doe EIN A + B EIN EIN EIN- Miriam Luther EIN EIN C C + EIN EIN- In der obigen Tabelle ist jeder Datenzelle, dh jeder der Tabellenzellen, die die Note anzeigen, drei Informationselemente zugeordnet: Welcher Schüler gehört zu dieser Klasse? Zu welchem ​​Fach gehört diese Note? Ist diese Note für den Abschnitt Praxis oder Theorie? Diese drei Informationen sind strukturell und visuell in drei verschiedenen Arten von Header-Zellen definiert: Name des Studenten Subjekt Name Praktisch oder Theorie Lassen Sie uns dasselbe für die Barrierefreiheit definieren. Name des Studenten Biologie Chemie Physik Praktisch Theorie Praktisch Theorie Praktisch Theorie John Doe EIN A + B EIN EIN EIN- Miriam Luther EIN EIN C C + EIN EIN- Im obigen Markup haben wir den Bereich hinzugefügt, der Überschrifteninformationen über die Datenzellen enthält. Spaltengruppe Biologie-, Chemie- und Physikzellen sind jeweils einer Gruppe von zwei Spalten zuzuordnen (Theorie & Praxis). colspan="2" einfach colspan="2" hinzufügen, werden die colspan="2" nicht erstellt, sondern es wird nur angegeben, dass die bestimmte Zelle den Speicherplatz von zwei Zellen belegen soll. Um eine colgroup zu erstellen, müssen Sie colgroup und dann das span Attribut hinzufügen, das angibt, wie viele Spalten diese Spaltengruppe enthält. Das	Student Name	Biology		John Doe

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

Nun, da wir unser Beispiel zur Arbeit haben, beginnen wir mit der Erstellung von Zeilengruppen, wie wir es für die Spaltengruppen im vorherigen Beispiel getan haben.

colgroup können jedoch nicht mit einem Tag wie colgroup da kein rowgroup Element vorhanden ist.

HTML-Zeilen werden in der Regel mit gruppiert , und Elemente. Ein einzelner HTML-Code

Element kann eins haben , ein und mehrfach . Wir werden mehrere tbody in unserer Tabelle verwenden, um die tbody zu erstellen, und den entsprechenden Bereich zu den Header-Zellen hinzufügen.

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

Wir haben die Zeilen "Practical" und "Theory" in jedem tbody hinzugefügt, die tbody mit jeweils zwei Zeilen erstellen. Wir haben auch den scope="rowgroup" zu den Zellen hinzugefügt, die die Überschrifteninformation über diese zwei Zeilen enthalten (was der scope="rowgroup" ist, zu dem die Noten in diesem Fall gehören).

Jetzt lesen: Gleiche Spaltenhöhe mit CSS