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

![So fügen Sie Dateipfad schnell in Sublime Text ein [Quicktip]](http://hideout-lastation.com/img/tech-design-tips/905/how-insert-file-path-quickly-sublime-text.jpg)
So fügen Sie Dateipfad schnell in Sublime Text ein [Quicktip]
Sublime Text ist ein sehr minimaler Code-Editor. Es kommt ohne viel von einer GUI; Sogar die Einstellungen sind textbasiert. Dieser Minimalismus hilft uns, uns mehr darauf zu konzentrieren, die Codes zu schreiben, als vielmehr mit dem Dressing des Code-Editors abgelenkt zu werden. Aber das bringt auch eine Frage mit sich: Wie fügen wir einen Dateipfad ein?

25 Beispiele für Brand Identity Design Richtig gemacht
Identity Branding ist ein integraler Bestandteil des Geschäfts . Immerhin müssen Sie sicherstellen, dass Sie sich richtig vermarkten können. Es ist nicht immer einfach, ein Design zu finden, das Ihren Bedürfnissen entspricht. Etwas, das nicht nur das widerspiegelt, wofür Sie stehen, sondern auch die Persönlichkeit Ihrer Marke, sei es Ihre persönliche Marke oder ein Geschäft, das Sie haben.Um Ihne