de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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 Doe32456456789Direktor
Miriam Luther78902456789Stellvertretender 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
PraktischTheoriePraktischTheoriePraktischTheorie
John DoeEINA +BEINEINEIN-
Miriam LutherEINEINCC +EINEIN-

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 DoeEINA +BEINEINEIN-
Miriam LutherEINEINCC +EINEIN-

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
GegenstandJohn DoeMiriam Luther
BiologiePraktischEINEIN
TheorieA +EIN
ChemiePraktischBC
TheorieEINC +
PhysikPraktischEINEIN
TheorieEIN-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
BiologiePraktischEINEIN
TheorieA +EIN
ChemiePraktischBC
TheorieEINC +
PhysikPraktischEINEIN
TheorieEIN-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

Arbeitgeber: Zusammenarbeit zwischen Gen-X und Millennials

Arbeitgeber: Zusammenarbeit zwischen Gen-X und Millennials

In den heutigen Geschäftsorganisationen ist ein Chef wie ein Orchesterleiter. Ich habe mir diese Analogie geliehen, denn wie ein Dirigent, der das Tempo einstellt und die korrekten Eingaben jedes Musikers im Orchester sicherstellt, muss ein Chef wissen, wann und wie er die Talente und Fähigkeiten seiner Mitarbeiter im kollektiven Vorteil der Organisation einsetzen kann .D

(Tech- und Design-Tipps)

iOS hat eine versteckte Einhand-Tastatur in Xcode

iOS hat eine versteckte Einhand-Tastatur in Xcode

Mit zunehmenden Smartphone-Bildschirmgrößen müssen Entwickler sicherstellen, dass sie Möglichkeiten finden, die Benutzeroberfläche für die Verwendung mit einer Hand vorzubereiten. Heute stellt sich heraus, dass Apple bereits an einer einhändigen Tastatur gearbeitet hat, die (eventuell) per Edge-Swipe aktiviert werden kann. Die F

(Tech- und Design-Tipps)