HTML-5 für eine bessere Barrierefreiheit
Semantik des Layouts
Bereits im HTML-Code, kann die Struktur verständlicher definiert werden.
Semantisch & Non-Semantische Elemente
Zum anderen muss man schauen, dass die jeweiligen HTML-Tags sowie CSS-Klassen richtig eingesetzt und gestylt werden.
Dazu hilft es, mit den Layout-HTML-Tags zu arbeiten. Am häufigsten trifft man den «div» an. Div steht für Division, also Einheit. Er ist aber wie der «span» ein Non-Semantisches Layout Element. Das heisst soviel, dass mit ihm keine Inhaltsdefinition gemacht wird.
Mit HTML-5 kamen aber semantische HTML Layout-Elemente. Semantische Layout-Elemente ermöglichen eine bessere Indexierung sowie Accessibility, weil Screenreader und Spiders/Crawlers die Inhaltsbereiche verstehen.
Beispiele von semantischen HTML-Elementen
nav - Definiert Navigationslinks
header - Definiert einen Header innerhalb des Dokumentes oder Section. (Nicht zu verwechseln mit dem head)
main - Definiert den Hauptinhalt
section - Definiert eine Section (Innerhalb des Dokumentes)
article - Definiert einen eigenständigen Artikel innerhalb des Dokumentes (z. B. Blog-Teaser)
footer - Definiert den Footer-Bereich innerhalb des Dokumentes oder Section.
Dies so zu definieren ist sinnvoller, als immer ein Inhalt unwissendes Div-Element zu verwenden.
