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 .
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.![]()
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 Komplexe TabellenKommen wir nun zu einer komplexeren Tabelle. ![]() Hier ist der HTML-Code dafür. Die Tabelle hat
In der obigen Tabelle ist jeder Datenzelle, dh jeder der Tabellenzellen, die die Note anzeigen, drei Informationselemente zugeordnet:
Diese drei Informationen sind strukturell und visuell in drei verschiedenen Arten von Header-Zellen definiert:
Lassen Sie uns dasselbe für die Barrierefreiheit definieren.
Im obigen Markup haben wir den Bereich hinzugefügt, der Überschrifteninformationen über die Datenzellen enthält. Spaltengruppe![]() 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 Das | Student Name | Markup mit Biology | Mit John Doe | Markup mit
---|
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 ,
undGegenstand | 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


8 Super Drohnen, die Sie kaufen können, um Luftaufnahmen mit zu schießen
Der Gebrauch von Drohnen wird heutzutage immer populärer und sie haben viele Anwendungen. Die häufigste Verwendung ist jedoch, dass Menschen in der Lage sind, schöne Luftaufnahmen zu machen. Schließlich bieten sie dem begeisterten Individuum eine andere Perspektive. Ob Sie mit Ihrer Fotografie experimentieren oder einfach nur ein anderes Hobby ausprobieren möchten, warum sollten Sie nicht eine Drohne in Erwägung ziehen?Es gi

Downloaden Sie Hand-Picked Free Themes im Template Stash
Wie oft suchst du stundenlang nach einem anständigen kostenlosen WordPress-Theme ? Dies kann für alle CMS von Shopify bis Ghost gelten.Mit Template Stash finden Sie die besten kostenlosen Themen, die an einem Ort für einfaches Browsen zusammengestellt wurden. Diese Website wurde um die höchsten Qualitätsthemen basierend auf Kategorien und Tags für eine einfache Sortierung entwickelt. Sie