Barrierefreiheit ≠ Overlay: semantisches HTML, die Grundlage, die ein Overlay nicht ersetzen kann
A site can look perfectly organised and still be confusing to someone using a screen reader, keyboard or other assistive technology. The reason may be invisible: HTML. Elements such as <main>, <nav>, <button>, <label> and headings carry meaning, not just appearance.
Semantik vermittelt, was ein Element ist
Two pieces of text can look identical but mean different things to the browser. An <h2> identifies a section; a CSS-enlarged <p> remains a paragraph. W3C explains that well-marked structure supports navigation and orientation.
Überschriften und Regionen sind Navigation
Headings communicate content organisation. Elements such as <header>, <nav>, <main>, <aside> and <footer> identify regions that screen readers and other tools can use for efficient navigation.
Ein Button sollte ein Button sein
A native <button> already provides known semantics and behaviour. Recreating one with a <div> means rebuilding semantics, focus and keyboard behaviour. The first rule of ARIA recommends native HTML when an appropriate element exists.
Formulare brauchen echte Beziehungen
Visually placing “Email” beside a field is not enough. W3C recommends associating labels with controls, normally with <label>, so assistive technologies can identify the field purpose.
ARIA ergänzt; es ersetzt kein korrektes HTML
ARIA is essential when native HTML cannot provide required semantics, especially in complex interfaces. It is not intended to replace correct HTML unnecessarily, and incorrect ARIA can alter the semantics exposed to assistive technology.
Was ein Overlay vorfindet, wenn es zu spät kommt
A layer running after page load acts on a structure that already exists. If the base contains incorrect elements, missing relationships or poorly built custom components, the problem began before the overlay. Building correctly at source and testing with assistive technology is more robust.
Und Blind Reader?
Blind Reader ist assistive Technologie zur Unterstützung des Nutzers. Zugang oder Interaktion können erleichtert werden, doch die Website braucht weiterhin verständliche Struktur. Blind Reader hilft dem Nutzer; es ersetzt kein semantisches HTML und zertifiziert die Website nicht.
Erst richtig bauen, dann ergänzen
Semantics are not an invisible technical detail; they are part of the user experience. Before adding a layer that interprets or transforms the page, use the right element for each function. Accessibility starts in the code.
Fuentes / Sources
W3C WAI — Page Structure Tutorial
Accesibilidad ≠ Overlay · 11