Wichtig ist die semantische Auszeichnung vor allem, da Suchmaschinen den Quellcode lesen und anhand der verwendeten HTML-Tags die Wichtigkeit von Inhalten ableiten. Außerdem erleichtern semantische Elemente Screenreadern das Auslesen des Quellcodes um ihn sehbehinderten Menschen vorzulesen.
Ein semantisches Element beschreibt deutlich seine Bedeutung sowohl für den Browser als auch für den Entwickler.
Beispiele für nicht-semantische Elemente: <div> und <span> - diese weisen nicht auf ihren Inhalt hin.
Beispiele für semantische Elemente: <form> , <table>, <header>, <article> und <img> - hiermit wird der Inhalt klar definiert und strukturiert.
wenn es kein sematisches HTML Element oder Attribut gibt hilft uns Aria (Accessible Rich Internet Applications) beim Erstellen des sogenannten Accessible Tree´s *
*Accessible Tree ist eine sogenannte Baumdarstellung unserer Webseite für Unterstützungstechnolgie (bsp. Screenreader)
mehr Lesematerial
👉die wichtigsten Faktoren, einer barrierefreien Webseite
👉the right tag for the right job
👉quick guide to accessibility
👉w3schools to accessibility
👉aria labels
Tools
👉Lighthouse - teste deine Webseite auf barrierefreiheit
👉Chrome Dev Tools zum Testen meiner Seite mit verschiedenen Farbblindheiten
👉Browser Extension - Chrome Screenreader Simulation